/* Scott review, 18 September. One composition, two intentional visual systems.
   The product state never forks. Brand tokens remain Vinci's; neutrals carry copy.
   Native controls use a 3:1 focus ring and body copy targets at least 4.5:1. */
:root {
  --muted:#A09EAA; --faint:#92909C;
  --focus:#FFC63A;
}
:root[data-theme='booklet'] {
  --muted:#63596D; --faint:#6B6172;
  --focus:#5C08FD;
}
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.skip { background:var(--ink); color:var(--bg); }
.nav { backdrop-filter:none; background:var(--bg); }
:root[data-theme='booklet'] .nav { background:var(--bg); }
.nav-inner { min-height:68px; padding-top:12px; padding-bottom:12px; gap:26px; }
.nav-links { gap:22px; }
.btn { white-space:nowrap; }
:root[data-theme='booklet'] .btn.primary:hover { background:#3B174D; border-color:#3B174D; }
.concept-tag { border-style:solid; cursor:pointer; }

/* Recompose the hero around the proposal's actual 18-layer render. */
:root[data-theme] .hero {
  max-width:var(--max); margin:0 auto; padding:48px var(--gutter) 56px;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(30px,5vw,76px); align-items:center; overflow:visible;
  color:var(--ink); background:none; text-align:left;
}
:root[data-theme] .hero::before { display:none; }
.hero-copy { min-width:0; }
:root[data-theme] .hero .eyebrow {
  display:block; color:var(--ink-2); font-size:11px; line-height:1.7;
  letter-spacing:.09em; max-width:48ch;
}
:root[data-theme] .hero h1 {
  margin:23px 0 0; font:400 clamp(42px,5.1vw,76px)/1.08 var(--mono);
  letter-spacing:-.055em; text-transform:none; color:var(--ink); max-width:13ch;
}
:root[data-theme='booklet'] .hero h1 { text-transform:uppercase; font-size:clamp(40px,4.75vw,70px); letter-spacing:-.04em; }
:root[data-theme] .hero-sub {
  margin:25px 0 0; max-width:40ch; font:400 clamp(19px,1.7vw,23px)/1.5 var(--serif); color:var(--ink-2);
}
:root[data-theme] .hero-ctas { margin-top:29px; justify-content:flex-start; gap:12px; }
:root[data-theme] .hero .btn.primary { color:var(--bg); background:var(--ink); border-color:var(--ink); }
:root[data-theme] .hero .btn.ghost { color:var(--ink); border-color:var(--line-2); background:none; }
:root[data-theme] .hero .btn.primary:hover { background:var(--ink-2); border-color:var(--ink-2); }
.hero-product { margin:0; min-width:0; width:100%; }
.hero-object-head { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink-2); font:400 10px/1.5 var(--mono); padding:0 0 12px; border-bottom:1px solid var(--line-2); }
.hero-object-head span:last-child { color:var(--muted); }
.hero-object-stage { height:clamp(310px,30vw,435px); position:relative; }
[data-hero-canvas] { display:block; width:100%; height:100%; }
.hero-load { position:absolute; top:45%; left:0; right:0; text-align:center; color:var(--ink-2); font:400 12px/1.5 var(--mono); }
.hero-object-tools { display:flex; gap:5px; justify-content:center; }
.hero-object-tools button { font:400 11px/1.5 var(--mono); padding:9px 13px; min-height:40px; border:1px solid var(--line-2); border-radius:5px; color:var(--ink-2); }
.hero-object-tools button[aria-pressed='true'] { background:var(--ink); color:var(--bg); border-color:var(--ink); }
:root[data-theme='booklet'] .hero-object-tools button { border-radius:0; }
#hero-object-caption { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px; padding-top:19px; }
#hero-object-caption strong { font:400 29px/1.1 var(--mono); letter-spacing:-.05em; color:var(--ink); white-space:nowrap; }
#hero-object-caption span { font:400 15px/1.4 var(--serif); color:var(--ink-2); max-width:33ch; }
.hero-truth { margin-top:9px; font:400 10px/1.6 var(--mono); color:var(--muted); }

/* Two selected directions in one exact viewport. Native radios provide keyboard
   arrows, checked state, touch labels and a visible sliding selection. */
:root[data-theme] .product { padding-top:28px; }
.style-choice { margin:30px 0 22px; padding:0; border:0; min-width:0; }
.style-choice legend { padding:0; margin:0 auto; text-align:center; font:400 clamp(20px,2vw,28px)/1.3 var(--serif); color:var(--ink); }
#style-help { margin:9px 0 19px; text-align:center; font:400 12px/1.6 var(--mono); color:var(--ink-2); }
.style-switch { position:relative; isolation:isolate; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-2); border-radius:14px; padding:5px; max-width:760px; margin:0 auto; background:var(--bg-2); }
.style-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.style-switch label { display:grid; gap:5px; padding:18px 20px; text-align:center; cursor:pointer; position:relative; z-index:1; border-radius:10px; min-width:0; }
.style-switch label span { font:500 16px/1.3 var(--mono); color:var(--ink-2); }
.style-switch label small { font:400 14px/1.3 var(--serif); color:var(--muted); }
.style-switch input:checked + label span, .style-switch input:checked + label small { color:var(--bg); }
.style-switch input:focus-visible + label { outline:3px solid var(--focus); outline-offset:4px; }
.style-switch-thumb { position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:10px; background:var(--ink); pointer-events:none; }
.style-switch:has(#skin-brand:checked) .style-switch-thumb { transform:translateX(100%); }
:root[data-theme='booklet'] .style-switch, :root[data-theme='booklet'] .style-switch label, :root[data-theme='booklet'] .style-switch-thumb { border-radius:0; }
@media (prefers-reduced-motion:no-preference) {
  .style-switch-thumb { transition:transform .3s cubic-bezier(.2,.7,.2,1); }
  .hero-object-tools button { transition:background .2s,color .2s; }
}

/* High-contrast reading surfaces. Gradients belong in the field, not behind copy. */
:root[data-theme='booklet'] .section.dark { background:#EDE7DE; color:var(--ink); border-color:var(--line-2); }
:root[data-theme='booklet'] .section.dark .eyebrow,
:root[data-theme='booklet'] .section.dark .lede,
:root[data-theme='booklet'] .section.dark p,
:root[data-theme='booklet'] .section.dark .icp-role,
:root[data-theme='booklet'] .section.dark .how-steps li .n,
:root[data-theme='booklet'] .section.dark .demo-kind,
:root[data-theme='booklet'] .section.dark .demo-card p { color:var(--ink-2); }
:root[data-theme='booklet'] .section.dark h2,
:root[data-theme='booklet'] .section.dark h3,
:root[data-theme='booklet'] .section.dark .q { color:var(--ink); }
:root[data-theme='booklet'] .icp-grid { border-color:var(--line-2); }
:root[data-theme='booklet'] .how-steps { border-color:var(--line-2); background:var(--line-2); }
:root[data-theme='booklet'] .how-steps li { background:var(--panel); }
:root[data-theme='booklet'] .how-steps li.on { background:#E4DBEB; }
:root[data-theme='booklet'] .how-steps li.on .n { color:#5C08FD; }
:root[data-theme='booklet'] .how-steps li::after { background:#5C08FD; }
:root[data-theme='booklet'] .demo-card { background:var(--panel); border-color:#A497AE; }
:root[data-theme='booklet'] .demo-card h3 { color:var(--ink); }
:root[data-theme='booklet'] .demo-card .demo-cta { color:#4F00C3; }
:root[data-theme='booklet'] .demo-card:hover { background:#F2EBF7; border-color:#5C08FD; }
:root[data-theme='booklet'] .object-hint { color:var(--muted); }
:root[data-theme='booklet'] .usecase[aria-selected='true'] small,
:root[data-theme='booklet'] .usecase[aria-selected='true'] .status { color:#E6DDEE; }
:root[data-theme='booklet'] .big { color:var(--ink); background:none; -webkit-text-fill-color:var(--ink); }
:root[data-theme='concept'] .big { color:var(--ink); background:none; -webkit-text-fill-color:var(--ink); }
:root[data-theme] .frame-caption { color:var(--muted); font-size:13px; line-height:1.6; }
:root[data-theme] .foot-note { color:var(--muted); }
:root[data-theme] .cap.is-next h3, :root[data-theme] .cap.is-later h3,
:root[data-theme] .cap.is-next .q, :root[data-theme] .cap.is-later .q { color:var(--muted); }

/* Timeline: column centers are 12.5/37.5/62.5/87.5%. Verify and Build markers
   now share exact x coordinates with their axis labels. Captions are outside. */
:root[data-theme] .cadence { margin:18px 0 0; padding:20px; display:grid; gap:17px; background:var(--panel); border:1px solid var(--line-2); }
.cadence > figcaption { font:500 11px/1.5 var(--mono); color:var(--ink); }
:root[data-theme] .cadence-row { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:7px 12px; }
:root[data-theme] .cadence-label { grid-column:1; grid-row:1; font-size:10px; color:var(--ink-2); }
:root[data-theme] .cadence-track { grid-column:2; grid-row:1; height:20px; border-radius:0; background:var(--bg-2); overflow:visible; }
:root[data-theme] .cadence-track .tick { left:var(--x); width:5px; transform:translateX(-50%); background:var(--ink-2); }
:root[data-theme] .cadence-note { position:static; right:auto; top:auto; transform:none; grid-column:2; grid-row:2; text-align:right; mix-blend-mode:normal; color:var(--ink-2); font-size:10px; line-height:1.5; }
:root[data-theme] .cadence-row.is-vinci .cadence-note { color:var(--ink-2); }
:root[data-theme] .cadence-track .band { opacity:1; }
:root[data-theme] .cadence-axis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding-left:124px; text-align:center; font-size:9px; color:var(--muted); letter-spacing:.01em; }
:root[data-theme] .cadence .cadence-caption { font:400 12px/1.5 var(--serif); color:var(--muted); }

@media (max-width:1100px) {
  .nav-links { gap:15px; font-size:12px; }
  .nav-inner { gap:18px; }
  .concept-tag { display:none; }
  :root[data-theme] .hero { gap:28px; }
  :root[data-theme] .hero h1 { font-size:clamp(40px,5.3vw,62px); }
}
@media (max-width:800px) {
  :root[data-theme] .hero { grid-template-columns:1fr; padding-top:36px; gap:30px; }
  :root[data-theme] .hero h1 { font-size:clamp(40px,8vw,64px); }
  .hero-copy { max-width:590px; }
  .hero-product { max-width:580px; justify-self:center; }
  .hero-object-stage { height:340px; }
  :root[data-theme] .hero-sub { max-width:45ch; }
  :root[data-theme] .product { padding-top:10px; }
}
@media (max-width:480px) {
  .nav-inner { min-height:62px; }
  :root[data-theme] .hero { padding-top:30px; padding-bottom:34px; }
  :root[data-theme] .hero h1 { font-size:clamp(34px,9.2vw,43px); }
  :root[data-theme] .hero .eyebrow { font-size:9px; max-width:37ch; }
  :root[data-theme] .hero-sub { font-size:19px; }
  :root[data-theme] .hero-ctas { gap:9px; }
  .btn.large { padding:13px 16px; font-size:12px; }
  .hero-object-stage { height:315px; }
  .hero-object-head { font-size:9px; }
  #hero-object-caption { gap:12px; }
  #hero-object-caption strong { font-size:25px; }
  .hero-object-tools button { padding:9px 10px; font-size:10px; }
  .style-switch label { padding:17px 8px; }
  .style-switch label span { font-size:12px; }
  .style-switch label small { font-size:12px; }
  .style-choice legend { font-size:22px; }
  #style-help { font-size:10px; }
  :root[data-theme] .cadence { padding:15px; }
  :root[data-theme] .cadence-row { grid-template-columns:91px minmax(0,1fr); gap:7px 10px; }
  :root[data-theme] .cadence-axis { padding-left:101px; font-size:8px; }
  :root[data-theme] .cadence-label, :root[data-theme] .cadence-note { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal-words .w { opacity:1; }
  .cadence-track .band { transform:none; }
}
@media (prefers-reduced-transparency:reduce) { .nav { background:var(--bg); backdrop-filter:none; } }

/* Readability is never conditional on intersection-observer timing. */
.reveal-words .w { opacity:1; transition:none; }
/* These pseudo-elements added no content but prevented reliable contrast checks. */
.demo-card::before { display:none; }

/* Scott: keep the colour. Gradient plates frame high-contrast reading surfaces. */
:root[data-theme='booklet'] .hero { background:var(--field); padding-top:40px; padding-bottom:40px; gap:28px; }
:root[data-theme='booklet'] .hero-copy, :root[data-theme='booklet'] .hero-product { background:#F6F2EA; padding:clamp(18px,2.6vw,38px); align-self:stretch; }
:root[data-theme='booklet'] .hero-copy { display:flex; flex-direction:column; justify-content:center; }
:root[data-theme='booklet'] .hero-product { display:flex; flex-direction:column; justify-content:center; }
:root[data-theme='booklet'] .section.dark { background:var(--field); padding-left:var(--gutter); padding-right:var(--gutter); }
:root[data-theme='booklet'] .section.dark > .section-rail, :root[data-theme='booklet'] .section.dark > .icp-grid { background:#F6F2EA; padding:clamp(24px,4vw,58px); }
:root[data-theme='booklet'] .section.dark > .section-rail { margin-bottom:24px; }