/* Leonard Tannor · "The Showroom" · tokens mirror DESIGN.md v0.2 */

/* Switzer (Fontshare, ITF Free Font License), self-hosted */
/* Barlow Condensed self-hosted alongside Switzer: the display face carries the
   whole page, and a third-party font that fails to arrive means every heading
   reflows into a much wider fallback. Also keeps the site off Google's servers. */
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("assets/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("assets/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --stage: #121110;
  --stage-raised: #1C1A18;
  --stage-ink: #F2F0EA;
  --stage-ink-2: #9A968F;
  --stage-rule: #34312D;
  --paper: #F2F0EA;
  --paper-alt: #E8E5DC;
  --surface: #FFFFFF;
  --ink: #171512;
  --ink-2: #4A4640;
  --steel: #7D7A74;
  --rule: #CFCBC1;
  --rule-strong: #494949;
  --gold: #B8893F;
  --gold-press: #9C7233;
  --gold-ink: #121110;
  --error-stage: #E07A5F;
  --error-paper: #9B2C1F;

  --f-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: "Switzer", "Helvetica Neue", Arial, sans-serif;

  --t-hero: clamp(56px, 8.4vw, 132px);
  --t-display: clamp(44px, 6vw, 96px);
  --t-h3: clamp(26px, 2.6vw, 38px);
  --t-lead: clamp(18px, 1.5vw, 21px);
  --t-body: 16px;
  --t-small: 14px;
  --t-label: 14px;

  --max: 1440px;
  --gutter: clamp(20px, 4.5vw, 64px);
  --section: clamp(80px, 11vw, 160px);
  --nav-h: 64px;

  --settle: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--gold-ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--gold-ink); padding: 12px 16px; font: 500 var(--t-label)/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.label { font: 500 var(--t-label)/1.2 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); margin: 0; }
.display { font-family: var(--f-display); font-weight: 400; font-size: var(--t-display); line-height: .92; letter-spacing: .023em; text-transform: uppercase; margin: 0; }
.lead { font-size: var(--t-lead); line-height: 1.5; margin: 0; }
.body p { margin: 0 0 1.1em; max-width: 62ch; }
.body p:last-child { margin-bottom: 0; }

/* ---------- Surfaces ---------- */
.stage { background: var(--stage); color: var(--stage-ink); }
.stage .label { color: var(--stage-ink-2); }
.paper { background: var(--paper); }
.surface { background: var(--surface); }

/* ---------- Buttons ---------- */
.btn, .btn-line {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer; text-decoration: none;
  font: 500 15px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  border-radius: 0; transition: background-color .18s var(--settle), color .18s var(--settle), border-color .18s var(--settle);
}
.btn { background: var(--gold); color: var(--gold-ink); border: 0; padding: 17px 26px; }
.btn:hover { background: var(--gold-press); }
.btn .arrow, .btn-line .arrow { transition: transform .18s var(--settle); }
.btn:hover .arrow, .btn-line:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { background: var(--rule); color: var(--steel); cursor: not-allowed; }
.btn-line { background: transparent; color: inherit; border: 1px solid var(--steel); padding: 16px 24px; }
.btn-line:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stage .btn-line:hover, .on-photo .btn-line:hover { background: var(--stage-ink); color: var(--stage); border-color: var(--stage-ink); }

.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .24em; transition: color .18s; }
.link:hover { color: var(--gold); }

/* ---------- Nav ---------- */
/* The nav floats clear over the hero at the top, so the photograph runs the full
   height of the screen with no bar cutting across it, and lands as a solid bar
   the moment you start scrolling. It is fixed rather than sticky because the
   hero now occupies the space the bar used to reserve. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h);
       color: var(--stage-ink); background: transparent; border-bottom: 1px solid transparent;
       transition: background-color .32s var(--settle), border-color .32s var(--settle); }
/* a soft scrim so the links stay legible against a bright patch of the photo */
.nav::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(18,17,16,.55), rgba(18,17,16,0));
  opacity: 1; transition: opacity .32s var(--settle); }
.nav.is-stuck { background: var(--stage); border-bottom-color: var(--stage-rule); }
.nav.is-stuck::before { opacity: 0; }
.nav.is-open { background: var(--stage); border-bottom-color: var(--stage-rule); }
.nav.is-open::before { opacity: 0; }
.nav__inner { position: relative; }
@media (prefers-reduced-motion: reduce) { .nav, .nav::before { transition: none; } }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
/* The brand is set as TYPE, not an image: it is a letterspaced wordmark in the
   site's own display face, so it stays perfectly sharp at any size and on any
   screen, weighs nothing, and is selectable and readable by a screen reader
   without an alt attribute. The trailing letter-spacing adds a phantom space
   after the last R, so a matching negative margin pulls the optical edge back
   to where the left one sits. */
.brand__word {
  display: block;
  font: 500 16px/1 var(--f-display);
  letter-spacing: .34em;
  margin-right: -.34em;
  text-transform: uppercase;
  color: var(--stage-ink);
  white-space: nowrap;
}
@media (max-width: 560px) { .brand__word { font-size: 14px; letter-spacing: .28em; margin-right: -.28em; } }
.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.nav__links a { position: relative; display: block; padding: 8px 0; font: 500 var(--t-label)/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--stage-ink-2); transition: color .18s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--stage-ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--settle); }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--stage-ink); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__links .nav__contact { color: var(--stage-ink); }
.nav__toggle { display: none; background: none; border: 0; color: var(--stage-ink); cursor: pointer; font: 500 var(--t-label)/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; padding: 10px 0; }
@media (max-width: 860px) {
  .nav__toggle { display: block; }
  .nav__links { position: fixed; inset: var(--nav-h) 0 0 0; background: var(--stage); flex-direction: column; align-items: stretch; gap: 0; padding: 16px var(--gutter); visibility: hidden; opacity: 0; transition: opacity .25s var(--settle), visibility .25s; }
  .nav.is-open .nav__links { visibility: visible; opacity: 1; }
  .nav__links li { border-bottom: 1px solid var(--stage-rule); }
  .nav__links a { font-size: clamp(40px, 11vw, 64px); letter-spacing: .02em; padding: 16px 0; color: var(--stage-ink); }
  .nav__links a::after { display: none; }
}

/* ---------- Section head ---------- */
.section { padding: var(--section) 0; }
.section-head { position: relative; display: flex; align-items: baseline; gap: 14px; padding-top: 14px; margin-bottom: clamp(36px, 5vw, 72px); }
.section-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-strong); transform-origin: left; transition: transform 1.2s var(--settle); }
.stage .section-head::before { background: var(--stage-ink-2); }
.section-head .num { font: 500 var(--t-label)/1 var(--f-display); letter-spacing: .1em; color: var(--gold); font-variant-numeric: tabular-nums; }
.paper .section-head .num, .surface .section-head .num { color: var(--gold-press); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; max-height: 1000px; overflow: hidden; background: var(--stage); color: var(--stage-ink); }
.hero__slides { position: absolute; inset: 0; overflow: hidden; }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 60% 50%); opacity: 0; transform: scale(1.06) translateX(1.5%); transition: opacity 1.6s var(--settle), transform 8s linear; will-change: opacity, transform; }
.hero__slide.is-active { opacity: 1; transform: scale(1) translateX(0); }
.hero__slide.is-leaving { opacity: 0; transform: scale(1) translateX(-1.5%); transition: opacity 1.6s var(--settle), transform 1.6s var(--settle); }
.hero__ctrl { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(36px, 7vh, 72px); display: flex; align-items: center; gap: 20px; }
.hero__ticks { display: flex; gap: 6px; }
.hero__tick { position: relative; width: 56px; padding: 12px 0 0; background: none; border: 0; color: var(--stage-ink-2); cursor: pointer; text-align: left; font: 500 12px/1 var(--f-display); letter-spacing: .12em; }
.hero__tick::before, .hero__tick::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(242,240,234,.3); }
.hero__tick::after { background: var(--gold); transform: scaleX(0); transform-origin: left; }
.hero__tick[aria-current="true"] { color: var(--stage-ink); }
.hero__tick[aria-current="true"]::after { transform: scaleX(1); transition: transform var(--dwell, 7s) linear; }
.hero.is-paused .hero__tick[aria-current="true"]::after { transition: none; transform: scaleX(1); }
.hero__tick:hover { color: var(--stage-ink); }
.hero__pause { min-width: 68px; text-align: center; background: none; border: 1px solid rgba(242,240,234,.4); color: var(--stage-ink); cursor: pointer; padding: 9px 12px; font: 500 12px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.hero__pause:hover { border-color: var(--stage-ink); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,17,16,.7) 0%, rgba(18,17,16,.3) 42%, rgba(18,17,16,0) 64%); pointer-events: none; }
.hero__copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(36px, 7vh, 72px); max-width: 1100px; }
.hero h1 { font-size: var(--t-hero); line-height: .9; margin-bottom: clamp(24px, 3.5vh, 36px); }
.float-text { max-width: 36ch; margin: 0 0 clamp(24px, 3.5vh, 36px); padding-left: 16px; border-left: 3px solid var(--stage-ink); font-size: var(--t-lead); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero__actions .link { font: 500 var(--t-label)/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 860px) {
  .hero { height: auto; min-height: 88svh; max-height: none; display: flex; align-items: flex-end; }
  .hero__copy { position: relative; left: 0; right: 0; bottom: 0; padding: 120px var(--gutter) 40px; }
  .hero::after { background: linear-gradient(0deg, rgba(18,17,16,.88) 0%, rgba(18,17,16,.5) 55%, rgba(18,17,16,.1) 100%); }
  .hero__slide { object-position: 70% 50%; }
  /* the copy block is in flow at the foot of the hero on small screens, so the
     slide controls move to the top — but the nav is fixed over this same band,
     so they start below it rather than at top:20px, where the ticks and the
     PAUSE button landed on the brand mark and the MENU toggle */
  .hero__ctrl { top: calc(var(--nav-h) + 14px); bottom: auto; right: var(--gutter); }
}

/* Intro continuation on paper */
.intro { padding: clamp(56px, 7vw, 96px) 0; }
.intro__grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 64px); }
.intro__grid p { font-size: var(--t-lead); line-height: 1.5; margin: 0; max-width: 44em; }
@media (max-width: 860px) { .intro__grid { grid-template-columns: 1fr; } }

/* ---------- Ledger ---------- */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.ledger > li + li { border-top: 1px solid var(--rule); }
.row { display: grid; grid-template-columns: 64px minmax(0, 1.3fr) 220px minmax(0, 1fr) 32px; align-items: center; gap: 24px; padding: 26px 12px; text-decoration: none; color: var(--ink); transition: background-color .25s var(--settle); }
.row__num { font: 500 var(--t-label)/1 var(--f-display); letter-spacing: .08em; color: var(--steel); font-variant-numeric: tabular-nums; }
.row__name { font: 400 var(--t-h3)/1 var(--f-display); letter-spacing: .023em; text-transform: uppercase; }
.row__logo { height: 64px; display: flex; align-items: center; }
.row__domain { font-size: var(--t-small); color: var(--ink-2); overflow-wrap: anywhere; }
.row__arrow { justify-self: end; font-size: 20px; transition: transform .25s var(--settle), color .25s; }
a.row:hover, a.row:focus-visible { background: var(--paper-alt); }
a.row:hover .row__arrow, a.row:focus-visible .row__arrow { transform: translateX(6px); color: var(--gold-press); }
a.row:hover .row__num { color: var(--gold-press); }

.logo { max-height: 48px; max-width: 190px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.logo--square { max-height: 64px; }

/* Group: Safe Support Ventures + its children's homes */
.row--group { cursor: default; }
.row--group:hover { background: var(--paper-alt); }
.homes { list-style: none; margin: 0; padding: 0 12px 30px calc(12px + 64px + 24px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.homes-label { grid-column: 1 / -1; margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.homes-label::before { content: ""; width: 24px; height: 1px; background: var(--steel); }
.home { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 212px; padding: 44px 20px 20px; border: 1px solid var(--rule); background: var(--surface); transition: background-color .25s var(--settle); }
.home + .home { border-left: 0; }

.home__idx { position: absolute; top: 14px; right: 14px; font: 500 12px/1 var(--f-display); letter-spacing: .1em; color: var(--steel); }
.home__logo { height: 88px; display: flex; align-items: flex-start; }
.home__logo .logo { max-height: 84px; max-width: 100%; object-position: left top; }
.home__name { margin: 0; font: 500 15px/1.3 var(--f-body); color: var(--ink); }
/* the whole tile is the target - the logo above the name is what people reach
   for - and the two homes that are still opening say so, as their own site does */
.home__link { color: inherit; text-decoration: none; }
.home__link::after { content: ""; position: absolute; inset: 0; }
.home__arrow { display: inline-block; margin-left: .4em; transition: transform .25s var(--settle); }
.home:hover { background: var(--paper-alt); }
.home:hover .home__arrow { transform: translateX(4px); color: var(--gold-press); }
.home:focus-within { outline: 2px solid var(--gold-press); outline-offset: -2px; }
.home__soon { display: block; margin-top: 6px; font: 500 11px/1 var(--f-display);
  letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }

@media (max-width: 1100px) { .row { grid-template-columns: 48px minmax(0, 1fr) 190px 32px; } .row__domain { display: none; } .homes { padding-left: calc(12px + 48px + 24px); } }
@media (max-width: 860px) {
  .row { grid-template-columns: 36px minmax(0, 1fr) 24px; grid-template-areas: "n name a" ". logo logo" ". dom dom"; gap: 12px; padding: 24px 4px; }
  .row__num { grid-area: n; } .row__name { grid-area: name; } .row__logo { grid-area: logo; height: auto; } .row__domain { grid-area: dom; display: block; } .row__arrow { grid-area: a; }
  .row__domain:empty { display: none; }
  .homes { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 4px 24px 52px; }
  .home { min-height: 176px; padding: 38px 14px 14px; }
  .home + .home { border-left: 1px solid var(--rule); }
  .home:nth-child(even) { border-left: 0; }
  .home:nth-child(n+4) { border-top: 0; }
  .home__logo { height: 64px; } .home__logo .logo { max-height: 60px; }
}
@media (max-width: 420px) { .homes { padding-left: 4px; } }

/* ---------- Macro strip ---------- */
.macro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--stage); height: clamp(220px, 30vw, 440px); overflow: hidden; }
.macro__cell { position: relative; overflow: hidden; background: var(--img, none) center / cover no-repeat;
  background-color: var(--stage-raised); transform-origin: center; }
/* Only hide the cell when JS is there to un-hide it. Without JS the loader never
   runs, so the cells must stay visible - the markup falls back to no image
   rather than to an invisible box. */
.js .macro__cell { opacity: .001; transition: opacity .6s var(--settle); }
.js .macro__cell.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .macro__cell { transition: none; } }
@media (max-width: 860px) { .macro { grid-template-columns: 1fr 1fr; } .macro__cell:nth-child(1) { display: none; } }

/* ---------- Book ---------- */
.book__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.book__obj { position: relative; display: grid; place-items: center; min-height: clamp(400px, 44vw, 620px); background: var(--paper-alt); overflow: hidden; }
.book__obj img { width: 76%; height: auto; filter: drop-shadow(0 30px 34px rgba(18,17,16,.22)); }
.seal { position: absolute; right: 11%; top: 10%; width: clamp(88px, 8vw, 116px); aspect-ratio: 1; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; text-align: center; box-shadow: inset 0 0 0 6px var(--gold), inset 0 0 0 7px rgba(18,17,16,.35); transform: rotate(8deg); }
.seal span { font: 500 11px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; }
.seal b { display: block; font: 400 clamp(36px, 3.4vw, 48px)/.9 var(--f-display); }
.tag { position: absolute; transform: rotate(-10deg); background: var(--stage); color: var(--stage-ink); font: 500 13px/1 var(--f-display); letter-spacing: .16em; text-transform: uppercase; padding: 9px 13px; white-space: nowrap; }
.book__obj .tag { left: 9%; bottom: 12%; }
.book__byline { margin: 18px 0 32px; }
.book .body { color: var(--ink-2); }
.book__actions { margin-top: 32px; }
@media (max-width: 860px) { .book__grid { grid-template-columns: 1fr; } }

/* ---------- Podcast ---------- */
/* stretch, not end: the player card fills the height of the copy beside it, so
   there is no band of empty ground above it */
.pod__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: stretch; }
.pod .body { color: var(--stage-ink-2); margin-top: 32px; }
.pod__actions { margin-top: 32px; }
.embed { position: relative; background: var(--stage-raised); border: 1px solid var(--stage-rule); aspect-ratio: 16 / 10; }
/* the 16:10 letterbox is for the real SoundCloud frame. The player card is a
   bar, so when it stands in, the box takes the card's own height instead of
   leaving a band of empty ground underneath it. */
.embed:has(.player) { aspect-ratio: auto; height: 100%; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed .tag { top: -16px; right: 24px; background: var(--stage-ink); color: var(--stage); z-index: 2; }

/* Player card.
   The live site runs the real SoundCloud iframe, which plays in place. This is
   the stand-in for every context that cannot load a third-party frame — the
   preview and artifact pages, a visitor blocking third-party frames — and it is
   a link rather than a notice, so the play button actually opens the episode on
   SoundCloud instead of sitting there as a dead box.

   Laid out the way a podcast player is: cover square on the left, episode and
   show stacked top right, then the play control against a waveform. It draws no
   control it cannot honour — there is no audio element behind this, so there is
   no skip, no speed and no scrub bar. A button that does nothing is worse than
   no button. */
.player {
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(18px, 2.2vw, 32px);
  text-decoration: none; color: var(--stage-ink);
  transition: background-color .3s var(--settle);
}
/* cover and titles ride together at the top. The head takes the slack, so the
   cover grows to fill whatever height the copy column sets rather than leaving
   the card half empty. */
.player__head { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; gap: clamp(14px, 1.8vw, 24px); }
.player:hover { background: rgba(242, 240, 234, .04); }

/* The cover is set as type rather than loaded as a picture: the episode artwork
   lives on SoundCloud's CDN and I could not retrieve it, so rather than hotlink
   somebody else's server or invent a graphic, the square carries the title in
   the site's own face. Send me the real artwork and it drops straight in. */
.player__art {
  flex: none; height: 100%; width: auto; aspect-ratio: 1;
  min-width: 88px; max-width: 42%;
  background: var(--stage); border: 1px solid var(--stage-rule);
  padding: clamp(10px, 1.2vw, 16px);
  display: flex; flex-direction: column; gap: clamp(8px, 1vw, 14px);
}
.player__art s { margin-top: auto; }
.player__art b {
  font: 400 clamp(13px, 1.9vw, 26px)/1.02 var(--f-display); font-weight: 400;
  letter-spacing: .02em; text-transform: uppercase; color: var(--stage-ink);
}
.player__art i {
  display: block; width: 26px; height: 2px; background: var(--gold); font-style: normal;
}
.player__art s {
  text-decoration: none; font: 500 9px/1 var(--f-display); letter-spacing: .16em;
  text-transform: uppercase; color: var(--stage-ink-2);
}

.player__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  justify-content: flex-start; gap: 4px; }
.player__t { display: block; font: 400 clamp(19px, 2.1vw, 30px)/1.05 var(--f-display);
  letter-spacing: .02em; text-transform: uppercase; }
.player__show { display: block; margin-top: 5px; font: 500 12px/1 var(--f-display);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

.player__row { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); }
.player__play {
  flex: none; width: clamp(44px, 4.4vw, 58px); aspect-ratio: 1; border-radius: 50%;
  background: var(--gold); display: grid; place-items: center;
  transition: transform .3s var(--settle), background-color .3s var(--settle);
}
.player__play::before {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border: solid transparent; border-width: 8px 0 8px 13px; border-left-color: var(--gold-ink);
}
.player:hover .player__play { transform: scale(1.07); background: var(--gold-press); }
/* a suggestion of a waveform, drawn with a repeating gradient rather than markup */
.player__wave {
  flex: 1 1 auto; min-width: 0; height: clamp(26px, 3vw, 40px); opacity: .45;
  background: repeating-linear-gradient(90deg, var(--stage-ink-2) 0 2px, transparent 2px 6px);
  clip-path: polygon(0 62%,3% 40%,6% 70%,9% 22%,12% 55%,15% 8%,18% 48%,21% 74%,24% 30%,27% 60%,30% 14%,33% 52%,36% 80%,39% 34%,42% 66%,45% 18%,48% 46%,51% 72%,54% 26%,57% 58%,60% 12%,63% 50%,66% 76%,69% 36%,72% 64%,75% 20%,78% 44%,81% 70%,84% 28%,87% 56%,90% 16%,93% 48%,96% 68%,100% 38%,100% 100%,0 100%);
}
.player__cta { display: flex; align-items: center; gap: 9px; font: 500 12px/1 var(--f-display);
  letter-spacing: .16em; text-transform: uppercase; color: var(--stage-ink-2); }
.player:hover .player__cta { color: var(--stage-ink); }
.player:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
@media (max-width: 420px) {
  .player__art { min-width: 74px; max-width: 74px; }
  .player__wave { display: none; }
}

@media (max-width: 860px) { .pod__grid { grid-template-columns: 1fr; } .embed { aspect-ratio: 4 / 3; } }

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 64px); }
.about__mark { width: min(240px, 70%); height: auto; mix-blend-mode: multiply; opacity: .9; }
.about__statement { font-size: clamp(34px, 4.2vw, 64px); max-width: 20ch; }
.about .body { color: var(--ink-2); margin-top: clamp(32px, 4vw, 48px); }
.photo-quote { position: relative; margin: clamp(64px, 9vw, 120px) 0 0; height: clamp(360px, 44vw, 600px); overflow: hidden; background: var(--stage); color: var(--stage-ink); }
.photo-quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 45%; }
.photo-quote::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,17,16,.65), rgba(18,17,16,0) 60%); }
.photo-quote figcaption { position: absolute; z-index: 2; left: clamp(20px, 4vw, 56px); bottom: clamp(24px, 4vw, 56px); right: 20px; }
.photo-quote blockquote { margin: 12px 0 0; max-width: 18ch; padding-left: 18px; border-left: 3px solid var(--stage-ink); font: 400 clamp(30px, 3.6vw, 56px)/.95 var(--f-display); letter-spacing: .023em; text-transform: uppercase; }
.photo-quote blockquote p { margin: 0; }
.photo-quote .label { color: var(--stage-ink); padding-left: 21px; }
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } .photo-quote::after { background: linear-gradient(0deg, rgba(18,17,16,.8), rgba(18,17,16,0) 70%); } }

/* ---------- Pill band ---------- */
.band-wrap { padding-bottom: clamp(56px, 7vw, 96px); }
.band { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; background: var(--gold); color: var(--gold-ink); border-radius: 160px; padding: clamp(26px, 3.4vw, 44px) clamp(32px, 5vw, 72px); text-decoration: none; transition: background-color .25s var(--settle); }
.band:hover { background: var(--gold-press); }
.band strong { font: 400 clamp(28px, 3.4vw, 54px)/.95 var(--f-display); letter-spacing: .023em; text-transform: uppercase; max-width: 24ch; }
.band > span { flex: none; display: inline-flex; gap: 12px; align-items: center; border: 1px solid var(--gold-ink); padding: 16px 24px; font: 500 15px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.band .arrow { transition: transform .18s var(--settle); }
.band:hover .arrow { transform: translateX(4px); }
@media (max-width: 860px) { .band { flex-direction: column; align-items: flex-start; border-radius: 32px; } }

/* ---------- Contact (stage) ---------- */
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 7vw, 120px); }
.contact__sub { margin: 0; }
.facts { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; border-top: 1px solid var(--stage-ink-2); }
.facts div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--stage-rule); font-size: var(--t-small); }
.facts dt { color: var(--stage-ink-2); }
.facts dd { margin: 0; }
.facts a { text-decoration: none; }
.facts a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: .24em; }

.form { display: grid; gap: 28px; align-content: start; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field { display: grid; gap: 10px; }
.field label { display: flex; justify-content: space-between; font: 500 var(--t-label)/1.2 var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--stage-ink-2); }
.field label small { font: 400 12px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; }
.field input, .field textarea { width: 100%; font: 400 var(--t-body)/1.5 var(--f-body); color: var(--stage-ink); background: var(--stage-raised); border: 1px solid transparent; border-bottom-color: var(--stage-ink-2); border-radius: 0; padding: 14px 14px 12px; transition: border-color .18s var(--settle), box-shadow .18s var(--settle); }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); box-shadow: inset 0 -1px 0 var(--gold); }
.field.is-error input, .field.is-error textarea { border-color: var(--error-stage); box-shadow: none; }
.field__msg { margin: 0; font-size: 13px; color: var(--error-stage); }
.field__msg:empty { display: none; }
.form__status { margin: 0; font-size: var(--t-small); }
.form__status:empty { display: none; }
@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .form__row { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { background: var(--stage); color: var(--stage-ink); overflow: hidden; border-top: 1px solid var(--stage-rule); }
.footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 28px; padding-bottom: 28px; font-size: var(--t-small); color: var(--stage-ink-2); }
.footer__meta a { color: var(--stage-ink-2); }
.footer__meta a:hover { color: var(--gold); }
/* The original stacked logo signs the page off. The PNG is what loads - it is
   3.5 KB against 23 KB gzipped for the vector, and at this size it is more
   resolution than the footer needs. The SVGs beside it are for print. */
.footer__mark { margin: 0; padding-bottom: clamp(38px, 5vw, 66px); display: flex;
  justify-content: center; }
/* the sign-off runs larger than the nav mark and wider still, because it has the
   room; it shrinks with the viewport so it never has to wrap */
.brand__word--foot { font-size: clamp(15px, 3.4vw, 30px); letter-spacing: .42em; margin-right: -.42em; }

/* ---------- Motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--settle), transform .8s var(--settle); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .lines > span { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.js .lines > span > span { display: block; transform: translateY(105%); transition: transform .9s var(--settle); }
.js .lines.is-in > span > span { transform: none; }
.js .lines.is-in > span:nth-child(2) > span { transition-delay: .08s; }
.js .lines.is-in > span:nth-child(3) > span { transition-delay: .16s; }
.js .section-head::before { transform: scaleX(0); }
.js .section-head.is-in::before { transform: scaleX(1); }
.js .ledger > li { opacity: 0; transition: opacity .6s var(--settle); }
.js .ledger.is-in > li { opacity: 1; }
.js .ledger.is-in > li:nth-child(2) { transition-delay: .06s; }
.js .ledger.is-in > li:nth-child(3) { transition-delay: .12s; }
.js .ledger.is-in > li:nth-child(4) { transition-delay: .18s; }
.js .ledger.is-in > li:nth-child(5) { transition-delay: .24s; }
.js .ledger.is-in > li:nth-child(6) { transition-delay: .30s; }
.js .ledger.is-in > li:nth-child(7) { transition-delay: .36s; }
.js .macro .macro__cell { transform: scale(1.06); transition: transform 1.8s var(--settle); }
.js .macro.is-in .macro__cell { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .js [data-reveal], .js .lines > span > span, .js .ledger > li { opacity: 1 !important; transform: none !important; }
  .js .section-head::before { transform: none !important; }
  .js .macro .macro__cell { transform: none !important; }
  .hero__slide { transition: none !important; transform: none !important; }
}