/* Fenori build pages (Evidence Mode, body.dark). Chrome comes from /site.css. */

/* Small uppercase labels on these pages sit at #8B8B93, matching the
   schematics' secondary ink and clearing 4.5:1 on both dark surfaces. */
body.dark .kicker { color: #8B8B93; }

/* ---------- Hero: stacked, confident ---------- */
.hero { border-bottom: 1px solid rgba(250,250,250,.12); }
.hero .wrap { max-width: 1280px; margin: 0 auto; padding: clamp(76px, 11vh, 150px) clamp(24px, 5vw, 72px) clamp(64px, 9vh, 120px); }
.tag { margin: 22px 0 0; font: 400 clamp(17px, 1.5vw, 21px)/1.55 Inter, sans-serif; color: #D4D4D8; max-width: 60ch; text-wrap: pretty; }
.hero p.body { margin: 16px 0 0; font: 400 clamp(15px, 1.15vw, 17px)/1.75 Inter, sans-serif; color: #A1A1AA; max-width: 65ch; text-wrap: pretty; }

/* Fact panel: the dossier's claims, laid out generously */
.proof { margin-top: clamp(44px, 6vh, 72px); background: #1A1A1E; border: 1px solid rgba(250,250,250,.12); border-radius: 16px; padding: clamp(14px, 2vw, 22px) clamp(24px, 3vw, 40px) clamp(22px, 3vw, 34px); max-width: 920px; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 72px); }
.proof .prow { padding: 16px 0; border-top: 1px solid rgba(250,250,250,.09); }
.proof .prow:nth-child(-n+2) { border-top: none; }
.proof .prow:last-child:nth-child(odd) { grid-column: 1 / -1; }
.proof .pk { display: block; font: 600 12px/1.6 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8B8B93; margin-bottom: 5px; }
.proof .pv { font: 400 15px/1.55 Inter, sans-serif; color: #FAFAFA; text-wrap: pretty; }

/* ---------- Spec strip ---------- */
.specstrip { border-bottom: 1px solid rgba(250,250,250,.12); }
.specstrip .wrap { display: flex; flex-wrap: wrap; gap: 10px clamp(30px, 4vw, 72px); padding-top: 18px; padding-bottom: 18px; max-width: 1280px; margin: 0 auto; }
.specstrip span { font: 500 13px/1.6 Inter, sans-serif; color: #D4D4D8; }
.specstrip b { font: 600 11px/1.6 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8B8B93; margin-right: 10px; }

/* ---------- Sections ---------- */
section.part { border-bottom: 1px solid rgba(250,250,250,.1); }
section.part .wrap { max-width: 1280px; margin: 0 auto; padding: clamp(68px, 8.5vw, 120px) clamp(24px, 5vw, 72px); }
section.part h2 { margin: 0; font: 600 clamp(26px, 3vw, 42px)/1.12 'Inter Tight', Inter, sans-serif; letter-spacing: -.024em; color: #FAFAFA; max-width: 26ch; text-wrap: balance; }
section.part .body { max-width: 880px; min-width: 0; }
.body p { font: 400 clamp(15px, 1.1vw, 17px)/1.78 Inter, sans-serif; color: #A1A1AA; margin: .9em 0; max-width: 62ch; text-wrap: pretty; }
.body h2 + p { margin-top: 1.6em; }
.body em { color: #FAFAFA; font-style: normal; font-weight: 500; }
.body h3 { margin: 2.8em 0 .6em; font: 600 clamp(17px, 1.6vw, 21px)/1.3 'Inter Tight', Inter, sans-serif; letter-spacing: -.014em; color: #FAFAFA; }

/* The problem: headline over two columns of prose */
.pt-problem .body { max-width: 1080px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(36px, 5vw, 80px); }
.pt-problem h2 { grid-column: 1 / -1; margin-bottom: .55em; }
.pt-problem p { margin: .5em 0 0; max-width: 54ch; }

/* Inputs: chips as pills */
ul.chips { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 840px; }
.chips li { font: 500 14px/1.4 Inter, sans-serif; color: #D4D4D8; border: 1px solid rgba(250,250,250,.18); border-radius: 999px; padding: 10px 18px; }

/* Architecture: one wide figure panel with a plain caption */
.pt-arch .body { max-width: 1000px; }
.arch { margin: 40px 0 0; background: #1A1A1E; border: 1px solid rgba(250,250,250,.12); border-radius: 16px; padding: clamp(20px, 3vw, 40px); overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(250,250,250,.28) transparent; }
.arch svg { width: 100%; height: auto; display: block; }
.arch svg .dr { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.23,1,.32,1); }
.arch svg.predraw .dr { stroke-dashoffset: 1; transition: none; }
.arch svg .fd { opacity: 1; transition: opacity .6s cubic-bezier(.23,1,.32,1); }
.arch svg.predraw .fd { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .arch svg .dr, .arch svg .fd { transition: none; } }
.arch-caption { display: block; margin-top: 18px; font: 400 13px/1.6 Inter, sans-serif; letter-spacing: 0; color: #8B8B93; max-width: 70ch; }

/* System flow: headline beside the sequence */
.pt-flow .body { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 96px); align-items: start; }
.pt-flow h2 { position: sticky; top: 110px; }
.flow { max-width: 560px; min-width: 0; }
.fbox { background: #1A1A1E; border: 1px solid rgba(250,250,250,.12); border-radius: 16px; padding: 18px 24px; }
.fbox .fl { display: block; font: 600 11px/1.6 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8B8B93; margin-bottom: 7px; }
.fbox .fv { font: 400 15px/1.65 Inter, sans-serif; color: #FAFAFA; }
.fbox .fv span { display: block; }
.farrow { text-align: center; font: 400 14px/1 Inter, sans-serif; color: #8B8B93; padding: 10px 0; }
.fpair, .fbranch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fbranch .fbox { border-color: rgba(250,250,250,.28); }

/* Components: names in a rule-top grid, then the logic in prose */
.pt-comp .body { max-width: 1080px; }
.refbuild { margin-top: 40px; max-width: none; }
.refbuild ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(28px, 3.5vw, 56px); }
.refbuild li { border-top: 1px solid rgba(250,250,250,.14); padding: 15px 0; font: 500 15px/1.5 Inter, sans-serif; letter-spacing: -.005em; color: #FAFAFA; }
.pt-comp .body > p, .pt-comp .body > h3 { max-width: 62ch; }

/* Walkthrough: one substantial scenario card */
.scenario { margin-top: 40px; background: #1A1A1E; border: 1px solid rgba(250,250,250,.12); border-radius: 16px; padding: clamp(28px, 4vw, 52px); max-width: 880px; }
.scenario p { margin: 0 0 1em; font: 400 clamp(15px, 1.15vw, 17px)/1.7 Inter, sans-serif; color: #D4D4D8; max-width: 62ch; text-wrap: pretty; }
.scenario ol { margin: 1.6em 0 0; padding: 0; list-style: none; counter-reset: sc; }
.scenario ol li { position: relative; padding: 17px 0 17px 52px; border-top: 1px solid rgba(250,250,250,.1); font: 400 15px/1.7 Inter, sans-serif; color: #A1A1AA; }
.scenario ol li::before { counter-increment: sc; content: counter(sc, decimal-leading-zero); position: absolute; left: 0; top: 19px; font: 600 12px/1.7 Inter, sans-serif; letter-spacing: .06em; color: #8B8B93; }

/* Behaviour: evidence, authority and integration side by side */
.bgrid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px) clamp(32px, 4vw, 64px); max-width: 1160px; }
.bgrid > div { border-top: 1px solid rgba(250,250,250,.14); padding-top: 20px; }
.bgrid h3 { margin: 0 0 10px; font: 600 clamp(16px, 1.4vw, 19px)/1.35 'Inter Tight', Inter, sans-serif; letter-spacing: -.012em; color: #FAFAFA; }
.bgrid p { margin: 0; font: 400 15px/1.7 Inter, sans-serif; color: #A1A1AA; max-width: 44ch; text-wrap: pretty; }
.pt-behavior .body { max-width: 1160px; }

/* Outputs: three plain rows */
ul.outs { list-style: none; margin: 34px 0 0; padding: 0; max-width: 780px; }
.outs li { position: relative; padding: 17px 0 17px 36px; border-top: 1px solid rgba(250,250,250,.1); font: 400 clamp(15px, 1.1vw, 16.5px)/1.7 Inter, sans-serif; color: #D4D4D8; }
.outs li:last-child { border-bottom: 1px solid rgba(250,250,250,.1); }
.outs li::before { content: "\2192"; position: absolute; left: 0; top: 17px; font: 400 15px/1.7 Inter, sans-serif; color: #8B8B93; }

/* Boundary: refusals in a two-column grid, then the principle */
.pt-bound .body { max-width: 1080px; }
.boundary ul { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3vw, 44px) clamp(36px, 4vw, 72px); }
.boundary li { border-top: 1px solid rgba(250,250,250,.14); padding: 18px 0 0; font: 400 15px/1.7 Inter, sans-serif; color: #A1A1AA; text-wrap: pretty; }
.principle { margin: clamp(56px, 8vw, 96px) 0 0; max-width: 920px; }
.principle p { margin: 0; font: 600 clamp(23px, 2.6vw, 36px)/1.2 'Inter Tight', Inter, sans-serif; letter-spacing: -.022em; color: #FAFAFA; max-width: 28ch; text-wrap: balance; }

/* Related builds */
.related { list-style: none; margin: 14px 0 0; padding: 0; max-width: 780px; }
.related li { border-top: 1px solid rgba(250,250,250,.12); }
.related li:last-child { border-bottom: 1px solid rgba(250,250,250,.12); }
.related a { display: block; padding: 17px 0; text-decoration: none; }
.related .rname { font: 500 17px/1.4 Inter, sans-serif; letter-spacing: -.01em; color: #FAFAFA; }
.related .rwhy { font: 400 14px/1.55 Inter, sans-serif; color: #8B8B93; margin-left: 8px; }
.related a:hover .rname { color: #4FB98A; }

/* ---------- Prev / next ---------- */
.pn { border-bottom: 1px solid rgba(250,250,250,.12); }
.pn .wrap { display: flex; justify-content: space-between; gap: 20px; padding: clamp(32px, 4vw, 52px) clamp(24px, 5vw, 72px); max-width: 1280px; margin: 0 auto; }
/* body.dark prefix: the base selector must out-specify site.css's
   body.dark a, or the muted label color never applies. */
body.dark .pn a { font: 600 12px/1.6 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #8B8B93; }
body.dark .pn a:hover { color: #FAFAFA; }
.pn .pn-title { display: block; margin-top: 8px; font: 600 17px/1.35 'Inter Tight', Inter, sans-serif; letter-spacing: -.012em; text-transform: none; color: #FAFAFA; }
.pn a:hover .pn-title { color: #4FB98A; }
.pn .next { text-align: right; }

/* ---------- Closing ---------- */
section.closing { background: #121214; }
section.closing .wrap { max-width: 1280px; margin: 0 auto; padding: clamp(80px, 10vw, 150px) clamp(24px, 5vw, 72px); }
section.closing h2 { margin: 0; font: 600 clamp(28px, 3.2vw, 48px)/1.1 'Inter Tight', Inter, sans-serif; letter-spacing: -.024em; color: #FAFAFA; max-width: 22ch; text-wrap: balance; }
section.closing p { margin: 24px 0 0; font: 400 clamp(15px, 1.2vw, 18px)/1.65 Inter, sans-serif; color: #A1A1AA; max-width: 52ch; text-wrap: pretty; }
section.closing a.btn { display: inline-block; margin-top: 40px; background: #FFFFFF; color: #121214; padding: 16px 32px; border-radius: 999px; font: 500 15px/1 Inter, sans-serif; letter-spacing: 0; text-decoration: none; }
section.closing a.btn:hover { color: #0E6B48; }
section.closing a.btn:active { transform: scale(.97); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid rgba(250,250,250,.12); }
.faq details:last-child { border-bottom: 1px solid rgba(250,250,250,.12); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 21px 0; font: 500 clamp(16px, 1.5vw, 19px)/1.4 Inter, sans-serif; letter-spacing: -.01em; color: #FAFAFA; }
.faq summary::-webkit-details-marker { display: none; }
/* One glyph, rotated: the plus becomes the close mark, so open and close
   read as the same object turning rather than a character swap. */
.faq summary::after { content: "+"; display: inline-block; font: 400 17px/1 Inter, sans-serif; color: #8B8B93; transition: transform .3s cubic-bezier(.23,1,.32,1), color .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); color: #FAFAFA; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover::after { color: #FAFAFA; } }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: color .25s ease; } }
.faq .fa { margin: 0; padding: 0 0 24px; font: 400 15px/1.75 Inter, sans-serif; color: #A1A1AA; max-width: 58ch; }

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
  .pt-flow .body { grid-template-columns: 1fr; gap: 28px; }
  .pt-flow h2 { position: static; }
  .bgrid { grid-template-columns: 1fr; gap: 30px; }
  .refbuild ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .proof { grid-template-columns: 1fr; }
  .proof .prow:nth-child(2) { border-top: 1px solid rgba(250,250,250,.09); }
  .pt-problem .body, .boundary ul { grid-template-columns: 1fr; }
  .pt-problem p { margin: .9em 0 0; }
  .boundary ul { gap: 22px; }
  .fpair, .fbranch { grid-template-columns: 1fr; }
  .refbuild ul { grid-template-columns: 1fr; }
  .scenario ol li { padding-left: 44px; }
}
/* The architecture drawing scrolls inside its own panel at legible scale */
@media (max-width: 700px) {
  .arch svg { min-width: 640px; }
}