/* Home only. Shared components are in site.css. */

/* ---------- The hand-over from hero to story (V3-VISION 3.7) ----------
   The hero is one screen minus the header and minus --reveal, so the top of the story (its paper band and the
   "Napkin sketch" stage line) shows at the bottom of the first screen. That is the scroll cue; there is no other.
   --reveal is the distance from the top of the story to the bottom of its first stage line, plus 24 px. It is
   estimated here from the package's own sizes and measured exactly by the script in index.html once the story is built. */
:root { --reveal: calc(var(--header-h) + clamp(20px, 4.6vh, 44px) + 1.06 * clamp(26px, 3.1vw, 46px) + 10px + 1.4 * clamp(15px, 1.35vw, 19px) + 24px); }
@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  :root { --reveal: calc(var(--header-h) + 18px + 1.06 * clamp(25px, 7vw, 32px) + 8px + 42px + 24px); }
}

/* ---------- 1. Hero ---------- */
.hero {
  display: flex; align-items: center;
  min-height: calc(100vh - var(--header-h) - var(--reveal));
  min-height: calc(100svh - var(--header-h) - var(--reveal));
  padding-block: var(--s-6);
}
.hero__grid > * { grid-column: 1 / span 7; }
.hero__grid > h1 { grid-column: 1 / span 10; margin-top: 20px; }
.hero__eyebrow { color: var(--grey); }
.hero__lead { margin-top: 28px; }
.hero__buyer { margin-top: var(--s-4); }
.hero__actions { margin-top: var(--s-6); }
/* 1100 px and wider: the type carries the screen (no image, by the brief). The H1 grows past the site's 88 px to
   104 px at 1280 and 112 px at 1440; the lead holds columns 1 to 6 with the buttons under it, and the grey buyer
   line takes columns 8 to 12, its first line on the lead's first baseline, so both halves of the grid are used. */
@media (min-width: 1100px) {
  .hero__grid > h1 { font-size: clamp(96px, 8.125vw, 112px); line-height: 1; letter-spacing: -.04em; margin-top: 24px; }
  .hero__lead { grid-column: 1 / span 6; grid-row: 3; align-self: first baseline; margin-top: 32px; }
  .hero__buyer { grid-column: 8 / -1; grid-row: 3; align-self: first baseline; margin-top: 32px; }
  .hero__actions { grid-column: 1 / span 6; grid-row: 4; }
}
@media (max-width: 899.98px) { .hero__grid > *, .hero__grid > h1 { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .hero { padding-block: var(--s-5); } .hero__lead { margin-top: var(--s-5); } }
/* Reduced motion (and no WebGL): the story is a list of stills, not a pinned stage, so there is no stage line to show
   under the hero. The hero is one whole screen; the script in index.html also sets --reveal to 0 in that case. */
@media (prefers-reduced-motion: reduce) {
  .hero { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
}

/* ---------- 2. The scroll story: theme (3.7). Nothing around it may clip, transform or filter it. ---------- */
#story {
  --story-ink: #0B0B0B;
  --story-muted: #5C5C5C;
  --story-dark: #0B0B0B;
  --story-on-dark: #F5F5F5;
  --story-muted-dark: #A3A3A3;
  --story-font-sans: "Manrope", system-ui, sans-serif;
  --story-title-weight: 600;
  --story-top: 64px;
  --story-gutter: clamp(16px, 5.5vw, 80px);
}
@media (max-width: 767.98px) { #story { --story-top: 56px; } }
html:not(.js) #story { display: none; }   /* without scripts the <noscript> list below takes its place */

/* the story as a plain list: no scripts, or the package failed to load */
.story-fallback { background: #F2F1ED; padding-block: var(--section-y); }
.story-fallback .rows { border-color: rgba(11, 11, 11, .14); }
.story-fallback .row { border-color: rgba(11, 11, 11, .14); }
.story-fallback .row__name { display: flex; flex-direction: column; gap: var(--s-1); }
.story-fallback__phase { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 600; color: var(--grey); }

/* ---------- 3. What you get ---------- */
.get__lead { margin-top: var(--s-5); }
.get__table { margin-top: var(--s-8); }
.get__note { margin-top: var(--s-5); max-width: 34em; }
@media (max-width: 699.98px) { .get__table { margin-top: var(--s-7); } }

/* ---------- 4. Who builds it ----------
   H2, then Spark Laser's shop photo across the content width (16:9, credited), then the three columns, then Mike
   Coyle's line in a row of its own under a hairline: label in columns 1 to 4, text in 5 to 12, top-aligned. */
.who__fig { margin-top: var(--s-8); }
.who__cols { margin-top: var(--s-8); row-gap: var(--s-7); }
.who__col { grid-column: span 4; }
.who__col p { margin-top: var(--s-3); max-width: 34em; }
.who__team { margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--hairline); align-items: first baseline; row-gap: var(--s-3); }   /* top-aligned: the label sits on the sentence's first line */
.who__team-label { grid-column: 1 / span 4; }
.who__team-text { grid-column: 5 / -1; }
.who__link { margin-top: var(--s-5); }
/* 700 to 1099 px: the columns become rows (name in 1 to 4, text in 5 to 12), so no column is 230 px narrow */
@media (max-width: 1099.98px) {
  .who__cols { row-gap: 0; }
  .who__col { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding-block: var(--s-5); border-top: 1px solid var(--hairline); }
  .who__col h3 { grid-column: 1 / span 4; }
  .who__col p { grid-column: 5 / -1; margin-top: 0; }
}
@media (max-width: 699.98px) {
  .who__fig { margin-top: var(--s-7); }
  .who__cols { margin-top: var(--s-7); }
  .who__col { display: block; }
  .who__col p { margin-top: var(--s-2); }
  .who__team { margin-top: var(--s-7); padding-top: var(--s-5); }
  .who__team-label, .who__team-text { grid-column: 1 / -1; }
}

/* ---------- 5. Projects ---------- */
.cards { list-style: none; margin-top: var(--s-8); row-gap: var(--s-7); }
.cards > li { grid-column: span 4; }
.card { display: block; height: 100%; color: inherit; text-decoration: none; border-radius: 2px; }
.card__t { margin-top: var(--s-5); text-underline-offset: 5px; text-decoration-thickness: 2px; }
@media (hover: hover) { .card:hover .card__t { text-decoration-line: underline; } }
.card__r { margin-top: var(--s-3); }
.card__k { margin-top: var(--s-2); color: var(--grey); }
.projects__more { margin-top: var(--s-7); }
/* 700 to 1099 px: one card per row, image in columns 1 to 5 and the words beside it (as Projects' compact rows) */
@media (max-width: 1099.98px) {
  .cards > li { grid-column: 1 / -1; }
  .card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--gap); align-content: start; }
  .card > .frame { grid-column: 1 / span 5; grid-row: 1 / span 4; }
  .card > :not(.frame) { grid-column: 6 / -1; max-width: 34em; }
  .card__t { margin-top: 0; }
}
@media (max-width: 699.98px) {
  .card { display: block; }
  .card__t { margin-top: var(--s-5); }
}

/* ---------- Print: the story prints as its eleven stage lines ---------- */
@media print {
  .hero { min-height: 0; padding-block: 0 12pt; }
  #story.story { height: auto !important; background: none !important; }
  #story, #story * { transition: none !important; animation: none !important; }
  #story .story__stage { position: static !important; height: auto !important; overflow: visible !important; background: none !important; color: #000 !important; }
  #story canvas, #story .story__visual, #story .story__rail, #story .story__skip, #story .story__tags, #story .story__tests,
  #story .story__ver, #story .story__sketch, #story .story__still { display: none !important; }
  #story .story__heading { position: static; width: auto; height: auto; clip-path: none; white-space: normal; font-size: 16pt; margin: 12pt 0 6pt; }
  #story .story__beats { padding: 0; }
  #story .story__beat { display: block; padding: 4pt 0; border: 0; }
  #story .story__caption { position: static !important; opacity: 1 !important; transform: none !important; text-align: left; }
  #story .story__title { font-size: 12pt !important; margin: 0 !important; display: inline; }
  #story .story__title::after { content: ': '; }
  #story .story__text { font-size: 10.5pt !important; display: inline; color: #000 !important; max-width: none; }
  .cards > li { break-inside: avoid; }
}