/* Landing page, 15 September 2026. The approved hero rules in style.css, identity-light.css,
   stage.css and treatment.css are untouched; this layer only removes the header navigation,
   lays out the new copy, adds the coming-soon mark and moves the motion control to the
   bottom corner. Nothing scrolls: the page is the single hero viewport. */
.hero-footer{grid-template-columns:1fr auto;gap:40px}
/* The studio line is now the only hero copy: one sentence, set between the old headline
   and the old detail size so it carries weight without competing with the wordmark. */
.studio-line{font-size:clamp(16px,1.35vw,21px);line-height:1.4;letter-spacing:-.012em;font-weight:400;color:#e4e5dc;max-width:34em}
.coming-soon{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:12px;letter-spacing:.02em;color:#c6bc96}
.coming-mark{display:block;width:6px;height:6px;border-radius:50%;background:var(--brass);box-shadow:0 0 10px #b9af8466;animation:coming-breathe 3.6s ease-in-out infinite}
@keyframes coming-breathe{0%,100%{opacity:.45}50%{opacity:1}}
.hero-aside{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.motion-control{position:static;padding:8px 0}
.legal{font-size:11px;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
@media(max-width:600px){
  .hero-footer{grid-template-columns:1fr;gap:26px}
  .hero-aside{justify-self:stretch;flex-direction:row;justify-content:space-between;align-items:center;gap:16px}
  .legal{order:-1;font-size:10px}
  .motion-control{font-size:11px}
  .studio-line{font-size:17px;line-height:1.38;max-width:19em}
  .coming-soon{margin-top:18px}
}
/* Mobile lockup. The captain wants the long horizontal lockup on a phone, sized to
   the width, with everything else scaling around it: the wordmark alone is swapped
   for assets/logo.svg, which is the designer's original emblem-plus-HZCRAFT lockup
   and is already fetched for the header, so no new request. Only one of the two
   images is ever displayed, so exactly one accessible name is exposed. */
.lockup{display:none;width:100%;height:auto}
@media(max-width:600px){
  .hero[data-identity="refined"] .identity h1{width:90%;max-width:none}
  .wordmark{display:none}
  .lockup{display:block}
  /* The centre lockup is the identity here, so the header's copy of the same mark
     is redundant and costs height. The header carries nothing else, so the bar goes
     with it rather than leaving an empty strip. */
  .header{display:none}
}
/* Fitting one screen. The approved hero carries a min-height floor that varies by
   width: 720px, 670px under 900px wide, 690px under 600px and 740px under 370px,
   so the narrowest phones get the tallest floor. Whenever the screen is shorter
   than its floor the hero box outgrows the viewport and the whole page scrolls,
   carrying the copy off the bottom with it; on a 360x640 phone that is 740px of
   hero in 640px of screen. The content itself always fits, so the floor is dropped
   and the furniture tightens by height band instead. No type is made smaller here:
   the studio line holds 16px or more and the copy sizes are untouched. */
.hero{min-height:0}
@media(max-height:760px){
  .header{height:72px}
  .hero-footer{bottom:28px;gap:18px}
  .coming-soon{margin-top:14px}
}
@media(max-height:600px){
  .header{height:60px}
  .home img{width:112px}
  .hero-footer{bottom:20px;gap:14px}
  .studio-line{font-size:16px;line-height:1.35}
  .coming-soon{margin-top:10px}
}
@media(max-height:430px){
  .header{height:52px}
  .home img{width:104px}
  .hero-footer{bottom:14px;gap:10px}
  .coming-soon{margin-top:8px}
  /* Narrow-width rules stack the copy over the control and the copyright, which
     is right on a tall phone and wrong on a short one: stacked, the block is
     141px of a screen that may only be 240px high. When height is the scarce
     axis, put them side by side again whatever the width. */
  .hero-footer{grid-template-columns:1fr auto}
  .hero-aside{justify-self:end;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
  .legal{order:0}
}
/* ...but only when there is width to spare. Below 380px wide the sentence needs
   the whole measure, so the stack comes back. */
@media(max-height:430px) and (max-width:379px){
  .hero-footer{grid-template-columns:1fr}
  .hero-aside{justify-self:stretch;flex-direction:row;justify-content:space-between;align-items:center;gap:12px}
  .legal{order:-1}
  /* The wordmark is sized from width, so on a short wide screen it grows into
     the space the copy needs. Cap it against the height as well. */
  .hero[data-identity="refined"] .identity h1{width:min(90%,150svh)}
}
/* Under about 380px of layout height, which in practice means a phone at 200%
   page zoom, the centred wordmark and the bottom copy run into each other. A
   percentage centre cannot work across that range, because the header and the
   copy stack are fixed heights while the middle is whatever is left, so here the
   wordmark hangs from the header instead and gives up some width. The brand
   tolerates being smaller; 11px body text does not, so no copy is shrunk. */
/* Under about 380px of layout height the centred lockup and the bottom copy run
   into each other, so the identity lifts. It must lift as a whole: the shader reads
   the .emblem element's box to place the emblem it draws (identity-depth.js), so
   moving the wordmark alone leaves the emblem behind at the viewport centre and the
   two come apart, which is what showed up as the lockup not centring at 300% zoom
   and worse above it. Every rule here moves the wordmark, the lockup, the emblem and
   the emblem light to the same centre. */
@media(max-height:380px){
  .hero[data-identity="refined"] .identity h1,
  .hero[data-identity="refined"] .emblem,
  .hero[data-identity="refined"] .emblem-light{top:34%}
  .hero[data-identity="refined"] .identity h1{width:min(90%,150svh);max-width:none;transform:translate(-50%,-50%)}
  .hero[data-identity="refined"] .emblem,
  .hero[data-identity="refined"] .emblem-light{width:min(60vw,46svh)}
}
/* The last band before it stops being possible. Everything that can give without
   touching the copy gives here: the header, the bottom margin and the wordmark. */
@media(max-height:230px){
  .header{height:44px}
  .home img{width:92px}
  .hero-footer{bottom:10px;gap:8px}
  .hero[data-identity="refined"] .identity h1,
  .hero[data-identity="refined"] .emblem,
  .hero[data-identity="refined"] .emblem-light{top:26%}
  .hero[data-identity="refined"] .identity h1{width:min(90%,70svh)}
  .hero[data-identity="refined"] .emblem,
  .hero[data-identity="refined"] .emblem-light{width:min(50vw,34svh)}
}
/* Zoom-out floor. Zooming out below 100% widens the CSS viewport, so every
   viewport-relative size keeps growing while the copy stays at its px size and the
   composition spreads. The approved CSS already declares a top to the responsive
   range: above 1800px the header and the footer stop spreading and sit in a fixed
   1600px frame. The identity was never given that frame, so it went on scaling for
   ever: 960px wide at 1440, 1920px at 50% zoom, 2909px at 33%. This gives the
   identity the same frame, freezing it at the size it has at the top of the range,
   so past that point the page is a fixed composition on a field that simply gets
   wider. Chosen over a px cap on the margins because a fixed margin cannot keep a
   centred column centred, and over a transform scale because that would resample
   the type. Nothing below 1800px CSS width is touched. */
@media(min-width:1800px){
  .hero[data-identity="refined"] .identity h1{max-width:min(138svh,1200px)}
  .hero[data-identity="refined"] .emblem,
  .hero[data-identity="refined"] .emblem-light{width:min(56vw,78.53svh,1008px)}
}