/* Mindsheep Labs, labs-v2. Theme tokens and the page's own markup.
   The engine (scrollcraft.css / .js) is never edited. */

:root {
  /* Light, green, gentle. One accent: a leaf green that carries white text. */
  --sc-canvas:      #FFFFFF;
  --sc-surface:     #F4F7F2;
  --sc-ink:         #1F2A24;
  --sc-ink-soft:    #5C6862;
  --sc-accent:      #1E7F53;
  --sc-accent-ink:  #FFFFFF;
  --sc-hairline:        color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 24%, transparent);
  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 150 18% 18%;
  --sc-leading-body: 1.6;
  --topbar-h: 4.25rem;
}
.sc-display { font-weight: 600; }
body { background: var(--sc-canvas); color: var(--sc-ink); }
.sc-grain { display: none; }
.mark--dark { filter: invert(1) brightness(0.16); }
.sc-body, .sc-lede { letter-spacing: 0.002em; }
.sc-label { font-weight: 500; letter-spacing: 0.12em; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --------------------------------------------------------------- paper --
   The inverted ground. Used by the homepage close and the story-page ends. */
.paper {
  --sc-canvas: #E7F0E7; --sc-surface: #FFFFFF;
  background: var(--sc-canvas); color: var(--sc-ink);
}

/* ---------------------------------------------------------------- links --
   One link style on the whole site: ink, green underline. */
a.u { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; transition: color 140ms var(--sc-ease-out); }
a.u:hover { color: var(--sc-accent); }
.btn { display: inline-block; appearance: none; border: 1px solid transparent; border-radius: var(--sc-r-pill); padding: 0.8rem 1.3rem; min-height: 44px; font-weight: 500; font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: 1.2; cursor: pointer; text-decoration: none; transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) var(--sc-ease-out), opacity var(--sc-d-fast) var(--sc-ease-out); }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--accent:hover { background: color-mix(in oklab, var(--sc-accent) 86%, black); }
.btn--sm { padding: 0.55rem 1.1rem; min-height: 40px; font-size: var(--sc-t-sm); }
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--sc-hairline-strong); }
.btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------- top bar --
   Light, sticky, one button. The same on every page. */
.topbar { position: sticky; top: 0; z-index: var(--sc-z-chrome); background: color-mix(in oklab, #FFFFFF 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sc-hairline); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5); height: var(--topbar-h); }
.topbar .mark { height: 30px; width: auto; display: block; }
@media (max-width: 700px) { .topbar .mark { height: 26px; } }

/* --------------------------------------------------------------- layout -- */
.plate { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.measure { max-width: var(--sc-measure); }

/* =================================================================== HOME == */

/* ---------------------------------------------------------------- hero ---
   Typographic poster: the sentence is the imagery. Four elements, no more. */
.hero { min-height: calc(100svh - var(--topbar-h)); display: flex; align-items: center; padding-block: var(--sc-8) var(--sc-9); }
/* The checklist. Ticks itself once, after the headline has landed, then stays. */
.hero__ticks { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-2); font-size: var(--sc-t-lg); line-height: 1.35; color: var(--sc-ink); max-width: 40ch; }
.hero__ticks li { display: flex; align-items: center; gap: var(--sc-4); --d: calc(0.8s + var(--i) * 0.45s); }
.tick { flex: 0 0 auto; width: 1.5em; height: 1.5em; display: block; }
.tick svg { width: 100%; height: 100%; display: block; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tick__box { stroke: #B7C2BB; fill: #FFFFFF; }
.tick__mark { stroke: #FFFFFF; stroke-width: 2.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sc-in .tick__box { animation: tick-box 260ms var(--sc-ease-out) var(--d) forwards; }
.sc-in .tick__mark { animation: tick-mark 320ms var(--sc-ease-out) calc(var(--d) + 0.12s) forwards; }
@keyframes tick-box { to { fill: #1E7F53; stroke: #1E7F53; } }
@keyframes tick-mark { to { stroke-dashoffset: 0; } }
@media (max-width: 700px) { .hero__ticks { font-size: var(--sc-t-base); } }
@media (prefers-reduced-motion: reduce) {
  .sc-in .tick__box, .sc-in .tick__mark { animation: none; }
  .tick__box { fill: #1E7F53; stroke: #1E7F53; }
  .tick__mark { stroke-dashoffset: 0; }
}
.hero h1 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight); text-wrap: balance; }
.hero h1 .l1 { display: block; font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); color: var(--sc-ink); margin-bottom: 0.18em; max-width: 22ch; }
.hero h1 .l2 { display: block; font-size: clamp(3.2rem, 1.4rem + 8vw, 8.6rem); max-width: 10ch; }
.hero__sub { margin: var(--sc-6) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); max-width: 40ch; }
.hero__cta { margin-top: var(--sc-7); display: flex; align-items: center; gap: var(--sc-6); flex-wrap: wrap; }
@media (max-width: 700px) {
  .hero { padding-block: var(--sc-6) var(--sc-8); }
  .hero__sub { font-size: var(--sc-t-base); }
}

/* ---------------------------------------------------------- case studies --
   Five real jobs. Two columns on desktop, the fifth spanning both. Each card
   is one link, with a small face from that industry. */
.ways { padding-block: var(--sc-section); background: transparent; }
.ways h2 { margin: 0 0 var(--sc-7); max-width: 22ch; }
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-5); }
@media (min-width: 900px) { .cases { grid-template-columns: 1fr 1fr; } .case:last-child { grid-column: 1 / -1; } .case:last-child .case__body { max-width: 62ch; } }
.case a { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sc-5); align-items: start; height: 100%; padding: var(--sc-5); background: #FFFFFF; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-lg); color: inherit; text-decoration: none; box-shadow: var(--sc-e1); transition: transform 180ms var(--sc-ease-out), box-shadow 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .case a:hover { transform: translateY(-2px); box-shadow: var(--sc-e2); border-color: var(--sc-accent); } .case a:hover .case__go { color: var(--sc-accent); } }
.case__face { width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: var(--sc-r-md); display: block; }
.case__body { display: grid; gap: var(--sc-2); min-width: 0; }
.case__kicker { font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); font-weight: 500; }
.case__t { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); line-height: 1.12; text-wrap: balance; }
.case__p { margin: var(--sc-1) 0 0; color: var(--sc-ink-soft); }
.case__r { margin: 0; color: var(--sc-ink); font-weight: 500; }
.case__go { margin-top: var(--sc-2); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.18em; transition: color 140ms var(--sc-ease-out); }
.case--cta a { grid-template-columns: 1fr; background: var(--sc-accent); border-color: var(--sc-accent); color: #FFFFFF; align-items: center; }
.case--cta .case__kicker, .case--cta .case__p { color: rgb(255 255 255 / 0.82); }
.case--cta .case__t { font-size: var(--sc-t-2xl); max-width: 16ch; }
.case--cta .case__side { display: grid; justify-items: center; gap: var(--sc-4); }
.case--cta .case__you { width: 11rem; height: 11rem; object-fit: cover; border-radius: 999px; border: 4px solid rgb(255 255 255 / 0.85); box-shadow: var(--sc-e2); }
.case--cta .btn { background: #FFFFFF; color: var(--sc-accent); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .case--cta a:hover { border-color: var(--sc-accent); } .case--cta a:hover .btn { background: #F4F7F2; } }
@media (min-width: 900px) { .case--cta a { grid-template-columns: 1fr auto; column-gap: var(--sc-9); padding-right: var(--sc-8); } .case--cta .case__body { max-width: 34ch; } .case--cta .case__you { width: 14rem; height: 14rem; } }
@media (max-width: 700px) {
  /* face beside the title only; the story runs full width underneath */
  .case a { grid-template-columns: 4.5rem 1fr; column-gap: var(--sc-4); row-gap: var(--sc-2); padding: var(--sc-4); align-items: center; }
  .case__body { display: contents; }
  .case__face { width: 4.5rem; height: 4.5rem; grid-column: 1; grid-row: 1 / 3; }
  .case__kicker { grid-column: 2; grid-row: 1; align-self: end; }
  .case__t { grid-column: 2; grid-row: 2; align-self: start; font-size: var(--sc-t-lg); }
  .case__p { grid-column: 1 / -1; margin-top: var(--sc-3); }
  .case__r, .case__go { grid-column: 1 / -1; }
  .case--cta a { grid-template-columns: 1fr; }
  .case--cta .case__body { display: grid; }
  .case--cta .case__kicker, .case--cta .case__t, .case--cta .case__p { grid-column: 1; grid-row: auto; }
  .case--cta .case__side { grid-column: 1; margin-top: var(--sc-4); }
  .case--cta .case__t { font-size: var(--sc-t-xl); }
}

/* --------------------------------------------------------------- the plan --
   The peak. Pinned. Five steps, alternating sides of a spine. The connectors
   are SVG paths measured from the real frames and drawn from --sc-p. */
.plan { background: transparent; }
.plan .sc-stage { display: grid; align-items: center; top: var(--topbar-h); height: calc(100svh - var(--topbar-h)); }
.plan__wrap { display: grid; gap: var(--sc-6); }
.plan__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-5); flex-wrap: wrap; }
.plan__head h2 { margin: 0; }
.plan__head p { margin: 0; color: var(--sc-ink-soft); max-width: 40ch; }
.chart { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--sc-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .chart { grid-template-columns: 1fr 4rem 1fr; column-gap: 0; row-gap: var(--sc-4); } }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.chart path { --r: clamp(0, (var(--sc-p, 0) - var(--at)) / 0.09, 1); fill: none; stroke: var(--sc-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--r)); transition: none; }
.chart path.head { stroke-dasharray: none; stroke-dashoffset: 0; opacity: clamp(0, (var(--r) - 0.85) / 0.15, 1); }
.chart path.settled { stroke: var(--sc-ink-soft); }
.step { --r: clamp(0, (var(--sc-p, 0) - var(--at)) / 0.09, 1);
  position: relative; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); padding: var(--sc-3) var(--sc-5);
  background: #FFFFFF; border-radius: var(--sc-r-md);
  opacity: calc(0.16 + 0.84 * var(--r)); transform: translate3d(0, calc((1 - var(--r)) * 10px), 0);
  display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--sc-4); align-items: start; }
@media (min-width: 900px) {
  .step:nth-child(odd)  { grid-column: 1; }
  .step:nth-child(even) { grid-column: 3; }
  .step:nth-child(2) { grid-row: 2; } .step:nth-child(3) { grid-row: 3; } .step:nth-child(4) { grid-row: 4; } .step:nth-child(5) { grid-row: 5; }
}
.step.is-on { border-color: var(--sc-accent); box-shadow: 0 8px 24px -8px rgb(30 127 83 / 0.35), var(--sc-e1); }
.step.is-done { border-color: var(--sc-hairline-strong); }
.step__n { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); color: var(--sc-accent); border: 1px solid currentColor; border-radius: 999px; width: 2rem; height: 2rem; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.step.is-done .step__n { color: var(--sc-ink-soft); }
.step h3 { margin: 0 0 var(--sc-1); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.15; }
.step p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; max-width: 44ch; }
.step b { color: var(--sc-ink); font-weight: 500; }
.plan__cta { --r: clamp(0, (var(--sc-p, 0) - 0.86) / 0.08, 1); opacity: var(--r); transform: translate3d(0, calc((1 - var(--r)) * 10px), 0); display: flex; gap: var(--sc-5); align-items: center; flex-wrap: wrap; align-self: center; padding: var(--sc-3) 0; }
@media (min-width: 900px) { .plan__cta { grid-column: 3; grid-row: 5; padding-left: var(--sc-6); } }
@media (max-height: 820px) and (min-width: 900px) { .plan__wrap { gap: var(--sc-4); } .step { padding-block: var(--sc-3); } .chart { row-gap: var(--sc-3); } .plan__head p { display: none; } }
/* Phones: only the open step shows its text. Earlier steps keep their title,
   so the whole plan still stands at the end, and the text can be full size. */
@media (max-width: 899px) {
  .plan__head p { display: none; }
  .step { padding: var(--sc-4) var(--sc-4); align-items: start; }
  .step__n { margin-top: 0.1em; }
  .step h3 { font-size: var(--sc-t-lg); margin: 0; }
  .step p { font-size: var(--sc-t-base); line-height: 1.5; }
  .step__body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 240ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out); }
  .step__body > p { overflow: hidden; min-height: 0; }
  .step.is-on .step__body { grid-template-rows: 1fr; opacity: 1; }
  .step.is-on .step__body > p { padding-top: var(--sc-2); }
  .step.is-done { opacity: 0.72; }
}
@media (max-width: 700px) { .plan__head h2 { font-size: var(--sc-t-xl); } .chart { gap: var(--sc-3); } }
@media (prefers-reduced-motion: reduce) and (max-width: 899px) { .step__body { grid-template-rows: 1fr; opacity: 1; transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .step, .plan__cta { --r: 1; transform: none; }
  .chart path { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------- close --
   The inversion. Smallest type on the site. CTA as an underlined link. */
.close { display: flex; align-items: center; padding-block: var(--sc-10) var(--sc-8); }
.close__in { display: grid; gap: var(--sc-5); max-width: 58ch; font-size: var(--sc-t-sm); line-height: 1.7; }
.close__in .lead { font-size: var(--sc-t-xl); line-height: 1.25; font-family: var(--sc-font-display); font-weight: 600; letter-spacing: var(--sc-track-snug); }
.close__nav { margin-top: var(--sc-6); }
.close__in p { margin: 0; color: var(--sc-ink-soft); }
.close__in .lead { color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.4; }
.close__in .rule { color: var(--sc-ink); }
.close__mark { height: 26px; width: auto; }
.close__nav { display: flex; gap: var(--sc-4) var(--sc-5); flex-wrap: wrap; font-size: var(--sc-t-xs); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.close__nav a { color: var(--sc-ink-soft); text-decoration: none; }
.close__nav a:hover { color: var(--sc-ink); }
.close small { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }

/* ============================================================ STORY PAGES == */
.story { padding-block: var(--sc-7) var(--sc-section); }
.story__head { margin-bottom: var(--sc-8); }
.story__kicker { display: block; color: var(--sc-accent); font-size: var(--sc-t-sm); font-weight: 500; margin-bottom: var(--sc-4); }
.story h1 { margin: 0; max-width: 18ch; font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); }
.story__body { display: grid; gap: var(--sc-8); }
.bit h2 { margin: 0 0 var(--sc-3); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); line-height: 1.15; }
.bit p { margin: 0; color: var(--sc-ink-soft); max-width: var(--sc-measure); }
.bit p + p { margin-top: var(--sc-4); }
.bit b { color: var(--sc-ink); font-weight: 500; }
.bit--real { padding: var(--sc-5) var(--sc-6); background: var(--sc-surface); border-radius: var(--sc-r-sm); box-shadow: var(--sc-edge); }
.bit--real .tag { display: inline-block; font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-accent); font-weight: 500; margin-bottom: var(--sc-3); }
.bit--scene .tag { display: inline-block; font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; margin-bottom: var(--sc-3); }
.bit blockquote { margin: var(--sc-5) 0 0; padding-left: var(--sc-4); border-left: 1px solid var(--sc-accent); color: var(--sc-ink); max-width: 52ch; }
.bit cite { display: block; font-style: normal; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); margin-top: var(--sc-2); }
@media (min-width: 900px) { .story__body { grid-template-columns: 7fr 5fr; column-gap: var(--sc-9); } .story__body > .bit { grid-column: 1; } .story__body > .aside { grid-column: 2; grid-row: 1 / span 6; align-self: start; position: sticky; top: var(--sc-7); } }
.aside { display: grid; gap: var(--sc-4); }
.aside .box { border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); padding: var(--sc-5); }
.aside h2 { margin: 0 0 var(--sc-2); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-base); }
.aside p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.aside .btn { margin-top: var(--sc-4); }
.story__end { padding-block: var(--sc-8); }
.story__end .lead { margin: 0 0 var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.4; color: var(--sc-ink); max-width: 44ch; }
.story__end p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 58ch; }
.story__end .btn { margin-top: var(--sc-5); }
.foot { padding-block: var(--sc-6); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); display: flex; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; border-top: 1px solid var(--sc-hairline); }
.foot a { color: inherit; }
.others { padding-block: var(--sc-7); border-top: 1px solid var(--sc-hairline); }
.others h2 { margin: 0 0 var(--sc-4); font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }
.others ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); }
.others a { color: var(--sc-ink); text-decoration: none; font-family: var(--sc-font-display); font-weight: 500; }
.others a:hover { color: var(--sc-accent); }

/* ------------------------------------------------------------ the gate --
   On the admin page. Same object as the first build, as a demonstration. */
.gate { background: var(--sc-surface); }
.gate .sc-stage { display: grid; align-items: center; top: var(--topbar-h); height: calc(100svh - var(--topbar-h)); }
.gate__wrap { display: grid; gap: var(--sc-6); align-items: center; }
@media (min-width: 960px) { .gate__wrap { grid-template-columns: 5fr 6fr; gap: var(--sc-8); } }
.gate__copy h2 { margin: 0; }
.gate__copy .sc-body { margin-top: var(--sc-4); }
.queue { background: #FFFFFF; border-radius: var(--sc-r-md); box-shadow: var(--sc-e3), var(--sc-edge); padding: var(--sc-5); max-width: 34rem; width: 100%; }
.queue__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-4); padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline-strong); }
.queue__head .sc-label { color: var(--sc-ink-soft); }
.queue__status { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); position: relative; min-width: 9em; text-align: right; }
.queue__status span { position: absolute; right: 0; top: 0; white-space: nowrap; transition: opacity 240ms var(--sc-ease-out); }
.queue__status .st-prep { opacity: 1; }
.queue__status .st-held { opacity: 0; color: var(--sc-accent); }
.queue__status .st-done { opacity: 0; color: var(--sc-accent); }
.gate--ready .queue__status .st-prep { opacity: 0; }
.gate--ready .queue__status .st-held { opacity: 1; }
html.is-approved .queue__status .st-held { opacity: 0; }
html.is-approved .queue__status .st-done { opacity: 1; }
.queue__sample { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: var(--sc-3) 0 0; }
.rows { list-style: none; margin: var(--sc-4) 0 0; padding: 0; }
.gate-row { --r: clamp(0, (var(--sc-p, 0) - var(--at)) / 0.07, 1);
  display: grid; grid-template-columns: 8rem 1fr; gap: var(--sc-4); padding: 0.7rem 0; border-bottom: 1px solid var(--sc-hairline);
  opacity: calc(0.14 + 0.86 * var(--r)); transform: translate3d(0, calc((1 - var(--r)) * 8px), 0); font-variant-numeric: tabular-nums; }
.gate-row dt { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.gate-row dd { margin: 0; color: var(--sc-ink); }
.gate-row input { width: 100%; max-width: 10rem; background: var(--sc-canvas); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); padding: 0.35rem 0.55rem; color: var(--sc-ink); font: inherit; }
.gate-row .hint { display: block; font-size: var(--sc-t-xs); color: var(--sc-accent); margin-top: 0.3rem; }
.queue__actions { display: flex; gap: var(--sc-3); flex-wrap: wrap; margin-top: var(--sc-5); }
.queue__stamp { margin: var(--sc-4) 0 0; min-height: 1.6em; color: var(--sc-accent); font-size: var(--sc-t-sm); }
.queue__wait { margin: var(--sc-3) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.gate--waiting .queue__wait { opacity: 1; }
.carry { display: none; color: var(--sc-accent); }
html.is-approved .carry { display: block; }
@media (max-width: 700px) {
  .gate__copy { display: none; }
  .gate__wrap { gap: var(--sc-4); }
  .queue { padding: var(--sc-4); }
  .gate-row { grid-template-columns: 6.5rem 1fr; }
  .queue__actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .gate-row { --r: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { :root { --g: 1; } }

main { position: relative; z-index: 1; }

/* ------------------------------------------------------------- the sky ---
   The ground under the canvas, and the whole ground when WebGL is refused:
   four soft colour fields that drift slowly. --g warms it as you scroll. */
:root { --g: 0; }
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #FFFFFF; }
.sky::before, .sky::after { content: ""; position: absolute; inset: -30%; filter: blur(70px); opacity: 1;
  background:
    radial-gradient(38% 34% at 22% 22%, rgb(30 127 83 / 0.16) 0%, transparent 70%),
    radial-gradient(34% 38% at 78% 38%, rgb(120 200 160 / 0.22) 0%, transparent 70%),
    radial-gradient(44% 40% at 58% 88%, rgb(200 228 200 / 0.55) 0%, transparent 70%),
    radial-gradient(30% 30% at 88% 92%, rgb(244 226 170 / calc(0.25 + 0.4 * var(--g))) 0%, transparent 70%);
  animation: sky-drift 30s ease-in-out infinite alternate; }
.sky::after { animation-duration: 44s; animation-direction: alternate-reverse; opacity: 0.6; transform: rotate(180deg); }
@keyframes sky-drift { from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); } to { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .sky::before, .sky::after { animation: none; } }

/* ------------------------------------------------------ the person ------
   Desktop only: one person on the right of the first screen. Phones keep
   the eight-second screen as type alone. */
.hero__photo { display: none; margin: 0; }
@media (min-width: 900px) {
  .hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8); align-items: center; }
  .hero__photo { display: grid; width: 100%; max-width: 30rem; margin-left: auto; aspect-ratio: 4 / 5; max-height: 66svh; border-radius: var(--sc-r-lg); overflow: clip; box-shadow: var(--sc-e3); }
  /* three people, one frame: each fades in, holds, fades out, on an 18 second loop */
  .hero__photo .face { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; animation: face-turn 18s ease-in-out infinite; }
  .hero__photo .face--1 { animation-delay: 0s; }
  .hero__photo .face--2 { animation-delay: 6s; }
  .hero__photo .face--3 { animation-delay: 12s; }
  @keyframes face-turn { 0% { opacity: 0; } 7% { opacity: 1; } 33% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .hero__photo .face { animation: none; } .hero__photo .face--1 { opacity: 1; } }
  .hero h1 .l2 { font-size: clamp(3.2rem, 1rem + 6.4vw, 7.2rem); max-width: 12ch; }
}

/* ------------------------------------------------------- the pop-up -----
   One dialog for the whole site. Native <dialog>, so focus and Escape are
   handled by the browser. */
.book { border: 0; padding: 0; width: min(92vw, 40rem); max-height: 92svh; border-radius: var(--sc-r-lg); background: #FFFFFF; color: var(--sc-ink); box-shadow: var(--sc-e3); overflow: auto; }
.book::backdrop { background: rgb(31 42 36 / 0.45); backdrop-filter: blur(3px); }
.book__form, .book__done { position: relative; padding: var(--sc-7) var(--sc-7) var(--sc-6); display: grid; gap: var(--sc-4); }
.book__form[hidden], .book__done[hidden], .book__error[hidden] { display: none; }
.book__close { position: absolute; top: var(--sc-4); right: var(--sc-4); width: 2.4rem; height: 2.4rem; border: 0; border-radius: 999px; background: var(--sc-surface); color: var(--sc-ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.book__close:hover { background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
.book__kicker { font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-accent); font-weight: 500; }
.book__title { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); line-height: 1.12; padding-right: 2.5rem; text-wrap: balance; }
.book__lead { margin: 0; color: var(--sc-ink-soft); }
.book__grid { display: grid; gap: var(--sc-4); margin-top: var(--sc-2); }
@media (min-width: 620px) { .book__grid { grid-template-columns: 1fr 1fr; } .book__field--wide { grid-column: 1 / -1; } }
.book__field { display: grid; gap: var(--sc-1); font-size: var(--sc-t-sm); color: var(--sc-ink); }
.book__field input, .book__field textarea { font: inherit; font-size: var(--sc-t-base); color: var(--sc-ink); background: #FFFFFF; border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); padding: 0.65rem 0.8rem; width: 100%; }
.book__field input:focus, .book__field textarea:focus { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: var(--sc-accent); }
.book__field textarea { resize: vertical; }
.book__actions { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; margin-top: var(--sc-2); }
.book__note { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.book__error { margin: 0; font-size: var(--sc-t-sm); color: #9B2C2C; }
@media (max-width: 700px) { .book { width: 100vw; max-width: none; max-height: 100svh; height: 100svh; border-radius: 0; } .book__form, .book__done { padding: var(--sc-6) var(--sc-gutter); } }