/* Burkett Investments: site styles.
   Source of truth: src/assets/site.css (copied to dist/assets/site.css by src/build_site.py).
   The palette is the house's own paint: Alabaster ground, Urbane Bronze type, Accessible Beige blocks
   and rules, with board-and-batten black and white oak as the two accents. One light look, every color set. */

:root {
  /* Paint, Sherwin-Williams (screen approximations of SW 7008, 7036, 7048) */
  --alabaster: #EDEAE0;
  --alabaster-hi: #F4F2EC;      /* a half-step lighter, for insets that must read as paper on paper */
  --beige: #D1C7B8;             /* Accessible Beige */
  --beige-soft: #E0D9CD;        /* beige at roughly half strength, for quiet blocks */
  --bronze: #54504A;            /* Urbane Bronze: body type */
  --bronze-deep: #34312D;       /* display type, a touch deeper than the paint so serifs hold */
  --muted: #5C564E;             /* secondary type; 6.0:1 on Alabaster, 5.2:1 on the beige band */
  /* Accents pulled from the house */
  --batten: #1F1E1C;            /* the black board-and-batten */
  --batten-2: #2A2825;
  --oak: #B5875A;               /* white oak, decorative only */
  --oak-ink: #74492A;           /* oak deepened for small labels; 6.4:1 on Alabaster, 5.5:1 on the beige band */
  --on-dark: #EDEAE0;
  --on-dark-muted: #B8B0A3;
  --rule: #CDC3B3;
  --white: #FFFFFF;
  --paper: #F4F0E8;              /* the warm card behind the studio cut-outs */

  /* Type */
  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;   /* display only: 32 px and up */
  --serif-text: "Source Serif 4", "Source Serif Pro", Georgia, serif;     /* titles, ledes and names below 32 px */
  --sans: "Source Sans 3", "Source Sans Pro", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 0.8125rem;                                 /* 13  small-caps labels */
  --fs-sm: 0.9375rem;                                 /* 15  captions, card text */
  --fs-base: 1.125rem;                                /* 18  body (17 on phones) */
  --fs-md: 1.25rem;                                   /* 20  deks */
  --fs-lg: clamp(1.3125rem, 1.15rem + 0.5vw, 1.5rem); /* 21-24 text-serif ledes and h3 */
  --fs-xl: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);      /* 32-44 h2, the smallest Bodoni */
  --fs-2xl: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);  /* 36-68 h1 */
  --fs-3xl: clamp(2.75rem, 1rem + 6.6vw, 7.5rem);     /* 44-120 cover */
  --lh-body: 1.6;
  --track-label: 0.14em;

  /* Space: a 4 px base, doubling where it matters */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(72px, 9vw, 144px);

  /* Grid: 12 columns inside a 1280 px measure (the native width of the 2026 photographs) */
  --page: 1280px;
  --gutter: clamp(16px, 5vw, 72px);
  --gap: clamp(12px, 1.5vw, 20px);
  --col-gap: clamp(16px, 2.5vw, 40px);
  --measure: 66ch;
}

/* Reset, kept small */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--alabaster);
  color: var(--bronze);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--bronze-deep); }
::selection { background: var(--beige); color: var(--batten); }
:focus-visible { outline: 2px solid var(--oak-ink); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -60px; background: var(--batten); color: var(--on-dark); padding: var(--s-2) var(--s-4); z-index: 50; }
.skip:focus { top: var(--s-4); }

/* Layout */
.wrap { width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(54rem + 2 * var(--gutter)); }
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.band + .section, .dark + .section, .section + .band, .section + .dark, .band + .band { padding-top: var(--section); }
.band { background: var(--beige-soft); }
.band + .section, .section + .band { }
.rule-top { border-top: 1px solid var(--rule); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }

/* Type */
.eyebrow {
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink);
  line-height: 1.4;
}
.display, .h1, .h2, .h3 { text-wrap: balance; font-family: var(--serif); font-weight: 400; color: var(--bronze-deep); font-optical-sizing: auto; }
.display { font-size: var(--fs-3xl); line-height: 0.96; letter-spacing: -0.015em; }
.h1 { font-size: var(--fs-2xl); line-height: 1.02; letter-spacing: -0.01em; }
.h2 { font-size: var(--fs-xl); line-height: 1.1; }
.h3 { font-size: var(--fs-lg); line-height: 1.2; }
.display em, .h1 em, .h2 em, .lede em { font-style: italic; }
.lede { text-wrap: pretty; font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.38; color: var(--bronze-deep); max-width: 30em; }
.dek { font-size: var(--fs-md); line-height: 1.55; color: var(--bronze); max-width: var(--measure); }
.prose p { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.small { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.caption, figcaption { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.link-arrow { display: inline-flex; gap: 0.5em; align-items: baseline; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bronze-deep); text-decoration: none; border-bottom: 1px solid var(--bronze); padding-bottom: 3px; }
.link-arrow::after { content: "\2192"; letter-spacing: 0; transition: transform .2s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* Header */
.site-head { border-bottom: 1px solid var(--rule); background: var(--alabaster); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 76px; }
.brand { display: flex; align-items: baseline; gap: 0.6em; text-decoration: none; color: var(--bronze-deep); flex-wrap: wrap; row-gap: 0; }
.brand-name { font-family: var(--sans); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.24em; text-transform: uppercase; }
.brand-by { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--muted); letter-spacing: 0; }
.primary-nav { display: flex; gap: var(--s-5); }
.primary-nav a, .sub-nav a { font-size: var(--fs-sm); text-decoration: none; color: var(--bronze); padding-block: var(--s-2); border-bottom: 1px solid transparent; white-space: nowrap; }
.primary-nav a:hover, .sub-nav a:hover { border-bottom-color: var(--bronze); }
.primary-nav a[aria-current], .sub-nav a[aria-current] { color: var(--bronze-deep); border-bottom-color: var(--oak); }
.sub-nav-wrap { border-top: 1px solid var(--rule); }
.sub-nav { display: flex; align-items: center; gap: var(--s-5); min-height: 48px; overflow-x: auto; scrollbar-width: none; }
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav .proj { font-family: var(--serif); font-style: italic; color: var(--bronze-deep); font-size: 1rem; margin-right: var(--s-3); white-space: nowrap; }

/* Footer */
.site-foot { background: var(--batten); color: var(--on-dark-muted); padding-block: var(--s-9) var(--s-7); margin-top: var(--section); }
.site-foot a { color: var(--on-dark); }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); }
.foot-brand { grid-column: span 5; }
.foot-brand .brand-name { color: var(--on-dark); display: block; }
.foot-brand .brand-by { color: var(--on-dark-muted); display: block; margin-top: var(--s-2); }
.foot-brand p { margin-top: var(--s-5); max-width: 26em; font-size: var(--fs-sm); }
.foot-col { grid-column: span 3; font-size: var(--fs-sm); }
.foot-col .eyebrow { color: var(--on-dark-muted); margin-bottom: var(--s-3); }
.foot-col li + li { margin-top: var(--s-1); }
.foot-col a { text-decoration: none; }
.foot-col a:hover { text-decoration: underline; color: var(--white); }
.foot-legal { grid-column: 1 / -1; border-top: 1px solid #3A3733; padding-top: var(--s-5); font-size: var(--fs-sm); letter-spacing: 0.01em; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); justify-content: space-between; }

/* Photographs */
.ph { position: relative; background: var(--beige-soft); }
.ph img { width: 100%; height: auto; }
.ph figcaption { margin-top: var(--s-3); }
.ph-cap { padding-top: var(--s-3); }
.full { max-width: var(--page); }

/* Justified rows: each figure's width is proportional to its aspect ratio, so heights match without cropping */
.jrow { display: flex; gap: var(--gap); align-items: flex-start; }
.jrow > figure { flex: var(--ar) 1 0%; min-width: 0; }
.spread-pics .solo-portrait { max-width: 460px; margin-left: auto; }
.spread.flip .spread-pics .solo-portrait { margin-left: 0; }
.stack > * + * { margin-top: var(--gap); }
.story > * + * { margin-top: clamp(var(--gap), 3vw, 40px); }

/* Cover */
.cover { padding-top: clamp(var(--s-5), 3vw, var(--s-7)); }
.cover-fig { position: relative; }
.cover-title { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-3); align-items: end; padding-top: clamp(var(--s-6), 4vw, var(--s-8)); }
.cover-title .eyebrow { grid-column: 1 / -1; }
.cover-title .display { grid-column: 1 / span 9; white-space: nowrap; }
.cover-title .cover-kicker { grid-column: 10 / -1; margin: 0 0 0.6em; font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.5rem); line-height: 1.3; }
.cover-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--muted); }
.cover-kicker { font-family: var(--serif); font-style: italic; color: var(--bronze); }

/* Section heads */
.sec-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); align-items: end; margin-bottom: clamp(var(--s-7), 6vw, var(--s-9)); }
.sec-head .eyebrow { grid-column: 1 / -1; }
.sec-head .h1 { grid-column: 1 / span 7; }
.sec-head .dek { grid-column: 8 / -1; }
.sec-head.solo .h1 { grid-column: 1 / span 10; }

/* Project intro */
.intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); }
.intro-text { grid-column: 1 / span 7; }
.intro-text .lede { margin-bottom: var(--s-6); }
.intro-aside { grid-column: 9 / -1; }
.facts { border-top: 1px solid var(--bronze); }
.facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.facts dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink); padding-top: 2px; }
.facts dd { color: var(--bronze-deep); }
.scope { margin-top: var(--s-7); max-width: var(--measure); }
.scope .eyebrow { margin-bottom: var(--s-3); }
.scope li { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); line-height: 1.45; display: grid; grid-template-columns: 1.2rem 1fr; }
.scope li::before { content: ""; width: 6px; height: 6px; background: var(--oak); margin-top: 0.5em; }
.place-note { margin-top: var(--s-7); font-size: var(--fs-sm); color: var(--muted); max-width: 30em; }
.place-note .eyebrow { display: block; margin-bottom: var(--s-2); }

/* Before and after */
.ba-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(var(--s-7), 6vw, var(--s-9)) var(--col-gap); }
.ba-list > .ba.wide { grid-column: 1 / -1; }
.ba-frame { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); position: relative; }
.ba-side { position: relative; margin: 0; }
.ba-side img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ba-ar, 3 / 2); background: var(--beige-soft); }
.ba-tag { position: absolute; top: var(--s-3); padding: 4px 9px; font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(31, 30, 28, 0.86); color: var(--alabaster); pointer-events: none; }
.ba-side .ba-tag, .ba-tag.b { left: var(--s-3); }
.ba-tag.a { right: var(--s-3); }
.ba-range, .ba-line, .ba-knob { display: none; }
.ba.is-small, .ba[style*='max-width'] { width: 100%; }
.ba-list > .ba.wide[style*='max-width'] { justify-self: center; }
.ba-cap { margin-top: var(--s-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
.ba-cap .h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); }
.ba-cap p { font-size: var(--fs-sm); color: var(--muted); max-width: 40em; }
.ba-note { font-style: italic; }
/* Live (scripted) state: stacked images, one clipped, a range input on top for pointer and keyboard */
.ba.is-live .ba-frame { display: block; aspect-ratio: var(--ba-ar, 3 / 2); overflow: hidden; background: var(--beige-soft); --pos: 50%; touch-action: pan-y; }
.ba.is-live .ba-side { position: absolute; inset: 0; }
.ba.is-live .ba-side .ba-tag { display: none; }
.ba.is-live .ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba.is-live .ba-tag.b, .ba.is-live .ba-tag.a { display: block; z-index: 3; }
.ba.is-live .ba-range { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; -webkit-appearance: none; appearance: none; }
.ba.is-live .ba-line { display: block; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--alabaster); z-index: 2; pointer-events: none; box-shadow: 0 0 0 1px rgba(31, 30, 28, 0.15); }
.ba.is-live .ba-knob { display: grid; place-items: center; position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--alabaster); color: var(--batten); z-index: 3; pointer-events: none; box-shadow: 0 1px 6px rgba(31, 30, 28, 0.28); }
.ba.is-live .ba-knob svg { width: 22px; height: 22px; }
.ba.is-live .ba-range:focus-visible ~ .ba-knob { outline: 2px solid var(--alabaster); outline-offset: 3px; box-shadow: 0 0 0 5px var(--oak-ink); }

/* Palette */
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.swatch .chip { aspect-ratio: 5 / 4; display: grid; background: var(--white); border: 1px solid var(--rule); padding: 12px; }
.swatch .chip span { display: block; box-shadow: inset 0 0 0 1px rgba(84, 80, 74, 0.12); }
.swatch h3 { margin-top: var(--s-4); }
.swatch .code { font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink); font-weight: 600; margin-top: var(--s-1); }
.swatch dl { margin-top: var(--s-4); border-top: 1px solid var(--rule); font-size: var(--fs-sm); }
.swatch dl div { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s-3); padding-block: var(--s-2); border-bottom: 1px solid var(--rule); }
.swatch dt { color: var(--muted); }
.swatch dd { color: var(--bronze-deep); }
.mat-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); margin-top: clamp(var(--s-8), 8vw, var(--s-10)); }
.mat-text { grid-column: 1 / span 4; align-self: start; position: sticky; top: var(--s-6); }
.mat-text .eyebrow { margin-bottom: var(--s-3); }
.mat-text .h2 { margin-bottom: var(--s-5); }
.mat-text .small { margin-top: var(--s-4); }
.materials { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--gap); }
.material .tile { aspect-ratio: 1 / 1; overflow: hidden; background: var(--beige-soft); }
.material .tile img { width: 100%; height: 100%; object-fit: cover; }
.material h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--bronze-deep); margin-top: var(--s-3); line-height: 1.2; }
.material p { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-1); line-height: 1.45; }

/* Spec book */
.sb-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); margin-bottom: var(--s-7); }
.sb-toc { grid-column: 1 / span 6; border-top: 1px solid var(--bronze); padding-top: var(--s-4); }
.sb-toc .eyebrow, .sb-legend .eyebrow { margin-bottom: var(--s-3); }
.sb-toc ol { columns: 2; column-gap: var(--col-gap); font-size: var(--fs-sm); }
.sb-toc li { break-inside: avoid; padding-block: 3px; }
.sb-toc a { color: var(--bronze-deep); }
.sb-toc .n { color: var(--muted); margin-left: 4px; }
.sb-jump { margin-top: var(--s-4); font-size: var(--fs-sm); font-weight: 600; }
.sb-legend { grid-column: 8 / -1; border-top: 1px solid var(--bronze); padding-top: var(--s-4); }
.sb-legend dl div { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s-3); padding-block: 6px; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.sb-legend .small { margin-top: var(--s-4); }
.cl { display: inline-block; font-family: var(--sans); font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; padding: 2px 6px; border: 1px solid currentColor; border-radius: 2px; vertical-align: 1px; white-space: nowrap; }
.cl-confirmed { color: #2F5233; }
.cl-likely { color: var(--oak-ink); }
.cl-possible { color: var(--muted); }
.cl-unknown { color: var(--muted); border-style: dashed; }
.card.spec .tag { font-weight: 700; color: var(--bronze-deep); letter-spacing: 0.06em; margin-right: 4px; }
.card.spec .maker { margin-top: var(--s-2); color: var(--bronze-deep); }
.card.spec .maker.muted { color: var(--muted); }
.card.spec .prod { font-size: var(--fs-sm); margin-top: 2px; }
.card.spec .desc { margin-top: var(--s-2); }
.card.spec .rooms { margin-top: var(--s-3); }
.card .img.ph-none { display: grid; place-items: center; background: var(--beige-soft); }
.card .img.ph-none span { font-family: var(--serif); font-size: 2.5rem; color: var(--bronze); }
.card:target { outline: 2px solid var(--oak-ink); outline-offset: 6px; }
.room-jump { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-sm); margin-bottom: var(--s-7); }
.sr { padding-block: var(--s-7); border-top: 1px solid var(--rule); scroll-margin-top: var(--s-6); }
.sr-head { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--col-gap); align-items: start; margin-bottom: var(--s-6); }
.sr-head .small { margin-top: var(--s-2); max-width: 46em; }
.sr-head .link-arrow { margin-top: var(--s-4); }
.sr-lines, .sr-room { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--col-gap); }
.sr-rooms .sr-room + .sr-room { margin-top: var(--s-8); }
.sr-room > .h3 { grid-column: 1 / -1; }
.sl-sec .eyebrow { margin-bottom: var(--s-2); }
.spec-lines { border-top: 1px solid var(--bronze); }
.spec-lines li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding-block: var(--s-3); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.spec-lines.nt li { grid-template-columns: minmax(0, 1fr) auto; }
.sl-body { min-width: 0; overflow-wrap: anywhere; }
.sl-conf { text-align: right; }
.spec-lines .thumb { width: 56px; height: 56px; background: var(--beige-soft); overflow: hidden; display: block; }
.spec-lines .thumb img { width: 100%; height: 100%; object-fit: cover; }
.spec-lines .thumb.cut { background: var(--alabaster); }
.spec-lines .thumb.cut img { object-fit: contain; padding: 3px; }
.spec-lines .thumb.chip { border: 1px solid rgba(84, 80, 74, 0.25); }
.sl-tag { font-weight: 700; color: var(--bronze-deep); text-decoration: none; border-bottom: 1px solid var(--rule); margin-right: 4px; }
.sl-name { color: var(--bronze-deep); font-weight: 600; }
.sl-text { display: block; color: var(--bronze); margin-top: 2px; }
.open-items { border-top: 1px solid var(--bronze); counter-reset: none; }
.open-items li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.oi-id { font-weight: 700; color: var(--bronze-deep); }
.oi-area { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink); }
.oi-q { display: block; margin-top: 2px; color: var(--bronze-deep); }
.oi-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: var(--s-2); font-size: var(--fs-sm); }

/* Spec book media: tiles 4:5, cut-outs on paper, swatch and paint chips, a strip of more views */
.spec-media { display: grid; gap: var(--s-3); }
.sm-main { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); text-decoration: none; }
.sm-main img { width: 100%; height: 100%; object-fit: cover; }
.sm-main.k-cut { aspect-ratio: 1 / 1; border: 1px solid #E6DFD2; padding: 9%; }
.sm-main.k-cut img { object-fit: contain; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.sm-main.is-small { padding: 14%; }
.sm-main.is-small img { width: auto; height: auto; max-width: min(100%, var(--nat)); max-height: 100%; object-fit: contain; box-shadow: 0 0 0 1px rgba(84, 80, 74, 0.12); }
.sm-main:hover img { opacity: 0.94; }
.sm-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); }
.sm-chip { display: grid; gap: 4px; justify-items: start; }
.sm-chip a, .sm-chip .sw-fill { display: block; width: 64px; height: 64px; overflow: hidden; border: 1px solid rgba(84, 80, 74, 0.2); }
.sm-chip img { width: 100%; height: 100%; object-fit: cover; }
.sm-chip figcaption { font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
.sm-note { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
.sm-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; align-self: center; }
.sm-strip a { display: block; width: 44px; height: 44px; overflow: hidden; background: var(--paper); }
.sm-strip img { width: 100%; height: 100%; object-fit: cover; }
.sm-more { font-size: var(--fs-sm); color: var(--muted); }
.sm-note { font-style: italic; }
.card.spec > .meta { padding-top: var(--s-4); }

/* Paint schedule */
.sched-wrap { margin-top: clamp(var(--s-7), 6vw, var(--s-9)); border-top: 1px solid var(--bronze); }
.sched-wrap summary { cursor: pointer; list-style: none; display: grid; gap: var(--s-1); padding: var(--s-4) 2.5rem var(--s-4) 0; position: relative; }
.sched-wrap summary::-webkit-details-marker { display: none; }
.sched-wrap summary::after { content: "+"; position: absolute; right: 0; top: var(--s-4); font-size: 1.75rem; line-height: 1; color: var(--bronze-deep); }
.sched-wrap[open] summary::after { content: "\2212"; }
.sched-wrap summary:focus-visible { outline-offset: 4px; }
.sched-wrap .paint-sched table { border-top: 1px solid var(--rule); }
.paint-sched { overflow-x: auto; }
.paint-sched table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); border-top: 1px solid var(--bronze); }
.paint-sched th { text-align: left; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink); padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.paint-sched td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--rule); color: var(--bronze-deep); vertical-align: top; }
.paint-sched .dot { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 1px solid rgba(84, 80, 74, 0.3); }
.paint-sched .code { color: var(--muted); margin-left: 4px; white-space: nowrap; }
.paint-sched .conf { display: block; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 2px 0 0 22px; }

/* Room spreads (lookbook) */
.spread { padding-top: clamp(var(--s-8), 8vw, var(--s-10)); }
.spread + .spread { border-top: 0; }
.sec-head + .spread { padding-top: 0; }
.spread-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); margin-top: clamp(var(--s-6), 4vw, var(--s-8)); align-items: start; }
.spread-text { grid-column: 1 / span 5; }
.spread-pics { grid-column: 6 / -1; }
.spread.flip .spread-text { grid-column: 8 / -1; grid-row: 1; }
.spread.side .spread-text { align-self: end; padding-bottom: var(--s-2); }
.spread.flip .spread-pics { grid-column: 1 / span 7; grid-row: 1; }
.spread-text .eyebrow { margin-bottom: var(--s-3); }
.spread-text .h2 { margin-bottom: var(--s-5); }
.spread-text .prose p { font-size: 1rem; }
.spread-text .link-arrow { margin-top: var(--s-6); }
.changed { margin-top: var(--s-5); border-top: 1px solid var(--rule); }
.changed li { font-size: var(--fs-sm); padding-block: var(--s-2); border-bottom: 1px solid var(--rule); line-height: 1.4; }

/* Selection strips and cards */
.sel-strip { margin-top: clamp(var(--s-6), 4vw, var(--s-7)); border-top: 1px solid var(--rule); padding-top: var(--s-5); }
.sel-strip > .eyebrow { margin-bottom: var(--s-4); }
.sel-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-5) var(--col-gap); }
.sel-mini { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-4); align-items: start; }
.sel-mini .thumb { width: 72px; height: 72px; background: var(--beige-soft); overflow: hidden; }
.sel-mini .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sel-mini .nm { font-size: var(--fs-sm); color: var(--bronze-deep); line-height: 1.35; font-weight: 500; }
.sel-mini .mk { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; margin-top: 2px; }
.sel-mini .thumb.swatch-fill { border: 1px solid rgba(84, 80, 74, 0.18); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s-7) var(--col-gap); }
.card { display: flex; flex-direction: column; }
.card .img { aspect-ratio: 4 / 3; background: var(--beige-soft); overflow: hidden; }
.card .img img { width: 100%; height: 100%; object-fit: cover; }
.card .img.contain img { object-fit: contain; padding: var(--s-5); }
.card .img.cut, .card .img.nat { display: grid; place-items: center; padding: var(--s-5); }
.card .img.cut { background: var(--alabaster); border: 1px solid var(--rule); }
.card .img.cut img, .card .img.nat img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.sel-mini .thumb.cut { background: var(--alabaster); }
.sel-mini .thumb.cut img { object-fit: contain; padding: 4px; }
.card .img.paint { display: grid; background: var(--white); border: 1px solid var(--rule); padding: 12px; }
.card .img.paint span { display: block; box-shadow: inset 0 0 0 1px rgba(84, 80, 74, 0.12); }
.card .img.ctx img { width: 100%; height: 100%; object-fit: cover; }
.card .img.fill { border: 1px solid rgba(84, 80, 74, 0.18); }
.card .meta { padding-top: var(--s-4); }
.card .cat { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink); }
.card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3125rem; line-height: 1.22; color: var(--bronze-deep); margin-top: var(--s-2); }
.card .maker { font-size: var(--fs-sm); color: var(--bronze); margin-top: var(--s-1); }
.card dl { margin-top: var(--s-3); font-size: var(--fs-sm); border-top: 1px solid var(--rule); }
.card dl div { display: grid; grid-template-columns: 4.75rem 1fr; gap: var(--s-3); padding-block: 6px; border-bottom: 1px solid var(--rule); }
.card dt { color: var(--muted); }
.card dd { color: var(--bronze-deep); }
.card .similar { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-2); }
.card .ext { margin-top: var(--s-3); font-size: var(--fs-sm); }
.card[hidden] { display: none; }

/* Filters */
.filters { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); padding-block: var(--s-5); border-block: 1px solid var(--rule); }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.filter-group .eyebrow { width: 6.5rem; flex: none; }
.chip-btn { font: inherit; font-size: var(--fs-sm); color: var(--bronze); background: transparent; border: 1px solid var(--rule); padding: 6px 14px; cursor: pointer; line-height: 1.3; }
.chip-btn:hover { border-color: var(--bronze); }
.chip-btn[aria-pressed="true"] { background: var(--bronze-deep); border-color: var(--bronze-deep); color: var(--alabaster); }
.filter-count { font-size: var(--fs-sm); color: var(--muted); }
.no-js .filters { display: none; }

/* Room page */
.room-head { padding-top: clamp(var(--s-7), 6vw, var(--s-9)); padding-bottom: clamp(var(--s-6), 4vw, var(--s-8)); }
.crumbs { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s-5); }
.crumbs a { color: var(--muted); }
.crumbs span[aria-hidden] { margin-inline: 0.5em; }
.room-head-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); align-items: end; }
.room-head-grid .h1, .room-head-grid .rh-title { grid-column: 1 / span 6; }
.room-head-grid .lede { grid-column: 7 / -1; font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); }
.room-text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); }
.room-text .prose { grid-column: 1 / span 6; }
.room-text .changed-box { grid-column: 8 / -1; }
.changed-box .eyebrow { margin-bottom: var(--s-3); }
.room-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); border-top: 1px solid var(--bronze); padding-top: var(--s-5); }
.room-nav a { text-decoration: none; display: block; }
.room-nav .eyebrow { display: block; margin-bottom: var(--s-2); }
.room-nav .h3 { display: block; }
.room-nav .next { text-align: right; }
.room-index { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-sm); }
.room-index a { color: var(--bronze); text-decoration: none; border-bottom: 1px solid var(--rule); }
.room-index a[aria-current] { color: var(--bronze-deep); border-bottom-color: var(--oak); }

/* Light (the one dark band: light reads best against dark) */
.dark { background: var(--batten); color: var(--on-dark-muted); }
.dark .h1, .dark .h2, .dark .h3, .dark .lede { color: var(--on-dark); }
.dark .eyebrow { color: #C9A27A; }
.dark .caption, .dark figcaption { color: var(--on-dark-muted); }
.dark .ph { background: var(--batten-2); }
.dark a { color: var(--on-dark); }
.light-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); align-items: start; }
.light-text { grid-column: 1 / span 5; }
.light-text .lede { margin-bottom: var(--s-6); }
.light-hero { grid-column: 7 / -1; }
.details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--gap); margin-top: clamp(var(--s-7), 6vw, var(--s-9)); }
.detail .tile { aspect-ratio: 4 / 5; overflow: hidden; background: var(--batten-2); }
.detail .tile img { width: 100%; height: 100%; object-fit: cover; }
.detail figcaption { margin-top: var(--s-3); }
.light-sheets { margin-top: clamp(var(--s-7), 6vw, var(--s-9)); border-top: 1px solid #3A3733; padding-top: var(--s-5); }
.dark .sheet .kind { color: #C9A27A; }
.dark .sheet .title { color: var(--on-dark); }
.dark .small, .dark .sheet .small { color: var(--on-dark-muted); }
.light-products { margin-top: clamp(var(--s-7), 6vw, var(--s-9)); border-top: 1px solid #3A3733; padding-top: var(--s-5); }
.light-products .sel-mini .nm { color: var(--on-dark); }
.light-products .sel-mini .mk { color: var(--on-dark-muted); }
.light-products .sel-mini .thumb { background: var(--alabaster); }

/* Quotes */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.quote { border-top: 1px solid var(--bronze); padding-top: var(--s-4); }
.quote blockquote p { font-family: var(--serif); font-style: italic; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.38; color: var(--bronze-deep); }
.quote figcaption { margin-top: var(--s-3); }

/* Process */
.timeline { border-top: 1px solid var(--bronze); }
.tl-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.tl-item time { grid-column: 1 / span 2; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink); padding-top: 4px; }
.tl-item .tl-body { grid-column: 3 / span 8; }
.tl-item h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--bronze-deep); line-height: 1.25; }
.tl-item p { font-size: var(--fs-sm); margin-top: var(--s-1); max-width: 44em; }
.stage { padding-top: clamp(var(--s-8), 7vw, var(--s-10)); }
.stage-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-2); align-items: baseline; border-top: 1px solid var(--bronze); padding-top: var(--s-4); margin-bottom: var(--s-6); }
.stage-head .eyebrow { grid-column: 1 / span 3; }
.stage-head .h2 { grid-column: 4 / span 5; }
.stage-head p { grid-column: 9 / -1; font-size: var(--fs-sm); color: var(--muted); }
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--col-gap); }
.plate.feature { grid-column: 1 / -1; }
.plate a { display: block; background: var(--white); border: 1px solid var(--rule); }
.plate a:hover { border-color: var(--bronze); }
.plate img { width: 100%; }
.plate figcaption { margin-top: var(--s-3); max-width: 46em; }
.plate .when { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink); margin-bottom: 2px; }
.revisions { margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--muted); }
.revisions li { padding-block: 4px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-3); }

/* Renderings from the record model */
.rendering { margin: 0; }
.rn-img { position: relative; display: block; background: var(--beige-soft); }
.rn-img img { width: 100%; }
.rn-tag { left: var(--s-3); top: var(--s-3); }
.rendering figcaption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); align-items: start; }
.rn-title { grid-column: 1; font-family: var(--serif-text); font-weight: 600; font-size: 1.125rem; color: var(--bronze-deep); }
.rn-cap { grid-column: 1; font-size: var(--fs-sm); color: var(--muted); }
.rn-match { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: 96px auto; gap: var(--s-3); align-items: center; font-size: 0.78125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); max-width: 17rem; }
.rn-match a { display: block; width: 96px; height: 64px; overflow: hidden; }
.rn-match img { width: 100%; height: 100%; object-fit: cover; }
.story > .rn-pair, .story > .rn-pair + .rendering { margin-top: clamp(40px, 5vw, 72px); }
.rn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.rn-pair .rendering figcaption { grid-template-columns: minmax(0, 1fr); }
.rn-pair .rn-match { grid-column: 1; grid-row: auto; }
.rn-mass { margin-top: clamp(var(--s-7), 6vw, var(--s-9)); }
.rn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--gap); }
.rn-grid .rendering figcaption { grid-template-columns: minmax(0, 1fr); }

/* Mood board (process page only) */
.moodboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--gap); }
.mood a { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.mood img { width: 100%; height: 100%; object-fit: cover; }
.mood figcaption { margin-top: var(--s-2); }
.mood .when { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink); }

/* Drawings */
.sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--col-gap); }
.sheets.large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet a { display: block; background: var(--white); border: 1px solid var(--rule); }
.sheet a:hover { border-color: var(--bronze); }
.sheet img { width: 100%; }
.sheet figcaption { margin-top: var(--s-3); }
.sheet .kind { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink); }
.sheet .title { font-family: var(--serif); font-size: 1.125rem; color: var(--bronze-deep); }
.stamp { font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }

/* Sheet index */
.sheet-index { margin-bottom: var(--s-8); border-top: 1px solid var(--bronze); padding-top: var(--s-4); }
.sheet-index .eyebrow { margin-bottom: var(--s-3); }
.sheet-index ol { columns: 2; column-gap: var(--col-gap); }
.sheet-index li { break-inside: avoid; }
.sheet-index a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--s-3); padding-block: var(--s-2); border-bottom: 1px solid var(--rule); text-decoration: none; font-size: var(--fs-sm); }
.sheet-index a:hover .t { text-decoration: underline; }
.sheet-index .num { font-weight: 600; color: var(--bronze-deep); }
.sheet-index .d { color: var(--muted); }
.sheet { scroll-margin-top: var(--s-6); }
.spread-sheet { margin-top: var(--gap); }
.elev-pair + .elev-pair, .sheets + .elev-pair { margin-top: clamp(var(--s-7), 5vw, var(--s-8)); }
.ep-title { margin-bottom: var(--s-4); }
.pres-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--col-gap); }
.pres-grid .sheet a { border-color: transparent; }
.ep-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--col-gap); align-items: start; }
.ep-lab { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--oak-ink); margin-bottom: var(--s-2); }

/* Sources */
.src-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-8); }
.src-grid > .src-block { grid-column: span 6; }
.src-block .eyebrow { margin-bottom: var(--s-4); }
.src-list { border-top: 1px solid var(--bronze); }
.src-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.src-list .who { color: var(--bronze-deep); font-weight: 500; }
.src-list .what { color: var(--muted); }
.gloss { border-top: 1px solid var(--bronze); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.gloss div { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.gloss dt { font-family: var(--serif); font-size: 1.1875rem; color: var(--bronze-deep); }
.gloss dd { font-size: var(--fs-sm); margin-top: var(--s-1); max-width: 40em; }
.conf-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oak-ink); margin-left: 4px; }
.gloss .care { margin-top: var(--s-2); color: var(--muted); }
.gloss .care strong { font-weight: 600; color: var(--oak-ink); font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; margin-right: 0.5em; }

/* Home */
.home-hero { padding-top: clamp(var(--s-8), 8vw, var(--s-10)); padding-bottom: clamp(var(--s-7), 6vw, var(--s-9)); }
.home-hero .display { max-width: 11.5em; font-size: clamp(2.5rem, 1.2rem + 5.2vw, 6.25rem); }
.home-hero .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); margin-top: clamp(var(--s-6), 4vw, var(--s-8)); }
.home-hero .row .prose { grid-column: 6 / span 6; }
.home-hero .row .eyebrow { grid-column: 1 / span 4; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--col-gap); }
.principle { border-top: 1px solid var(--bronze); padding-top: var(--s-4); }
.principle h3 { font-family: var(--serif); font-weight: 400; font-size: 1.375rem; color: var(--bronze-deep); line-height: 1.22; }
.principle p { font-size: var(--fs-sm); margin-top: var(--s-2); }
.feature-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); text-decoration: none; color: inherit; }
.feature-card .ph { grid-column: 1 / -1; }
.feature-card .fc-title { grid-column: 1 / span 7; }
.feature-card .fc-dek { grid-column: 8 / -1; }
.feature-card .fc-title .h1 { margin-top: var(--s-2); }
.feature-card:hover .h1 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.projects-index { border-top: 1px solid var(--bronze); }
.projects-index li a { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; padding-block: var(--s-4); border-bottom: 1px solid var(--rule); text-decoration: none; }
.projects-index img { width: 4rem; height: 4rem; object-fit: cover; }
.projects-index .t { font-family: var(--serif); font-size: 1.375rem; color: var(--bronze-deep); }
.projects-index .m { font-size: var(--fs-sm); color: var(--muted); }

/* Public home: selected work, and Walli */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--col-gap); }
.work-card { display: block; text-decoration: none; color: inherit; }
.work-card .ph { margin-bottom: var(--s-4); }
.work-card .h2 { margin: var(--s-2) 0 var(--s-3); }
.work-card:hover .h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.also { display: grid; gap: var(--s-2); }
.also-link { font-family: var(--serif-text); font-size: var(--fs-lg); color: var(--bronze-deep); }
.also-link a { text-underline-offset: 0.2em; }

/* Lightbox */
.lb { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(31, 30, 28, 0.94); color: var(--on-dark); }
.lb::backdrop { background: rgba(31, 30, 28, 0.94); }
.lb-inner { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: var(--s-4); }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); font-size: var(--fs-sm); }
.lb-bar a { color: var(--on-dark); }
.lb-close { font: inherit; font-size: var(--fs-sm); background: transparent; color: var(--on-dark); border: 1px solid #5a554e; padding: 6px 14px; cursor: pointer; }
.lb-stage { min-height: 0; display: grid; place-items: center; padding-block: var(--s-4); overflow: auto; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--white); }
.lb-cap { font-size: var(--fs-sm); color: var(--on-dark-muted); max-width: 60em; }

/* Gentle reveal: content is visible by default; script only adds the motion */
.reveal-ready [data-reveal] { opacity: 0.001; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal-ready [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Readability layer (Round 2). Bodoni Moda is kept for display sizes (32 px and up), where its hairlines hold;
   every title, name and lede below that is set in Source Serif 4, a sturdy text serif with real weight.
   Every text and background pair here passes WCAG AA: bronze 6.7:1, muted 6.0:1 and oak labels 6.4:1 on Alabaster,
   5.2:1 and 5.5:1 on the beige band, on-dark-muted 7.8:1 on the black band. */
.display, .h1, .h2 { font-optical-sizing: auto; }
.h2 { font-weight: 500; }
.h3, .lede, .brand-by, .sub-nav .proj, .cover-kicker, .card h3, .material h3, .principle h3, .tl-item h3, .gloss dt,
.projects-index .t, .sheet .title, .quote blockquote p, .room-nav .h3 { font-family: var(--serif-text); font-optical-sizing: auto; }
.h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
.lede { font-size: var(--fs-lg); font-weight: 400; line-height: 1.45; max-width: 34em; }
.dek { max-width: 34em; }
.brand-by { font-size: 1rem; }
.cover-kicker { font-weight: 400; }
.card h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.material h3 { font-size: 1.125rem; font-weight: 600; }
.principle h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.principle p { font-size: var(--fs-sm); }
.tl-item h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.tl-item p { font-size: 1rem; line-height: 1.55; }
.gloss dt { font-size: 1.1875rem; font-weight: 600; }
.gloss dd { font-size: 1rem; line-height: 1.55; }
.projects-index .t { font-size: 1.375rem; font-weight: 600; }
.sheet .title { font-size: 1.125rem; font-weight: 600; display: block; }
.quote blockquote p { font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem); font-weight: 400; line-height: 1.45; }
.ba-cap .h3 { font-size: clamp(1.1875rem, 1.05rem + 0.4vw, 1.375rem); }
.spread-text .prose p { font-size: var(--fs-base); }
.sel-mini { grid-template-columns: 64px 1fr; }
.sel-mini .thumb { width: 64px; height: 64px; }
.sel-mini .nm { font-size: var(--fs-sm); font-weight: 600; }
.sel-mini .mk { font-size: var(--fs-sm); }
.sel-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.card .maker, .card dl, .card .ext { font-size: var(--fs-sm); }
.card dl div { grid-template-columns: 4.5rem 1fr; }
.card .cat, .card .similar { font-size: var(--fs-xs); }
.facts div, .scope li, .changed li, .swatch dl, .src-list li, .revisions, .crumbs, .room-index, .filter-count,
.place-note, .foot-col, .foot-brand p, .chip-btn, .primary-nav a, .sub-nav a { font-size: var(--fs-sm); }
.facts div { grid-template-columns: 7.5rem 1fr; }
.facts dt, .swatch .code, .sheet .kind, .plate .when, .stamp, .tl-item time { font-size: var(--fs-xs); }
.link-arrow { font-size: var(--fs-xs); }
.ba-tag { font-size: 0.78125rem; letter-spacing: 0.12em; background: rgba(31, 30, 28, 0.86); padding: 4px 9px; }
.src-list .what { color: var(--bronze); }

/* Tablet */
@media (max-width: 1024px) {
  .intro-text { grid-column: 1 / -1; }
  .intro-aside { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: start; }
  .intro-aside .place-note { margin-top: 0; }
  .details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moodboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .rn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .light-text, .light-hero { grid-column: 1 / -1; }
  .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mat-text { grid-column: 1 / -1; position: static; }
  .materials { grid-column: 1 / -1; }
}

/* Phone */
@media (max-width: 720px) {
  :root { --fs-base: 1.0625rem; }
  .head-row { min-height: 64px; }
  .brand-by { font-size: 0.9375rem; }
  .primary-nav { display: none; }
  .sub-nav { gap: var(--s-4); }
  .sec-head .h1, .sec-head .dek, .sec-head.solo .h1 { grid-column: 1 / -1; }
  .cover-title .display, .cover-title .cover-kicker { grid-column: 1 / -1; white-space: normal; }
  .intro-aside { grid-template-columns: 1fr; row-gap: var(--s-6); }
  .ba-list { grid-template-columns: minmax(0, 1fr); }
  .ba-frame { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: minmax(0, 1fr); }
  .swatch { display: grid; grid-template-columns: 7rem 1fr; column-gap: var(--s-5); }
  .swatch .chip { aspect-ratio: auto; min-height: 9rem; grid-row: 1 / span 3; }
  .swatch h3 { margin-top: 0; }
  .materials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spread-text, .spread-pics, .spread.flip .spread-text, .spread.flip .spread-pics { grid-column: 1 / -1; grid-row: auto; }
  .spread.side .spread-text { order: 2; }
  .jrow { flex-direction: column; }
  .jrow > figure { flex: none; width: 100%; }
  .room-head-grid .h1, .room-head-grid .rh-title, .room-head-grid .lede, .room-text .prose, .room-text .changed-box { grid-column: 1 / -1; }
  .details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .tl-item time, .tl-item .tl-body { grid-column: 1 / -1; }
  .stage-head .eyebrow, .stage-head .h2, .stage-head p { grid-column: 1 / -1; }
  .plates, .sheets, .sheets.large { grid-template-columns: minmax(0, 1fr); }
  .sheet-index ol { columns: 1; }
  .ep-row, .pres-grid, .rn-pair { grid-template-columns: minmax(0, 1fr); }
  .rendering figcaption { grid-template-columns: minmax(0, 1fr); }
  .rn-match { grid-column: 1; grid-row: auto; }
  .sheet-index a { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .sheet-index .d { display: none; }
  .src-grid > .src-block { grid-column: 1 / -1; }
  .src-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gloss { grid-template-columns: minmax(0, 1fr); }
  .sb-toc, .sb-legend { grid-column: 1 / -1; }
  .sb-toc ol { columns: 1; }
  .sr-head { grid-template-columns: minmax(0, 1fr); }
  .sr-lines, .sr-room { grid-template-columns: minmax(0, 1fr); }
  .sb-legend dl div { grid-template-columns: 7.5rem 1fr; }
  .spec-lines li, .spec-lines.nt li { grid-template-columns: auto minmax(0, 1fr); }
  .spec-lines.nt li { grid-template-columns: minmax(0, 1fr); }
  .sl-conf { grid-column: 1 / -1; text-align: left; }
  .spec-lines li:has(.thumb) .sl-conf { grid-column: 2; }
  .paint-sched thead { display: none; }
  .paint-sched tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
  .paint-sched td { border: 0; padding: 0; }
  .paint-sched td:first-child { color: var(--bronze); }
  .paint-sched table:has(th:nth-child(3)) td:first-child { font-weight: 600; color: var(--bronze-deep); }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .home-hero .row .prose, .home-hero .row .eyebrow { grid-column: 1 / -1; }
  .feature-card .fc-title, .feature-card .fc-dek { grid-column: 1 / -1; }
  .foot-brand, .foot-col { grid-column: 1 / -1; }
  .filter-group .eyebrow { width: 100%; }
  .spread .sel-row li:nth-child(n+5) { display: none; }
  .room-nav { grid-template-columns: minmax(0, 1fr); }
  .room-nav .next { text-align: left; }
  .facts div { grid-template-columns: 6.5rem 1fr; }
}