/* Full hero: the woman on the staircase fills the opening screen. Builds on ../system/platform.css and ../v3/home.css.
   Light only for now (Kars, 2026-10-18). */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root { --ground: #F6F2F2; --field: #D8D0D0; --ink: #3A3538; --ink-2: #615757; --border: #8C7C77; --divider: #A89C9F;
    --accent: #74435B; --accent-fill: #74435B; --on-accent: #F6F2F2; --accent-hover: #64344C; --accent-press: #54263D; --error: #904038; --success: #426042; }
}

/* The bar sits on the photo. */
.hero-page .bar { position: absolute; inset: 0 0 auto; z-index: 2; }

/* The hero: the staircase photo fills it. The top padding clears the 76px bar that sits on the photo. */
.hero { min-height: 100svh; padding-top: 96px; background: var(--field); }
/* The hero's last 96px fade into the page ground. */
.hero::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 96px; background: linear-gradient(rgb(var(--wash) / 0), var(--ground)); }
.hero .moment-wrap { max-width: min(100%, 7.5em); margin-bottom: 48px; }
.hero .moment-wrap::before { content: none; }

/* The wide staircase (photos/1.png, the woman in white) is the one hero photo. Landscape: it fills the hero; the words sit on its calm left side.
   The crop leans left (25%), so on narrower landscape screens she stays clear of the session line. */
/* The photo sits one layer below the washes (.hero::before, .hero::after). */
.hero-scene { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hero-scene img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 25% 50%; }
.hero .words { grid-column: 1 / 8; padding-block: 32px 64px; }
/* A mink wash on the left hides the photo's gold arc behind the words and fades out before the stairs. */
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(216 208 208 / 0.92) 0%, rgb(216 208 208 / 0.86) 30%, rgb(216 208 208 / 0.55) 46%, rgb(216 208 208 / 0) 66%); }
@media (orientation: portrait) { .hero::before { content: none; } }
/* Short laptop screens: tighter vertical spacing (on the scale), so the session and Join stay in the first screen. */
@media (orientation: landscape) and (max-height: 760px) { .hero .words { padding-block: 0 32px; } .hero .moment-wrap { margin-bottom: 32px; } }
@media (orientation: landscape) and (max-width: 900px) { .hero .words { grid-column: 1 / -1; } }

/* Upright screens: the same wide photo, cropped around her (56%), behind the words and fading in from the top. */
@media (orientation: portrait) {
  .hero .words { grid-column: 1 / -1; align-self: start; padding-top: 32px; }
  .hero-scene img { object-position: 56% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, #000 62%); mask-image: linear-gradient(180deg, transparent 0%, transparent 22%, #000 62%); }
}
/* Phones upright: the photo comes first, cropped from the lit sphere down to her, with the bar on it; the words follow on the field. */
@media (orientation: portrait) and (max-width: 600px) {
  .hero { min-height: 0; padding: 0 var(--gutter); }
  .hero-scene { grid-column: 1 / -1; position: relative; inset: auto; z-index: auto; height: 64svh; margin: 0 calc(var(--gutter) * -1); }
  .hero-scene img { -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
  .hero .words { padding: 32px 0 64px; }
  .hero .greet { grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; }
}

.rest { position: relative; }
/* The pattern sits in the empty right columns beside the letter and bleeds off the page edge. */
.rest > .wm { grid-column: auto; top: 0; right: -6vw; width: min(46vw, 720px); }
@media (max-width: 900px) { .rest > .wm { top: -24px; right: -40vw; width: 92vw; opacity: 0.35; } }

/* Phone header: the mink (--field) sits behind the name and Menu and dissolves into the photo below, with no edge.
   Open, the mink fills the panel and fades out at its foot; the pages ease in, in the display serif, one per row. */
@media (max-width: 760px) {
  .hero-page .bar { padding-block: 8px;
    background: linear-gradient(180deg, rgb(216 208 208 / 0.92) 0%, rgb(216 208 208 / 0.7) 60%, rgb(216 208 208 / 0) 100%); }
  /* Open: a full-screen mink sheet fades in behind the name, Close and the pages, so nothing shows through half-covered. */
  .hero-page .bar:has(.menu.is-open) { position: fixed; inset: 0; z-index: 10; align-content: flex-start; overflow-y: auto; background: none; padding-bottom: 32px; }
  .hero-page .bar:has(.menu.is-open)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--field); }
  @media (prefers-reduced-motion: no-preference) { .hero-page .bar:has(.menu.is-open)::before { animation: sheet-in 280ms var(--ease-out) both; } }
  .hero-page .bar .menu { padding: 8px 0 0; }
  .hero-page .bar .menu a { justify-content: space-between; min-height: 56px; border-top: 1px solid rgb(168 156 159 / 0.6); font-family: var(--display); font-weight: 300; font-size: var(--text-h3); line-height: 1.2; text-underline-offset: 10px; }
  .hero-page .bar .menu a[aria-current="page"] { text-decoration-color: var(--accent); }
  .hero-page .menu-toggle { min-width: 56px; justify-content: flex-end; }
  @media (prefers-reduced-motion: no-preference) {
    .hero-page .bar .menu.is-open a { animation: menu-in 320ms var(--ease-out) both; }
    .hero-page .bar .menu.is-open a:nth-child(2) { animation-delay: 30ms; }
    .hero-page .bar .menu.is-open a:nth-child(3) { animation-delay: 60ms; }
    .hero-page .bar .menu.is-open a:nth-child(4) { animation-delay: 90ms; }
    .hero-page .bar .menu.is-open a:nth-child(5) { animation-delay: 120ms; }
  }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes sheet-in { from { opacity: 0; } }

/* Pixel snapping: line heights rounded to whole pixels, so every line and box below them starts on a whole pixel. */
.hero .first { line-height: round(nearest, 1.04em, 1px); }
.hero .greet .h3, .hero-page .coach { line-height: round(nearest, 1.2em, 1px); }
.hero .session p { line-height: round(nearest, 1.5em, 1px); }
@media (max-width: 760px) { .hero-page .menu-toggle { padding-inline: 0; } }

/* Type and text position in the hero (frontend-design pass, 2026-10-18).
   Scale: display line, 28px greeting, 20px session line (17px on phones), 15px button. */
.hero .greet { grid-auto-flow: column; justify-content: start; align-items: center; gap: 16px; }
.hero .moment-wrap, .hero .first { font-size: round(nearest, clamp(3rem, 7vw, 7.5rem), 1px); }
/* The GT Super D has a 0.03em side bearing: hang it, so the letterform itself sits on the text edge. */
.hero .moment-wrap { margin-top: 32px; margin-left: -0.03em; }
.hero .session p { font-size: var(--text-letter); }
@media (orientation: portrait) and (max-width: 600px) {
  /* On phones the line sizes itself to the width, so it always sets in three lines: Dit is jouw plek / voor de komende / zes maanden.
     "voor de komende" is 6.92em wide; 7.05 leaves a hair of room. */
  .hero .moment-wrap, .hero .first { font-size: min(3rem, round(down, calc((100vw - 2 * var(--gutter)) / 7.05), 1px)); }
  .hero .moment-wrap { margin-top: 24px; }
  .hero .session p { font-size: var(--text-body); }
}

/* Equal visible space above and below Romee's line, measured ink to ink (not box to box): GT Super's line box has
   0.19em above the ink and 0.235em below it, so those are taken off. Gap: 56px desktop, 40px on short laptop screens,
   48px upright tablets (phones in hero-options.css). */
.hero .moment-wrap { margin-top: calc(60px - 0.19em); margin-bottom: calc(51px - 0.235em); }
@media (orientation: landscape) and (max-height: 760px) { .hero .moment-wrap { margin-top: calc(44px - 0.19em); margin-bottom: calc(35px - 0.235em); } }
@media (orientation: portrait) and (min-width: 601px) { .hero .moment-wrap { margin-top: calc(52px - 0.19em); margin-bottom: calc(43px - 0.235em); } }