/* ============================================================================
   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 */
  --blood-hi:var(--blood-hi);   /* the one hover step above it */
  --blood-lift:#9C3E49; /* red that clears 3:1 on ink, for large type */
  --brass:#B8893A;      /* GARMENT accent — never applied on the web (p16) */
  --dim:#8A857C;
  --hair:rgba(239,236,228,.14);
  --hair-paper:rgba(10,10,10,.14);

  --sans:"Inter",ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,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 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-lift);
             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{ background:var(--blood-hi); border-color:var(--blood-hi); }
.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-lift); 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-lift); }
.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-hi); }

.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; }