/* ===========================================================================
   11 & TWELVE — FINISHED CARPENTRY
   ---------------------------------------------------------------------------
   Theme tokens follow the same convention as rougemedia: every colour is stored
   as a bare RGB triplet ("18 14 11") so one definition serves both a solid fill
   (rgb(var(--rgb-void))) and a translucent one (rgb(var(--rgb-bone) / .08)).

   Display face is Fraunces, driven through its real variable axes rather than
   left at defaults — see the `--fr-*` custom properties below.
   =========================================================================== */
:root {
  --rgb-void:        18 14 11;
  --rgb-pitch:       11 8 6;
  --rgb-walnut:      31 24 18;
  --rgb-walnut-lt:   45 35 26;
  --rgb-walnut-mid:  60 46 34;

  --rgb-brass:       176 137 76;
  --rgb-brass-br:    216 178 110;
  --rgb-brass-deep:  116 88 44;

  --rgb-bone:        238 231 219;
  --rgb-bone-dim:    182 171 155;
  --rgb-bone-faint:  132 120 105;

  --ease: cubic-bezier(.22,.61,.36,1);
  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);

  /* Fraunces axes. SOFT rounds the terminals; WONK swaps in the "wonky" italic
     forms and the swashier roman details. Both are pushed further at display
     sizes and pulled back at text sizes, which is what keeps the face from
     reading as a generic high-contrast serif. */
  --fr-soft-display: 34;
  --fr-soft-text: 8;

  color-scheme: dark;
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  background: rgb(var(--rgb-void));
  color: rgb(var(--rgb-bone));
  font-family: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, .5vw + 14px, 17px);
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid rgb(var(--rgb-brass-br)); outline-offset: 3px; }

.skip {
  position: fixed; top: -100px; left: 20px; z-index: 999;
  background: rgb(var(--rgb-brass)); color: rgb(var(--rgb-pitch));
  padding: 10px 18px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  transition: top .2s var(--ease);
}
.skip:focus { top: 20px; }

/* ------------------------------------------------- cinematic overlays --- */
.grain {
  position: fixed; inset: -150%; z-index: 900; pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(1) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-3%,2%) }
  40% { transform: translate(2%,-3%) }
  60% { transform: translate(-2%,-2%) }
  80% { transform: translate(3%,1%) }
}
.vignette {
  position: fixed; inset: 0; z-index: 899; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgb(var(--rgb-pitch) / .55) 100%);
}

/* --------------------------------------------------------------- layout --- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec { position: relative; padding-block: clamp(76px, 11vw, 148px); }

/* Dovetail divider. A real joint profile drawn once and tiled: the pin walls
   splay outward exactly as a cut dovetail does, which is why it reads as
   carpentry rather than as decorative zigzag. */
.joint {
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='24' viewBox='0 0 72 24'%3E%3Cpath d='M0 1.5H18L24 22.5H48L54 1.5H72' fill='none' stroke='%23b0894c' stroke-opacity='.45' stroke-width='1.25'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
}

/* ------------------------------------------------------------ typography --- */
h1, h2, h3, .mark-num, .mark-word, .mark-amp, .q-lead blockquote, .q blockquote,
.record dd, .tile-name, .step-n, .lb-fig figcaption b, .prod-price, .tray-total b {
  font-family: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.012em;
  font-variation-settings: 'SOFT' var(--fr-soft-display), 'WONK' 1;
}
h1 { font-size: clamp(42px, 7vw, 100px); letter-spacing: -.028em; }
h2 { font-size: clamp(30px, 4.3vw, 60px); letter-spacing: -.022em; }
h3 { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.24; letter-spacing: -.012em; }
/* Italics are where Fraunces' WONK axis actually shows, so the emphasis spans
   carry it while the roman around them stays composed. */
h1 em, h2 em {
  font-style: italic; color: rgb(var(--rgb-brass-br));
  font-variation-settings: 'SOFT' 48, 'WONK' 1;
}

.eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
  color: rgb(var(--rgb-brass)); margin-bottom: 22px;
  display: flex; align-items: center; gap: 14px;
}
/* Not a plain dash: a measuring-rule edge, minor ticks at 4px with a major
   every fifth. Same motif recurs at the ledger and spec headers. */
.eyebrow::before {
  content: ""; width: 40px; height: 9px; flex: none;
  background-image:
    repeating-linear-gradient(to right, rgb(var(--rgb-brass) / .95) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(to right, rgb(var(--rgb-brass) / .95) 0 1px, transparent 1px 20px);
  background-size: 100% 4px, 100% 9px;
  background-position: left bottom, left bottom;
  background-repeat: repeat-x;
}

.sec-head { max-width: 780px; margin-bottom: clamp(44px, 5vw, 70px); }
.sec-sub { color: rgb(var(--rgb-bone-dim)); margin-top: 20px; max-width: 60ch; }
.lede { color: rgb(var(--rgb-bone-dim)); font-size: clamp(16px, 1.15vw, 19px); max-width: 54ch; }

/* --------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px; font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn-brass { background: rgb(var(--rgb-brass)); color: rgb(var(--rgb-pitch)); }
.btn-brass:hover { background: rgb(var(--rgb-brass-br)); transform: translateY(-2px); }
.btn-ghost { border-color: rgb(var(--rgb-bone) / .28); color: rgb(var(--rgb-bone)); }
.btn-ghost:hover { border-color: rgb(var(--rgb-brass)); color: rgb(var(--rgb-brass-br)); transform: translateY(-2px); }
.btn-full { width: 100%; }

/* ---------------------------------------------------------------- header --- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 500;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgb(var(--rgb-pitch) / .86);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgb(var(--rgb-walnut-mid));
}
.hdr-in {
  max-width: var(--wrap); margin-inline: auto; padding: 22px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding .4s var(--ease);
}
.hdr.is-stuck .hdr-in { padding-block: 14px; }

.mark { display: grid; grid-template-columns: auto auto auto; align-items: baseline; gap: 5px; line-height: 1; }
.mark-num { font-size: 27px; color: rgb(var(--rgb-bone)); font-variant-numeric: lining-nums; }
.mark-amp { font-size: 19px; color: rgb(var(--rgb-brass)); font-style: italic; font-variation-settings: 'SOFT' 60, 'WONK' 1; }
.mark-word { font-size: 27px; color: rgb(var(--rgb-bone)); }
.mark-sub {
  grid-column: 1 / -1; font-family: 'Jost', sans-serif;
  font-size: 8.5px; letter-spacing: .38em; text-transform: uppercase;
  color: rgb(var(--rgb-bone-faint)); margin-top: 6px;
}

.nav { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 30px); }
.nav > a {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--rgb-bone-dim)); position: relative; padding-block: 6px;
  transition: color .3s var(--ease);
}
.nav > a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: rgb(var(--rgb-brass)); transition: width .3s var(--ease);
}
.nav > a:hover { color: rgb(var(--rgb-bone)); }
.nav > a:hover::after { width: 100%; }
.nav .nav-cta {
  border: 1px solid rgb(var(--rgb-brass) / .55); color: rgb(var(--rgb-brass-br));
  padding: 11px 22px;
}
.nav .nav-cta::after { display: none; }
.nav .nav-cta:hover { background: rgb(var(--rgb-brass)); color: rgb(var(--rgb-pitch)); }

.burger { display: none; padding: 8px; }
.burger span { display: block; width: 26px; height: 1.5px; background: rgb(var(--rgb-bone)); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.burger span + span { margin-top: 7px; }
.burger.is-on span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.burger.is-on span:nth-child(2) { opacity: 0; }
.burger.is-on span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero --- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.kenburns { animation: kb 26s ease-in-out infinite alternate; transform-origin: 60% 45%; }
@keyframes kb { from { transform: scale(1.02) } to { transform: scale(1.14) } }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgb(var(--rgb-pitch) / .93) 0%, rgb(var(--rgb-pitch) / .74) 42%, rgb(var(--rgb-pitch) / .3) 100%),
    linear-gradient(to top, rgb(var(--rgb-void)) 2%, transparent 40%);
}
.bar { position: absolute; left: 0; right: 0; height: clamp(26px, 4.5vh, 52px); background: rgb(var(--rgb-pitch)); z-index: 3; }
.bar-top { top: 0; } .bar-bot { bottom: 0; }

.hero-in { position: relative; z-index: 4; width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.hero-in h1 { margin-block: 6px 26px; text-shadow: 0 2px 40px rgb(var(--rgb-pitch) / .6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero-foot {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(40px, 7vh, 76px);
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.timecode {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgb(var(--rgb-bone-faint)); font-variant-numeric: tabular-nums;
}
.rec { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--rgb-brass)); animation: rec 2.4s ease-in-out infinite; }
@keyframes rec { 0%,100% { opacity: .25 } 50% { opacity: 1 } }
.scroll-cue {
  display: flex; align-items: center; gap: 12px;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: rgb(var(--rgb-bone-faint));
  transition: color .3s var(--ease);
}
.scroll-cue:hover { color: rgb(var(--rgb-brass-br)); }
.scroll-cue span { width: 1px; height: 46px; background: linear-gradient(rgb(var(--rgb-brass)), transparent); position: relative; overflow: hidden; }
.scroll-cue span::after { content: ""; position: absolute; inset: 0; background: rgb(var(--rgb-brass-br)); animation: drop 2.2s var(--ease) infinite; }
@keyframes drop { 0% { transform: translateY(-100%) } 60%,100% { transform: translateY(100%) } }

.rise { opacity: 0; transform: translateY(26px); animation: rise .95s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none } }

/* --------------------------------------------------------------- marquee --- */
.marquee {
  border-block: 1px solid rgb(var(--rgb-walnut-mid));
  background: rgb(var(--rgb-pitch));
  overflow: hidden; padding-block: 20px;
}
.marquee-track { display: flex; align-items: center; gap: 30px; width: max-content; animation: slide 46s linear infinite; }
.marquee-track span {
  font-family: 'Fraunces', Georgia, serif; font-size: clamp(20px, 2.4vw, 32px);
  font-style: italic; color: rgb(var(--rgb-bone-dim)); white-space: nowrap;
  font-variation-settings: 'SOFT' 52, 'WONK' 1;
}
.marquee-track i { color: rgb(var(--rgb-brass)); font-size: 13px; font-style: normal; }
@keyframes slide { to { transform: translateX(-50%) } }

/* ------------------------------------------------------------ split rows --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 6vw, 88px); align-items: center; }
.split-rev .split-media { order: 2; }
.frame { position: relative; overflow: hidden; background: rgb(var(--rgb-walnut)); }
/* Hover uses the independent `scale` property, never `transform`, so the
   scroll-driven parallax below (which animates `translate`) can compose with it
   instead of one clobbering the other. */
.frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: scale 1.1s var(--ease); }
.frame:hover img { scale: 1.05; }
.frame::before, .frame::after {
  content: ""; position: absolute; width: 34px; height: 34px; z-index: 2;
  border: 1px solid rgb(var(--rgb-brass) / .85);
}
.frame::before { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.frame::after { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.frame-caption {
  margin-top: 14px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(var(--rgb-bone-faint)); display: flex; gap: 10px;
}
.frame-caption .fig { color: rgb(var(--rgb-brass)); }
.split-copy p { color: rgb(var(--rgb-bone-dim)); margin-top: 22px; max-width: 56ch; }
.split-copy h2 { margin-bottom: 6px; }

.ticks { list-style: none; padding: 0; margin-top: 34px; display: grid; gap: 13px; }
.ticks li { position: relative; padding-left: 30px; color: rgb(var(--rgb-bone)); font-size: 15px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 15px; height: 7px; border-left: 1.5px solid rgb(var(--rgb-brass-br)); border-bottom: 1.5px solid rgb(var(--rgb-brass-br));
  transform: rotate(-45deg);
}

/* ------------------------------------- services: a drawing index, not cards --- */
.services { background: rgb(var(--rgb-pitch)); border-block: 1px solid rgb(var(--rgb-walnut-mid)); }
.ledger-hd, .row {
  display: grid;
  grid-template-columns: 62px minmax(210px, 1fr) minmax(0, 2fr) 110px;
  gap: clamp(14px, 2vw, 34px);
  align-items: baseline;
}
.ledger-hd {
  font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
  color: rgb(var(--rgb-bone-faint)); padding-bottom: 12px;
  border-bottom: 1px solid rgb(var(--rgb-brass) / .5);
}
.ledger-hd span:last-child, .row-m { text-align: right; }
.row {
  padding-block: clamp(24px, 2.6vw, 34px);
  border-bottom: 1px solid rgb(var(--rgb-walnut-mid));
  position: relative;
  transition: background .4s var(--ease);
}
/* The brass rule runs in from the left on hover, the way a marking gauge is
   pulled along an edge. */
.row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: rgb(var(--rgb-brass)); transition: width .55s var(--ease);
}
.row:hover::after { width: 100%; }
.row:hover { background: rgb(var(--rgb-walnut) / .5); }
.row-n {
  font-family: 'Fraunces', Georgia, serif; font-size: 15px;
  color: rgb(var(--rgb-brass)); font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .08em;
}
.row p { color: rgb(var(--rgb-bone-dim)); font-size: 15px; line-height: 1.62; }
.row p a { color: rgb(var(--rgb-brass-br)); border-bottom: 1px solid rgb(var(--rgb-brass) / .4); }
.row-m {
  font-size: 12px; letter-spacing: .12em; color: rgb(var(--rgb-bone-faint));
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ------------------------------------------------------------- work grid --- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chip {
  border: 1px solid rgb(var(--rgb-walnut-mid));
  padding: 9px 20px; font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: rgb(var(--rgb-bone-faint));
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.chip:hover { color: rgb(var(--rgb-bone)); border-color: rgb(var(--rgb-brass) / .6); }
.chip.is-on { background: rgb(var(--rgb-brass)); border-color: rgb(var(--rgb-brass)); color: rgb(var(--rgb-pitch)); }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; gap: 14px; }
.tile { position: relative; overflow: hidden; cursor: pointer; background: rgb(var(--rgb-walnut)); }
.tile.t-wide { grid-column: span 2; }
.tile.t-tall { grid-row: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease), filter .6s var(--ease); filter: saturate(.82) contrast(1.04); scale: 1.06; }
.tile:hover img { scale: 1.12; filter: saturate(1) contrast(1.06); }
.tile figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 22px;
  display: grid; gap: 4px;
  background: linear-gradient(to top, rgb(var(--rgb-pitch) / .94), rgb(var(--rgb-pitch) / .5) 55%, transparent);
  transform: translateY(12px); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.tile:hover figcaption, .tile:focus-within figcaption { transform: none; opacity: 1; }
.tile-cat { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgb(var(--rgb-brass-br)); }
.tile-name { font-size: 25px; line-height: 1.15; }
.tile-loc { font-size: 12px; color: rgb(var(--rgb-bone-faint)); letter-spacing: .07em; }
.tile.is-hidden { display: none; }

/* ----------------------------------------------------------- marketplace --- */
.market { background: rgb(var(--rgb-pitch)); border-block: 1px solid rgb(var(--rgb-walnut-mid)); }
.market-head { display: grid; grid-template-columns: 1fr minmax(0, 380px); gap: clamp(24px, 4vw, 60px); align-items: end; margin-bottom: 34px; }
.market-note { color: rgb(var(--rgb-bone-dim)); font-size: 14.5px; line-height: 1.68; }
.market-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 34px;
  border-bottom: 1px solid rgb(var(--rgb-brass) / .45);
}
.market-bar .filters { margin-top: 0; }
.sort { display: flex; align-items: center; gap: 12px; }
.sort > span { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: rgb(var(--rgb-bone-faint)); }
.sort select {
  background: rgb(var(--rgb-void)); border: 1px solid rgb(var(--rgb-walnut-mid));
  padding: 9px 14px; font-size: 12px; letter-spacing: .06em;
}
.sort select:focus { outline: none; border-color: rgb(var(--rgb-brass)); }

.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 1px; background: rgb(var(--rgb-walnut-mid)); border: 1px solid rgb(var(--rgb-walnut-mid)); }
.prod { background: rgb(var(--rgb-pitch)); display: flex; flex-direction: column; transition: background .4s var(--ease); }
.prod:hover { background: rgb(var(--rgb-walnut) / .55); }
.prod.is-hidden { display: none; }
.prod-img { position: relative; overflow: hidden; background: rgb(var(--rgb-walnut)); cursor: pointer; }
.prod-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: scale 1.1s var(--ease); scale: 1.04; }
.prod:hover .prod-img img { scale: 1.09; }
.prod-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.prod-top h3 { font-size: 20px; }
.prod-price {
  font-size: 15px; color: rgb(var(--rgb-brass-br)); white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0;
}
.prod-spec { font-size: 12.5px; color: rgb(var(--rgb-bone-faint)); letter-spacing: .04em; }
.prod-act { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.mini {
  flex: 1; padding: 9px 10px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid rgb(var(--rgb-walnut-mid)); color: rgb(var(--rgb-bone-dim));
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.mini:hover { border-color: rgb(var(--rgb-brass) / .7); color: rgb(var(--rgb-bone)); }
.mini-add:hover { background: rgb(var(--rgb-brass)); border-color: rgb(var(--rgb-brass)); color: rgb(var(--rgb-pitch)); }
.mini.is-added { background: rgb(var(--rgb-brass) / .2); border-color: rgb(var(--rgb-brass)); color: rgb(var(--rgb-brass-br)); }
.market-empty { margin-top: 30px; color: rgb(var(--rgb-bone-faint)); font-size: 14px; }

/* --------------------------------------------------------- product sheet --- */
.sheet {
  position: fixed; inset: 0; z-index: 960; display: none;
  background: rgb(var(--rgb-pitch) / .95); backdrop-filter: blur(8px);
  align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px);
}
.sheet.is-on { display: flex; }
.sheet-in {
  position: relative; width: 100%; max-width: 940px; max-height: 88svh; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgb(var(--rgb-void)); border: 1px solid rgb(var(--rgb-walnut-mid));
}
/* position+overflow are what the injected .sheen needs to sit inside and be
   clipped by; without them the light band escapes the panel. */
.sheet-img { background: rgb(var(--rgb-walnut)); position: relative; overflow: hidden; }
.sheet-img img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.sheet-body { padding: clamp(26px, 3vw, 40px); }
.sheet-body h3 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 14px; }
.sheet-desc { color: rgb(var(--rgb-bone-dim)); font-size: 15px; margin-bottom: 26px; }
.sheet-spec { display: grid; gap: 1px; background: rgb(var(--rgb-walnut-mid)); border: 1px solid rgb(var(--rgb-walnut-mid)); margin-bottom: 24px; }
.sheet-spec > div { background: rgb(var(--rgb-void)); padding: 11px 15px; display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.sheet-spec dt { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--rgb-bone-faint)); }
.sheet-spec dd { font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.sheet-x { position: absolute; top: 12px; right: 16px; font-size: 34px; line-height: 1; color: rgb(var(--rgb-bone-dim)); z-index: 2; }
.sheet-x:hover { color: rgb(var(--rgb-brass-br)); }

/* -------------------------------------------------------- commission list --- */
.tray-tab {
  position: fixed; right: 0; bottom: 26px; z-index: 700;
  background: rgb(var(--rgb-brass)); color: rgb(var(--rgb-pitch));
  padding: 13px 20px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.tray-tab:hover { background: rgb(var(--rgb-brass-br)); transform: translateX(-3px); }
.tray-count {
  background: rgb(var(--rgb-pitch)); color: rgb(var(--rgb-brass-br));
  min-width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.tray {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 970;
  width: min(400px, 92vw); background: rgb(var(--rgb-void));
  border-left: 1px solid rgb(var(--rgb-walnut-mid));
  display: flex; flex-direction: column;
  transform: translateX(101%); transition: transform .42s var(--ease);
  visibility: hidden;
}
.tray.is-on { transform: none; visibility: visible; }
.tray-hd { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid rgb(var(--rgb-walnut-mid)); }
.tray-hd h3 { font-size: 21px; }
.tray-x { font-size: 32px; line-height: 1; color: rgb(var(--rgb-bone-dim)); }
.tray-x:hover { color: rgb(var(--rgb-brass-br)); }
.tray-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.tray-empty { color: rgb(var(--rgb-bone-faint)); font-size: 14px; padding-block: 26px; }
.tray-item { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding-block: 16px; border-bottom: 1px solid rgb(var(--rgb-walnut-mid)); }
.tray-item img { width: 54px; height: 54px; object-fit: cover; }
.tray-item b { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 16px; display: block; }
.tray-item span { font-size: 12px; color: rgb(var(--rgb-bone-faint)); font-variant-numeric: tabular-nums; }
.tray-rm { font-size: 22px; color: rgb(var(--rgb-bone-faint)); line-height: 1; padding: 4px 6px; }
.tray-rm:hover { color: #c2664f; }
.tray-ft { padding: 20px 24px 24px; border-top: 1px solid rgb(var(--rgb-walnut-mid)); }
.tray-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.tray-total span { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--rgb-bone-faint)); }
.tray-total b { font-size: 27px; color: rgb(var(--rgb-brass-br)); font-weight: 400; font-variant-numeric: tabular-nums lining-nums; }
.tray-note { font-size: 11.5px; color: rgb(var(--rgb-bone-faint)); margin-top: 12px; line-height: 1.6; text-align: center; }

/* --------------------------------------------------------------- process --- */
.process { background: rgb(var(--rgb-pitch)); overflow: hidden; }
.proc-media { position: absolute; inset: 0; opacity: .14; }
.proc-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.1); }
.process::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(var(--rgb-pitch)) 0%, rgb(var(--rgb-pitch) / .78) 40%, rgb(var(--rgb-pitch)) 100%);
}
.proc-in { position: relative; z-index: 2; }
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(28px, 3vw, 46px); }
.step { position: relative; padding-top: 30px; border-top: 1px solid rgb(var(--rgb-walnut-mid)); }
.step::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px;
  background: rgb(var(--rgb-brass)); transition: width 1s var(--ease) .2s;
}
.step.is-in::before { width: 100%; }
.step-n { display: block; font-size: 34px; color: rgb(var(--rgb-brass)); margin-bottom: 16px; line-height: 1; }
.step h3 { margin-bottom: 12px; }
.step p { color: rgb(var(--rgb-bone-dim)); font-size: 15px; }

/* ---------------------------------------- materials: a spec sheet, not cards --- */
.spec-hd, .spec-row {
  display: grid;
  grid-template-columns: 44px minmax(150px, 1.1fr) minmax(0, 1fr) 84px 108px minmax(0, 1.5fr);
  gap: clamp(12px, 1.8vw, 28px);
  align-items: center;
}
.spec-hd {
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgb(var(--rgb-bone-faint)); padding-bottom: 12px;
  border-bottom: 1px solid rgb(var(--rgb-brass) / .5);
}
.spec-row {
  padding-block: 20px; border-bottom: 1px solid rgb(var(--rgb-walnut-mid));
  transition: background .4s var(--ease);
}
.spec-row:hover { background: rgb(var(--rgb-walnut) / .5); }
/* --w / --w2 are set per-row inline: the actual colour of that species. The
   repeating streaks are grain figure, angled slightly off vertical the way
   quarter-sawn stock runs. */
.chipwood {
  display: block; width: 44px; height: 56px; position: relative; overflow: hidden;
  background: linear-gradient(118deg, var(--w) 0%, var(--w2) 46%, var(--w) 100%);
}
.chipwood::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(94deg, rgb(0 0 0 / .18) 0 1px, transparent 1px 6px, rgb(255 255 255 / .08) 6px 7px, transparent 7px 14px);
}
.spec-row h3 { font-size: 19px; }
.spec-fig { font-size: 13px; color: rgb(var(--rgb-bone-dim)); }
.spec-num { font-size: 15px; color: rgb(var(--rgb-brass-br)); font-variant-numeric: tabular-nums lining-nums; }
.spec-mv { font-size: 12px; color: rgb(var(--rgb-bone-faint)); display: grid; gap: 6px; }
/* A drawn bar rather than a word alone: movement is a quantity, so it gets one. */
.spec-mv i { display: block; height: 3px; background: rgb(var(--rgb-walnut-mid)); position: relative; }
.spec-mv i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: rgb(var(--rgb-brass)); }
.spec-row p { font-size: 13.5px; color: rgb(var(--rgb-bone-dim)); line-height: 1.6; }
.spec-foot { margin-top: 22px; font-size: 12px; color: rgb(var(--rgb-bone-faint)); }

/* ---------------------------------------------------------- studio record --- */
.record { margin-top: 42px; display: grid; gap: 1px; background: rgb(var(--rgb-walnut-mid)); border-block: 1px solid rgb(var(--rgb-walnut-mid)); }
.record > div { background: rgb(var(--rgb-void)); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 2px; }
.record dt { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--rgb-bone-faint)); }
.record dd { font-size: 24px; color: rgb(var(--rgb-brass-br)); font-variant-numeric: lining-nums; }

/* ------------------------------------------------------------ quotes --- */
.quotes { background: rgb(var(--rgb-pitch)); border-block: 1px solid rgb(var(--rgb-walnut-mid)); }
.q-lead { max-width: 22ch; margin-bottom: 54px; }
.q-lead blockquote {
  font-size: clamp(27px, 3.6vw, 50px); font-style: italic; line-height: 1.24;
  color: rgb(var(--rgb-bone)); margin-bottom: 24px;
  font-variation-settings: 'SOFT' 46, 'WONK' 1;
  text-indent: -.42em;
}
/* Real hanging punctuation: the quote glyphs are supplied here rather than
   typed into the markup, and the negative text-indent above pulls the opening
   one out into the margin so the first line's left edge is optically flush
   with the lines beneath it. Without these two rules the indent would just
   misalign the first line. */
.q-lead blockquote::before, .q blockquote::before { content: '\201C'; }
.q-lead blockquote::after, .q blockquote::after { content: '\201D'; }
.q-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 5vw, 76px); max-width: 900px; margin-left: auto; }
.q blockquote {
  font-family: 'Fraunces', Georgia, serif; font-size: clamp(18px, 1.6vw, 22px);
  font-style: italic; line-height: 1.5; color: rgb(var(--rgb-bone-dim)); margin-bottom: 20px;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  text-indent: -.4em;
}
.q-lead figcaption b, .q figcaption b { display: block; font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: .1em; font-weight: 500; }
.q-lead figcaption span, .q figcaption span { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--rgb-bone-faint)); }
.q { border-left: 1px solid rgb(var(--rgb-brass) / .4); padding-left: 26px; }

/* --------------------------------------------------------------- contact --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.contact-copy p { color: rgb(var(--rgb-bone-dim)); margin-top: 22px; max-width: 48ch; }
.contact-list { list-style: none; padding: 0; margin-top: 42px; display: grid; gap: 1px; background: rgb(var(--rgb-walnut-mid)); border: 1px solid rgb(var(--rgb-walnut-mid)); }
.contact-list li { background: rgb(var(--rgb-void)); padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact-list span { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--rgb-bone-faint)); }
.contact-list a, .contact-list b { font-weight: 400; font-size: 15.5px; letter-spacing: .04em; }
.contact-list a { color: rgb(var(--rgb-brass-br)); border-bottom: 1px solid rgb(var(--rgb-brass) / .4); transition: border-color .3s var(--ease); }
.contact-list a:hover { border-color: rgb(var(--rgb-brass-br)); }
.contact-list li.is-off { display: none; }

.form { border: 1px solid rgb(var(--rgb-walnut-mid)); background: rgb(var(--rgb-walnut) / .35); padding: clamp(26px, 3vw, 40px); display: grid; gap: 18px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--rgb-bone-faint)); }
.field input, .field select, .field textarea {
  background: rgb(var(--rgb-pitch)); border: 1px solid rgb(var(--rgb-walnut-mid));
  padding: 13px 15px; font-size: 15px; font-weight: 300; width: 100%;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input::placeholder, .field textarea::placeholder { color: rgb(var(--rgb-bone-faint) / .7); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: rgb(var(--rgb-brass)); background: rgb(var(--rgb-void)); }
.field.is-bad input, .field.is-bad textarea { border-color: #b4553f; }
.form-note { font-size: 12.5px; color: rgb(var(--rgb-bone-faint)); line-height: 1.6; text-align: center; }
.form-note.is-ok { color: rgb(var(--rgb-brass-br)); }
/* Shown only when the visitor arrived at the form from the commission list. */
.form-carry {
  font-size: 12.5px; color: rgb(var(--rgb-brass-br)); line-height: 1.6;
  border: 1px solid rgb(var(--rgb-brass) / .4); background: rgb(var(--rgb-brass) / .08); padding: 12px 15px;
}

/* ---------------------------------------------------------------- footer --- */
.ftr { background: rgb(var(--rgb-pitch)); border-top: 1px solid rgb(var(--rgb-walnut-mid)); padding-block: clamp(50px, 6vw, 82px); }
.ftr-in { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 40px; align-items: start; }
.ftr-mark .mark-num, .ftr-mark .mark-word { font-size: 26px; }
.ftr-mark .mark-amp { font-size: 18px; padding-inline: 4px; }
.ftr-mark p { color: rgb(var(--rgb-bone-faint)); font-size: 14px; margin-top: 16px; max-width: 42ch; }
.ftr-nav { display: grid; gap: 11px; }
.ftr-nav a { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--rgb-bone-dim)); transition: color .3s var(--ease); }
.ftr-nav a:hover { color: rgb(var(--rgb-brass-br)); }
.ftr-meta { text-align: right; font-size: 12px; color: rgb(var(--rgb-bone-faint)); letter-spacing: .06em; display: grid; gap: 8px; }
.ftr-meta .credit { opacity: .7; }

/* ------------------------------------------------------------- lightbox --- */
.lightbox {
  position: fixed; inset: 0; z-index: 950; display: none;
  background: rgb(var(--rgb-pitch) / .97); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: clamp(20px, 5vw, 70px);
}
.lightbox.is-on { display: flex; }
.lb-fig { max-width: 1100px; width: 100%; }
.lb-fig img { width: 100%; max-height: 76svh; object-fit: contain; }
.lb-fig figcaption { margin-top: 18px; display: grid; gap: 6px; text-align: center; }
.lb-fig figcaption b { font-size: 27px; font-weight: 400; }
.lb-fig figcaption span { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--rgb-bone-faint)); }
.lb-close, .lb-nav { position: absolute; color: rgb(var(--rgb-bone-dim)); transition: color .3s var(--ease); }
.lb-close { top: 22px; right: 28px; font-size: 40px; line-height: 1; }
.lb-nav { top: 50%; transform: translateY(-50%); font-size: 56px; line-height: 1; padding: 10px 18px; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
.lb-close:hover, .lb-nav:hover { color: rgb(var(--rgb-brass-br)); }

/* --------------------------------------------------------- scroll reveal --- */
/* A focus pull rather than a slide: content arrives slightly soft and settles
   into sharpness, the way a lens finds its subject. Slower than a typical
   reveal on purpose — the brief is reverent, not attention-grabbing. */
.reveal {
  opacity: 0; transform: translateY(22px); filter: blur(7px);
  transition: opacity 1.25s var(--ease), transform 1.25s var(--ease), filter 1.1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; } }

/* True hairlines where the device can draw one. */
@media (min-resolution: 2dppx) {
  .row, .spec-row, .ledger-hd, .spec-hd, .record > div { border-bottom-width: .5px; }
}

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 1080px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
  .spec-hd { display: none; }
  .spec-row {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas: "chip name num" "chip fig mv" "desc desc desc";
    row-gap: 6px; align-items: start;
  }
  .chipwood { grid-area: chip; height: 100%; min-height: 62px; }
  .spec-row h3 { grid-area: name; }
  .spec-num { grid-area: num; text-align: right; }
  .spec-fig { grid-area: fig; }
  .spec-mv { grid-area: mv; text-align: right; }
  .spec-mv i { display: none; }
  .spec-row p { grid-area: desc; margin-top: 6px; }
}
@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 0 0 auto; top: 0; padding: 110px var(--gut) 46px;
    background: rgb(var(--rgb-pitch) / .98); backdrop-filter: blur(16px);
    flex-direction: column; align-items: flex-start; gap: 22px;
    transform: translateY(-100%); transition: transform .45s var(--ease);
    border-bottom: 1px solid rgb(var(--rgb-walnut-mid));
  }
  .nav.is-open { transform: none; }
  .nav > a { font-size: 15px; }
  .nav .nav-cta { margin-top: 10px; }
  .split, .contact-grid, .market-head { grid-template-columns: 1fr; }
  .market-head { align-items: start; }
  .split-rev .split-media { order: 0; }
  .ftr-in { grid-template-columns: 1fr; }
  .ftr-meta { text-align: left; }
  .sheet-in { grid-template-columns: 1fr; }
  .sheet-img img { max-height: 300px; }
  .q-lead { max-width: none; }
  .ledger-hd { display: none; }
  .row {
    grid-template-columns: 46px 1fr auto;
    grid-template-areas: "n name meta" "n desc desc";
    row-gap: 8px; align-items: start;
  }
  .row-n { grid-area: n; }
  .row h3 { grid-area: name; }
  .row-m { grid-area: meta; }
  .row p { grid-area: desc; }
}
@media (max-width: 620px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .tile.t-wide, .tile.t-tall { grid-column: auto; grid-row: auto; }
  .tile figcaption { transform: none; opacity: 1; }
  .f-row { grid-template-columns: 1fr; }
  .hero-foot { justify-content: center; }
  .timecode { display: none; }
  .mark-sub { font-size: 7.5px; letter-spacing: .3em; }
  .products { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .market-bar { flex-direction: column; align-items: flex-start; }
  .tray-tab { bottom: 0; right: 0; left: 0; justify-content: center; }
}

/* ===========================================================================
   LIFE — ambient motion
   ---------------------------------------------------------------------------
   Everything here is slow, continuous and material. The governing idea is that
   the page behaves like a finished surface in a room with a window: light moves
   across it, depth shifts as you move, nothing jumps. Durations are in the
   8–26 second range deliberately — fast enough to register as alive, slow
   enough that it never competes with reading.

   All of it is switched off wholesale by the prefers-reduced-motion block near
   the top of this file, which zeroes animation and transition durations.
   =========================================================================== */

/* ------------------------------------------------- raking light on grain --- */
/* A specular sweep travelling across wood, injected by app.js into every image
   frame and swatch. The band is held off-stage for the first 62% of the cycle,
   so what you actually see is a slow pass and then a long rest — not a strobe.
   Each element gets its own --sheen-delay so the page never pulses in unison. */
.sheen {
  position: absolute; inset: -60% -20%; z-index: 1; pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgb(var(--rgb-brass-br) / .05) 38%,
    rgb(255 250 240 / .16) 50%,
    rgb(var(--rgb-brass-br) / .05) 62%,
    transparent 100%
  );
  transform: translateX(-150%) rotate(12deg);
  animation: sheen 17s var(--ease) infinite;
  animation-delay: var(--sheen-delay, 0s);
  mix-blend-mode: screen;
}
@keyframes sheen {
  0%, 58% { transform: translateX(-150%) rotate(12deg); }
  100%    { transform: translateX(150%) rotate(12deg); }
}
.chipwood .sheen { animation-duration: 13s; inset: -80% -40%; }

/* ------------------------------------------------------- depth on scroll --- */
/* Scroll-driven parallax on a view() timeline: the browser runs these off the
   main thread, so a dozen images drifting at once costs nothing. Animating the
   independent `translate` property leaves `scale` free for the hover states.
   Guarded by @supports — where view() is unavailable the images simply sit
   still, which is a perfectly good page. */
@supports (animation-timeline: view()) {
  .tile img, .prod-img img, .frame img, .proc-media img {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes drift {
    from { translate: 0 -3.5%; }
    to   { translate: 0 3.5%; }
  }
  .proc-media img { animation-name: driftFar; }
  @keyframes driftFar {
    from { translate: 0 -7%; }
    to   { translate: 0 7%; }
  }

  /* The dovetail opens from its centre as it comes into view, the way a joint
     is cut out from the middle of the waste. */
  .joint {
    animation: jointOpen linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 42%;
  }
  @keyframes jointOpen {
    from { clip-path: inset(0 50% 0 50%); opacity: 0; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
  }

  /* A marking gauge run along the top edge as the page is read. */
  .gauge {
    position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 600;
    background: linear-gradient(to right, rgb(var(--rgb-brass-deep)), rgb(var(--rgb-brass-br)));
    transform-origin: 0 50%; transform: scaleX(0);
    animation: gauge linear both;
    animation-timeline: scroll(root);
  }
  @keyframes gauge { to { transform: scaleX(1); } }
}

/* ------------------------------------------------------------ the lamp --- */
/* A warm pool of light that follows the pointer, as if a work lamp were being
   moved over the bench. Positioned by app.js through --mx/--my; it stays put
   and fades out when the pointer leaves, and is never created on touch
   devices, where there is no pointer to follow. */
.lamp {
  position: fixed; left: 0; top: 0; width: 46vmax; height: 46vmax;
  margin: -23vmax 0 0 -23vmax; z-index: 1; pointer-events: none;
  translate: var(--mx, 50vw) var(--my, 50vh);
  background: radial-gradient(circle closest-side, rgb(var(--rgb-brass) / .11), rgb(var(--rgb-brass) / .04) 45%, transparent 72%);
  opacity: 0; transition: opacity 1.4s var(--ease);
  will-change: translate;
  /* Screen, not normal: the pool adds warmth to the dark ground and leaves the
     bone-coloured text essentially untouched. A plain overlay would veil it. */
  mix-blend-mode: screen;
}
.lamp.is-lit { opacity: 1; }

/* --------------------------------------------------- hero: words settle --- */
/* The headline arrives a word at a time. Hand-authored spans rather than a
   JS text-splitter, so the <em> and the line break survive intact and the
   markup stays readable. */
.hero-in h1 .w {
  display: inline-block;
  opacity: 0; filter: blur(9px);
  transform: translateY(.34em);
  animation: settle 1.5s var(--ease) forwards;
  animation-delay: calc(.34s + var(--i) * .085s);
}
@keyframes settle {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* The brass rule under an eyebrow breathes very slightly, so even a static
   section is never completely inert. */
.eyebrow::before { animation: breathe 8s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}