/* Solomon Wilkinson — site styles. Tokens match the "Solomon Wilkinson" design system. */
:root {
  /* Light: paper #F2F3F0, text #404040, titles #730A0A. Dark: #0D0C0F ground, #F2F3F0 text, titles lightened so they stay readable. */
  --paper: #f2f3f0; --paper-raised: #fafaf8; --panel: #e6e7e3;
  --ink: #404040; --ink-body: #404040; --ink-muted: #656565;
  --hairline: #c4c5c1; --control-border: #6c6c6c;
  --title: #730a0a; --oxblood: #730a0a; --oxblood-deep: #541413; --on-oxblood: #ffffff; --focus: #730a0a;
  --overlay: rgba(64, 64, 64, .55);
  --font-sans: "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-10: 40px; --space-16: 64px; --space-26: 104px;
  --container-max: 1280px; --measure: 65ch;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d0c0f; --paper-raised: #17161a; --panel: #1e1d22;
  --ink: #f2f3f0; --ink-body: #f2f3f0; --ink-muted: #b8b6bd;
  --hairline: #33313a; --control-border: #8d8b93;
  --title: #eba8a3; --oxblood: #eba8a3; --oxblood-deep: #f5cdca; --on-oxblood: #0d0c0f; --focus: #eba8a3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d0c0f; --paper-raised: #17161a; --panel: #1e1d22;
  --ink: #f2f3f0; --ink-body: #f2f3f0; --ink-muted: #b8b6bd;
  --hairline: #33313a; --control-border: #8d8b93;
  --title: #eba8a3; --oxblood: #eba8a3; --oxblood-deep: #f5cdca; --on-oxblood: #0d0c0f; --focus: #eba8a3;
  color-scheme: dark;
}
@media (min-width: 900px) { :root { --gutter: max(40px, env(safe-area-inset-left, 0px)); --gutter-r: max(40px, env(safe-area-inset-right, 0px)); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink-body);
  font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--oxblood); color: var(--on-oxblood); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--oxblood); color: var(--on-oxblood); padding: 12px 16px; }
.skip:focus { left: var(--gutter); top: 12px; }
.wrap { max-width: calc(var(--container-max) + 80px); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.display { margin: 0; font-weight: 500; letter-spacing: -.035em; line-height: .88; color: var(--title); text-transform: lowercase; font-size: clamp(64px, 15vw, 230px); }
.section-title { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; font-weight: 500; color: var(--title); text-wrap: balance; }
.lead { font-size: 20px; line-height: 32px; font-weight: 300; color: var(--ink-body); max-width: var(--measure); margin: 0; }
.statement { margin: 0; font-size: clamp(28px, 4.2vw, 56px); line-height: 1.12; font-weight: 400; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; max-width: 22ch; }
.label { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }
.meta, .caption { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--oxblood); flex: none; }
.prose p { margin: 0 0 1em; max-width: var(--measure); }
.prose p:last-child { margin-bottom: 0; }
.link { color: var(--oxblood); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-thickness 150ms ease, color 150ms ease; }
.link:hover { color: var(--oxblood-deep); text-decoration-thickness: 2px; }

/* ---------- buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-6); font: 500 14px/20px var(--font-sans); border: 1px solid var(--oxblood); background: var(--oxblood); color: var(--on-oxblood); text-decoration: none; cursor: pointer; border-radius: 0; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.button:hover { background: var(--oxblood-deep); border-color: var(--oxblood-deep); }
.button--secondary { background: transparent; color: var(--ink); border-color: var(--control-border); }
.button--secondary:hover { background: transparent; color: var(--oxblood); border-color: var(--oxblood); }
.button svg { width: 16px; height: 16px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: var(--paper); }
.site-header.is-scrolled { border-bottom-color: var(--hairline); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 72px; }
.wordmark { font-weight: 500; font-size: 20px; line-height: 24px; letter-spacing: -.01em; color: var(--ink); text-decoration: none; text-transform: lowercase; white-space: nowrap; }
.wordmark .stop { color: var(--oxblood); }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav a { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); text-decoration: none; padding-block: 12px; text-underline-offset: 6px; text-decoration-thickness: 2px; transition: color 200ms ease; }
.nav a:hover { color: var(--oxblood); }
.nav a[aria-current="page"] { text-decoration-line: underline; text-decoration-color: var(--oxblood); }
.menu-button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 0 0 var(--space-2); background: none; border: 0; font: 500 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.menu-button .bars { width: 22px; height: 10px; display: grid; align-content: space-between; }
.menu-button .bars i { height: 2px; background: currentColor; display: block; transition: transform 250ms var(--ease); }
.menu-button:hover { color: var(--oxblood); }
@media (max-width: 719px) { .nav .nav-link { display: none; } }

/* ---------- full-screen index (menu) ---------- */
.index { position: fixed; inset: 0; z-index: 60; background: var(--paper); display: grid; grid-template-rows: auto 1fr auto; visibility: hidden; opacity: 0; transition: opacity 300ms var(--ease), visibility 0s linear 300ms; overflow-y: auto; }
.index.is-open { visibility: visible; opacity: 1; transition: opacity 300ms var(--ease); }
.index__top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding-top: env(safe-area-inset-top, 0px); }
.index__body { display: grid; grid-template-columns: minmax(0, 1fr); }
.index__foot .wrap { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); justify-content: space-between; align-items: center; padding-block: var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hairline); }
.index__foot nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.index__foot a { font-weight: 500; font-size: 15px; text-decoration: none; color: var(--ink); }
.index__foot a:hover { color: var(--oxblood); }

/* ---------- hover list (Shape-style project index) ---------- */
.hover-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.hover-list__items { list-style: none; margin: 0; padding: 0; }
.hover-list__item a { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--space-4); padding-block: var(--space-4); text-decoration: none; color: var(--ink); border-top: 1px solid var(--hairline); }
.hover-list__item:last-child a { border-bottom: 1px solid var(--hairline); }
.hover-list__num { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 500; color: var(--oxblood); font-variant-numeric: tabular-nums; }
.hover-list__title { grid-column: 2; grid-row: 1; font-size: clamp(32px, 5.2vw, 72px); line-height: 1.02; font-weight: 500; font-style: italic; letter-spacing: -.02em; text-wrap: balance; transition: color 250ms var(--ease), -webkit-text-stroke-color 250ms var(--ease); }
.hover-list__meta { grid-column: 2 / -1; grid-row: 2; margin-top: var(--space-2); }
.hover-list__thumb { grid-column: 1 / -1; grid-row: 3; margin-top: var(--space-4); aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-raised); border: 1px solid var(--hairline); max-width: 100%; }
.hover-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hover-list__preview { display: none; }
@media (hover: hover) and (min-width: 960px) {
  .hover-list { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-16); }
  .hover-list__thumb { display: none; }
  .hover-list__title { color: transparent; -webkit-text-stroke: 1px var(--ink); }
  .hover-list__item a:hover .hover-list__title, .hover-list__item a:focus-visible .hover-list__title, .hover-list__item.is-active .hover-list__title { color: var(--oxblood); -webkit-text-stroke-color: var(--oxblood); }
  .hover-list__item a::after { content: "→"; grid-column: 3; grid-row: 1; justify-self: end; align-self: center; font-size: 28px; color: var(--oxblood); opacity: 0; transform: translateX(-12px); transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
  .hover-list__item a:hover::after, .hover-list__item.is-active a::after { opacity: 1; transform: none; }
  .hover-list__preview { display: block; position: sticky; top: 96px; aspect-ratio: 4 / 5; background: var(--paper-raised); border: 1px solid var(--hairline); overflow: hidden; max-width: 100%; }
  .hover-list__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity 400ms var(--ease), transform 900ms var(--ease); }
  .hover-list__preview img.is-active { opacity: 1; transform: none; }
  .hover-list__preview figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4); background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
  .index .hover-list { padding-block: var(--space-6) var(--space-10); }
  .index .hover-list__preview { top: 24px; aspect-ratio: auto; height: min(70vh, 640px); }
}

/* ---------- home: intro ---------- */
.intro { padding-block: var(--space-16) var(--space-16); }
.intro__grid { display: grid; gap: var(--space-10); }
.intro__aside { display: grid; gap: var(--space-4); align-content: end; max-width: 40ch; }
.intro__aside .label { color: var(--ink); }
@media (min-width: 900px) { .intro__aside { justify-self: end; } .intro { padding-block: var(--space-26) var(--space-16); } }

/* ---------- home: growing image (scroll) ---------- */
.grow { position: relative; height: 165vh; }
.grow__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.grow__media { position: absolute; inset: 0; clip-path: inset(calc(var(--inset-y) * (1 - var(--p, 0))) calc(var(--inset-x) * (1 - var(--p, 0)))); --inset-y: 18%; --inset-x: 26%; will-change: clip-path; }
.grow__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - .12 * var(--p, 0))); }
.grow__shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--paper) 78%, transparent) 70%, var(--paper) 96%); opacity: var(--p, 0); pointer-events: none; }
.grow__text { position: absolute; left: 0; right: 0; bottom: 0; color: var(--ink); padding-bottom: calc(var(--space-10) + env(safe-area-inset-bottom, 0px)); opacity: calc((var(--p, 0) - .45) * 2.2); transform: translateY(calc((1 - var(--p, 0)) * 40px)); }
.grow__title { color: var(--title); }
.grow__title { margin: var(--space-4) 0 var(--space-4); font-size: clamp(48px, 9vw, 150px); line-height: .95; font-weight: 500; font-style: italic; letter-spacing: -.03em; text-wrap: balance; }
.grow__line { margin: 0 0 var(--space-6); max-width: 44ch; font-size: 18px; line-height: 28px; font-weight: 300; }
.grow__cue { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); opacity: calc(1 - var(--p, 0) * 3); }
@media (max-width: 719px) { .grow__media { --inset-y: 12%; --inset-x: 8%; } }
@media (prefers-reduced-motion: reduce) {
  .grow { height: auto; }
  .grow__sticky { position: relative; height: 85vh; }
  .grow__media { clip-path: none; }
  .grow__media img { transform: none; }
  .grow__shade, .grow__text { opacity: 1; transform: none; }
  .grow__cue { display: none; }
}

/* ---------- home: statement ---------- */
.approach { padding-block: var(--space-26); }
.approach__grid { display: grid; gap: var(--space-10); }
.approach__grid .prose { align-self: end; }
@media (min-width: 900px) { .approach__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); } }
.approach .rule { width: 48px; height: 1px; background: var(--hairline); margin-block: var(--space-6); }

/* ---------- sections ---------- */
.section { padding-block: var(--space-16); }
@media (min-width: 900px) { .section { padding-block: var(--space-26); } }
.section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-4); margin-bottom: var(--space-10); }

/* writing card */
.writing { display: grid; gap: var(--space-6); text-decoration: none; color: inherit; border-top: 1px solid var(--hairline); padding-top: var(--space-6); }
.writing__media { background: var(--paper-raised); border: 1px solid var(--hairline); aspect-ratio: 3 / 4; overflow: hidden; max-width: 260px; }
.writing__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 250ms ease; }
.writing:hover .writing__media img { transform: scale(1.02); }
.writing__title { font-size: 28px; line-height: 34px; font-weight: 500; font-style: italic; color: var(--ink); margin: var(--space-2) 0; transition: color 200ms ease; }
.writing:hover .writing__title { color: var(--oxblood); }
@media (min-width: 720px) { .writing { grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-10); } }

/* contact */
.contact { background: var(--panel); }
.contact__grid { display: grid; gap: var(--space-10); }
.contact__email { font-size: clamp(20px, 2.8vw, 40px); line-height: 1.15; font-weight: 500; color: var(--oxblood); text-decoration: none; overflow-wrap: anywhere; }
.contact__email-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-10); }
.contact__email-row .copy { margin-left: 0; }
.contact__email:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.contact dl { display: grid; gap: var(--space-4); margin: 0; }
.contact dt { margin: 0; }
.contact dd { margin: 0; }
.contact dd a { color: var(--ink); text-decoration: none; }
.contact dd a:hover { color: var(--oxblood); }
.copy { margin-left: var(--space-2); background: none; border: 1px solid var(--control-border); color: var(--ink); font: 500 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; min-height: 32px; padding: 0 10px; cursor: pointer; }
.copy:hover { color: var(--oxblood); border-color: var(--oxblood); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }

/* footer with giant wordmark */
.site-footer { border-top: 1px solid var(--hairline); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden; }
.site-footer__row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); justify-content: space-between; padding-block: var(--space-6); }
.site-footer__row a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; }
.site-footer__row a:hover { color: var(--oxblood); }
.giant { margin: 0; font-weight: 500; text-transform: lowercase; letter-spacing: -.045em; line-height: .8; color: var(--ink); font-size: clamp(28px, 9.6vw, 150px); white-space: nowrap; padding-bottom: .08em; }
.giant .stop { color: var(--oxblood); }

/* ---------- project page ---------- */
.project-head { padding-block: var(--space-16) var(--space-10); }
.project-head__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.number { font-size: 28px; line-height: 32px; font-weight: 500; color: var(--oxblood); font-variant-numeric: tabular-nums; }
.project-title { margin: 0; font-size: clamp(44px, 8vw, 120px); line-height: .95; font-weight: 500; font-style: italic; letter-spacing: -.03em; color: var(--title); text-wrap: balance; }
.project-head .meta { margin-top: var(--space-6); }
.hero-figure { margin: 0; }
.hero-figure img { width: 100%; max-height: 88vh; object-fit: cover; }
.hero-figure figcaption { padding-top: var(--space-2); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-6) var(--space-10); margin: var(--space-16) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
.facts div { display: grid; gap: var(--space-1); min-width: 0; }
.facts dt { margin: 0; }
.facts dd { margin: 0; color: var(--ink-body); }
.overview { display: grid; gap: var(--space-10); padding-block: var(--space-16); }
@media (min-width: 900px) { .overview { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.drivers { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.drivers li { font-size: 15px; font-weight: 500; color: var(--ink); }
.drivers li + li::before { content: "/"; color: var(--oxblood); margin-right: var(--space-4); }
.chapter-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.chapter { padding-block: var(--space-16); border-top: 1px solid var(--hairline); }
.chapter__head { display: grid; gap: var(--space-6); margin-bottom: var(--space-10); }
@media (min-width: 900px) { .chapter__head { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-10); } .gallery .is-wide { grid-column: 1 / -1; } }
.figure { margin: 0; display: grid; gap: var(--space-2); align-content: start; }
.figure button { padding: 0; border: 1px solid var(--hairline); background: var(--paper-raised); cursor: zoom-in; display: block; width: 100%; }
.figure img { width: 100%; height: auto; }
.caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.scale { display: inline-flex; align-items: center; gap: var(--space-1); }
.scalebar { display: inline-flex; height: 6px; border: 1px solid var(--ink); }
.scalebar i { width: 16px; height: 100%; background: var(--ink); }
.scalebar i:nth-child(even) { background: transparent; }
.tool-callout { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-6); }
.next { display: block; text-decoration: none; color: inherit; border-top: 1px solid var(--hairline); padding-block: var(--space-16); }
.next__title { display: block; margin-top: var(--space-4); font-size: clamp(40px, 7vw, 104px); line-height: .98; font-weight: 500; font-style: italic; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px var(--ink); transition: color 250ms var(--ease), -webkit-text-stroke-color 250ms var(--ease); }
.next:hover .next__title, .next:focus-visible .next__title { color: var(--oxblood); -webkit-text-stroke-color: var(--oxblood); }
@supports not (-webkit-text-stroke: 1px black) { .next__title, .hover-list__title { color: var(--ink) !important; } }

/* ---------- about ---------- */
.about-grid { display: grid; gap: var(--space-10); padding-block: var(--space-16); }
.about-grid .portrait { background: var(--paper-raised); border: 1px solid var(--hairline); max-width: 420px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); } }
.cv { display: grid; gap: var(--space-16); padding-block: var(--space-16); border-top: 1px solid var(--hairline); }
@media (min-width: 900px) { .cv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cv h2 { margin: 0 0 var(--space-6); }
.cv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.cv__item { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--space-4); }
.cv__item strong { display: block; font-weight: 500; font-style: italic; color: var(--ink); }
.cv__item .sub { color: var(--ink-muted); font-style: italic; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.tags li { border: 1px solid var(--hairline); padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--ink); }

/* ---------- lightbox ---------- */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(10, 9, 9, .94); color: #fff; }
.lightbox::backdrop { background: rgba(10, 9, 9, .94); }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; }
.lightbox img { width: 100%; height: 100%; object-fit: contain; padding: 56px max(16px, env(safe-area-inset-left, 0px)) 8px; }
.lightbox p { margin: 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); text-align: center; color: #d6d3d1; }
.lightbox button { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); min-width: 44px; min-height: 44px; background: none; border: 1px solid #8a8584; color: #fff; font: 500 14px var(--font-sans); cursor: pointer; padding: 0 14px; }

/* ---------- reveal ---------- */
.reveal { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-pending { opacity: 0; transform: translateY(24px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
  .js .reveal.is-pending { opacity: 1; transform: none; }
}

/* ---------- theme toggle ---------- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0; }
.theme-toggle:hover { color: var(--oxblood); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
.nav .nav-pdf { display: inline-flex; align-items: center; gap: 6px; }
.nav .nav-pdf svg { width: 12px; height: 12px; }
@media (max-width: 899px) { .nav .nav-pdf { display: none; } }
.pdf-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* ---------- landing / enter screen ---------- */
.enter { display: none; position: fixed; inset: 0; z-index: 90; color: var(--ink); grid-template-rows: auto 1fr auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden; background: var(--paper); }
.show-enter .enter { display: grid; }
.show-enter body { overflow: hidden; }
.enter__media { position: absolute; inset: 0; z-index: 0; }
.enter__media video, .enter__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); animation: enter-drift 18s var(--ease) forwards; }
.enter__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 86%, transparent) 0%, color-mix(in srgb, var(--paper) 40%, transparent) 46%, transparent 72%), linear-gradient(0deg, color-mix(in srgb, var(--paper) 80%, transparent) 0%, transparent 34%); }
.enter__top, .enter__stage, .enter__foot { position: relative; z-index: 2; }
.enter__top .wrap, .enter__foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); min-height: 72px; flex-wrap: wrap; }
.enter__stage { display: grid; align-items: end; padding-bottom: var(--space-10); }
.enter__stage .wrap { width: 100%; display: grid; gap: var(--space-6); justify-items: start; }
.enter .display { font-size: clamp(64px, 15vw, 240px); }
.enter__line { margin: 0; max-width: 40ch; font-size: 18px; line-height: 28px; color: var(--ink); }
.enter__reveal { display: block; overflow: hidden; }
.enter__reveal > * { display: block; animation: enter-rise 1100ms var(--ease) both; }
.enter__stage .button { animation: enter-fade 900ms 500ms var(--ease) both; }
.enter__top, .enter__foot { animation: enter-fade 900ms 300ms var(--ease) both; }
@keyframes enter-drift { to { transform: scale(1); } }
@keyframes enter-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes enter-fade { from { opacity: 0; } to { opacity: 1; } }

/* transition: façade panels sweep up over the screen, then lift away */
.shutters { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; visibility: hidden; }
.shutters i { display: block; background: #730a0a; transform: translateY(101%); }
.shutters i:nth-child(even) { background: #650909; }
.shutters.is-closing { visibility: visible; }
.shutters.is-closing i { animation: shutter-in 520ms cubic-bezier(.7, 0, .3, 1) both; }
.shutters.is-opening { visibility: visible; }
.shutters.is-opening i { transform: none; animation: shutter-out 640ms cubic-bezier(.7, 0, .3, 1) both; }
.shutters i:nth-child(1) { animation-delay: 0ms; } .shutters i:nth-child(2) { animation-delay: 55ms; } .shutters i:nth-child(3) { animation-delay: 110ms; }
.shutters i:nth-child(4) { animation-delay: 165ms; } .shutters i:nth-child(5) { animation-delay: 220ms; } .shutters i:nth-child(6) { animation-delay: 275ms; }
.shutters__mark { position: absolute; inset: 0; display: grid; place-items: center; color: #f2f3f0; font-weight: 500; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.01em; opacity: 0; }
.shutters.is-closing .shutters__mark { animation: enter-fade 300ms 420ms both; }
.shutters.is-opening .shutters__mark { opacity: 1; animation: mark-out 260ms both; }
@keyframes shutter-in { from { transform: translateY(101%); } to { transform: none; } }
@keyframes shutter-out { from { transform: none; } to { transform: translateY(-101%); } }
@keyframes mark-out { to { opacity: 0; } }
.is-arriving .intro .display { animation: enter-rise 1000ms 280ms var(--ease) both; }
.is-arriving .intro .display, .is-arriving .intro { overflow: hidden; }
.is-arriving .intro__aside { animation: enter-fade 800ms 650ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .enter__media video, .enter__media img, .enter__reveal > *, .enter__stage .button, .enter__top, .enter__foot { animation: none !important; transform: none; }
  .shutters { display: none; }
}

/* ---------- carbon tool ---------- */
.ct-note p { margin: 8px 0 0; max-width: var(--measure); }
.ct-phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.ct-phases li { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--space-6); min-width: 0; }
.ct-phases h3 { margin: var(--space-4) 0 var(--space-2); font-size: 20px; line-height: 26px; font-weight: 500; font-style: italic; color: var(--ink); }
.ct-phases p { margin: 0; font-size: 14px; line-height: 22px; }
.ct-tag { display: inline-block; font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--control-border); padding: 3px 8px; }
.ct-tag.is-open { color: var(--title); border-color: var(--title); }
.ct-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1000px) { .ct-layout { grid-template-columns: 340px minmax(0, 1fr); } .ct-controls { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; } }
.ct-panel { margin: 0; background: var(--paper-raised); border: 1px solid var(--hairline); padding: var(--space-6); min-width: 0; display: grid; gap: var(--space-4); align-content: start; }
.ct-results { display: grid; gap: var(--space-6); min-width: 0; }
.ct-control { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-bottom: 1px solid var(--hairline); }
.ct-control:last-child { border-bottom: 0; }
.ct-control.is-disabled { opacity: .55; }
.ct-control > label:not(.ct-toggle) { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 14px; font-weight: 500; color: var(--ink); }
.ct-control output { font-variant-numeric: tabular-nums; color: var(--title); font-weight: 500; }
.ct input[type="range"], .ct-control input[type="range"] { width: 100%; accent-color: var(--oxblood); margin: 0; height: 28px; }
.ct-control select, .ct-control textarea, .ct-mini input, .ct-mini select { width: 100%; font: 400 14px/20px var(--font-sans); color: var(--ink); background: var(--paper); border: 1px solid var(--control-border); border-radius: 2px; padding: 9px 10px; min-height: 40px; }
.ct-control textarea { font-variant-numeric: tabular-nums; resize: vertical; }
.ct-toggle { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; }
.ct-toggle input { width: 18px; height: 18px; accent-color: var(--oxblood); }
.ct-sub { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ct-mini { display: grid; gap: 4px; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.ct-help { font-size: 12px; line-height: 18px; color: var(--ink-muted); margin: 0; }
.ct-small { font-size: 14px; line-height: 22px; margin: 0; }
.ct-small p { margin: 0 0 10px; }
.ct-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.ct-metrics--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-metric { display: grid; gap: 4px; padding: var(--space-4); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--paper-raised); min-width: 0; }
.ct-metric strong { font-size: 26px; line-height: 32px; font-weight: 500; color: var(--title); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ct-plan canvas { width: 100%; height: auto; display: block; border: 1px solid var(--hairline); }
.ct-warn { margin: 0; font-size: 13px; line-height: 20px; padding: var(--space-4); border-left: 2px solid var(--title); background: var(--panel); }
.ct-two { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .ct-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-tablewrap { overflow-x: auto; max-width: 100%; }
.ct-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.ct-table th, .ct-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.ct-table th { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.ct-table .num, .ct-bar .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-use { padding-block: var(--space-4); border-bottom: 1px solid var(--hairline); display: grid; gap: var(--space-2); }
.ct-use__name { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 14px; font-weight: 500; color: var(--ink); }
.ct-use__controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ct-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 90px; gap: var(--space-4); align-items: center; font-size: 13px; padding-block: 6px; }
.ct-bar__track { height: 8px; background: var(--panel); display: block; }
.ct-bar__track i { display: block; height: 100%; background: var(--title); }
.ct-bar__track.is-b i { background: var(--ink); }
.ct-bar__track.is-c i { background: var(--ink-muted); }
@media (max-width: 600px) { .ct-bar { grid-template-columns: 100px minmax(0, 1fr) 70px; } }
.ct-code { margin: 0; white-space: pre-wrap; overflow: auto; max-height: 320px; background: var(--paper); border: 1px solid var(--hairline); padding: var(--space-4); font: 12px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.ct-file { justify-self: start; cursor: pointer; }
.ct-list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 22px; display: grid; gap: var(--space-2); }
.ct-derive { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--hairline); }
.ct-derive > div { display: grid; gap: 6px; }
.ct-derive strong { font-size: 24px; line-height: 30px; font-weight: 500; color: var(--title); }
.ct-sources { list-style: none; margin: 0; padding: 0; columns: 2 320px; column-gap: var(--space-10); font-size: 14px; line-height: 22px; }
.ct-sources li { break-inside: avoid; margin-bottom: var(--space-4); }

/* ---------- wide hero (pannable on small screens) ---------- */
.hero-figure--wide .hero-pan { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; background: transparent; scrollbar-width: thin; }
.hero-figure--wide button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.hero-figure--wide img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.hero-pan__hint { display: none; }
@media (max-width: 1099px) {
  .hero-figure--wide button { width: max-content; }
  .hero-figure--wide img { width: auto; height: clamp(240px, 42vh, 420px); max-width: none; }
  .hero-pan__hint { display: inline; }
}
.hover-list__thumb.is-contain img, .hover-list__preview img.is-contain { object-fit: contain; padding: 4%; background: var(--paper-raised); }
.hover-list__preview figcaption:empty { display: none; }

/* ---------- small-screen fixes ---------- */
.portrait { width: 100%; height: auto; }
.about-grid > *, .overview > *, .chapter__head > *, .cv > *, .contact__grid > * { min-width: 0; }
.contact dd a { display: inline-flex; align-items: center; min-height: 44px; }
.prose .link, .approach .link { display: inline-block; padding-block: 10px; }
.ct-toggle input { width: 22px; height: 22px; }
@media (max-width: 479px) {
  .site-header .wrap { gap: var(--space-2); }
  .nav { gap: 0; }
  .wordmark { font-size: 17px; }
  .menu-button > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-button { padding: 0 6px; min-width: 44px; justify-content: center; }
  .project-head__row .meta { flex-basis: 100%; }
  .cv__item { grid-template-columns: 1fr; gap: var(--space-1); }
  .ct-sub, .ct-use__controls { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .grow__line { font-size: 16px; line-height: 24px; }
}
@media (max-width: 359px) { .wordmark { font-size: 15px; } .facts { grid-template-columns: 1fr; } }
/* tablets: two-column layouts kick in a little later so text keeps room */
@media (min-width: 720px) and (max-width: 1099px) {
  .hover-list__thumb { max-width: 640px; }
  .gallery { gap: var(--space-10); }
}
.contact__email { display: inline-block; padding-block: 8px; }
@media (min-width: 600px) and (max-width: 999px) {
  .ct-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .ct-controls > .label, #polyInputs { grid-column: 1 / -1; }
  #rectInputs { display: contents; }
  .ct-control:last-child { border-bottom: 1px solid var(--hairline); }
}

/* home hero shown in full straight away (no grow-on-scroll) */
.grow.is-static { height: auto; }
.grow.is-static .grow__sticky { position: relative; height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px; }
.grow.is-static .grow__media { clip-path: none; }
.grow.is-static .grow__media img { transform: none; }
.grow.is-static .grow__shade, .grow.is-static .grow__text { opacity: 1; transform: none; }
.grow.is-static .grow__cue { display: none; }
.is-arriving .grow.is-static .grow__media img { animation: enter-drift 1600ms var(--ease) both; transform: scale(1.04); }
@media (max-width: 719px) { .grow.is-static .grow__sticky { height: auto; min-height: 0; max-height: none; display: grid; } .grow.is-static .grow__media { position: relative; aspect-ratio: 4 / 3; } .grow.is-static .grow__shade { display: none; } .grow.is-static .grow__text { position: relative; padding-top: var(--space-6); } }
.enter__links { display: inline-flex; gap: var(--space-6); }
@media (max-width: 899px) { .nav .nav-pdf { display: none; } }

/* carbon tool: how it works animation */
.ct-how__grid { display: grid; gap: var(--space-10); align-items: center; }
.ct-how__media { margin: 0; display: grid; place-items: center; }
.ct-how__media img { width: auto; max-width: 100%; max-height: min(78vh, 760px); height: auto; background: transparent; }
.ct-steps { list-style: none; margin: var(--space-10) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--hairline); counter-reset: step; }
.ct-steps li { display: grid; grid-template-columns: 2.5em 9em minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--hairline); counter-increment: step; font-size: 15px; line-height: 24px; }
.ct-steps li::before { content: counter(step, decimal-leading-zero); color: var(--title); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .ct-steps li { grid-template-columns: 2.5em minmax(0, 1fr); } .ct-steps li > span:last-child { grid-column: 2; } .ct-how__media img { max-height: 60vh; } }
@media (min-width: 900px) { .ct-how__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); } }

/* home hero: whole image visible, faded into the page at top and bottom */
.grow.is-static .grow__sticky { height: auto; min-height: 0; max-height: none; overflow: hidden; }
.grow.is-static .grow__media { position: relative; inset: auto; }
.grow.is-static .grow__media img { width: 100%; height: auto; object-fit: contain; display: block; }
.grow.is-static .grow__shade { display: block; background:
  linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 9%, transparent 22%),
  linear-gradient(0deg, var(--paper) 0%, var(--paper) 6%, color-mix(in srgb, var(--paper) 80%, transparent) 26%, transparent 55%); }
.grow.is-static .grow__text { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 0; }
@media (max-width: 719px) {
  .grow.is-static .grow__media { aspect-ratio: auto; }
  .grow.is-static .grow__shade { background:
    linear-gradient(180deg, var(--paper) 0%, transparent 20%),
    linear-gradient(0deg, var(--paper) 0%, transparent 25%); }
  .grow.is-static .grow__text { position: relative; padding-top: var(--space-4); }
}

/* Chapter tabs: pinned under the header so any section is one tap away */
.chapters { position: relative; margin-top: var(--space-16); }
.chapter-tabs { position: sticky; top: calc(72px + env(safe-area-inset-top)); z-index: 20; background: var(--paper); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.chapter-tabs__inner { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chapter-tabs__inner::-webkit-scrollbar { display: none; }
.chapter-tab { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 10px; min-height: 52px; padding: 16px 22px 14px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.chapter-tab:first-child { padding-left: 0; }
.chapter-tab__n { font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.chapter-tab:hover { color: var(--ink); }
.chapter-tab[aria-selected="true"] { color: var(--title); border-bottom-color: var(--title); }
.chapter-tab:focus-visible { outline: 2px solid var(--title); outline-offset: -2px; }
.chapters .chapter { border-top: 0; padding-top: 48px; scroll-margin-top: calc(72px + 54px + env(safe-area-inset-top)); }
.js .chapters .chapter[hidden] { display: none !important; }
.chapters .chapter.is-entering { animation: chapterIn .45s ease both; }
@keyframes chapterIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.chapter-nav .button.is-current { background: var(--title); color: var(--on-oxblood, var(--paper)); border-color: var(--title); }
@media (max-width: 600px) { .chapter-tab { padding: 14px 16px 12px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .chapters .chapter.is-entering { animation: none; } }
@media (max-width: 480px) {
  .chapter-tabs__inner { justify-content: space-between; }
  .chapter-tab { padding: 14px 6px 12px; font-size: 12px; letter-spacing: .03em; gap: 6px; }
  .chapter-tab:last-child { padding-right: 0; }
  .chapter-tab__n { display: none; }
}

/* End-of-section navigation: nothing gets missed */
.chapter-end { margin-top: var(--space-16); border-top: 1px solid var(--hairline); padding-top: var(--space-10); display: grid; gap: 32px; }
.chapter-end__msg { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.chapter-end__next { display: grid; gap: 12px; padding: var(--space-10) 32px; background: var(--panel); color: inherit; text-decoration: none; border: 1px solid transparent; transition: border-color 250ms var(--ease), background-color 250ms var(--ease); position: relative; }
.chapter-end__next::after { content: "→"; position: absolute; right: 32px; bottom: 32px; font-size: clamp(28px, 4vw, 48px); line-height: 1; color: var(--title); transition: transform 250ms var(--ease); }
.chapter-end__next:hover, .chapter-end__next:focus-visible { border-color: var(--title); }
.chapter-end__next:hover::after { transform: translateX(8px); }
.chapter-end__title { font-size: clamp(36px, 6vw, 88px); line-height: 1; font-weight: 500; letter-spacing: -.03em; color: var(--title); padding-right: 56px; }
.chapter-end__code { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chapter-end__all { display: grid; gap: var(--space-4); }
.chapter-end__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chapter-end__buttons .button.is-current { pointer-events: none; }
.is-seen:not(.chapter-end__next)::after { content: "✓"; margin-left: 6px; font-size: .9em; color: var(--title); }
.chapter-tab.is-seen::after { margin-left: 4px; }
@media (max-width: 600px) { .chapter-end__next { padding: 32px var(--space-6); } .chapter-end__next::after { right: var(--space-6); bottom: var(--space-6); } }
.chapter-end > *, .chapter-end__next > * { min-width: 0; }
@media (max-width: 480px) { .chapter-end__title { font-size: 30px; padding-right: 40px; overflow-wrap: anywhere; } }

/* Carbon tool: view switch, outline editor, 3D */
.ct-viewbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ct-seg { display: inline-flex; border: 1px solid var(--control-border); }
.ct-seg button { min-height: 40px; min-width: 68px; padding: 0 16px; font: 600 13px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; background: transparent; color: var(--ink); border: 0; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.ct-seg button + button { border-left: 1px solid var(--control-border); }
.ct-seg button[aria-pressed="true"] { background: var(--oxblood); color: var(--on-oxblood); }
.ct-seg button:focus-visible, .ct-tool:focus-visible, .ct-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ct-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ct-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ct-tools[hidden] { display: none !important; }
.ct-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: 500 13px/1 var(--font-sans); background: transparent; color: var(--ink); border: 1px solid var(--control-border); cursor: pointer; transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease; }
.ct-tool:hover:not(:disabled) { border-color: var(--oxblood); color: var(--oxblood); }
.ct-tool:disabled { opacity: .4; cursor: not-allowed; }
.ct-tool--primary { background: var(--oxblood); color: var(--on-oxblood); border-color: var(--oxblood); }
.ct-tool--primary:hover:not(:disabled) { color: var(--on-oxblood); background: var(--oxblood-deep); }
.ct-tool--quiet { margin-left: auto; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.ct-tool--check input { width: 16px; height: 16px; accent-color: var(--oxblood); margin: 0; }
.ct-stage { position: relative; display: grid; gap: var(--space-2); }
.ct-stage canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ct-3d { position: relative; width: 100%; aspect-ratio: 1200 / 760; border: 1px solid var(--hairline); background: var(--paper-raised); overflow: hidden; }
.ct-3d canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; cursor: grab; }
.ct-3d canvas:active { cursor: grabbing; }
.ct-3d__msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--muted); font-size: 14px; }
.ct-edhint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ct-edhint.is-alert { color: var(--title); font-weight: 600; }
.ct-subhead { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.ct-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.ct-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; font: 500 13px/1.1 var(--font-sans); text-align: left; background: transparent; color: var(--ink); border: 1px solid var(--hairline); cursor: pointer; transition: border-color 200ms ease, color 200ms ease; }
.ct-chip:hover { border-color: var(--oxblood); color: var(--oxblood); }
.ct-chip svg { flex: 0 0 auto; width: 22px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: miter; }
.ct-howto { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ct-howto strong { color: var(--ink); font-weight: 600; margin-right: 4px; }
.ct-coords { border-top: 1px solid var(--hairline); padding-top: var(--space-4); }
.ct-coords summary { cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink); min-height: 32px; display: flex; align-items: center; gap: 8px; }
.ct-coords summary::marker { color: var(--title); }
.ct-coords[open] summary { margin-bottom: var(--space-2); }
.ct-coords textarea { width: 100%; font: 400 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 600px) { .ct-tool--quiet { margin-left: 0; } .ct-tool, .ct-seg button { min-height: 44px; } }
@media (max-width: 600px) { .ct-tool--quiet { padding-left: 0; } }
.ct-share { display: grid; gap: 8px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--hairline); }
.ct-share__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ct-share__row .ct-tool--primary { flex: 1 1 auto; justify-content: center; }
.ct-help.is-ok { color: var(--title); font-weight: 600; }
.ct-share__note { color: var(--title); }
/* Carbon: stacked breakdown, SCORS scale, member sizes */
.ct-stack { display: grid; gap: var(--space-4); }
.ct-stack__bar { display: flex; height: 18px; background: var(--panel); overflow: hidden; }
.ct-stack__bar i { display: block; height: 100%; transition: width 300ms var(--ease); }
.ct-stack__bar i + i { box-shadow: inset 2px 0 0 var(--paper-raised); }
.ct-stack__key { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.ct-stack__key li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 44px; gap: 10px; align-items: center; }
.ct-sw { width: 12px; height: 12px; display: block; }
.is-clt { background: var(--viz-1); } .is-beam { background: var(--viz-2); } .is-col { background: var(--viz-3); } .is-conn { background: var(--viz-4); }

.ct-scors { display: grid; gap: var(--space-4); padding-top: 34px; }
.ct-scors__bar { position: relative; display: flex; gap: 2px; }
.ct-scors__band { display: grid; gap: 2px; padding: 8px 4px; background: var(--panel); text-align: center; min-width: 0; }
.ct-scors__band b { font-size: 13px; font-weight: 600; }
.ct-scors__band small { font-size: 10px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-scors__band.is-on { background: var(--oxblood); color: var(--on-oxblood); }
.ct-scors__band.is-on small { color: inherit; opacity: .85; }
.ct-scors__mark { position: absolute; top: -30px; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); transition: left 300ms var(--ease); }
.ct-scors__mark span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; font-style: normal; background: var(--ink); color: var(--paper); padding: 2px 6px; white-space: nowrap; }
.ct-scors__read { margin: 0; font-size: 13px; line-height: 20px; }
.ct-sizes { margin-top: var(--space-6); }
.ct-metric.is-alert strong { color: var(--title); }
.ct-metric.is-alert { background: var(--panel); box-shadow: inset 3px 0 0 var(--title); }
@media (max-width: 600px) { .ct-scors__band small { display: none; } .ct-scors__band { padding: 8px 0; } .ct-scors__band b { font-size: 11px; } }
/* Chart series colours (validated categorical slots 1–4; light and dark steps) */
:root { --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; } }
:root[data-theme="dark"] { --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; }
/* Compare options */
.ct-chart { position: relative; }
.ct-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ct-chart .ax { font: 500 12px var(--font-sans); fill: var(--ink-muted); }
.ct-chart .grid { stroke: var(--hairline); stroke-width: 1; }
.ct-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ct-chart .lbl { font: 600 12px var(--font-sans); fill: var(--ink); }
.ct-chart .note { font: 500 11px var(--font-sans); fill: var(--ink-muted); }
.ct-chart .xh { stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ct-tip { position: absolute; pointer-events: none; background: var(--paper-raised); border: 1px solid var(--hairline); padding: 8px 10px; font-size: 12px; line-height: 1.5; color: var(--ink); white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); z-index: 2; }
.ct-tip b { font-weight: 600; }
.ct-tip i { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 6px; }
.ct-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; margin: 0; padding: 0; list-style: none; }
.ct-legend li { display: inline-flex; align-items: center; gap: 8px; }
.ct-legend i { width: 16px; height: 2px; display: block; }
.ct-opts { width: 100%; border-collapse: collapse; font-size: 13px; }
.ct-opts th, .ct-opts td { padding: 10px 8px; border-bottom: 1px solid var(--hairline); text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }
.ct-opts th:first-child, .ct-opts td:first-child { text-align: left; color: var(--ink-muted); font-weight: 500; }
.ct-opts thead th { font-size: 14px; color: var(--ink); font-weight: 600; }
.ct-opts .is-best { color: var(--title); }
.ct-opts .ct-tag-best { display: inline-block; margin-top: 4px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--title); }
.ct-opt-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ct-opt-actions button { font: 500 12px var(--font-sans); background: none; border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; min-height: 32px; }
.ct-opt-actions button:hover { color: var(--title); }
.ct-empty { margin: 0; padding: var(--space-6); border: 1px dashed var(--hairline); color: var(--ink-muted); font-size: 14px; text-align: center; }
/* Whole-building builder */
.ct-build { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; margin-top: var(--space-10); }
.ct-build__side { display: grid; gap: var(--space-4); min-width: 0; }
.ct-build__stage { min-width: 0; height: 100%; }
.ct-build__sticky { position: sticky; top: calc(72px + 16px + env(safe-area-inset-top)); display: grid; gap: var(--space-3, 12px); }
.ct-build__totals { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.ct-tot { background: var(--paper-raised); padding: 16px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.ct-tot strong { font-size: clamp(26px, 3vw, 36px); font-weight: 500; line-height: 1.05; color: var(--title); font-variant-numeric: tabular-nums; }
.ct-tot--big { background: var(--panel); }
.ct-tot--big strong { font-size: clamp(34px, 4vw, 48px); }
.ct-tot--ledger { grid-column: 1 / -1; }
.ct-tot--ledger strong { color: var(--ink); font-size: 22px; }
.ct-meter { position: relative; display: block; height: 6px; background: var(--panel); margin: 18px 0 14px; }
.ct-meter > i { position: absolute; inset: 0 auto 0 0; background: var(--title); transition: width 300ms var(--ease); }
.ct-meter b { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.ct-meter b em { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font: 500 10px/1.2 var(--font-sans); font-style: normal; color: var(--ink-muted); white-space: nowrap; }
.ct-meter b:nth-of-type(2) em { top: -16px; }
.ct-asp { border: 1px solid var(--hairline); background: var(--paper-raised); }
.ct-asp + .ct-asp { margin-top: -1px; }
.ct-asp summary { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; min-height: 52px; }
.ct-asp summary::-webkit-details-marker { display: none; }
.ct-asp summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ct-asp__sw { width: 12px; height: 12px; display: block; }
.ct-asp__name { font-weight: 600; font-size: 15px; }
.ct-asp__val { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.ct-asp__val::after { content: '+'; display: inline-block; width: 16px; text-align: right; color: var(--title); font-weight: 600; }
.ct-asp[open] .ct-asp__val::after { content: '−'; }
.ct-asp__bar { grid-column: 2 / -1; height: 3px; background: var(--panel); }
.ct-asp__bar i { display: block; height: 100%; transition: width 300ms var(--ease); }
.ct-asp__body { padding: 4px 16px 16px; display: grid; gap: 14px; border-top: 1px solid var(--hairline); }
.ct-asp__body .ct-control { margin: 0; padding-top: 10px; }
.ct-comps { list-style: none; margin: 4px 0 0; padding: 0; font-size: 13px; }
.ct-comps li { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; gap: 8px; padding: 9px 8px; border-top: 1px solid var(--hairline); cursor: pointer; align-items: baseline; }
.ct-comps li:hover, .ct-comps li.is-on { background: var(--panel); }
.ct-comps li.is-on { box-shadow: inset 3px 0 0 var(--title); }
.ct-comps li:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ct-comps .num { text-align: right; font-variant-numeric: tabular-nums; }
.ct-comps__key { cursor: default !important; background: none !important; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); text-align: right; padding-top: 4px !important; }
.ct-comps__none { cursor: default !important; color: var(--ink-muted); display: block !important; }
.ct-build__extra .ct-control { margin-top: 12px; }
.ct-3d--build { aspect-ratio: auto; height: min(68vh, 640px); }
.ct-3d--build canvas { height: 100% !important; }
.ct-explode { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; flex: 1 1 200px; max-width: 320px; }
.ct-explode input { flex: 1; accent-color: var(--oxblood); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chips .ct-chip { min-height: 32px; font-size: 12px; padding: 0 10px; gap: 6px; }
.ct-chips .ct-chip i { width: 8px; height: 8px; display: block; }
.ct-chips .ct-chip.is-on { border-color: var(--oxblood); color: var(--oxblood); background: var(--panel); }
.ct-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ct-lab { position: absolute; transform: translate(14px, -50%); display: grid; padding: 4px 8px 4px 10px; background: var(--paper-raised); border-left: 2px solid var(--title); font-size: 11px; line-height: 1.3; white-space: nowrap; box-shadow: 0 0 0 1px var(--hairline); }
.ct-lab::before { content: ''; position: absolute; left: -16px; top: 50%; width: 14px; height: 1px; background: var(--title); }
.ct-lab b { font-weight: 600; } .ct-lab span { color: var(--ink-muted); }
.ct-hover { position: absolute; background: var(--ink); color: var(--paper); font-size: 12px; padding: 4px 8px; white-space: nowrap; }
.ct-legend3d { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; max-width: calc(100% - 20px); pointer-events: none; }
.ct-legend3d span { display: inline-flex; align-items: center; gap: 4px; background: var(--paper-raised); padding: 2px 6px; }
.ct-legend3d i { width: 8px; height: 8px; display: block; }
.ct-legend3d .ct-heat { width: 90px; height: 8px; background: linear-gradient(90deg, hsl(7 55% 88%), hsl(7 80% 26%)); }
.ct-inspector { border: 1px solid var(--hairline); background: var(--paper-raised); padding: 16px; display: grid; gap: 12px; }
.ct-insp__head { display: flex; justify-content: space-between; align-items: center; }
.ct-insp__asp { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.ct-insp__asp i { width: 10px; height: 10px; display: block; }
.ct-insp__x { width: 36px; height: 36px; border: 1px solid var(--control-border); background: none; color: var(--ink); font-size: 20px; cursor: pointer; }
.ct-insp__name { margin: 0; font-size: 20px; font-weight: 500; color: var(--title); }
.ct-insp__big { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct-insp__big div { display: grid; gap: 2px; } .ct-insp__big strong { font-size: 26px; font-weight: 500; }
.ct-insp__t td, .ct-insp__t th { font-size: 12px; }
.ct-insp__mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hairline); margin: 0; border: 1px solid var(--hairline); }
.ct-insp__mods div { background: var(--paper-raised); padding: 8px; } .ct-insp__mods dt { font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; } .ct-insp__mods dd { margin: 2px 0 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.ct-alts { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ct-alts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); }
.ct-alts .is-good { color: var(--title); font-weight: 600; }
.ct-alts button { font: 500 12px var(--font-sans); background: none; border: 1px solid var(--control-border); color: var(--ink); padding: 6px 10px; min-height: 32px; cursor: pointer; }
.ct-alts button:hover { border-color: var(--oxblood); color: var(--oxblood); }
@media (max-width: 900px) {
  .ct-build { grid-template-columns: 1fr; }
  .ct-build__stage { order: -1; }
  .ct-build__sticky { position: relative; top: 0; }
  .ct-3d--build { height: 62vw; min-height: 300px; }
  .ct-insp__mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Results and exports */
.ct-exports { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-8) 0 var(--space-6); }
.ct-exports .ct-help { flex: 1 1 100%; margin: 4px 0 0; }
.ct-exports label.ct-tool { cursor: pointer; }
.ct-mods td { padding: 8px 6px; font-size: 13px; }
.ct-mods__bar { width: 34%; } .ct-mods__bar i { display: block; height: 8px; background: var(--viz-1); }
.ct-hot { list-style: none; margin: 0; padding: 0; counter-reset: hot; }
.ct-hot li { counter-increment: hot; border-top: 1px solid var(--hairline); }
.ct-hot button { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 4px; background: none; border: 0; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ct-hot button::before { content: counter(hot, decimal-leading-zero); font-size: 11px; color: var(--title); font-weight: 600; }
.ct-hot button:hover { background: var(--panel); }
.ct-hot small { display: block; font-size: 11px; color: var(--ink-muted); }
.ct-hot .num { text-align: right; font-variant-numeric: tabular-nums; }
.ct-bench td { font-size: 13px; vertical-align: top; }
.ct-bench .is-pass { color: var(--title); font-weight: 600; } .ct-bench .is-fail { color: var(--ink-muted); }
@media (max-width: 600px) { .ct-exports .ct-tool { flex: 1 1 100%; justify-content: center; } .ct-bench td, .ct-bench th { padding: 8px 4px; } }
.ct-two > .ct-panel, #benchTable, #moduleTable { min-width: 0; }
/* Light study */
.ct-light { border: 1px solid var(--hairline); background: var(--paper-raised); padding: 16px; display: grid; gap: 14px; }
.ct-light__row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.ct-light__row .ct-mini { flex: 1 1 180px; display: grid; gap: 6px; }
.ct-light__row .ct-mini output { font-weight: 600; color: var(--title); margin-left: 6px; }
.ct-light__row input[type=range] { width: 100%; accent-color: var(--oxblood); }
.ct-light__wide { flex: 3 1 260px !important; }
.ct-light__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-light__quick .ct-chip { min-height: 36px; font-size: 12px; }
.ct-light__read { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.ct-light__read div { background: var(--paper); padding: 8px 10px; display: grid; gap: 2px; min-width: 0; }
.ct-light__read strong { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ct-light__t td, .ct-light__t th { font-size: 13px; }
#lsPlay[aria-pressed="true"] { background: var(--oxblood); color: var(--on-oxblood); border-color: var(--oxblood); }
@media (max-width: 600px) { .ct-light__read { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ct-build .ct-seg { display: flex; width: 100%; } .ct-build .ct-seg button { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 12px; letter-spacing: .03em; } .ct-explode { max-width: none; flex-basis: 100%; } .ct-build__sticky, .ct-build__stage { min-width: 0; } }
.ct-build__sticky > * { min-width: 0; }

/* ---- Carbon tool workspace (v3.1): stepped settings + one viewer ---- */
.ct-work { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 1000px) { .ct-work { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); } }
@media (min-width: 1000px) and (min-height: 900px) { .ct-viewer__sticky { position: sticky; top: 88px; } }
.ct-steps, .ct-viewer, .ct-viewer__sticky { min-width: 0; display: grid; gap: var(--space-4); align-content: start; }
.ct-steps__tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--control-border); }
.ct-steps__tab { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; min-height: 56px; background: transparent; color: var(--ink); border: 0; font: 600 12px/1.15 var(--font-sans); text-align: center; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.ct-steps__tab + .ct-steps__tab { border-left: 1px solid var(--control-border); }
.ct-steps__tab span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; font-variant-numeric: tabular-nums; }
.ct-steps__tab[aria-selected="true"] { background: var(--oxblood); color: var(--on-oxblood); }
.ct-steps__tab:hover:not([aria-selected="true"]) { background: var(--paper-raised); }
.ct-steps__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; position: relative; }
.ct-step { display: grid; gap: var(--space-4); }
.ct-step[hidden] { display: none; }
.ct-step__lead { margin: 0; color: var(--ink-muted, var(--ink)); font-size: 15px; line-height: 1.5; }
.ct-group { border: 1px solid var(--hairline); background: var(--paper-raised); padding: 16px; display: grid; gap: 12px; min-width: 0; }
.ct-group__t { font: 600 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--title); }
.ct-group .ct-control { margin: 0; }
.ct-group > div:empty { display: none; }
.ct-step__nav { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.ct-more { border: 1px solid var(--hairline); background: var(--paper-raised); }
.ct-more > summary { cursor: pointer; padding: 14px 16px; font: 600 14px/1.3 var(--font-sans); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ct-more > summary::-webkit-details-marker { display: none; }
.ct-more > summary::after { content: "+"; font-weight: 400; font-size: 18px; line-height: 1; }
.ct-more[open] > summary::after { content: "–"; }
.ct-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ct-more__body { padding: 0 16px 16px; display: grid; gap: 12px; min-width: 0; overflow-x: auto; }
.ct-sharebox { display: grid; gap: 8px; }
.ct-viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ct-viewbar .ct-explode[hidden] { display: none; }
.ct-stage { position: relative; min-width: 0; }
.ct-stage canvas#plan { width: 100%; height: auto; display: block; border: 1px solid var(--hairline); }
.ct-stage .ct-3d--build { aspect-ratio: 1200 / 760; height: auto; }
.ct-stage .ct-3d[hidden], .ct-stage canvas[hidden] { display: none; }
.ct-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; }
.ct-viewer .ct-build__totals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ct-viewer .ct-tot { padding: 12px; }
.ct-viewer .ct-tot strong, .ct-viewer .ct-tot--big strong { font-size: clamp(20px, 2vw, 28px); }
.ct-viewer .ct-tot--ledger { grid-column: 1 / -1; }
.ct-viewer .ct-tot--ledger { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; }
.ct-viewer .ct-tot--ledger strong { font-size: 17px; }
@media (max-width: 760px) { .ct-viewer .ct-build__totals { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .ct-modes { display: flex; width: 100%; } .ct-modes button { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 11px; letter-spacing: .02em; }
  .ct-steps__tab { font-size: 10.5px; padding: 8px 2px; } .ct-explode { flex-basis: 100%; max-width: none; }
}
@media (max-width: 999px) { .ct-viewer { order: -1; } }

/* ---- Drawings (v3.1) ---- */
.ct-dwg { display: grid; gap: var(--space-3); min-width: 0; }
.ct-dwg__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ct-dwg__level[hidden] { display: none; }
.ct-dwg__tools { margin-left: auto; }
.ct-dwg__sheet { position: relative; background: #fff; border: 1px solid var(--hairline); aspect-ratio: 420 / 297; overflow: hidden; touch-action: pan-y; user-select: none; }
.ct-dwg__sheet.is-zoomed { cursor: grab; touch-action: none; }
.ct-dwg__sheet.is-zoomed:active { cursor: grabbing; }
.ct-dwg__sheet svg { display: block; width: 100%; height: 100%; }
.ct-dwg__sheet:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ct-dwg__sheet .ct-3d__msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #555; }
@media (max-width: 600px) { .ct-dwg__tabs { display: flex; width: 100%; } .ct-dwg__tabs button { flex: 1 1 0; min-width: 0; padding: 0 4px; font-size: 11px; letter-spacing: .02em; } .ct-dwg__tools { margin-left: 0; } }