@import url("tokens.css");

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--hairline-strong); text-underline-offset: 0.25em; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--ember-orange); color: var(--night-950); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }

/* ---------- Corners ----------
   Corners are square. Borders are real one-pixel borders whose colour comes from --edge, so hover, focus and
   the scrolled states change that one property. */
@property --edge { syntax: "<color>"; inherits: true; initial-value: transparent; }

.wrap { width: min(100% - 2 * var(--space-4), var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-3); top: -4rem; background: var(--accent); color: var(--night-950); padding: var(--space-2) var(--space-3); z-index: 60; }
.skip-link:focus { top: var(--space-3); }

.eyebrow {
  font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Zones ----------
   Where islands live. An island only names its zone (data-zone); placement is defined here, once.

     top-left   header, left edge      top-right  header, right edge (bottom pill on phones)
     left       left gutter, 70rem up  (in flow below that)
     right      right gutter, 70rem up (bottom pill below that); data-anchor="middle" centres it vertically

   Floating zones act only in dynamic mode, and only on islands that carry data-dock.
   One island per zone is visible at a time: triggers are mutually exclusive on any given page. */
.site-header [data-zone="top-left"] { grid-column: 1; justify-self: start; }
.site-header [data-zone="top-center"] { grid-column: 2; justify-self: center; }
.site-header [data-zone="top-right"] { grid-column: 3; justify-self: end; }

html[data-motion="full"] { --zone-lift: 0px; }
@media (max-width: 40rem) {
  html[data-motion="full"] { --zone-lift: calc(var(--island-h) + var(--space-3)); } /* the nav owns the very bottom */
}

/* Gutter presentation (left, right) */
@media (min-width: 70rem) {
  html[data-motion="full"] :is([data-zone="left"], [data-zone="right"])[data-dock] {
    position: fixed; z-index: 35; margin: 0; width: var(--zone-w); top: var(--zone-top);
    border: 1px solid var(--edge); --edge: var(--hairline-strong);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
  }
  html[data-motion="full"] [data-zone="left"][data-dock] { left: var(--zone-edge); --zone-away: translateX(-0.75rem); }
  html[data-motion="full"] [data-zone="right"][data-dock] { right: var(--zone-edge); --zone-away: translateX(0.75rem); }
  html[data-motion="full"] [data-zone][data-dock][data-anchor="middle"] { top: 0; bottom: 0; margin-block: auto; height: fit-content; }
  html[data-motion="full"] :is([data-zone="left"], [data-zone="right"])[data-dock="away"] { opacity: 0; visibility: hidden; transform: var(--zone-away); }
}

/* Compact presentation: right becomes a bottom pill; left stays in flow */
@media (max-width: 69.99rem) {
  html[data-motion="full"] [data-zone="right"][data-dock] {
    position: fixed; z-index: 35; margin: 0 auto; left: 0; right: 0; top: auto; width: fit-content;
    max-width: calc(100vw - 2 * var(--space-3));
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom) + var(--zone-lift));
    border: 1px solid var(--edge); --edge: var(--hairline-strong);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed);
  }
  html[data-motion="full"] [data-zone="right"][data-dock="away"] { opacity: 0; visibility: hidden; transform: translateY(0.5rem); }
}

/* The header carries two islands; below 52rem the nav drops its context label to make room.
   (.island .island__context is more specific than the base rule further down, which would otherwise win.) */
@media (max-width: 52rem) { .island .island__context { display: none; } }

/* Header zones */
@media (max-width: 40rem) {
  html[data-motion="full"] [data-zone="top-right"] {
    position: fixed; margin: 0 auto; left: 0; right: 0; width: fit-content; max-width: calc(100vw - 2 * var(--space-3));
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    --edge: var(--hairline-strong); padding: var(--space-1);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  html[data-motion="full"] { scroll-padding-bottom: 6rem; }
  html[data-motion="full"] body { padding-bottom: 5rem; }
}
/* ---------- Header ----------
   Baseline: a static header (no JS, or motion reduced).
   Enhancement: html[data-motion="full"] turns the wordmark and nav into
   floating "islands" that respond to scroll (state set in js/main.js). */
.site-header { border-bottom: 1px solid var(--hairline); }
.site-header .wrap {
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: var(--space-4);
  padding-block: var(--space-3);
}

.wordmark {
  display: inline-flex; align-items: center;
  height: var(--island-h);
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.15rem; letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none;
  position: relative; border: 1px solid var(--edge); --edge: transparent;
}
.wordmark__mark { height: 2rem; width: 2rem; object-fit: contain; flex: none; }
.wordmark__text { display: block; padding-left: 0.6rem; white-space: nowrap; }
.wordmark:focus-visible { outline-offset: -4px; }
.wordmark__rest { display: inline-grid; grid-template-columns: 1fr; }
.wordmark__rest > span { overflow: hidden; min-width: 0; }

.island { position: relative; display: flex; align-items: center; border: 1px solid var(--edge); --edge: transparent; }
.island__context { display: grid; grid-template-columns: 0fr; visibility: hidden; margin: 0; }
.island__context > span {
  overflow: hidden; min-width: 0; max-width: min(18rem, 46vw);
  white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--accent);
  padding: var(--space-2) var(--space-3) var(--space-2) 0; margin-left: var(--space-3); margin-right: var(--space-2);
  border-right: 1px solid var(--hairline-strong);
}
.island ul { list-style: none; display: flex; gap: var(--space-1); margin: 0; padding: 0; }
.island li a {
  display: block; padding: var(--space-2) var(--space-3);
  font-size: var(--step--1); letter-spacing: 0.04em; color: var(--text-soft);
  text-decoration: none; transition: color var(--speed), background var(--speed);
}
.island li a:hover { color: var(--text); }
.island li a:focus-visible { outline-offset: -3px; }
.island li a[aria-current] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* Dynamic mode */
html[data-motion="full"] { scroll-padding-top: calc(var(--header-h) + var(--space-3)); }
html[data-motion="full"] .site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  border-bottom: 0; pointer-events: none;
}
html[data-motion="full"] .site-header .wrap > * { pointer-events: auto; }
html[data-motion="full"] main { padding-top: var(--header-h); }

html[data-motion="full"] .wordmark,
html[data-motion="full"] .island,
html[data-motion="full"] .wordmark__rest,
html[data-motion="full"] .island__context {
  transition:
    background var(--speed) var(--ease), border-color var(--speed) var(--ease),
    padding var(--speed) var(--ease), letter-spacing var(--speed) var(--ease),
    grid-template-columns var(--speed) var(--ease), visibility var(--speed);
}
/* Scrolled: the logo shrinks to the bare icon, floating with no box, border or background */
html[data-motion="full"][data-scrolled] .wordmark {
  min-width: var(--island-h); justify-content: center; letter-spacing: 0; padding-inline: 0.2rem;
}
html[data-motion="full"][data-scrolled] .wordmark__rest { grid-template-columns: 0fr; }
html[data-motion="full"][data-scrolled] .island {
  padding: var(--space-1);
  --edge: var(--hairline-strong);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-motion="full"][data-scrolled][data-context-open] .island__context { grid-template-columns: 1fr; visibility: visible; }

@supports not (backdrop-filter: blur(1px)) {
  html[data-motion="full"][data-scrolled] .island,
  html[data-motion="full"] [data-zone][data-dock] { background: var(--bg); }
}

/* ---------- Index ---------- */
.index { padding: var(--space-5) var(--gutter) var(--section-space); }
.index__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  border-top: 1px solid var(--hairline-strong); padding-top: var(--space-4); margin-bottom: var(--space-5);
}
.index__head h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); }
/* ---------- Cards ---------- */
.card-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}
.card-grid > li[hidden] { display: none; }
@media (min-width: 52rem) {
  .card-grid > .card-grid__featured { grid-column: 1 / -1; }
}
@media (min-width: 72rem) or ((min-width: 52rem) and (max-width: 69.99rem)) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) { .card-grid--three { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--edge); --edge: var(--hairline);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.card:hover, .card:focus-within { --edge: var(--accent); background: var(--surface-hover); }
.card__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.card__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: 0; margin: 0; }
.card__tags li { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }
.card__index { font-family: var(--font-display); font-size: var(--step-1); color: var(--text-muted); font-variant-numeric: lining-nums; }
.card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); line-height: 1.12; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.card__excerpt { color: var(--text-soft); flex: 1; max-width: 46ch; }
.card__meta { display: flex; gap: var(--space-3); font-size: var(--step--1); color: var(--text-muted); }
.card__meta > * + *::before { content: "·"; margin-right: var(--space-3); }

.card-grid__featured .card { padding: var(--space-6) var(--space-5); }
.card-grid__featured .card__title { font-size: var(--step-3); max-width: 20ch; }
.card-grid__featured .card__excerpt { font-size: var(--step-1); }

/* ---------- About ---------- */
.about {
  background: linear-gradient(var(--hairline), var(--hairline)) no-repeat var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px; /* rule aligned to the content column */
  padding: var(--section-space) var(--gutter); display: grid; align-content: start; gap: var(--space-4); }
html[data-motion="full"] .about { min-height: 80svh; }
@media (min-width: 52rem) { .about { grid-template-columns: 1fr 2fr; } }
.about h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); }
.about p { color: var(--text-soft); font-size: var(--step-1); max-width: 40rem; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-5); color: var(--text-muted); font-size: var(--step--1); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.site-footer p { margin: 0; }
.motion-toggle {
  font: inherit; color: var(--text-muted); background: none; cursor: pointer;
  border: 1px solid var(--hairline-strong); border-radius: 0; padding: var(--space-1) var(--space-3);
}
.motion-toggle:hover { color: var(--text); border-color: var(--accent); }
.motion-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* ---------- Article ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 50;
  background: var(--ember);
  transform-origin: left; transform: scaleX(var(--progress, 0));
}
.article { padding-block: var(--space-6) var(--section-space); }
.article__header { max-width: 48rem; margin: 0 auto var(--space-6); text-align: center; }
.article__header .eyebrow { display: block; margin-bottom: var(--space-4); }
.article__title { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.01em; margin-bottom: var(--space-4); }
.article__dek { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; color: var(--text-soft); margin-bottom: var(--space-4); }
.article__byline {
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1) var(--space-4);
  font-size: var(--step--1); color: var(--text-muted);
  border-top: 1px solid var(--hairline); padding-top: var(--space-3);
}
.article__body { max-width: var(--measure); margin-inline: auto; font-family: var(--font-text); font-size: 1.22rem; line-height: 1.7; color: var(--text-soft); }
.article__body p { margin-bottom: var(--space-4); }
.article__body strong { color: var(--text); font-weight: 500; }
.article__body h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); line-height: 1.1; color: var(--text); margin: var(--section-space) 0 var(--space-3); }
.article__body ul, .article__body ol { padding-left: 1.3em; margin: 0 0 var(--space-4); }
.article__body li { margin-bottom: var(--space-2); }
.article__body li::marker { color: var(--accent); }
.article__body blockquote {
  margin: var(--space-5) calc(-1 * var(--space-4)); padding: var(--space-2) var(--space-4);
  border-left: 1px solid var(--accent);
  font-family: var(--font-display); font-style: italic; font-size: var(--step-3); line-height: 1.2; color: var(--text);
}
.article__body blockquote p { margin: 0; }
.article__body blockquote footer { font-family: var(--font-ui); font-style: normal; font-size: var(--step--2); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-3); }
.article__body code { font-family: var(--font-mono); font-size: 0.8em; background: var(--night-800); padding: 0.1em 0.4em; border-radius: var(--radius); }
.article__body pre { overflow-x: auto; background: var(--night-900); border: 1px solid var(--hairline); padding: var(--space-4); margin: 0 0 var(--space-4); }
.article__body pre code { background: none; padding: 0; font-size: 0.82rem; line-height: 1.6; color: var(--text-soft); }
.aside-note { margin: var(--space-5) 0; padding: var(--space-4); position: relative; border: 1px solid var(--edge); --edge: var(--hairline-strong); font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.6; }
.aside-note strong { display: block; font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-1); }
.article__footer { max-width: var(--measure); margin: var(--space-6) auto 0; border-top: 1px solid var(--hairline); padding-top: var(--space-4); font-size: var(--step--1); }
.article__footer a { color: var(--text-soft); text-decoration: none; }
.article__footer a:hover { color: var(--accent); }

/* ---------- Article islands: contents ----------
   Static: ordinary in-flow blocks. Dynamic: placed by their zone (see Zones); only internals live here. */
.toc, .subscribe-island {
  max-width: var(--measure); margin: 0 auto var(--space-6); padding: var(--space-4);
  position: relative; border: 1px solid var(--edge); --edge: var(--hairline);
}
.toc__meter { display: none; }
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__list a { display: block; padding: var(--space-1) 0; color: var(--text-soft); text-decoration: none; transition: color var(--speed), background var(--speed); }
.toc__list a:hover, .toc__list a[aria-current] { color: var(--accent); }

html[data-motion="full"] .article__header { display: grid; align-content: center; min-height: min(62svh, 36rem); margin-bottom: var(--space-5); }

@media (min-width: 70rem) {
  html[data-motion="full"] .toc { padding: var(--space-2); }
  html[data-motion="full"] .toc__title { padding: var(--space-1) var(--space-3) 0; margin: 0; }
  html[data-motion="full"] .toc__meter { display: block; height: 1px; margin: var(--space-2) var(--space-3); background: var(--hairline-strong); position: relative; }
  html[data-motion="full"] .toc__meter::after { content: ""; position: absolute; inset: -0.5px 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--progress, 0)); }
  html[data-motion="full"] .toc__list a { padding: var(--space-2) var(--space-3); font-size: var(--step--1); line-height: 1.35; }
  html[data-motion="full"] .toc__list a[aria-current] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
  html[data-motion="full"] .toc__list a:focus-visible { outline-offset: -3px; }
}
@media (max-width: 69.99rem) {
}

@media (max-width: 40rem) {
  html:not([data-motion="full"]) .site-header .wrap { grid-template-columns: 1fr; gap: var(--space-3); }
  html:not([data-motion="full"]) .site-header [data-zone] { grid-column: 1; justify-self: start; }
  .hero { padding-block: var(--space-6) var(--space-5); }
  .card, .card-grid__featured .card { padding: var(--space-4); }
  .article__body blockquote { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce), (update: slow) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
html[data-motion="reduced"] { scroll-behavior: auto; }
html[data-motion="reduced"] * { transition: none !important; }


/* ---------- Home: project rows ---------- */
.more { font-size: var(--step--1); color: var(--text-soft); text-decoration: none; letter-spacing: 0.04em; }
.more:hover { color: var(--accent); }
.project-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.project-row {
  position: relative; display: grid; gap: var(--space-2) var(--space-5);
  padding: var(--space-5) var(--space-3); border-bottom: 1px solid var(--hairline);
  transition: background var(--speed) var(--ease);
}
@media (min-width: 52rem) { .project-row { grid-template-columns: 1fr auto; align-items: center; } }
.project-row:hover, .project-row:focus-within { background: var(--surface-hover); }
.project-row__name { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); line-height: 1.05; margin-bottom: var(--space-1); }
.project-row__name a { text-decoration: none; transition: color var(--speed); }
.project-row__name a::after { content: ""; position: absolute; inset: 0; } /* whole row is the link */
.project-row:hover .project-row__name a, .project-row:focus-within .project-row__name a { color: var(--accent); }
.project-row__blurb { color: var(--text-soft); max-width: 46ch; }
.project-row__meta { display: grid; gap: var(--space-1); font-size: var(--step--1); color: var(--text-muted); }
@media (min-width: 52rem) { .project-row__meta { text-align: right; justify-items: end; } }
.status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-soft); }
.status::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--stone-500); }
.status[data-status="prototype"] { color: var(--accent); }
.status[data-status="prototype"]::before { background: var(--accent); }
.status[data-status="research"]::before { background: var(--white-300); }
.status-demo { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- Pages: shared frame for projects & design system ---------- */
.page { width: min(100% - 2 * var(--space-4), var(--measure-wide)); margin-inline: auto; padding-bottom: var(--section-space); }
@media (min-width: 70rem) {
  /* keep clear of the gutter zones */
  .page { width: min(var(--measure-wide), 100% - 2 * (var(--zone-w) + var(--space-5))); }
}

/* ---------- Projects page ---------- */
.project { padding-block: var(--section-space); border-top: 1px solid var(--hairline); }
html[data-motion="full"] .project { min-height: 70svh; }
.project .eyebrow { margin-bottom: var(--space-3); }
.project h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1; margin-bottom: var(--space-4); text-wrap: balance; }

.project p { font-family: var(--font-text); font-size: 1.15rem; color: var(--text-soft); margin-bottom: var(--space-3); max-width: var(--measure); }
.project .project__blurb { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; color: var(--text); }
.project .eyebrow { font-family: var(--font-ui); }
.facts { margin: var(--space-5) 0 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.facts > div { display: grid; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 40rem) { .facts > div { grid-template-columns: 9rem 1fr; } }
.facts dt { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); align-self: center; }
.facts dd { margin: 0; color: var(--text-soft); }
.facts a { color: var(--text); }

/* ---------- Long-form pages (about, placeholders) ---------- */
.doc__section { padding-block: var(--section-space) 0; }
html[data-motion="full"] .doc__section { min-height: 60svh; }
.doc h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1; margin-bottom: var(--space-3); border-top: 1px solid var(--hairline-strong); padding-top: var(--space-5); }
.doc h3 { font-size: var(--step--1); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); margin: var(--space-6) 0 var(--space-3); }
.doc__section p { font-family: var(--font-text); font-size: 1.1rem; color: var(--text-soft); }
.doc__section .doc__lede { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.3; color: var(--text); max-width: 40rem; margin-bottom: var(--space-4); }
.doc code { font-family: var(--font-mono); font-size: 0.82em; color: var(--text); }
.doc pre { overflow-x: auto; background: var(--night-900); border: 1px solid var(--hairline); padding: var(--space-4); margin: var(--space-3) 0 var(--space-4); }
.doc pre code { font-size: 0.8rem; line-height: 1.6; color: var(--text-soft); }
.doc ul, .doc ol { margin: 0; padding: 0; }
.principles { list-style: none; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: var(--space-5) !important; }
.principle { padding: var(--space-4); background: var(--surface); }
.principle__n { font-family: var(--font-display); font-size: var(--step-2); color: var(--accent); display: block; }
.principle h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); letter-spacing: 0; text-transform: none; color: var(--text); margin: var(--space-2) 0; }
.doc__section .principle p { font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.6; }
.doc__section .states p { font-family: var(--font-ui); font-size: var(--step--1); margin-top: var(--space-1); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.doc th, .doc td { text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--text-soft); }
.doc thead th { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.doc tbody th { font-weight: 500; color: var(--text); white-space: nowrap; }
.rules { list-style: none; }
.rules li { padding: var(--space-3) 0 var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); position: relative; color: var(--text-soft); }
.rules li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 0.5rem; height: 1px; background: var(--accent); }
.doc__section .faces__sample { font-size: var(--step-3); line-height: 1.1; color: var(--text); }
.doc__section .faces li p:last-child { font-family: var(--font-ui); font-size: var(--step--1); color: var(--text-muted); }
.doc__section .demo-quote p { font-family: var(--font-display); font-size: inherit; color: var(--text); }
/* Placeholders: things that will exist later. Dimmed, not links, no hover. */
.card--placeholder { opacity: 0.6; pointer-events: none; }
.project-row--static:hover, .project-row--static:focus-within { background: none; }


/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; display: grid; align-content: center; min-height: min(86svh, 50rem); padding-block: var(--space-7) var(--space-6); text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 60% at 50% 105%, color-mix(in srgb, var(--ember-orange) 26%, transparent), transparent 70%),
    radial-gradient(40% 45% at 10% 105%, color-mix(in srgb, var(--ember-red) 30%, transparent), transparent 70%),
    radial-gradient(40% 45% at 90% 105%, color-mix(in srgb, var(--ember-olive) 26%, transparent), transparent 70%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero__mark { width: 5rem; height: 5rem; margin: 0 auto var(--space-4); object-fit: contain; }
.hero h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.01em;
  max-width: 16ch; margin: var(--space-3) auto var(--space-4);
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero p.lede { max-width: 38rem; margin-inline: auto; color: var(--text-soft); font-size: var(--step-1); }
.hero__rule { height: 2px; width: min(22rem, 60%); margin: var(--space-5) auto 0; background: var(--ember); }

/* Five nav links: tighten them so the phone pill fits a 360px screen */
@media (max-width: 40rem) {
  .island ul { gap: 0; }
  .island li a { padding: var(--space-2) 0.6rem; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block; padding: var(--space-3) var(--space-5);
  font-family: var(--font-ui); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--night-950); background: var(--accent); border: 1px solid var(--accent);
  transition: filter var(--speed) var(--ease);
}
.button:hover { filter: brightness(1.1); }
.doc__section a.button { color: var(--night-950); }
.doc__section a.button:hover { color: var(--night-950); }
.button:focus-visible { outline-offset: 3px; }

/* ---------- Book (the Godbone Chronicles) ---------- */
.book { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 40rem) { .book { grid-template-columns: 12rem 1fr; } }
.cover {
  aspect-ratio: 2 / 3; width: min(100%, 12rem); display: grid; place-items: center; text-align: center;
  border: 1px solid var(--hairline-strong); border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--ember-red), var(--ember-orange), var(--ember-yellow), var(--ember-beige), var(--ember-olive)) 1;
  border-image-width: 1px 1px 3px 1px;
  background: var(--surface); color: var(--text-muted);
  font-size: var(--step--1); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.doc .book__title { text-transform: none; letter-spacing: -0.01em; font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); line-height: 1.1; margin: var(--space-2) 0 var(--space-3); color: var(--text); }
.doc__section .book__text p { font-size: var(--step-0); }

/* ---------- Dashboard (the Godbone Chronicles) ----------
   Baseline (no JavaScript): the panels stack as an ordinary page.
   Enhanced (html[data-js]): wide screens show three panels on one screen; narrow screens show one panel at a time,
   chosen with the Book / Progress / Follow buttons, and the page scrolls normally. js/main.js reads the hidden stage
   list (data-status, data-percent) and shows only the CURRENT stage and how far along it is. */
.dash { width: min(100% - 2 * var(--space-4), var(--wrap)); margin-inline: auto; padding-block: var(--space-5) var(--space-6); display: grid; gap: var(--space-3); }
.dash__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.dash__title h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.01em; margin-top: var(--space-1); }
.overall { display: flex; align-items: center; gap: var(--space-3); }
.overall__pct, .now__pct { font-family: var(--font-display); line-height: 0.9; color: var(--text); font-variant-numeric: lining-nums; }
.overall__pct { font-size: var(--step-4); }
.overall__pct small, .now__pct small { font-size: 0.4em; color: var(--accent); margin-left: 0.1em; }
.overall__text { display: grid; gap: var(--space-2); min-width: 12rem; }
.overall__label { font-size: var(--step--1); letter-spacing: 0.04em; color: var(--text-soft); }
.meter { --p: 0; height: 6px; background: var(--hairline); flex: 1; min-width: 4rem; }
.meter > span { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--ember); transition: width var(--speed) var(--ease); }
.dash__views { display: none; }

.panel { border: 1px solid var(--hairline); background: var(--surface); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; min-height: 0; }
.panel__label { font-family: var(--font-ui); font-size: var(--step--2); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }
.panel--progress { border-top: 2px solid transparent; border-image: var(--ember) 1; border-image-width: 2px 0 0 0; }

/* Book panel */
.book { display: flex; gap: var(--space-4); align-items: flex-start; }
.dash .cover { width: 7.5rem; flex: none; }
.dash .book__text { min-width: 0; }
.dash .book__title { font-size: var(--step-2); margin: var(--space-2) 0 0; }

/* Reveal: native <details> accordions */
.reveal { border-top: 1px solid var(--hairline); padding-top: var(--space-3); }
.reveal > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--speed) var(--ease); }
.reveal[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.reveal > summary:hover { color: var(--accent); }
.reveal > summary:focus-visible { outline-offset: 4px; }
.reveal p { margin: var(--space-2) 0 0; font-size: var(--step-0); color: var(--text-soft); line-height: 1.55; }

/* Progress panel: the current stage and how far along it is */
.now { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4) 0 0; }
.now__kicker { font-size: var(--step--2); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.now__name { font-family: var(--font-display); font-weight: 400; font-size: var(--step-4); line-height: 1; letter-spacing: -0.01em; text-transform: none; color: var(--text); margin: 0; }
.now__desc { font-size: var(--step-1); color: var(--text-soft); max-width: 34rem; }
.now__row { display: flex; align-items: center; gap: var(--space-4); max-width: 34rem; margin-top: var(--space-2); }
.now__pct { font-size: var(--step-3); }
.now .meter { height: 8px; }
.now__status { font-size: var(--step--1); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-muted); }
.panel--progress[data-state="active"] .now__status { color: var(--ember-orange); }
.panel--progress[data-state="complete"] .now__status { color: var(--accent); }

/* Follow panel */
.follow__cta { margin: 0; }

/* Enhanced: one screen */
html[data-js] body.dashboard { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
html[data-js][data-motion="full"] body.dashboard { grid-template-rows: minmax(0, 1fr) auto; } /* the fixed header is out of the grid */
html[data-js] .dash-main { min-height: 0; }
html[data-js] .dash { height: 100%; padding-block: var(--space-3); grid-template-rows: auto minmax(0, 1fr); }
@media (min-width: 60rem) {
  html[data-js] .dash { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr) minmax(15rem, 19rem); }
  html[data-js] .dash__head { grid-column: 1 / -1; }
  html[data-js] .panel { overflow: auto; }
  html[data-js] .panel--progress { grid-column: 2; grid-row: 2; }
  html[data-js] .panel--book { grid-column: 1; grid-row: 2; }
  html[data-js] .panel--follow { grid-column: 3; grid-row: 2; }
  .dash .cover { width: 5.5rem; }
  .dash .book__title { font-size: var(--step-1); line-height: 1.15; }
  html[data-js] .overall { display: none; } /* the Progress panel already shows the current stage; the readout is for narrow screens */
}
@media (min-width: 60rem) and (max-height: 52rem) { html[data-js] .now__name { font-size: var(--step-3); } }

/* Narrow screens (phones, small tablets): one panel at a time, and the page scrolls normally. Real phone viewports
   are shorter than they look (browser bars), so nothing here is a fixed height. */
@media (max-width: 59.99rem) {
  html[data-js] body.dashboard { height: auto; min-height: 100vh; min-height: 100dvh; display: block; overflow: visible; }
  html[data-js] .dash { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--space-2); padding-block: var(--space-3); }
  html[data-js] .dash__views { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline-strong); }
  html[data-js] .dash__views button { font: inherit; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-2) var(--space-3); background: none; border: 0; color: var(--text-muted); cursor: pointer; }
  html[data-js] .dash__views button + button { border-left: 1px solid var(--hairline-strong); }
  html[data-js] .dash__views button[aria-pressed="true"] { color: var(--night-950); background: var(--accent); }
  html[data-js] .dash__views button:focus-visible { outline-offset: -3px; }
  html[data-js] .dash [data-panel] { display: none; }
  html[data-js] .dash[data-view="book"] [data-panel="book"], html[data-js] .dash[data-view="progress"] [data-panel="progress"], html[data-js] .dash[data-view="follow"] [data-panel="follow"] { display: flex; }
  html[data-js] .panel { padding: var(--space-3); gap: var(--space-2); }
  html[data-js] .dash__head { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  html[data-js] .dash__title h1 { font-size: var(--step-2); }
  html[data-js] .dash__title .eyebrow { display: none; }
  html[data-js] .overall { flex: none; gap: var(--space-2); }
  html[data-js] .overall__pct { font-size: var(--step-3); }
  html[data-js] .overall__text { min-width: 0; }
  html[data-js] .overall__label { display: none; }
  html[data-js] .overall .meter { width: 3.5rem; flex: none; min-width: 0; }
  html[data-js] .now__name { font-size: var(--step-3); }
  html[data-js] body.dashboard .site-footer p { display: none; }
  html[data-js] body.dashboard .site-footer { padding-block: var(--space-2); }
}
@media (max-height: 40rem) { html[data-js] .dash__title .eyebrow { display: none; } }


/* ---------- Footer links ---------- */
.site-footer__links { display: flex; gap: var(--space-4); }
.site-footer__links a { color: var(--text-muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--accent); }

/* Seven-ish nav links: tighten them a little more so the phone pill fits 360px */
@media (max-width: 40rem) { .island li a { padding: var(--space-2) 0.5rem; } }

/* On narrow screens there is no empty margin for the floating icon, so give it a faint backing while scrolled */
@media (max-width: 69.99rem) {
  html[data-motion="full"][data-scrolled] .wordmark {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
}