/* ============================================================================
   AUTHXNTIC — KOTR structure, Authxntic skin.

   THE STRUCTURE (operator picked it 2026-09-01, having seen the demo):
   KOTR (kotr.framer.website) solves the problem this site had — it is carried
   by photography, not prose. Measured off the live page: SIX headings on the
   entire homepage, H1 at 50px WEIGHT 400 (not 96px, not bold), and a hero that
   is one full-bleed frame with all its interface pushed into the corners as
   small mono furniture. The type is deliberately SMALLER than the image is big.
   That inversion is the whole trick and it is what is copied here.

   THE SKIN is Vol I, unchanged: the family of four warm blacks (p14), paper and
   the two accents (p15), red on brand surfaces and never brass on the web
   (p16), Inter as the sanctioned Söhne fallback (p18).

   What is NOT taken from KOTR: its palette, its type, its logo, its copy, its
   code. This is a re-implementation of a layout pattern, written from scratch.
   ========================================================================= */

:root{
  --ink:#0A0A0A; --oil:#1F1D18; --raw:#2A2620; --char:#3A3530;
  --paper:#FAFAF7; --bone:#EFECE4; --dust:#B8AA90;
  --blood:#5A0610;      /* Pantone 1815 C — fills, rules, the wordmark */
  /* Three tokens removed here, each measured against the PDF rather than the
     derived summary. The hover red was written `var(--blood)` on itself —
     self-referential, so it resolved to nothing and every hover silently fell
     back to the unhovered fill. Hover is a brightness filter now, which keeps
     the palette at the nine colours p15 ships instead of inventing a tenth.
     The lifted red went the same way: the bible ships ONE red, p17 says
     "Never bright red", and sampling p16's own dark panels returns #5A0610
     exactly (4,953 pixels, no screen variant anywhere in the document). Brass
     is deleted rather than annotated, because p16 keeps brass on GARMENTS and
     rules that brass and red never share a surface — a token defined on a
     brand surface only invites the violation.

     Secondary text becomes DUST, p15's earth mid-tone, replacing a grey that
     appears nowhere in the system yet carried most of the site's secondary
     copy. Hairlines become CHAR, which p14 names for exactly this role: "A
     panel against ink, a topstitch on oil." The translucent bone it replaces
     tinted every edge toward white and flattened the family of blacks. */
  --dim:var(--dust);
  --hair:#3A3530;
  --hair-paper:rgba(10,10,10,.14);

  --sans:"Inter",ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* KOTR's restraint: the hero line is ~50px, not 96. The image is the display. */
  --t-hero:  clamp(2rem, 3.6vw, 3.125rem);
  --t-h2:    clamp(1.6rem, 2.8vw, 2.5rem);
  --t-lead:  1.0625rem;
  --t-body:  .9375rem;
  --t-label: .625rem;
  --t-mono:  .6875rem;

  --safe: clamp(1rem, 2.4vw, 2rem);
  --gap:  clamp(.5rem, 1vw, .875rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--ink); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--sans); font-size:var(--t-body); font-weight:400;
  line-height:1.55; letter-spacing:-.004em; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-weight:400; margin:0; letter-spacing:-.022em; color:var(--paper); }

.mono{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.04em;
       color:var(--dim); text-transform:uppercase; }
.eyebrow{ display:block; font-family:var(--mono); font-size:var(--t-mono);
          letter-spacing:.18em; text-transform:uppercase; color:var(--dust); }

/* ============================ THE STAGE ==================================
   One full-bleed frame per page. All interface lives in the corners.
   ======================================================================== */
.stage{ position:relative; min-height:100svh; overflow:hidden;
        display:flex; flex-direction:column; justify-content:flex-end; }
.stage__img{ position:absolute; inset:0; width:100%; height:100%;
             object-fit:cover; z-index:0; }
/* The motion hero is atmosphere, not information: anyone asking for reduced
   motion gets the identical blessed still that sits beneath it. */
@media (prefers-reduced-motion: reduce){ video.stage__img{ display:none; } }
/* the frame is graded down so white furniture holds at any crop */
.stage::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(10,10,10,.62) 0%, rgba(10,10,10,.12) 26%,
                    rgba(10,10,10,.10) 52%, rgba(10,10,10,.78) 100%); }
/* Scoped to the say-block ONLY. As `.stage > *:not(.stage__img)` this rule
   outranked `.fur` (0,2,0 vs 0,1,0) and forced the corner furniture back
   into normal flow, which is why the nav sat at the left, mid-page. */
.stage__say{ position:relative; z-index:2; }

/* --- corner furniture --- */
/* An absolutely-positioned box with only `right` set still shrink-to-fits
   against the FULL available width, so a block child (the nav) stretched edge
   to edge. width:max-content is what actually pins these to their corners. */
.fur{ position:absolute; top:0; z-index:3; padding:var(--safe);
      width:max-content; max-width:calc(100% - 2*var(--safe)); }
.fur--tl{ left:0; max-width:min(26rem,46vw); }
.fur--tl p{ margin:0; font-family:var(--mono); font-size:var(--t-mono);
            line-height:1.55; letter-spacing:.05em; text-transform:uppercase;
            color:var(--paper); text-shadow:0 1px 12px rgba(10,10,10,.7); }
.fur--tc{ left:50%; transform:translateX(-50%); display:none; }
@media (min-width:64rem){ .fur--tc{ display:block; } }
.place{ display:flex; align-items:center; gap:.6rem; font-family:var(--mono);
        font-size:var(--t-mono); letter-spacing:.14em; text-transform:uppercase;
        color:var(--paper); text-shadow:0 1px 12px rgba(10,10,10,.7); white-space:nowrap; }
.place__dot{ width:.45rem; height:.45rem; border-radius:50%; background:var(--blood);
             box-shadow:0 0 0 3px rgba(156,62,73,.22); }

/* --- the boxed nav panel, top right --- */
.fur--tr{ right:0; width:min(17.5rem,52vw); }
.nav{ background:var(--paper); color:var(--ink); width:100%;
      box-shadow:0 18px 44px rgba(0,0,0,.42); }
.nav__mark{ display:block; padding:.85rem 1rem; border-bottom:1px solid var(--hair-paper);
            font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.22em;
            text-transform:uppercase; color:var(--ink); }
.nav a.nav__row{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 1rem; border-bottom:1px solid var(--hair-paper);
  font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); transition:background-color .2s, color .2s; }
.nav a.nav__row:last-child{ border-bottom:0; }
.nav a.nav__row:hover,.nav a.nav__row:focus-visible{ background:var(--blood); color:var(--paper); }
.nav a.nav__row::after{ content:"+"; font-family:var(--mono); opacity:.55; }
.nav a.nav__row[aria-current="page"]{ background:var(--ink); color:var(--paper); }

/* --- the line at the foot of the frame --- */
.stage__say{ padding:var(--safe); padding-bottom:clamp(1.75rem,5vh,3.5rem); text-align:center; }
.stage__say .eyebrow{ color:var(--paper); opacity:.82; margin-bottom:.7rem; }
.stage__say h1{ font-size:var(--t-hero); line-height:1.06; font-weight:300;
                text-wrap:balance; text-shadow:0 2px 26px rgba(10,10,10,.6); }
.stage__act{ display:inline-flex; gap:.5rem; margin-top:1.5rem; flex-wrap:wrap;
             justify-content:center; }

/* ============================== BUTTONS ================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center;
      padding:.8rem 1.35rem; font-family:var(--mono); font-size:var(--t-mono);
      letter-spacing:.18em; text-transform:uppercase; border:1px solid transparent;
      transition:background-color .22s,color .22s,border-color .22s; white-space:nowrap; }
.btn--primary{ background:var(--blood); color:var(--paper); border-color:var(--blood); }
.btn--primary:hover,.btn--primary:focus-visible{ filter:brightness(1.35); }
.btn--ghost{ background:rgba(10,10,10,.34); color:var(--paper);
             border-color:rgba(250,250,247,.42); backdrop-filter:blur(6px); }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:var(--paper); color:var(--ink); }
.btn--plain{ color:var(--bone); border-color:var(--hair); }
.btn--plain:hover,.btn--plain:focus-visible{ border-color:var(--bone); }

/* ============================== CARDS ====================================
   KOTR's second device: an image-dominant card, a name, and ONE line under it.
   ======================================================================== */
.band{ padding:clamp(2.5rem,7vh,5rem) var(--safe); }
.band__head{ display:flex; align-items:flex-end; justify-content:space-between;
             gap:1.5rem; flex-wrap:wrap; margin-bottom:clamp(1.25rem,3vh,2rem); }
.band__head h2{ font-size:var(--t-h2); line-height:1.08; }

.cards{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr)); }
.cards--2{ grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr)); }
.card{ position:relative; display:block; background:var(--oil); overflow:hidden;
       min-height:clamp(19rem,46vh,29rem); display:flex; flex-direction:column;
       justify-content:flex-end; }
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
            transition:transform 1.1s cubic-bezier(.2,.6,.2,1), opacity .4s; opacity:.9; }
.card:hover .card__img,.card:focus-visible .card__img{ transform:scale(1.045); opacity:1; }
.card::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.86) 0%, rgba(10,10,10,.18) 46%, rgba(10,10,10,0) 72%); }
.card__txt{ position:relative; z-index:2; padding:clamp(1rem,2.2vw,1.5rem); }
.card__name{ display:block; font-size:1.0625rem; color:var(--paper); margin-bottom:.35rem; }
.card__line{ display:block; font-family:var(--mono); font-size:var(--t-mono);
             letter-spacing:.11em; text-transform:uppercase; color:var(--dust); line-height:1.5; }
.chip{ position:absolute; z-index:3; top:clamp(.75rem,1.6vw,1rem); left:clamp(.75rem,1.6vw,1rem);
       background:var(--blood); color:var(--paper); font-family:var(--mono);
       font-size:.5625rem; letter-spacing:.16em; text-transform:uppercase; padding:.32rem .55rem; }
.chip--quiet{ background:rgba(250,250,247,.9); color:var(--ink); }

/* a plate is a card with no link behaviour — pure image + caption */
.plate{ margin:0; }
.plate img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--oil); }
.plate figcaption{ margin-top:.6rem; }
.plate b{ display:block; font-weight:400; color:var(--paper); margin-bottom:.2rem; }

/* ============================== DETAIL =================================== */
.split{ display:grid; gap:clamp(1.5rem,4vw,4rem); }
@media (min-width:60rem){ .split{ grid-template-columns:16rem 1fr; } }
.split h2{ font-size:var(--t-h2); line-height:1.08; }
.split .eyebrow{ margin-bottom:.8rem; }
.lead{ font-size:var(--t-lead); line-height:1.5; color:var(--bone); max-width:46rem; margin:0; }

.spec{ margin:0; border-top:1px solid var(--hair); }
.spec > div{ display:grid; gap:.25rem 1.5rem; padding:.8rem 0; align-items:baseline;
             border-bottom:1px solid var(--hair); }
@media (min-width:44rem){ .spec > div{ grid-template-columns:10rem 1fr; } }
.spec dt{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
          text-transform:uppercase; color:var(--dim); }
.spec dd{ margin:0; color:var(--bone); }

.chain{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin:0; padding:0; list-style:none; }
.chain li{ font-family:var(--mono); font-size:var(--t-mono); color:var(--paper);
           text-transform:uppercase; letter-spacing:.09em; }
.chain li + li::before{ content:"\2192"; color:var(--blood); margin-right:1rem; }

.paper{ background:var(--paper); color:var(--ink); padding:clamp(1.4rem,3.2vw,2.5rem); }
.paper h2,.paper h3{ color:var(--ink); }
.paper .eyebrow{ color:var(--blood); }
.paper .spec{ border-color:var(--hair-paper); }
.paper .spec > div{ border-color:var(--hair-paper); }
.paper .spec dt{ color:rgba(10,10,10,.5); }
.paper .spec dd{ color:var(--ink); }
.paper .mono{ color:rgba(10,10,10,.58); }

.rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.rows li{ display:grid; gap:.35rem 2rem; padding:1.05rem 0; border-bottom:1px solid var(--hair);
          align-items:baseline; }
@media (min-width:52rem){ .rows li{ grid-template-columns:12rem 1fr auto; } }
.rows b{ font-weight:400; color:var(--paper); }
.rows p{ margin:0; color:var(--dim); }
.rows .mono{ justify-self:start; }
@media (min-width:52rem){ .rows .mono{ justify-self:end; } }

/* ============================== FOOTER =================================== */
.foot{ border-top:1px solid var(--hair); padding:clamp(2rem,5vh,3rem) var(--safe); }
.foot__cols{ display:grid; gap:2rem clamp(2rem,5vw,4rem); }
@media (min-width:52rem){ .foot__cols{ grid-template-columns:1.5fr 1fr 1fr; } }
.foot h3{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.18em;
          text-transform:uppercase; color:var(--dim); margin:0 0 .9rem; }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.foot a:hover{ color:var(--blood); }
.foot__legal{ margin:2.5rem 0 0; }

:where(a,button):focus-visible{ outline:2px solid var(--dust); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

/* ============================================================================
   GROUND VARIANT — paper.  <body class="ground-paper">

   WHY THIS EXISTS. blvck.com, measured 2026-09-01: the most famous all-black
   clothing brand in the world runs its WEBSITE ON WHITE. Colour census of
   painted areas over 40,000px on their homepage: white 24,012 units against
   1,296 for the next colour — roughly 20:1 — with exactly ONE ink section
   (rgb(10,10,10), the newsletter block) in a 7,869px page. The garment is the
   only black thing on the screen, so it reads.

   Authxntic's own bible says the same thing and I under-weighted it. p15 lists
   the surfaces for Paper as "Backgrounds, lookbook substrate, WEB" and sets the
   ratio at Ink and Oil 70% / Bone 18%. The ink-only build pays that 0%, and
   puts ink garments on an ink page with nothing to separate them.

   This is a token-level swap, not a redesign: the stage frames stay ink, so
   the photography is unchanged and still carries every page.
   ========================================================================= */
body.ground-paper{ background:var(--paper); color:var(--ink); }
.ground-paper .band{ background:var(--paper); }
/* The STAGE always keeps its ink treatment: its type sits on a dark
   photograph, so inverting it to ink made the hero line invisible. Only the
   content below the frame follows the paper ground. */
.ground-paper :is(h1,h2,h3):not(.stage *){ color:var(--ink); }
.ground-paper .stage__say h1{ color:var(--paper); }
.ground-paper .stage .eyebrow{ color:var(--paper); }
.ground-paper .fur--tl p,.ground-paper .place{ color:var(--paper); }
.ground-paper .lead{ color:rgba(10,10,10,.78); }
.ground-paper .eyebrow{ color:var(--blood); }
.ground-paper .mono{ color:rgba(10,10,10,.55); }
.ground-paper .spec{ border-color:var(--hair-paper); }
.ground-paper .spec > div{ border-color:var(--hair-paper); }
.ground-paper .spec dt{ color:rgba(10,10,10,.5); }
.ground-paper .spec dd{ color:var(--ink); }
.ground-paper .rows{ border-color:var(--hair-paper); }
.ground-paper .rows li{ border-color:var(--hair-paper); }
.ground-paper .rows b{ color:var(--ink); }
.ground-paper .rows p{ color:rgba(10,10,10,.62); }
.ground-paper .chain li{ color:var(--ink); }
.ground-paper .btn--plain{ color:var(--ink); border-color:var(--hair-paper); }
.ground-paper .btn--plain:hover{ border-color:var(--ink); }
.ground-paper .plate figcaption b{ color:var(--ink); }
/* the one ink block, exactly as blvck keeps one */
.ground-paper .foot{ background:var(--ink); color:var(--bone); border-color:transparent; }
.ground-paper .foot h3{ color:var(--dim); }
.ground-paper .foot a{ color:var(--bone); }
.ground-paper .foot p{ color:var(--dim); }
/* cards keep their ink frames — the photography is untouched */
.ground-paper .card{ background:var(--oil); }
.ground-paper .card__name{ color:var(--paper); }

/* ============================================================================
   THE COMING SOON — the clothing arm, light ground.

   Operator 2026-09-01: "I want the clothing to be nothing more than a coming
   soon, not a big space full of placeholder." So: no product grid, no lookbook,
   no packaging section, no stage. One page, one sentence, one contact line, and
   the page ENDS rather than scrolling through empty scaffolding.
   ========================================================================= */
.soon{ min-height:calc(100svh - 1px); display:flex; flex-direction:column; }
.soon__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:var(--safe); border-bottom:1px solid var(--hair-paper); }
.soon__back{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); }
.soon__back::before{ content:"\2190"; margin-right:.6em; }
.soon__back:hover{ color:var(--blood); }
.soon__body{ flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.5rem,10vh,6rem) var(--safe); max-width:52rem; }
.soon__body h1{ font-size:clamp(2rem,4.4vw,3.5rem); line-height:1.08; font-weight:300;
  letter-spacing:-.028em; color:var(--ink); margin:.6rem 0 1.6rem; text-wrap:balance; }
.soon__body .lead{ color:rgba(10,10,10,.72); max-width:40rem; }
.soon__spec{ margin-top:2.5rem; max-width:32rem; }
.soon__note{ margin-top:2.5rem; }
.soon__note a{ color:var(--blood); text-decoration:underline; text-underline-offset:.3em; }

/* A control that points at the page you are already on is dead: it reads as
   clickable and reloads. The current nav row and footer entry are spans. */
.nav__row--here{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 1rem; border-bottom:1px solid var(--hair-paper);
  font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); }
.nav__row--here:last-child{ border-bottom:0; }
.nav__row--here::after{ content:"\00B7"; opacity:.55; font-family:var(--mono); }
.foot__here{ color:var(--dim); }
.ground-paper .nav__row--here{ background:var(--ink); color:var(--paper); }

/* The booking control lives in the nav panel so it is present on every page and
   above the fold, rather than only at the foot of the frame where it was lost. */
.nav__book{ display:block; padding:.8rem 1rem; background:var(--blood); color:var(--paper);
  font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.16em;
  text-transform:uppercase; text-align:center; transition:background-color .22s; }
.nav__book:hover,.nav__book:focus-visible{ background:var(--blood); }

.foot__say{ margin:0; max-width:34ch; color:var(--bone); }
.foot__social{ display:flex; gap:.9rem; margin-top:1.1rem; }
.foot__social a{ display:inline-flex; color:var(--dim); transition:color .2s; }
.foot__social a:hover{ color:var(--dust); }
.foot__social svg{ width:18px; height:18px; fill:currentColor; }

/* The room, as a gallery, beside the equipment list. */
.gal{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr)); }
.gal figure{ margin:0; }
.gal img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--oil); }
@media (min-width:60rem){
  .gal figure:first-child{ grid-column:span 2; grid-row:span 2; }
  .gal figure:first-child img{ aspect-ratio:auto; height:100%; }
}
/* a card with no photograph behind it — used where the offer is the content */
.card--flat{ min-height:0; background:var(--oil); border:1px solid var(--hair); }
.card--flat::after{ content:none; }
.card--flat .card__txt{ padding:clamp(1.1rem,2.4vw,1.6rem); }

/* Booking: one row per session, the control on the right, nothing between the
   reader and the payment page. */
.pays{ border-top:1px solid var(--hair); }
.pay{ display:grid; gap:.5rem 1.5rem; padding:1.15rem 0; border-bottom:1px solid var(--hair);
      align-items:center; }
@media (min-width:48rem){ .pay{ grid-template-columns:14rem 1fr auto; } }
.pay__what b{ display:block; font-weight:400; color:var(--paper); margin-bottom:.2rem; }
.pay__note{ margin:0; color:var(--dim); }
.pay__go{ justify-self:start; }
@media (min-width:48rem){ .pay__go{ justify-self:end; } }
.pay__state{ margin-top:1.1rem; }

/* The bank-transfer path. Hidden entirely until a business Zelle tag exists. */
.zelle{ margin-top:1.6rem; padding:clamp(1.1rem,2.4vw,1.6rem); background:var(--oil);
        border-left:2px solid var(--blood); }
.zelle .lead{ font-size:var(--t-body); color:var(--bone); }
.zelle code{ font-family:var(--mono); font-size:var(--t-mono); color:var(--paper);
             background:var(--raw); padding:.15rem .45rem; letter-spacing:.06em; }

/* ---- roster: a portrait, a name, one line. Operator: everyone will have pics. ---- */
.roster{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr)); }
.roster figure{ margin:0; }
.roster img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--oil);
             filter:grayscale(1) contrast(1.04); }
.roster figcaption{ margin-top:.75rem; }
.roster b{ display:block; font-weight:400; color:var(--paper); font-size:1.0625rem; margin-bottom:.25rem; }
.roster p{ margin:0 0 .4rem; color:var(--dim); font-size:var(--t-body); }
.roster .mono{ display:block; }
.roster--waiting img{ opacity:.5; }
.roster--waiting b{ color:var(--dim); }

/* ---- DISCO embeds. Their player is 480x395 for a playlist, min 355x285, so
        the frame is given room rather than squeezed into a card. ---- */
.disco{ margin:0; }
.disco iframe{ width:100%; min-height:395px; border:1px solid var(--hair); background:var(--oil); display:block; }
.disco figcaption{ margin-top:.7rem; }
.disco b{ display:block; font-weight:400; color:var(--paper); margin-bottom:.2rem; }

/* one wide plate, not a scatter of frames */
.plate--wide img{ width:100%; aspect-ratio:auto; max-height:clamp(18rem,46vh,26rem); object-fit:cover; }
/* a flat offer card still needs its chip to sit in flow, not absolutely */
.card--flat .chip{ position:static; display:inline-block; margin-bottom:.7rem; }

/* ---- A STAGE WITH NO PHOTOGRAPH.
   Deliberate, not broken: nothing generated ships, so where there is no real
   frame the stage carries type on ink. It gets its own presence from the four
   warm blacks (p14) rather than from an image — a faint tonal wash off the key
   side, which is the same light the real frames are lit by. ---- */
.stage--bare{ background:
    radial-gradient(120% 90% at 78% 8%, var(--char) 0%, var(--raw) 22%, var(--oil) 48%, var(--ink) 78%); }
.stage--bare::after{ content:none; }
.stage--bare .stage__say{ padding-bottom:clamp(2.5rem,9vh,5rem); }
.stage--bare .fur--tl p,
.stage--bare .place{ text-shadow:none; }

/* ---- A WIDE PLATE, IN LAYOUT.
   A 1U rack unit is roughly 2.2:1. Forced into a 100vh full-bleed hero it gets
   cropped to a sliver and the object disappears — which is exactly what happened
   to the Neve. Wide objects belong in the layout at their own ratio; only a TALL
   subject can carry a full-height frame. ---- */
.plate--band{ margin:0; }
.plate--band img{ width:100%; aspect-ratio:2.23/1; object-fit:cover;
                  background:var(--ink); border:1px solid var(--hair); }
.plate--band figcaption{ margin-top:.7rem; }

/* ============================== BOOKING ==================================
   Rows of label + control, the same spec-row grammar the rest of the site
   uses, so the booking form reads as part of the page rather than a widget.
   ======================================================================== */
.bk{ border-top:1px solid var(--hair); }
.bk__row{ display:grid; gap:.5rem 1.5rem; padding:.95rem 0; align-items:center;
          border-bottom:1px solid var(--hair); }
@media (min-width:40rem){ .bk__row{ grid-template-columns:9rem 1fr; } }
.bk__lab{ font-family:var(--mono); font-size:var(--t-mono); letter-spacing:.14em;
          text-transform:uppercase; color:var(--dim); }
.bk__opts{ display:flex; flex-wrap:wrap; gap:.4rem; }
.bk__opt{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem;
  background:transparent; color:var(--bone); border:1px solid var(--hair);
  font:inherit; font-size:var(--t-body); cursor:pointer; transition:.18s; }
.bk__opt .mono{ color:var(--dim); }
.bk__opt:hover{ border-color:var(--dust); }
.bk__opt.is-on{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.bk__opt.is-on .mono{ color:rgba(10,10,10,.6); }
.bk__step{ display:inline-flex; align-items:center; border:1px solid var(--hair); }
.bk__pm{ width:2.6rem; height:2.6rem; background:transparent; color:var(--bone);
         border:0; font-size:1.1rem; cursor:pointer; transition:.18s; }
.bk__pm:hover{ background:var(--oil); color:var(--paper); }
.bk__hrs{ min-width:3rem; text-align:center; font-family:var(--mono);
          font-size:var(--t-body); color:var(--paper); }
.bk__in{ width:100%; max-width:22rem; padding:.6rem .75rem; background:var(--oil);
  border:1px solid var(--hair); color:var(--paper); font:inherit;
  font-size:var(--t-body); color-scheme:dark; }
.bk__in:focus{ outline:none; border-color:var(--dust); }
.bk__sum{ display:flex; flex-direction:column; gap:.3rem; padding:1.2rem 0 1.4rem; }
.bk__due{ font-size:clamp(1.5rem,3vw,2rem); font-weight:300; color:var(--paper);
          letter-spacing:-.02em; }
.bk__go[disabled]{ opacity:.4; cursor:not-allowed; }
.bk__note{ margin:.9rem 0 0; }

/* ============================ BOOKING CART ==============================
   The one part of the "conventional site" rebuild worth keeping. The operator
   asked for a FAMILIAR checkout — a narrow note about the booking flow — and
   the rebuild answered it by replacing the whole site template, which is the
   scope error this file's restoration corrects. The cart itself is proven
   against live Stripe, so it stays; it now sits inside the template instead
   of having replaced it. */
.people{ display:grid; gap:clamp(.85rem,2vw,1.25rem);
         grid-template-columns:repeat(auto-fill,minmax(min(13rem,100%),1fr)); }
.people figure{ margin:0; }
.people img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--oil);
             filter:grayscale(1) contrast(1.04); }
.people figcaption{ margin-top:.7rem; }
.people b{ display:block; font-weight:400; color:var(--paper); }
.people p{ color:var(--dim); font-size:var(--t-sm); margin-top:.2rem; }
.people--tbc img{ opacity:.45; }
.note{ border:1px dashed var(--hair); padding:1.1rem; }
.note b{ display:block; color:var(--paper); font-weight:400; margin-bottom:.3rem; }
.note p{ color:var(--dim); font-size:var(--t-sm); }
.cart{ display:grid; gap:clamp(1.25rem,3vw,2.5rem); align-items:start; }
.cart__field{ padding-block:1.1rem; border-bottom:1px solid var(--hair); }
.cart__field:first-child{ border-top:1px solid var(--hair); }
.cart__lab{ display:block; font-family:var(--mono); font-size:var(--t-label);
            letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:.7rem; }
.cart__hint{ display:block; color:var(--dim); font-size:var(--t-sm); margin-top:.55rem; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--hair); }
.qty button{ width:2.5rem; height:2.5rem; background:none; border:0; color:var(--bone);
             font-size:1.05rem; cursor:pointer; transition:.18s; }
.qty button:hover:not([disabled]){ background:var(--oil); color:var(--paper); }
.qty output{ min-width:3.6rem; text-align:center; font-family:var(--mono); color:var(--paper); }
.opt{ display:flex; align-items:flex-start; gap:.75rem; padding:.75rem .9rem;
      border:1px solid var(--hair); cursor:pointer; transition:.18s; margin-bottom:.5rem; }
.opt:hover{ border-color:var(--dust); }
.opt input{ margin-top:.2rem; accent-color:var(--blood); }
.opt__body{ flex:1; }
.opt__name{ display:block; color:var(--paper); }
.opt__meta{ display:block; color:var(--dim); font-size:var(--t-sm); margin-top:.15rem; }
.opt__price{ font-family:var(--mono); font-size:var(--t-sm); color:var(--paper); white-space:nowrap; }
.opt.is-on{ border-color:var(--dust); background:var(--oil); }
.fld{ width:100%; max-width:24rem; padding:.6rem .7rem; background:var(--oil);
      border:1px solid var(--hair); color:var(--paper); font:inherit;
      font-size:var(--t-body); color-scheme:dark; }
.fld:focus{ outline:none; border-color:var(--dust); }
.summary{ background:var(--oil); border:1px solid var(--hair); padding:1.25rem; }
.summary h3{ font-size:var(--t-body); font-family:var(--mono); font-weight:400;
             letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
             margin-bottom:1rem; }
.line{ display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0;
       font-size:var(--t-sm); }
.line span:first-child{ color:var(--bone); }
.line span:last-child{ font-family:var(--mono); color:var(--paper); white-space:nowrap; }
.line--sub{ border-top:1px solid var(--hair); margin-top:.5rem; padding-top:.8rem; }
.line--due{ border-top:1px solid var(--hair); margin-top:.5rem; padding-top:.9rem; align-items:baseline; }
.line--due span:first-child{ color:var(--paper); }
.line--due span:last-child{ font-size:1.35rem; font-family:var(--sans); font-weight:300;
                            letter-spacing:-.02em; }
.line--muted span{ color:var(--dim) !important; }
.summary .btn{ width:100%; margin-top:1.1rem; }
.summary__terms{ margin-top:.9rem; color:var(--dim); font-size:var(--t-label); line-height:1.5; }
.summary__err{ margin-top:.7rem; color:#C0394A; font-size:var(--t-sm); }