/* teamdoor.css — the Hustle House TEAM ENTRANCE, the landing behind /team/.
   Loaded ONLY by /team/, after fullstyle.css, and every rule is scoped under
   body.td so nothing in here can reach another surface.

   THE MATERIALS are crops of the reference render itself — dark marble wall,
   gold cornice, the lit floor, the pilaster-lantern-fern flank, the crest and
   the fleuron rule. Nothing was generated. The LETTERING is real type, never
   the render's own painted letters.

   THE ROOM is drawn in the render's own coordinate system: .td-room__art is a
   1344x752 box scaled to COVER the viewport, and every material sits at the
   percentage it occupies in that file, so the whole room scales as one piece
   at any width instead of drifting apart.

   COLOUR NOTE: every dark surface value here is either true black or the
   render's own near-neutral field interior rgb(22,21,19); every warm value is
   a lit accent above the dark-surface threshold. The page ground stays true
   black, which is the one site constant. */

/* Only /team/ links this file, so this bare html rule reaches nothing else.
   The door is one screen — a smooth-scroll behaviour on it only makes anchor
   jumps and measurement rigs lie. */
html {
  scroll-behavior: auto;
}

body.td {
  /* ONE unit drives the whole composition: 1% of the render's width, held back
     by height so a short window never crops the door instead of shrinking it. */
  --u: min(1vw, 1.55vh);
  --gold: #c9a227;          /* the site's own gold token */
  --gold-lit: #e8cc72;
  --gold-pale: #f4dfa0;
  --gold-deep: #9c7a22;
  --field-ink: #161513;     /* sampled off the render's own field interior */
  --hair: rgba(201, 162, 39, 0.42);

  margin: 0;
  min-height: 100svh;
  background: #000;
  color: #e9e2cf;
  font-family: Georgia, "Times New Roman", serif;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- the room */

.td-room {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* The render's own frame. Every material below is positioned in percentages of
   THIS box, which is why they never drift apart.
   WIDTH-ANCHORED on purpose: a cover-crop would push the pilasters off toward
   the window edges and the door would stop matching his composition. Holding
   the width and letting the box grow taller keeps the flanks exactly where his
   render puts them; the cornice, the floor and the flank are the only things
   that take the stretch, and all three are architecture, not lettering. */
.td-room__art {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: max(100svh, calc(100vw / 1.7872));
}

.td-room__art > * {
  position: absolute;
}

/* his marble, mirrored into a 2x2 so the repeat has no seam anywhere */
.td-room__wall {
  inset: 0;
  background: #000 url(/assets/img/teamdoor/wall.webp) 50% 0 repeat;
  background-size: 46% auto;
}

/* the warm pool the sconces throw onto the middle of the wall — kept tight,
   the way his does: lit around the lettering, near-black by the pilasters */
.td-room__glow {
  inset: 0;
  background:
    radial-gradient(72% 48% at 50% 36%,
      rgba(190, 133, 54, 0.23) 0%,
      rgba(142, 95, 36, 0.11) 32%,
      rgba(88, 57, 20, 0.04) 56%,
      rgba(0, 0, 0, 0) 76%),
    radial-gradient(58% 40% at 50% 100%,
      rgba(176, 124, 52, 0.18) 0%,
      rgba(0, 0, 0, 0) 74%);
}

.td-room__cornice {
  left: 0;
  right: 0;
  top: 7.45%;
  height: 8.51%;
  background: url(/assets/img/teamdoor/cornice.webp) 50% 50% / 100% 100% no-repeat;
}

.td-room__floor {
  left: 0;
  right: 0;
  bottom: 0;
  height: 19.41%;
  background: url(/assets/img/teamdoor/floor.webp) 50% 100% / 100% 100% no-repeat;
}

/* The flank is a photographic strip on a wall that is lit differently, so its
   inner edge is faded out rather than butted against the glow — otherwise the
   seam draws a hard vertical line his render does not have. */
.td-room__flank {
  top: 0;
  bottom: 0;
  width: 15.48%;
  background: url(/assets/img/teamdoor/flank.webp) 50% 50% / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 76%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 76%, rgba(0, 0, 0, 0) 100%);
}

.td-room__flank--l {
  left: 2.98%;
}

.td-room__flank--r {
  right: 2.98%;
  transform: scaleX(-1);
}

/* --------------------------------------------------------------- the stage */

.td-stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(6 * var(--u)) calc(4 * var(--u));
  text-align: center;
  transition: opacity 900ms ease;
}

/* HIS POLISH 2026-08-14: the crossing plays with a clean frame — the whole
   stage goes dark while the film runs and fades back in, words and PIN
   together, over the room once it is sitting still. Driven by the scenes
   script; if the film never runs, the class never appears and nothing hides. */
html.td-crossing .td-stage {
  opacity: 0;
  pointer-events: none;
}

/* the crest and the fleuron rule — his own linework, carried across as art
   because it holds no lettering */
/* Widths ride --u, not percentages: a percentage would resolve against the
   stage's padded box and every piece would sit at a different scale from the
   room behind it. One unit = 1% of the render's width. */
.td-crest {
  display: block;
  width: calc(56.55 * var(--u));
  min-width: 208px;
  height: auto;
  margin: 0 0 calc(0.2 * var(--u));
}

.td-rule {
  display: block;
  width: calc(55.06 * var(--u));
  min-width: 198px;
  height: auto;
  margin: calc(0.3 * var(--u)) 0 calc(0.5 * var(--u));
}

/* HUSTLE HOUSE — real type, in a serif lane chosen by measurement: of the faces
   on this box, Cambria's cap-width-to-cap-height sits +6% off his render's
   letterform, the closest available. The render's own painted letters are
   deliberately NOT carried across — brand lettering ships as real type. */
.td-mark {
  margin: 0;
  font-family: Cambria, "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(30px, calc(7.94 * var(--u)), 168px);
  line-height: 1.04;
  letter-spacing: 0.024em;
  text-transform: uppercase;
  color: var(--gold-lit);
  /* two shadows, two jobs: the tight one sets the letters INTO the marble, the
     wide warm one is the sconce light catching the metal — the same two lights
     the room itself is drawn with */
  filter:
    drop-shadow(0 calc(0.14 * var(--u)) calc(0.28 * var(--u)) rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 calc(0.95 * var(--u)) rgba(201, 162, 39, 0.30));
}

.td-mark span {
  white-space: nowrap;
}

/* HIS POLISH 2026-08-14: the words GLOW — a slow bloom breathing on the metal,
   the sconce light swelling and settling. Still lettering for anyone who has
   asked their machine for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .td-mark {
    animation: td-mark-bloom 5.5s ease-in-out infinite;
  }
}

@keyframes td-mark-bloom {
  0%, 100% {
    filter:
      drop-shadow(0 calc(0.14 * var(--u)) calc(0.28 * var(--u)) rgba(0, 0, 0, 0.85))
      drop-shadow(0 0 calc(0.95 * var(--u)) rgba(201, 162, 39, 0.30));
  }
  50% {
    filter:
      drop-shadow(0 calc(0.14 * var(--u)) calc(0.28 * var(--u)) rgba(0, 0, 0, 0.85))
      drop-shadow(0 0 calc(1.35 * var(--u)) rgba(232, 204, 114, 0.55))
      drop-shadow(0 0 calc(2.5 * var(--u)) rgba(201, 162, 39, 0.30));
  }
}

/* HIS RULING 2026-08-14: the vault door does NOT get the words HUSTLE HOUSE —
   that is for the inside. Clients must never read us as "hustlers"; the name is
   the sales team's, behind the gate, something to walk into. So the words are
   hidden by DEFAULT on every engine — a no-script visitor can never pass this
   door (the noscript line says so), so they never see them — and they return
   at the exact beat the vault goes dark, which is the moment a rep is inside.
   During a blessed transition clip the vault stays lit until the clip lands,
   so the words arrive WITH the room. */
.td-mark {
  display: none;
}

.td-js .td-scene--vault:not([data-lit="1"]) ~ .td-stage .td-mark {
  display: block;
}

/* (The held-dark hint rule that lived here died with the auto-skip — HIS RULING
   2026-08-14: the entrance always asks the name; there is no skip to hold a
   paint for. See teamdoor.js where ROW 221b is retired in his own words.) */

/* The stops are set off the render's own letters, band by band: his wordmark
   means #a5703a, a deep antique gold, not the pale yellow a default gold token
   would give. The bevel highlight rides the top edge, the shadow the lower. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .td-mark {
    /* tighter metallic banding than the flat ramp: a hot cap-light, the deep
       antique body the render means, then a floor re-light near the baseline —
       polished metal in a room lit from above AND below, which this room is */
    background-image: linear-gradient(177deg,
      #f9e6b0 0%,
      #eec474 12%,
      #c8913f 32%,
      #96662c 52%,
      #855827 63%,
      #b3813a 76%,
      #ecc98a 90%,
      #a97a30 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* the engraved edge: a hairline of the letters' own darkest band, so every
       stroke reads cut into the stone instead of printed on it */
    -webkit-text-stroke: 1px rgba(58, 38, 10, 0.32);
  }
}

/* TEAM ENTRANCE — letterspaced caps between two tapering hairlines */
.td-eyebrow {
  display: flex;
  align-items: center;
  gap: calc(1.4 * var(--u));
  width: calc(31.85 * var(--u));
  min-width: 230px;
  margin: 0 0 calc(1.5 * var(--u));
  color: var(--gold-lit);
  font-size: clamp(15px, calc(1.64 * var(--u)), 24px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-indent: 0.3em;
}

.td-eyebrow::before,
.td-eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0) 0%, var(--hair) 100%);
}

.td-eyebrow::after {
  background: linear-gradient(270deg, rgba(201, 162, 39, 0) 0%, var(--hair) 100%);
}

/* ---------------------------------------------------------------- the gate */

.td-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
}

/* The slot they put their name and PIN into — framed like the plate below it:
   a bronze edge, a dark gap, then a brass rim, over a deep marble recess. The
   entry sits centred because a name spoken at a door is an address, not a form. */
.td-field {
  display: block;
  width: calc(29.24 * var(--u));
  min-width: 258px;
  height: clamp(50px, calc(3.9 * var(--u)), 78px);
  padding: 0 calc(1.2 * var(--u));
  font-family: inherit;
  font-size: clamp(17px, calc(1.55 * var(--u)), 24px);
  letter-spacing: 0.06em;
  text-align: center;
  color: #f4e9c8;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 26%),
    var(--field-ink);
  border: 1px solid #6d4a15;
  border-radius: 3px;
  box-shadow:
    inset 0 2px 9px rgba(0, 0, 0, 0.95),
    inset 0 -1px 0 rgba(232, 204, 114, 0.14),
    0 0 0 2px rgba(16, 11, 3, 0.9),
    0 0 0 3px rgba(201, 162, 39, 0.5),
    0 1px 0 rgba(255, 240, 200, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.65),
    0 0 20px rgba(201, 162, 39, 0.16);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.td-field::placeholder {
  color: #97896d;
  letter-spacing: 0.06em;
  opacity: 1;
}

.td-field:focus {
  outline: none;
  border-color: var(--gold-lit);
  box-shadow:
    inset 0 2px 9px rgba(0, 0, 0, 0.95),
    inset 0 -1px 0 rgba(232, 204, 114, 0.2),
    0 0 0 2px rgba(16, 11, 3, 0.9),
    0 0 0 3px rgba(232, 204, 114, 0.85),
    0 1px 0 rgba(255, 240, 200, 0.2),
    0 6px 16px rgba(0, 0, 0, 0.65),
    0 0 26px rgba(201, 162, 39, 0.36);
}

/* the PIN beats: the same slot, but digits — spaced out like a combination
   being set on the vault itself. teamdoor.js flips type to password for every
   PIN ask, so this state needs no hook of its own. */
.td-field[type="password"] {
  font-size: clamp(20px, calc(1.9 * var(--u)), 30px);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
}

/* the brass ENTER plate — four rivets, a bevel, a lit face */
.td-plate {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(14.14 * var(--u));
  min-width: 166px;
  min-height: 48px;
  height: clamp(48px, calc(4.61 * var(--u)), 88px);
  margin-top: calc(2.01 * var(--u));
  padding: 0;
  font-family: inherit;
  font-size: clamp(16px, calc(1.95 * var(--u)), 28px);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2a1c07;
  cursor: pointer;
  /* the plate face, sampled off his: centre #b97d36, edges near #6e4619 */
  background:
    linear-gradient(163deg,
      #e2b76e 0%,
      #cb9751 22%,
      #b97d36 50%,
      #96601f 78%,
      #c68f42 100%);
  border: 2px solid #5f370e;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, 0.6),
    inset 0 -2px 5px rgba(60, 40, 8, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.72),
    0 0 22px rgba(201, 162, 39, 0.16);
  transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

/* the four rivets, drawn as one background on a pseudo-element */
.td-plate::before {
  content: "";
  position: absolute;
  inset: 6px 8px;
  border-radius: 2px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 9px 9px;
  background-position: left top, right top, left bottom, right bottom;
  /* closest-side keeps the rivet a disc — without it the gradient reaches the
     far corner and each rivet paints as a square */
  background-image:
    radial-gradient(circle closest-side at 40% 36%, #ffe9b4 0%, #c39440 46%, #6d4d12 92%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 40% 36%, #ffe9b4 0%, #c39440 46%, #6d4d12 92%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 40% 36%, #ffe9b4 0%, #c39440 46%, #6d4d12 92%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle closest-side at 40% 36%, #ffe9b4 0%, #c39440 46%, #6d4d12 92%, rgba(0, 0, 0, 0) 100%);
}

.td-plate:hover {
  filter: brightness(1.08);
}

.td-plate:focus-visible {
  outline: 3px solid var(--gold-pale);
  outline-offset: 3px;
}

.td-plate:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(60, 40, 8, 0.7),
    0 3px 9px rgba(0, 0, 0, 0.7);
}

.td-plate[aria-busy="true"] {
  cursor: progress;
  filter: brightness(0.9) saturate(0.85);
}

/* --------------------------------------------------- what the door says back
   The state line is reserved space BELOW the plate, so a message never shoves
   the composition around: the room is identical whether it is speaking or not. */

.td-state {
  width: min(92%, 620px);
  min-height: calc(2.9 * var(--u));
  margin: calc(1.9 * var(--u)) 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(15px, calc(1.32 * var(--u)), 19px);
  line-height: 1.45;
  color: #d8cfba;
}

.td-state:empty {
  min-height: calc(2.9 * var(--u));
}

.td-state[data-tone="no"] {
  color: #f0b9ac;
}

.td-state[data-tone="wait"] {
  color: #cbbf9f;
}

.td-state[data-tone="yes"] {
  color: var(--gold-lit);
}

/* the wrong-entry relight: the field says no with the door, not in a console */
.td-field[aria-invalid="true"] {
  border-color: #d98d78;
  /* same frame as the brass rim, relit red — the door says no without the
     slot changing shape */
  box-shadow:
    inset 0 2px 9px rgba(0, 0, 0, 0.95),
    0 0 0 2px rgba(16, 11, 3, 0.9),
    0 0 0 3px rgba(217, 141, 120, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.65),
    0 0 22px rgba(217, 141, 120, 0.22);
  animation: td-knock 0.34s ease both;
}

@keyframes td-knock {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-6px); }
  46% { transform: translateX(5px); }
  72% { transform: translateX(-3px); }
}

/* ------------------------------------------------- standing help at the door
   Copy shelf ROW 10. Not a state message — it is
   there before a rep fails, which is the whole point of a support line. Sits
   between the reserved state line and the way back, quieter than both, so it
   never competes with what the door is actually saying. */

.td-help {
  width: min(92%, 620px);
  margin: calc(1.5 * var(--u, 12px)) 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(13px, calc(1.05 * var(--u, 12px)), 15.5px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #9d947f;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
}

/* ------------------------------------------------------------- the way back */

/* Taken out of the centring flow and set down on the floor, so the door above
   it sits where his render sits and this line never shoves it up. */
.td-out {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(2.2 * var(--u));
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(15px, calc(1.12 * var(--u)), 17px);
  letter-spacing: 0.02em;
}

.td-out a {
  color: #cabfa6;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  border-bottom: 1px solid rgba(202, 191, 166, 0.45);
  padding-bottom: 2px;
}

.td-out a:hover,
.td-out a:focus-visible {
  color: var(--gold-lit);
  border-bottom-color: var(--gold-lit);
}

.td-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.td-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9;
  padding: 12px 16px;
  color: #000;
  background: var(--gold-lit);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.td-skip:focus {
  left: 0;
}

/* -------------------------------------------------------------- the phone */

@media (max-width: 700px) {
  body.td {
    --u: min(1.34vw, 1.15vh);
  }

  /* the room stops covering and simply fills the tall window: the cornice and
     the floor are horizontal bands, so they take the stretch without reading
     wrong, and the flanks come off the art box onto the window edges so the
     lanterns stay in frame instead of being cropped away. */
  .td-room__art {
    width: 100vw;
    height: 100svh;
  }

  .td-room__cornice {
    top: 2.6%;
    height: 5.4%;
  }

  .td-room__floor {
    height: 15%;
  }

  .td-room__flank {
    width: 21vw;
    background-size: auto 100%;
    background-position: 76% 50%;
  }

  .td-room__flank--l {
    left: 0;
  }

  .td-room__flank--r {
    right: 0;
  }

  .td-mark span {
    display: block;
  }

  .td-mark {
    font-size: clamp(38px, 13.4vw, 74px);
    line-height: 1.02;
  }

  /* the phone gets its spacing back in real pixels — the width-driven unit is
     tiny here and a door whose parts touch reads worse than one that breathes */
  .td-crest {
    width: 62%;
    min-width: 170px;
    margin-bottom: 14px;
  }

  .td-rule {
    width: 60%;
    min-width: 170px;
    margin: 16px 0 14px;
  }

  .td-eyebrow {
    width: 82%;
    min-width: 0;
    margin-bottom: 22px;
    font-size: clamp(14px, 3.7vw, 18px);
    letter-spacing: 0.24em;
  }

  .td-field {
    width: 82%;
    min-width: 0;
    height: 52px;
  }

  .td-plate {
    width: 48%;
    min-width: 150px;
    height: 54px;
    margin-top: 22px;
  }

  .td-state {
    margin-top: 18px;
    min-height: 42px;
  }

  .td-state:empty {
    min-height: 42px;
  }

  .td-out {
    bottom: 18px;
  }
}

/* very short windows: give the door back its vertical room by trimming the
   ornaments rather than shrinking the words to nothing */
@media (max-height: 620px) and (min-width: 701px) {
  .td-crest {
    width: 42%;
  }

  .td-rule {
    width: 40%;
  }

  .td-stage {
    padding-block: calc(3 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-field,
  .td-plate {
    transition: none;
  }

  .td-field[aria-invalid="true"] {
    animation: none;
  }
}

/* ================================================================ THE TWO SCENES

   THE SHAPE, WHICH IS HIS: the name is asked at a VAULT. The vault opens. What
   is behind it is the Hustle House — and that is where the PIN is asked. One
   entrance, two places, and the beat between them is the door swinging.

   ⚠ EVERYTHING IN THIS BLOCK IS A FRAME AROUND SLOTS THAT ARE EMPTY TODAY.
   The vault below is drawn in CSS out of the SAME materials the room already
   ships — his marble, his cornice, his flanks, the site's gold — so the shape
   can be walked and ruled on before any clip exists. It is a stand-in and it is
   labelled one everywhere it appears. NOTHING from
   `04 MEDIA\01 MH-SITE\Vault to Hustle House - the entrance motion set - 2026-08-14\`
   is referenced here, in the HTML, or in the JS. That set is candidate art for
   his eye. When he blesses a take, the three `data-src` slots in team\index.html
   are filled in and the drawn vault below simply stops being visible — it is
   underneath, not instead of.

   AND IT DEGRADES TO EXACTLY TODAY'S DOOR. The vault layer is `hidden` in the
   markup and un-hidden by script. No script, an old phone, a blocked file: the
   entrance is the Hustle House room it has always been, on the first paint,
   with no flash of anything else. */

.td-scene {
  position: fixed;
  inset: 0;
  z-index: 1;                 /* over .td-room (0), under .td-stage (2) */
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 620ms ease;
}

.td-scene[data-lit="1"] {
  opacity: 1;
}

/* NO SCRIPT, NO SCENES, AND NO FLASH EITHER WAY. The vault ships LIT in the
   markup so it is there on the very first paint rather than fading in over a
   room that was already drawn — a one-frame flash of the wrong scene is the kind
   of thing that reads as a broken page. The `td-nojs` class is on <html> in the
   markup and a single line in <head> swaps it before anything paints, so an
   engine that never runs script keeps it and every scene layer stays display:
   none. That entrance is the Hustle House room, exactly as it has always been. */
.td-nojs .td-scene {
  display: none;
}

/* A blessed clip or still, when one is mounted, sits over the drawn stand-in and
   covers it. Never `contain` — a letterboxed vault in a black room reads as a
   broken image rather than as a frame. */
.td-scene__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- the drawn stand-in ----------------------------------------------------

   IT IS THE SAME ROOM WITH THE DOOR STILL SHUT. The first draft painted its own
   wall over his and set a full vault door on it — wheel, hinges and all — and
   the shot said everything: the spokes ran straight through the name field and
   the hinges read as two floating slabs. It was a second picture arguing with
   his, and the lettering lost.

   So the vault layer paints NO ground of its own. His room — marble, cornice,
   floor, lanterns — is behind it and shows through; the only thing this layer
   adds is the DOOR: one heavy circular plate set into that wall, dim enough that
   HUSTLE HOUSE still reads as the brightest thing on the screen. Scene one is
   standing at the shut door. Scene two is the same room with the door gone. That
   is also exactly what his transition clip does, which is why the two halves
   line up instead of cross-fading between two unrelated pictures.

   NO HANDWHEEL. A vault door wants one and it cannot have one here: the plate is
   centred on the composition and so is the form, so any wheel crosses the field
   at every width. The rim, the rings and the bolts carry the read on their own. */

.td-vault {
  position: absolute;
  inset: 0;
}

/* the wall darkens a little as the door closes over it, so the plate has
   something to sit against without a second light source appearing */
.td-vault::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 62% at 50% 48%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.18) 62%, rgba(0, 0, 0, 0) 88%);
}

/* THE DOOR. Big enough to read as architecture rather than as a badge behind the
   words — its rim sits outside the whole content block at every size. */
.td-vault__door {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
  max-width: 92vmin;
  max-height: 92vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* the metal is in the off-black lane and every warm value on it is a gold
     LIGHT laid over it — canon caught the first draft's warm browns
     (BAN-STYLE-003) and it was right; this is the better drawing anyway */
  background:
    radial-gradient(circle at 40% 30%, rgba(201, 162, 39, 0.13) 0%, rgba(201, 162, 39, 0.03) 44%, rgba(0, 0, 0, 0) 66%),
    conic-gradient(from 210deg,
      #0a0a0b 0deg, #0e0e10 62deg, #0a0a0b 140deg,
      #0d0d0e 214deg, #060607 300deg, #0a0a0b 360deg);
  box-shadow:
    0 0 0 calc(0.34 * var(--u)) rgba(156, 122, 34, 0.85),
    0 0 calc(3 * var(--u)) rgba(201, 162, 39, 0.12),
    0 0 calc(8 * var(--u)) rgba(0, 0, 0, 0.9);
}

/* the two ring lines, drawn as one element's borders rather than as elements */
.td-vault__door::before {
  content: "";
  position: absolute;
  inset: calc(2.6 * var(--u));
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.30);
  box-shadow:
    inset 0 0 0 calc(2.6 * var(--u)) rgba(0, 0, 0, 0.42),
    inset 0 0 0 calc(2.7 * var(--u)) rgba(201, 162, 39, 0.16),
    inset 0 0 calc(4 * var(--u)) rgba(0, 0, 0, 0.6);
}

/* THE BOLTS — sixteen studs just inside the rim, as one repeating-conic mask so
   there are no sixteen elements to keep in step. They ride the rim, well clear
   of anything the rep has to read. */
.td-vault__door::after {
  content: "";
  position: absolute;
  inset: calc(0.9 * var(--u));
  border-radius: 50%;
  /* 3.2deg, not 1.6: at the radius these sit on, the first pass came out
     sub-pixel and the shot showed a plain ring — a stud you cannot see is not a
     stud. Sixteen of them, set in from the rim, well clear of anything to read. */
  background: repeating-conic-gradient(from 11.25deg,
    rgba(201, 162, 39, 0.62) 0deg 3.2deg, rgba(0, 0, 0, 0) 3.2deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0 86%, #000 87% 93%, rgba(0, 0, 0, 0) 94%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0 86%, #000 87% 93%, rgba(0, 0, 0, 0) 94%);
}

/* ---- the beat between the two scenes ---- */
/* The transition layer is the topmost of the three and is only ever lit while a
   clip is actually playing. With no clip mounted it is never lit at all and the
   swap is the cross-fade above — which is the whole point of a slot: the frame
   does not depend on the art arriving. */
.td-scene--transition {
  z-index: 2;
  background: #000;
}

/* The vault plate must not read as a live control — the only thing on this page
   that answers a press is the plate in the form. */
.td-scene,
.td-scene * {
  user-select: none;
}

@media (max-width: 700px) {
  /* On a phone the unit is held back by height, so the plate would shrink away
     from the composition it is meant to frame. It is given back its width here
     and the vmin cap above stops it running off either edge. */
  .td-vault__door {
    width: calc(88 * var(--u));
    height: calc(88 * var(--u));
  }
}

@media (prefers-reduced-motion: reduce) {
  /* No cross-fade and no clip. The scene swaps outright — a person who has asked
     their machine to stop moving things has asked this page too. */
  .td-scene {
    transition: none;
  }
}

/* ---- HIS SOUND SWITCH, 2026-08-14 --------------------------------------------
   One control, on the stage under the plate: sound on or off, saved on the
   device. Drawn out of the door's own materials — bronze ring, gold glyph — and
   sized to the 44px floor on every screen. */
.td-sound {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 16px auto 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.42);
  background: rgba(0, 0, 0, 0.38);
  color: rgba(201, 162, 39, 0.88);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 0, 0, 0.45);
}
.td-sound:hover { border-color: rgba(201, 162, 39, 0.7); color: rgba(232, 204, 114, 0.95); }
.td-sound:focus-visible { outline: 2px solid rgba(201, 162, 39, 0.85); outline-offset: 2px; }
.td-sound__slash { display: none; }
.td-sound.is-off .td-sound__wave { display: none; }
.td-sound.is-off .td-sound__slash { display: block; }
.td-sound.is-off { color: rgba(201, 162, 39, 0.5); }
.td-nojs .td-sound { display: none; }

/* ---- THE PHONE'S WIDER VIEW, 2026-08-14 --------------------------------------
   His word: widen the vault and the room on a phone so they get the experience.
   Full-screen cover on a portrait phone showed ~26% of the film's width — a
   keyhole. The mounted media now sits in a centred band at 66% of the screen
   height, which shows ~50% more of every frame; above and below it is the
   room's own ground (or the crossing's true black), never a broken image. The
   drawn stand-in door hides once real art is mounted, so two doors never argue.
   Desktop is untouched. */
@media (max-width: 700px) and (orientation: portrait) {
  .td-scene__media {
    inset: auto 0;
    top: 50%;
    height: 66%;
    transform: translateY(-50%);
  }
  .td-scene--mounted .td-vault {
    opacity: 0;
  }
}