/* Home page only. Uses the tokens and components in site.css. */


/* ---------- 6.1 Hero ---------- */
.hero { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
.hero__grid { flex: 1 0 auto; align-content: start; padding-top: clamp(32px, 6vh, 72px); padding-bottom: var(--s-7); row-gap: var(--s-7); }
.hero__text, .hero__fig { grid-column: 1 / -1; }
.hero__h { margin-top: var(--s-5); }
.hero__lead { margin-top: var(--s-5); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); align-items: flex-start; }
.start { margin-top: var(--s-7); }
.start__h { color: var(--muted); margin-bottom: var(--s-2); }
.start__list { border-top: 1px solid var(--line); }
.start__list li { border-bottom: 1px solid var(--line); }
.start__list a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 48px; padding: 4px 0; font-size: 16px; font-weight: 500; line-height: 1.3; text-decoration: none; }
.start__list a span { font-family: var(--font-mono); transition: transform var(--dur-1) var(--ease-out); }
.start__list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.start__list a:hover span { transform: translateX(3px); }
.hero__fig .fig__frame img { padding: 0 4%; }
.hero__open { white-space: nowrap; font-family: var(--font-sans); font-weight: 600; font-size: 14px; }
.story-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; border-top: 1px solid var(--line); }
.story-bar .caps { color: var(--ink); }
.story-bar .btn-text { font-size: 15px; }

@media (max-width: 767px) {
  .hero__actions { flex-direction: column; gap: var(--s-1); align-items: stretch; }
  .hero__book { width: 100%; min-height: 52px; }
  .hero__alt { align-self: flex-start; min-height: 44px; padding: 0; border: 0; background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .hero__alt:hover { background: none; text-decoration-thickness: 2px; }
  .story-bar .caps { max-width: 22ch; }
}
@media (min-width: 1100px) {
  .hero__text { grid-column: 1 / span 7; }
  .hero__fig { grid-column: 8 / span 5; margin-top: calc(var(--fs-label) * 1.3 + var(--s-5) + 10px); }
  .start__list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: var(--gap); }
  .start__list a { min-height: 44px; font-size: 15px; }
}
@media (min-width: 1100px) and (max-height: 760px) { .hero { min-height: 0; } }

/* ---------- 6.2 The story: the still version (also what no-JS readers get) ---------- */
.story-host { position: relative; background: var(--paper); }
.stills-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-6); }
.stills-note[hidden] { display: none; }
.steps { padding-block: var(--s-7) var(--section-y); counter-reset: step; }
.step { display: grid; grid-template-columns: 1fr; gap: var(--s-5) var(--gap); padding: var(--s-7) 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step__img { aspect-ratio: 4 / 3; background: var(--bench); border: 1px solid var(--line); overflow: hidden; }
.step__img img { width: 100%; height: 100%; object-fit: cover; }
.step__fig--sketch .step__img { background: var(--paper); display: grid; place-items: center; }
.step__fig--sketch .step__img img { width: 72%; height: auto; object-fit: contain; }
.step__figcap { margin-top: var(--s-3); font-size: 11px; color: var(--muted); }
.step__num { display: flex; align-items: center; gap: 10px; font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.step__num::before { content: ''; width: 18px; height: 2px; background: var(--accent); flex: none; }
.step__title { margin-top: var(--s-4); font-size: var(--fs-h3); font-weight: 600; line-height: 1.06; letter-spacing: -.028em; text-wrap: balance; }
.step__text { margin-top: var(--s-4); max-width: 40ch; }
@media (min-width: 768px) {
  .step { grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: center; }
  .step__fig { grid-column: 1 / span 4; }
  .step__cap { grid-column: 5 / span 4; }
}
@media (min-width: 1100px) {
  .step { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: var(--s-8) 0; }
  .step__fig { grid-column: 1 / span 7; }
  .step__cap { grid-column: 9 / span 4; }
  .step__title { font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem); }
}

/* ---------- 6.2 The story, live (story.js has mounted; class .story--live on #story) ---------- */
#story.story--live .story__stage { top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); }
#story.story--live .story__rail { display: none; }   /* replaced by the site's rail (.srail), which is real navigation */
#story .story__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 820px) and (min-aspect-ratio: 901/1000) {
  #story.story--live .story__caption { width: min(31vw, 410px); }
  #story.story--live .story__title { font-size: clamp(1.75rem, 0.9rem + 2vw, 2.75rem); }
  #story.story--live .story__text { font-size: 16px; }
}
#story .story__stage[data-theme='dark'] { --fg: var(--on-dark); --fg-muted: var(--muted-on-dark); --rule: var(--line-dark); --rule-strong: #8A8A86; --raise: var(--dark-2); }
#story.story--live .seen { margin-top: var(--s-5); }
#story.story--live .seen__thumb { border-color: var(--rule); }

/* the rail: Skip, ten step links, the counter, Motion */
.srail { position: absolute; z-index: 4; left: var(--story-gutter); right: var(--story-gutter); bottom: 14px; display: flex; align-items: center; gap: var(--s-4); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.srail a, .srail button { color: inherit; }
.srail__skip { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.srail__ticks { display: flex; align-items: flex-end; height: 44px; }
.srail__ticks a { display: flex; align-items: flex-end; justify-content: center; width: 22px; height: 44px; padding-bottom: 15px; }
.srail__ticks i { display: block; width: 1px; height: 7px; background: currentColor; opacity: .45; transition: height var(--dur-2) var(--ease-out), opacity var(--dur-2) linear; }
.srail__ticks a:hover i { opacity: 1; height: 10px; }
.srail__ticks a[aria-current='step'] i { width: 2px; height: 14px; opacity: 1; background: var(--accent); }
.srail__count { min-width: 5.5em; }
.srail__count b { font-weight: 600; }
.srail__motion { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.srail__motion::before { content: ''; width: 7px; height: 7px; border: 1px solid currentColor; }
.srail__motion[aria-pressed='true']::before { background: var(--accent); border-color: var(--accent); }
.story-tag { position: absolute; z-index: 3; right: var(--story-gutter); bottom: 30px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.story__stage[data-theme='dark'] .story-tag { color: var(--muted-on-dark); }

@media (max-width: 819px), (max-aspect-ratio: 9/10) {
  #story.story--live .story__caption { bottom: 64px; }
  #story.story--live .story__text { font-size: 15px; }
  #story.story--live .seen { margin-top: var(--s-3); padding-top: var(--s-2); }
  #story.story--live .seen__label, #story.story--live .seen__body, #story.story--live .seen__start { display: none; }
  #story.story--live .seen__short { display: block; }
  .srail { left: 16px; right: 16px; bottom: 6px; gap: var(--s-3); justify-content: space-between; }
  .srail__ticks { display: none; }
  .story-tag { left: 16px; right: auto; top: 14px; bottom: auto; font-size: 11px; }
}

/* ---------- 6.3 Where we stop ---------- */
.stop { background: var(--paper); }
.stop__note { color: var(--muted); margin-bottom: var(--s-8); }
.stop__grid { row-gap: var(--s-5); }
.stop__label, .stop__text, .stop__side { grid-column: 1 / -1; }
.stop__lead { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: 1.4; font-weight: 600; max-width: 30ch; letter-spacing: -.01em; }
.stop__body { max-width: 46ch; }
.stop__actions { margin-top: var(--s-5); }
.stop__fig { margin-top: var(--s-8); }
@media (min-width: 1100px) {
  .stop__text { grid-column: 1 / span 7; }
  .stop__side { grid-column: 9 / span 4; align-self: end; }
}

/* ---------- 6.4 Work ---------- */
.work__more { margin-top: var(--s-7); }
@media (min-width: 1100px) { .work__more { display: none; } }
@media (max-width: 1099px) { .work .section-head__more { display: none; } }
@media (max-width: 767px) {
  .cards--home { gap: 0; border-top: 1px solid var(--line); }
  .cards--home .card { grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .cards--home .fig { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .cards--home .card > :not(.fig) { grid-column: 2; }
  .cards--home .card__meta { margin-top: 0; }
  .cards--home .card__meta .kind { display: none; }
  .cards--home .card__title { margin-top: var(--s-1); font-size: 17px; }
  .cards--home .route-wrap { margin-top: var(--s-2); }
  .cards--home .route > div:first-child, .cards--home .tags { display: none; }
  .cards--home .fig--contain .fig__frame img { padding: 4%; }
}

/* ---------- 6.6 Software ---------- */
.software__grid { row-gap: var(--s-7); }
.software__text, .software__fig { grid-column: 1 / -1; }
.software__text .lead { margin-top: var(--s-4); }
.software__text .t-h2 { margin-top: var(--s-5); max-width: 14ch; }
.software__note { margin-top: var(--s-5); max-width: 40ch; color: var(--muted); }
@media (min-width: 1100px) {
  .software__text { grid-column: 1 / span 4; }
  .software__fig { grid-column: 5 / span 8; }
}

/* ---------- 6.7 Making ---------- */
.making__grid { row-gap: var(--s-7); align-items: start; }
.making__text, .making__fig { grid-column: 1 / -1; }
.making__text .t-h2 { margin-top: var(--s-5); max-width: 12ch; }
.making__text .lead { margin-top: var(--s-4); }
.loop { display: grid; grid-template-columns: 1fr 1fr; margin: var(--s-6) 0 var(--s-4); border: 1px solid var(--line-strong); font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.loop li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.loop li:nth-child(2n) { border-right: 0; }
.loop li:nth-last-child(-n+2) { border-bottom: 0; }
.loop .num { color: var(--muted); }
.loop__where { flex-basis: 100%; color: var(--muted); font-weight: 400; letter-spacing: .04em; }
@media (min-width: 1100px) {
  .making__text { grid-column: 1 / span 5; }
  .making__fig { grid-column: 7 / span 6; }
}

/* ---------- 6.8 Team ---------- */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
@media (max-width: 767px) { .person__name { font-size: 14px; } .person__role { font-size: 11px; letter-spacing: .04em; } }
@media (min-width: 768px) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .people { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-6) var(--gap); } }
.person__img { aspect-ratio: 4 / 5; background: var(--bench); overflow: hidden; }
.person__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); filter: grayscale(1) contrast(1.04); }
.person__name { margin-top: var(--s-3); font-size: 16px; font-weight: 600; line-height: 1.3; }
.person__role { margin-top: var(--s-1); color: var(--muted); font-size: 11px; }