/* Site stylesheet: a technical note, not a landing page.
   Warm dark palette (light when printed), serif headings (Fraunces), numbered running sections, two-column spreads, figures with captions,
   rules instead of cards. The tube viewer's controls come from assets/tube-viewer.css and use the same variables. */
:root {
  --bg: #1b1b1b; --panel: #232220; --text: #f4efe6; --muted: #a8a196; --line: #3a3733;
  --accent: #f2a541; --amber: #f2a541; --maxw: 1100px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.wrap { width: min(var(--maxw), calc(100% - 40px)); margin: 0 auto; }


/* numbered running sections */
.sec { padding: 44px 0 36px; border-bottom: 1px solid var(--line); }
.sec h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.2; margin: 0 0 14px; letter-spacing: 0; }
.sec h2 .num { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--amber); display: inline-block; margin-right: 12px; vertical-align: 0.2em; }
.sec p { max-width: 62ch; }
.sec .wide { max-width: none; }

/* the opening spread: text left, the tube right */
.spread { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.spread h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; margin: 10px 0 18px; letter-spacing: 0; }
.spread .standfirst { font-size: 1.12rem; color: var(--muted); }
.kicker { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.notes { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--line); }
.notes li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.notes time { color: var(--muted); font-variant-numeric: tabular-nums; }

figure { margin: 0; }
figure.fig { border-top: 1px solid var(--text); padding-top: 10px; }
figure.fig img { width: 100%; display: block; }
figcaption { font-size: 0.84rem; color: var(--muted); margin-top: 8px; }
figcaption b { color: var(--text); font-weight: 600; }

/* the tube viewer inside the spread */
.tube-explorer { grid-template-columns: minmax(0, 1fr); }
.tube-explorer .viewer3d { aspect-ratio: 16 / 11; background: var(--panel); border-radius: 4px; }
.tube-controls { font-size: 0.86rem; }
.tube-presets button { border-radius: 4px; background: var(--panel); }
.tube-presets button.active { color: var(--accent); border-color: var(--accent); }

/* two-column body text with a figure */
.cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }

/* data table, book style */
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 18px 0 6px; }
table.data caption { text-align: left; font-size: 0.84rem; color: var(--muted); padding: 0 0 8px; }
table.data th, table.data td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { border-bottom: 1px solid var(--text); font-weight: 500; color: var(--muted); }

/* definition list for the service: no cards */
dl.spec { display: grid; grid-template-columns: 180px 1fr; gap: 10px 24px; margin: 18px 0; max-width: 70ch; }
dl.spec dt { color: var(--muted); font-size: 0.9rem; padding-top: 2px; }
dl.spec dd { margin: 0; }

/* the benchmark strip: figures in a row, captions below, no boxes */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 10px; }
.strip img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }



@media (max-width: 860px) {
  .spread, .cols { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---- first screen: dark hero with the CFD filmstrip ---- */
.hero-dark { background: #1b1b1b; color: #f4efe6; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; }
.hero-title { align-self: center; text-align: center; padding: 28px 24px 8px; }
.hero-title h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 6.6vw, 5.6rem); line-height: 1; margin: 0; letter-spacing: -0.005em; color: #f4efe6; }
.hero-title p { margin: 18px auto 0; max-width: 40ch; color: #a8a196; font-size: 1.02rem; line-height: 1.5; }
.hero-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; }
.hero-strip figure { margin: 0; }
.hero-strip img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; transition: transform 0.4s ease; }
.hero-strip figure:hover img { transform: scale(1.03); }
.hero-strip figcaption { color: #7c766c; font-size: 0.74rem; padding-top: 4px; text-align: center; font-variant-numeric: tabular-nums; }
.hero-foot { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0 22px; color: #7c766c; font-size: 0.78rem; }
.hero-foot a { color: #f4efe6; text-decoration: none; border-bottom: 1px solid #f2a541; white-space: nowrap; }
.lede { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; margin: 10px 0 16px; }
@media (max-width: 760px) {
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-foot { flex-direction: column; }
}

/* ---- home first screen: the name in the middle ---- */
.brand { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.brand img { width: clamp(64px, 8vw, 104px); height: auto; }
.hero-title h1.brand { font-size: clamp(2.8rem, 7.2vw, 6.2rem); }

/* ---- shared content pieces (reactor page) ---- */
.sec h3 { font-family: var(--serif); font-weight: 500; font-size: 1.12rem; margin: 0 0 8px; }
.fig-dark { background: #1b1b1b; padding: 16px; border-radius: 4px; }
.fig-dark img { width: 100%; display: block; }
.callout { border-left: 3px solid var(--amber); background: rgba(217, 119, 6, 0.06); padding: 12px 18px; max-width: 72ch; }
.hero-figure { width: min(900px, calc(100% - 40px)); margin: 0 auto; align-self: end; }
.hero-figure img { width: 100%; display: block; }

/* 3D insert viewer on the reactor page */
.insert-viewer { width: 100%; aspect-ratio: 16 / 5.5; cursor: grab; touch-action: none; }
.insert-viewer:active { cursor: grabbing; }
.insert-viewer canvas { display: block; width: 100% !important; height: 100% !important; }
.hero-figure .insert-hero { aspect-ratio: 16 / 5.2; }

/* ---- warm dark everywhere: deeper black for the first screens and figure panels ---- */
.hero-dark { background: #141312; }
.fig-dark { background: #141312; }
.callout { background: rgba(242, 165, 65, 0.07); }
.mast { border-bottom-color: rgba(244, 239, 230, 0.18); }
table.data thead th { border-bottom-color: var(--muted); }
.print-only { display: none !important; }

/* ---- Performance: comparison bars with device drawings ---- */
.perf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 52px; align-items: start; }
.perf-text p:first-child { margin-top: 0; }
.perf-text .ask { border-left: 2px solid var(--amber); padding-left: 14px; color: var(--text); }
.perf-chart { margin: 0; }
.chart-head { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; line-height: 1.25; margin: 0 0 6px; }
.bars { width: 100%; height: auto; display: block; }
.bars text { font-family: var(--sans); }
.bars .lab { font-size: 13px; fill: var(--muted); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.bars .val { font-size: 14px; fill: var(--text); font-variant-numeric: tabular-nums; }
.bars .bar { fill: #6f7e90; }
.bars .base { stroke: var(--muted); stroke-width: 2; }
.bars .ico { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.bars .ico .wall { stroke-opacity: 0.5; }
.bars .ours .lab { fill: var(--text); }
.bars .ours .val { fill: var(--amber); font-weight: 600; font-size: 15px; }
.bars .ours .bar { fill: var(--amber); }
.bars .ours .ico { stroke: var(--amber); }
.bars .ours .ico .ghost { stroke-dasharray: 2 2.2; stroke-opacity: 0.45; }
.bars .ref { stroke: var(--muted); stroke-dasharray: 2 3; stroke-opacity: 0.6; }
.bars .axis line { stroke: var(--muted); stroke-opacity: 0.6; }
.bars .axis text { font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.perf-note { font-size: 0.84rem; color: var(--muted); margin: 12px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.perf-note b { color: var(--text); font-weight: 500; }
details.numbers { margin-top: 14px; }
details.numbers summary { cursor: pointer; color: var(--accent); font-size: 0.86rem; }
details.numbers table.data { margin-top: 12px; }

/* ---- Design studies: give/get lists and a weeks bar ---- */
.ds-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 22px; }
.sec .ds-cols h3, .sec .ds-time h3 { font-family: var(--sans); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); margin: 0 0 8px; }
.ds-cols ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.ds-cols li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; line-height: 1.45; }
.ds-cols li span { color: var(--muted); }
.sec p.ds-aside { font-size: 0.8rem; color: var(--muted); margin: 8px 0 0; }
.ds-time { margin-top: 34px; max-width: 720px; }
.ds-time svg { display: block; width: 100%; height: auto; }
.wk text { font-family: var(--sans); }
.wk .lab { fill: var(--text); font-size: 14px; }
.wk .fee { fill: var(--amber); font-family: var(--serif); font-size: 15px; }
.wk .rng, .wk .tick { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sec p.ds-then { margin: 14px 0 0; font-size: 0.95rem; max-width: 72ch; }
.ds-then b { font-weight: 500; color: var(--amber); }

@media (max-width: 860px) {
  .perf { grid-template-columns: 1fr; gap: 28px; }
  .perf-chart { order: -1; max-width: 520px; }
  .ds-cols { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .bars .lab { font-size: 15px; }
  .bars .val { font-size: 16px; }
  .bars .ours .val { font-size: 17px; }
  .bars .axis text { font-size: 13px; }
  .wk .lab { font-size: 25px; }
  .wk .fee { font-size: 26px; }
  .wk .rng, .wk .tick { font-size: 22px; }
}

/* ---- print: light paper, no interactive pieces, dark figure panels kept so their light text stays legible ---- */
@media print {
  :root { --bg: #ffffff; --panel: #ffffff; --text: #111111; --muted: #444444; --line: #cccccc; --accent: #9a3412; --amber: #b45309; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .hero-dark { background: #fff; color: #111; min-height: auto; display: block; }
  .hero-title h1, .hero-title p { color: #111; }
  .mast, .mast-dark { border-bottom-color: #ccc; }
  .mast-dark .name, .mast-dark .desc, .mast-dark nav a { color: #111; }
  .mast nav, .hero-foot a, .tube-controls, .tube-explorer, .insert-viewer, .hero-figure { display: none !important; }
  .hero-strip img, .fig-dark, .fig-dark img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .callout { background: #f6efe4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .screen-only { display: none !important; }
  .print-only { display: block !important; }
  .sec { break-inside: avoid-page; }
  a { color: #111; text-decoration: underline; }
}