/* Vanini Space — enter screen.
   Structure is lifted from デザイン No. 155 (March 1972); the reference sits
   at /static/img/design-155.jpg. Asymmetric grid, hairline rules, framed
   panel, narrow typographic masthead, box row along the bottom.

   Palette tokens come from tokens.css. Colour appears ONLY in the clickable
   boxes and the signature ink — the ground and the video are unchanged
   (spec §4, "hybrid"). Do not reintroduce the Chroma spectrum.

   This is an ENTER SCREEN: exactly one viewport, no scroll, at every
   breakpoint including landscape phones. That is a tested property
   (tests/enter-screen.test.js), not an aspiration. */

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ground);
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

/* The page is one screen. Nothing scrolls, so nothing may overflow
   horizontally either — a stray wide child would otherwise produce a
   horizontal scrollbar on top of a "no-scroll" page. */
body {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Stage ──────────────────────────────────────────────────────────────
   dvh, not vh: on mobile browsers vh is the LARGEST viewport (chrome
   retracted), so a 100vh stage is taller than the visible area on first
   paint and the "no scroll" promise breaks the moment the URL bar shows.
   The vh line is the fallback for anything without dvh. */
.home-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  padding: clamp(18px, 3vw, 34px) clamp(16px, 3.2vw, 44px);
}

/* The background layer — .home-hatch / .home-video / .home-scrim — used to
   be defined here. It now lives in site-shell.css, because those elements
   belong to the shell (#site-bg) rather than to this page, and /work,
   /bookings and /live do not load home.css. Defining them here left the
   video at its intrinsic 854x576 on every page but this one. */

/* ── Grid ───────────────────────────────────────────────────────────────
   Desktop: framed panel top-left, masthead column right, box row bottom.
   minmax(0, 1fr) rather than 1fr on both axes — a bare 1fr has an `auto`
   minimum, which lets the SVG's intrinsic size push the grid past the
   viewport instead of shrinking. That is the usual cause of a grid that
   "almost" fits. */
.home-grid {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  gap: clamp(14px, 2vw, 26px);
  grid-template-columns: minmax(0, 1fr) clamp(180px, 18vw, 260px);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "panel masthead"
    "boxes masthead";
}

/* stretch, not center: the panel is the composition's main mass and fills
   its cell. Centering it left a large dead band between the panel's bottom
   edge and the box row, which read as an unfinished layout rather than as
   the cover's deliberate negative space. */
.home-panel-cell {
  grid-area: panel;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

/* ── Framed panel ───────────────────────────────────────────────────────
   A rule, not a fill: the video and scrim show through the interior. */
.home-sig-panel {
  position: relative;
  padding: clamp(20px, 3.5vw, 48px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* intro.css caps the signature at 420px, which is right for a loose hero
   but leaves it marooned inside the panel. Scoped override so the ink
   fills its frame; the cap keeps it from going soft on wide screens. */
.home-sig-panel .home-sig-wrap {
  width: 100%;
}
.home-sig-panel .home-sig-wrap .sig {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}

/* ── Masthead ───────────────────────────────────────────────────────────*/
/* The masthead carries the only small text on the screen, and 12px bone over
   the clip's brightest frames measured 2.8-3.7:1 against a 4.5:1 floor. It
   gets its own field rather than darkening the whole hero — which is also
   what the reference does: its masthead block sits on solid colour, not on
   the image. Verified by tests/contrast-over-video.test.js. */
.home-masthead {
  grid-area: masthead;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.4vw, 18px);
  color: var(--bone);
  background: rgba(34, 25, 15, .74);
  border-left: 1px solid rgba(242, 240, 233, .25);
  padding: clamp(14px, 1.6vw, 22px) clamp(12px, 1.4vw, 20px);
}

.home-brand {
  font: 700 12px/1.2 Helvetica, Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
}

.home-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(242, 240, 233, .25);
}

/* Solid, not rgba(...,.78): the alpha dropped this to 2.77:1 over the
   clip's bright frames. Hierarchy comes from weight and size instead of
   from transparency, which is the thing that was costing contrast. */
.home-meta {
  margin: 0;
  font: 400 12px/1.5 Helvetica, Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone);
}

/* The text links sit together: a column in the masthead column, a row when
   the masthead itself turns into a row (see the narrow-width block). */
.home-masthead-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Padding, not margin, so the hit box is the padded area — this link is a
   text link but still has to clear the 44px floor. */
.home-masthead-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
  font: 700 12px/1 Helvetica, Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  transition: color var(--dur-fast, .18s) var(--ease-out, ease);
}

.home-masthead-link:hover,
.home-masthead-link:focus-visible {
  color: var(--cad);
}

/* ── Gradient boxes ─────────────────────────────────────────────────────
   Each gradient reaches its DARK stop at 70% and holds it to the bottom,
   so the label always sits on a known, solid colour rather than wherever
   the interpolation happens to land. That is what makes the contrast
   structural instead of incidental — measured, not eyeballed:
     bone on --pur   8.4:1
     bone on --mag   5.6:1
     bone on --plum  9.0:1 */
.home-boxes {
  grid-area: boxes;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}

.home-box {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(56px, 7vh, 76px);
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(242, 240, 233, 0.22); /* bone @22% — keeps the box
    readable while transparent; raise to .30 if it reads too faint on video */
  transition:
    transform    var(--dur-fast, .18s) var(--ease-out, ease),
    border-color var(--dur-fast, .18s) var(--ease-out, ease);
}

.home-box::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0; /* gradient hidden until hover/focus/active */
  transition: opacity var(--dur-slow, .5s) var(--ease-out, ease);
}

.home-box:hover::before,
.home-box:focus-visible::before,
.home-box:active::before {
  opacity: 1;
}

.home-box:active::before {
  transition-duration: var(--dur-fast, .18s); /* snappier on click */
}

.home-box:hover,
.home-box:focus-visible {
  border-color: rgba(242, 240, 233, 0.55);
}

.home-box--live::before {
  background: linear-gradient(180deg, var(--cad) 0%, var(--pur) 70%, var(--pur) 100%);
}
.home-box--store::before {
  background: linear-gradient(180deg, var(--pur) 0%, var(--mag) 70%, var(--mag) 100%);
}
.home-box--contact::before {
  background: linear-gradient(180deg, var(--cad) 0%, var(--plum) 70%, var(--plum) 100%);
}

.home-box-label {
  position: relative;
  font: 700 12px/1 Helvetica, Arial, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
}

.home-box:hover {
  transform: translateY(-2px);
}

/* ── Focus ──────────────────────────────────────────────────────────────
   Authored rather than left to the UA default: the boxes carry their own
   background, and the default ring is not reliably legible against the
   cadmium end. Offset keeps it outside the box edge; the boxes clip their
   gradient with overflow:hidden, so the ring must not be drawn inside. */
.home-box:focus-visible,
.home-masthead-link:focus-visible {
  outline: 3px solid var(--bone);
  outline-offset: 3px;
}

/* Screen-reader-only. Kept here (not only in intro.css) because the <h1>
   depends on it and must not rely on the intro stylesheet loading. */
.home-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Tablet and below: masthead moves above, boxes stack ────────────────*/
@media (max-width: 1023px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "masthead"
      "panel"
      "boxes";
  }

  .home-masthead {
    border-left: 0;
    border-bottom: 1px solid rgba(242, 240, 233, .25);
    padding-left: 0;
    padding-bottom: clamp(10px, 2vw, 16px);
    /* Horizontal on narrow screens — a vertical column would eat the
       height the panel and boxes need. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(10px, 3vw, 20px);
  }

  /* The full-width divider rules only make sense in the vertical column. */
  .home-rule {
    display: none;
  }

  .home-meta {
    font-size: 11px;
  }

  /* The link group moves as one unit to the right edge, so if the row
     wraps, both links wrap together instead of one straying under the brand. */
  .home-masthead-links {
    margin-left: auto;
    flex-direction: row;
    gap: clamp(10px, 3vw, 20px);
  }

  .home-boxes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Phone portrait ─────────────────────────────────────────────────────
   Three boxes across at 390px leaves ~118px each, which still holds a
   6-character label at 12px/.16em. Below that they stack. */
@media (max-width: 419px) {
  .home-boxes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-box {
    min-height: 92px;
    padding: 10px 8px;
  }
  /* 11px, not 10px: at .1em tracking these are the only labels on the
     screen and they sit on a gradient, so they need the extra pixel more
     than the panel needs the 16px of height it costs. */
  .home-box-label {
    font-size: 11px;
    letter-spacing: .1em;
  }
  .home-sig-panel {
    padding: 18px;
  }
}

/* Very narrow (iPhone SE and similar, 320px): a three-across row would put
   the labels under ~90px each. Stack instead, and shrink the boxes so the
   screen still fits without scrolling. */
@media (max-width: 359px) {
  .home-boxes {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .home-box {
    min-height: 52px;
    align-items: center;
  }
}

/* ── Short viewports, any orientation ───────────────────────────────────
   320x480 (iPhone 4 and the smaller Android browsers) overflowed by 13px:
   a stacked masthead, a panel and three stacked boxes do not fit in 480px
   at the default spacing. This compresses the fixed-height parts and
   leaves the panel — which is the 1fr row — to absorb the difference.
   Portrait too, so it is not conditional on orientation like the landscape
   rule below. */
@media (max-height: 560px) {
  .home-stage {
    padding: 10px 14px;
  }
  .home-grid {
    gap: 8px;
  }
  .home-masthead {
    gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .home-box {
    min-height: 46px;
    align-items: center;
  }
}

/* ── Landscape phones ───────────────────────────────────────────────────
   844x390 is the case that breaks a naive stacked layout: there is not
   enough height for a masthead, a panel and three stacked boxes. Return to
   the two-column grid and compress everything, so the enter screen still
   holds its one-viewport promise on a phone turned sideways. */
@media (max-height: 500px) and (orientation: landscape) {
  .home-stage {
    padding: 10px 16px;
  }
  .home-grid {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) clamp(150px, 20vw, 220px);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "panel masthead"
      "boxes masthead";
  }
  .home-masthead {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 0;
    border-left: 1px solid rgba(242, 240, 233, .25);
    padding-left: 12px;
    padding-bottom: 0;
    gap: 6px;
  }
  .home-masthead-link {
    margin-left: 0;
    min-height: 44px;
  }
  .home-sig-panel {
    padding: 10px 16px;
  }
  .home-box {
    min-height: 52px;
    align-items: center;
  }
  .home-boxes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-box,
  .home-box::before,
  .home-masthead-link {
    transition: none;
  }
  .home-box:hover {
    transform: none;
  }
}

/* Signature gradient stops. SVG presentation attributes cannot read a CSS
   custom property, so the stop colours are set here instead of inline —
   that keeps every colour on the site in tokens.css. */
.sig-stop-cad  { stop-color: var(--cad); }
.sig-stop-pur  { stop-color: var(--pur); }
.sig-stop-plum { stop-color: var(--plum); }