/* ============================================================
   Detail pages — shared template for all 5 project pages.
   Ported from refer/cite-or-decline.html (identical boilerplate
   confirmed across all 5 source files). Real tokens.css values used
   throughout (source files had their own --n-* shim + a third
   --ease-settle curve — remapped to --ease-reveal + --dur-descend,
   since system_2.md allows exactly two curves total).

   Scroll-reveal below the fold, which none of the 5 source files
   actually implemented despite system_2.md requiring it, is added
   here via the shared .rv component from site.css (each of the six
   numbered sections is one reveal block) plus engine.js, reused
   unchanged from the index page.
   ============================================================ */

body{ line-height:1.6; }
.wrap{
  max-width:var(--container); margin-inline:auto;
  padding-block:var(--sp-6) var(--sp-9); padding-inline:var(--pad-inline);
}
@media (min-width:900px){ .wrap{ padding-block-start:var(--sp-7); } }

/* ENTRANCE — descends from above. The index hero rises from below its
   own mask; this does the opposite, so going deeper into the site
   brings the page down over you, and coming back up lifts you out.
   Written as an animation FROM the offset, not a transition toward
   it, so the resting state in the markup is the visible one — if the
   CSS fails to load, the page reads normally instead of sitting
   permanently off its mask. */
@keyframes descend{ from{ transform:translateY(-125%); } to{ transform:translateY(0); } }
.dsc{ display:block; overflow:hidden; padding-block:.12em; margin-block:-.12em; }
.dsc > *{ display:block; animation:descend var(--dur-descend) var(--ease-reveal) both; }
.dsc--a > *{ animation-delay:0ms; }
.dsc--b > *{ animation-delay:90ms; }
.dsc--c > *{ animation-delay:180ms; }
.dsc--d > *{ animation-delay:280ms; }
.dsc--e > *{ animation-delay:370ms; }
@media (prefers-reduced-motion:reduce){ .dsc > *{ animation:none; } }

.back{
  display:inline-block; font-size:var(--fs-t4); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--text-muted); text-decoration:none;
  margin-bottom:var(--sp-8);
}
.back:hover{ color:var(--text); }

.title{
  font-family:var(--font-display); font-weight:400; font-size:var(--fs-detail-title);
  line-height:1; margin:0; view-transition-name:project-name;
}
.claim{ margin:var(--sp-4) 0 0; font-size:var(--fs-t1); color:var(--text-muted); max-width:44ch; }

/* IMPACT BAND — above the fold, above the mechanism */
.impact{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);
  margin:var(--sp-7) 0 0; padding:var(--sp-6) 0; border-block:1px solid var(--text);
}
.impact dt{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-d4); line-height:1; font-variant-numeric:tabular-nums; }
.impact dd{ margin:var(--sp-3) 0 0; font-size:var(--fs-t3); color:var(--text-muted); line-height:1.35; }
@media (max-width:640px){ .impact{ grid-template-columns:1fr; gap:var(--sp-4); } }

.meta{
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5);
  margin:var(--sp-4) 0 var(--sp-9);
  font-size:var(--fs-t4); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted);
}
.meta a{ color:inherit; }

section{ margin-bottom:var(--sp-9); }
.sh{
  display:flex; align-items:baseline; gap:var(--sp-4);
  margin:0 0 var(--sp-5); padding-bottom:var(--sp-3); border-bottom:1px solid var(--border);
}
.sh span{ font-size:var(--fs-t4); letter-spacing:var(--ls-caps); color:var(--text-muted); font-variant-numeric:tabular-nums; }
.sh h2{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-d4); line-height:1.1; margin:0; }
.wrap p{ max-width:var(--measure); }

table{ width:100%; border-collapse:collapse; margin:var(--sp-4) 0 var(--sp-6); font-size:var(--fs-t3); }
th,td{ text-align:left; padding:var(--sp-3) var(--sp-4) var(--sp-3) 0; border-bottom:1px solid var(--border); vertical-align:top; }
thead th{ font-weight:400; font-size:var(--fs-t4); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted); }
tbody th{ font-weight:400; color:var(--text-muted); width:22%; }

ol.steps{ counter-reset:s; list-style:none; margin:0; padding:0; }
ol.steps li{ counter-increment:s; position:relative; padding:0 0 var(--sp-5) var(--sp-7); max-width:var(--measure); }
ol.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:.15em;
  font-size:var(--fs-t4); letter-spacing:var(--ls-caps); color:var(--text-muted); font-variant-numeric:tabular-nums;
}

blockquote{
  margin:0 0 var(--sp-5); padding:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-d4); line-height:1.15; max-width:24ch;
}

.pager{
  display:flex; justify-content:space-between; gap:var(--sp-4);
  padding-top:var(--sp-5); border-top:1px solid var(--border); font-size:var(--fs-t3);
}
.pager a{ color:var(--text); text-decoration:none; }
.pager a:hover{ text-decoration:underline; text-underline-offset:.18em; }

/* FIGURE SLOT — reserved, aspect-ratio-sized space so the page doesn't
   reflow when a real image lands. Renders as an honest empty frame
   with a note about what belongs there, rather than a grey box that
   looks like a loading bug. To fill: replace .fig__slot with
   <img class="fig__img">. */
.fig{ margin:var(--sp-6) 0; max-width:var(--container); }
.fig--wide{ margin-block:var(--sp-7); }
.fig__slot{
  aspect-ratio:16/9; border:1px dashed var(--border); background:var(--surface);
  border-radius:2px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--sp-2); text-align:center; padding:var(--sp-5);
}
.fig--tall .fig__slot{ aspect-ratio:4/3; }
.fig__slot b{ font-weight:500; font-size:var(--fs-t3); color:var(--text-muted); letter-spacing:var(--ls-caps); text-transform:uppercase; }
.fig__slot small{ font-size:var(--fs-t3); color:var(--text-muted); max-width:46ch; line-height:1.45; }
.fig__img{ display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:2px; }
.fig figcaption{ margin-top:var(--sp-3); font-size:var(--fs-t4); color:var(--text-muted); max-width:var(--measure); }

/* .todo now lives in site.css — shared with the Work cards on index.html */

/* Each numbered section is one scroll-reveal block — heading and body
   together, per system_2.md's scroll-reveal mechanic (not implemented
   in any of the 5 source files despite being required there). Unlike
   the .rv/.rv__in pair (site.css, About), a detail-page section holds
   several heterogeneous children (heading, paragraphs, table, list,
   figure) rather than one wrappable block, so this clips the whole
   section as a single unit instead of requiring an inner wrapper. */
.js section.reveal{ clip-path:inset(0 0 100% 0); transition:clip-path 1150ms var(--ease-reveal); }
.js section.reveal.is-in{ clip-path:inset(0 0 0% 0); }
@media (prefers-reduced-motion:reduce){
  .js section.reveal{ clip-path:none; }
}