/* CT-014 layer components on concept B's tokens. Every value comes from tokens.css. One rule block per component, every state. Inter only. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: optional; src: url(fonts/inter-normal-400-latin-c9407645.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: optional; src: url(fonts/inter-normal-400-latin-c9407645.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: optional; src: url(fonts/inter-normal-400-latin-c9407645.woff2) format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-text-size-adjust: none; text-size-adjust: none; }
body { margin: 0; font-size: var(--size-4); line-height: var(--leading-body); }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: var(--underline-offset, 0.16em); transition: text-decoration-color var(--dur-ui, 200ms) var(--ease, ease), color var(--dur-ui, 200ms) var(--ease, ease); }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset, 2px); }
.skip { position: absolute; left: var(--gutter, 1rem); top: var(--skip-hide, -3rem); background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-3); font-size: var(--size-5); text-decoration: none; }
.skip:focus { top: var(--gutter, 1rem); z-index: 2; }
.sr { position: absolute; width: var(--line); height: var(--line); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page { max-width: var(--page-max, 64rem); margin: 0 auto; padding: var(--space-4) var(--gutter, 1rem) var(--space-6); }
.demo { padding: var(--space-4) 0; border-top: var(--line) solid var(--rule); }
.demo > h2 { font-size: var(--size-6, 0.6875rem); font-weight: var(--weight-strong, 600); letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-3); }
.page > h1 { font-weight: var(--weight-strong, 600); letter-spacing: var(--tracking-tight, -0.02em); font-size: var(--size-2); margin: 0 0 var(--space-3); }
.page > p.lead { max-width: var(--measure-text, 62ch); color: var(--ink-2); margin: 0 0 var(--space-4); }
.caps { font-size: var(--size-6, 0.6875rem); font-weight: var(--weight-strong, 600); letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase; color: var(--ink-3); margin: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* 1. layer marker */
.layer-marker { font-size: var(--size-5); color: var(--ink-3); margin: 0; padding: var(--space-2) 0; border-bottom: var(--line-strong) solid var(--rule-strong); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; }
.layer-marker b { color: var(--ink); font-weight: var(--weight-strong, 600); }
.layer-marker a { text-decoration-color: var(--accent); display: inline-block; min-height: var(--control-h, 2.75rem); line-height: var(--control-h, 2.75rem); }
.layer-marker { align-items: center; }
.layer-rail { list-style: none; margin: 0; padding: var(--space-2) 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--size-5); border-bottom: var(--line) solid var(--rule); }
.layer-rail a { text-decoration: none; color: var(--ink-2); display: inline-block; padding: var(--space-2) 0; min-height: var(--control-h, 2.75rem); line-height: calc(var(--control-h, 2.75rem) - var(--space-3)); }
.layer-rail a[aria-current="page"] { color: var(--ink); font-weight: var(--weight-strong, 600); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: var(--line-strong); text-underline-offset: var(--space-1); }
.layer-rail a:hover { color: var(--accent); }

/* 2. go deeper */
.go-deeper { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h, 2.75rem); padding: 0 var(--control-pad, 0.75rem); border: var(--line) solid var(--ink); text-decoration: none; font-size: var(--size-5); font-weight: var(--weight-strong, 600); color: var(--ink); }
.go-deeper:hover, .go-deeper.is-hover { border-color: var(--accent); color: var(--accent); }
.go-deeper.is-focus { outline: var(--focus); outline-offset: var(--focus-offset, 2px); }
.go-deeper[data-to="deep"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.go-deeper[data-to="deep"]:hover, .go-deeper[data-to="deep"].is-hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.go-deeper[data-to="evidence"] { border-style: dashed; }
.go-deeper__time { font-weight: var(--weight-body, 400); color: inherit; opacity: 0.85; white-space: nowrap; }
.go-deeper__time::before { content: "· "; }

/* 3. highlight */
.highlight { display: grid; grid-template-columns: var(--figure-col, 7rem) minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--line) solid var(--rule); align-items: baseline; }
.highlight__figure { margin: 0; font-weight: var(--weight-strong, 600); font-size: var(--size-2); line-height: var(--leading-one, 1); letter-spacing: var(--tracking-tight, -0.02em); }
.highlight__figure small { display: block; font-size: var(--size-5); font-weight: var(--weight-body, 400); color: var(--ink-3); margin-top: var(--space-1); letter-spacing: 0; line-height: var(--leading-snug); }
.highlight__line { margin: 0 0 var(--space-2); color: var(--ink-2); font-size: var(--size-3); line-height: var(--leading-snug); max-width: var(--measure-text, 62ch); text-wrap: pretty; }
.highlight__figure, .highlight__figure * { animation: none !important; transition: none !important; }
@media (max-width: 374px) { .highlight { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); } .highlight__figure small { display: inline; margin-left: var(--space-2); } }

/* 4. figure with source */
.figure-source { margin: 0; padding: var(--space-3) 0; border-top: var(--line) solid var(--rule); max-width: var(--measure-text, 62ch); }
.figure-source__value { margin: 0 0 var(--space-1); font-weight: var(--weight-strong, 600); font-size: var(--size-1); line-height: var(--leading-one, 1); letter-spacing: var(--tracking-tight, -0.02em); }
.figure-source__value small { display: block; font-size: var(--size-5); font-weight: var(--weight-body, 400); color: var(--ink-3); margin-top: var(--space-1); letter-spacing: 0; }
.figure-source__chart { display: block; width: 100%; height: auto; max-height: var(--chart-h, 6rem); font-family: var(--font-sans); }
.figure-source__chart .bar { fill: var(--ink); }
.figure-source__chart .bar.now { fill: var(--accent); }
.figure-source__chart .bar.before { fill: var(--contrast, #7a4a2a); }
.figure-source__chart .lbl { fill: var(--ink-3); font-size: var(--size-6, 0.6875rem); }
.figure-source__chart .val { fill: var(--ink); font-size: var(--size-5); font-weight: var(--weight-strong, 600); }
.figure-source figcaption { font-size: var(--size-5); color: var(--ink-3); margin-top: var(--space-2); }
.figure-source__source::before { content: "Source: "; font-weight: var(--weight-strong, 600); color: var(--ink-2); }

/* 5. six-question brief */
.brief { margin: 0; }
.brief__part { display: grid; grid-template-columns: var(--label-col, 9rem) minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--line) solid var(--rule); }
.brief__part:first-child { border-top: var(--line-strong) solid var(--rule-strong); }
.brief dt { font-size: var(--size-6, 0.6875rem); font-weight: var(--weight-strong, 600); letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase; color: var(--accent); padding-top: var(--space-1); }
.brief dt small { display: block; text-transform: none; letter-spacing: 0; font-weight: var(--weight-body, 400); color: var(--ink-3); margin-top: var(--space-1); }
.brief dd { margin: 0; max-width: var(--measure-text, 62ch); text-wrap: pretty; }
.brief dd p { margin: 0 0 var(--space-2); }
.brief dd p:last-child { margin-bottom: 0; }
.brief__figure { display: block; font-weight: var(--weight-strong, 600); font-size: var(--size-2); line-height: var(--leading-one, 1); letter-spacing: var(--tracking-tight, -0.02em); margin-bottom: var(--space-2); }
.brief__absent { color: var(--ink-3); font-style: italic; }
@media (max-width: 374px) { .brief__part { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); } }

/* 6. case timeline */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: phase; }
.timeline__phase { counter-increment: phase; display: grid; grid-template-columns: var(--date-col, 7rem) minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--line) solid var(--rule); position: relative; }
.timeline__phase time, .timeline__phase .timeline__undated { font-size: var(--size-5); color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: var(--space-1); }
.timeline__phase b { display: block; font-weight: var(--weight-strong, 600); }
.timeline__phase b::before { content: counter(phase, decimal-leading-zero) "  "; color: var(--accent); }
.timeline__phase span { display: block; color: var(--ink-2); max-width: var(--measure-text, 62ch); text-wrap: pretty; }
.timeline__phase.is-now b::before { color: var(--process, #3f5f4a); }
@media (max-width: 374px) { .timeline__phase { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-1); } }

/* 7. evidence viewer */
.evidence { margin: 0; padding: var(--space-3) 0; border-top: var(--line) solid var(--rule); max-width: var(--viewer-max, 40rem); }
.evidence__frame { border: var(--line) solid var(--rule); background: var(--paper-2); padding: var(--space-2); }
.evidence__frame img, .evidence__frame svg { display: block; width: 100%; height: auto; }
.evidence__text { color: var(--ink-2); font-size: var(--size-4); line-height: var(--leading-body); padding: var(--space-3); margin: 0; max-width: var(--measure-text, 62ch); }
.evidence figcaption { font-size: var(--size-5); color: var(--ink-3); margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }
.evidence__caption { color: var(--ink); }
.evidence__source::before { content: "Source: "; font-weight: var(--weight-strong, 600); color: var(--ink-2); }
.evidence__file { display: inline-block; text-decoration-color: var(--accent); min-height: var(--control-h, 2.75rem); line-height: var(--control-h, 2.75rem); }

/* 8. comparison table */
.compare { border-collapse: collapse; width: 100%; font-size: var(--size-5); margin: var(--space-3) 0; }
.compare caption { text-align: left; font-weight: var(--weight-strong, 600); color: var(--ink-2); padding-bottom: var(--space-2); }
.compare th, .compare td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--line) solid var(--rule); }
.compare thead th { color: var(--ink-3); font-weight: var(--weight-strong, 600); border-bottom: var(--line-strong) solid var(--rule-strong); }
.compare tbody th { font-weight: var(--weight-strong, 600); }
.compare thead th[data-kind="before"] { color: var(--contrast, #7a4a2a); }
.compare thead th[data-kind="after"] { color: var(--accent); }
.compare .compare__chosen { font-weight: var(--weight-strong, 600); }
.compare .compare__chosen::after { content: " (chosen)"; font-weight: var(--weight-body, 400); color: var(--accent); }
@media (max-width: 767px) {
  .compare, .compare caption, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare thead { position: absolute; width: var(--line); height: var(--line); overflow: hidden; clip-path: inset(50%); }
  .compare tr { border-bottom: var(--line-strong) solid var(--rule); padding: var(--space-2) 0; }
  .compare td, .compare tbody th { border: 0; padding: var(--space-1) 0; }
  .compare td::before { content: attr(data-th) ": "; color: var(--ink-3); font-weight: var(--weight-strong, 600); }
}

/* 9. quotation from a recommendation */
.quote { margin: 0; padding: var(--space-3) 0 var(--space-3) var(--space-4); border-left: var(--line-strong) solid var(--accent); max-width: var(--measure-text, 62ch); }
.quote p { margin: 0 0 var(--space-2); color: var(--ink-2); font-size: var(--size-3); line-height: var(--leading-snug); text-wrap: pretty; }
.quote footer { font-size: var(--size-5); color: var(--ink-3); }
.quote__name { font-style: normal; font-weight: var(--weight-strong, 600); color: var(--ink); }
.quote__role::before { content: " · "; }

/* 10. contact block */
.contact { font-style: normal; padding: var(--space-3) 0; border-top: var(--line-strong) solid var(--rule-strong); }
.contact p { margin: 0 0 var(--space-2); color: var(--ink-2); font-size: var(--size-3); line-height: var(--leading-snug); max-width: var(--measure-lede, 36ch); }
.contact ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.contact a { display: inline-block; min-height: var(--control-h, 2.75rem); line-height: var(--control-h, 2.75rem); text-decoration-color: var(--accent); }