/* NextGen Traders. Game day (owner, 21.10.2026: a complete rewrap with really new colors, the arrangement and
   the content kept): every New York session is a game day, shown as a sports channel's graphics package. */

@font-face {
  font-family: "Saira";
  src: url("fonts/saira.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saira";
  src: url("fonts/saira-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* One carbon ground, graphite plates, chalk for names and plates, steel for labels and what is read, and
     volt only for the one action and the live state. Plates are solid graphics, never glass. */

  /* Carbon: the one ground */
  --night: #0b0c0d;
  /* Graphite: the plates, the header band and the schedule band; the second step for the plates on them */
  --studio: #1a1c1f;
  --studio-2: #25282c;
  --surface-hi: #3a3e44;
  /* A graphite light in the ground, so a section is never flat: where the eye should go */
  --plate: #3e434a;
  /* Volt: the one action and the live state, nothing else */
  --live: #e4ff3a;
  --action: #e4ff3a;
  --action-hi: #edff74;
  /* Chalk for times, figures and the thin lit edges */
  --figure: #f3f4ef;
  /* Chalk, soft chalk and steel for type */
  --ink: #f3f4ef;
  --ink-2: #d2d5d0;
  --muted: #9ba1a8;
  /* The same colours as channels, for the lights and edges that use them at an opacity: rgb(var(--figure-rgb) / 0.4) */
  --night-rgb: 11 12 13;
  --plate-rgb: 62 67 74;
  --live-rgb: 228 255 58;
  --figure-rgb: 243 244 239;
  --action-rgb: 228 255 58;
  --ink-rgb: 243 244 239;
  --muted-rgb: 155 161 168;
  --line: rgb(255 255 255 / 0.08);

  /* The plates are solid graphite (--studio), cut at the wordmark's slant where they end; there is no glass */
  /* Carbon over a picture, where text must stay legible: the play note and the play button under the pointer */
  --shade: rgb(var(--night-rgb) / 0.82);
  /* Carbon as a veil over the page while the menu is open on a phone or tablet */
  --scrim: rgb(var(--night-rgb) / 0.78);
  --ring: 0 0 0 1px rgb(255 255 255 / 0.07);
  --fade-x: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.12) 14%, rgb(255 255 255 / 0.12) 86%, rgb(255 255 255 / 0));
  --fade-y: linear-gradient(180deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.12) 50%, rgb(255 255 255 / 0));
  --frame-drop: 0 36px 72px -36px rgb(0 0 0 / 0.95);
  /* Sharp corners: a sports package cuts its plates, it does not round them */
  --r-control: 0px;
  --r-panel: 0px;
  /* The wordmark's slant, 13.5 degrees: a cut is the plate's height times tan(13.5deg) */
  --slant: 0.24;

  --f-super: "Saira", "Arial Narrow", sans-serif;
  --f-text: "Saira", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 4.5vw, 72px);
  --max: 1360px;
  /* The floating header takes 20px above and 58px of its own in the flow */
  --bug-h: 78px;
  /* Room between the header and the hero's first line */
  --hero-top: clamp(2.5rem, 8vh, 4.5rem);
  /* Owner, 07.10.2026: the page may be a little tighter vertically; 13.10.2026: tighter again, the page
     looked a little empty (96px above and below each section became 72px at full width) */
  --section-y: clamp(3rem, 1.75rem + 2.4vw, 4.5rem);
  /* The gap between the two columns of every split (Danny, a trader's words, MrTopStep, the last call),
     so their right columns stand on one line */
  --split-gap: clamp(2.5rem, 5vw, 5.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--night);
  scroll-behavior: smooth;
  scroll-padding-top: var(--bug-h);
  scrollbar-color: var(--surface-hi) var(--night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ink); color: var(--night); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb { background: var(--surface-hi); border: 3px solid var(--night); border-radius: 0; }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgb(var(--ink-rgb) / 0.45); }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

.skip {
  position: absolute; left: var(--gutter); top: 8px; z-index: 30;
  padding: 0.6rem 1rem; border-radius: var(--r-control); background: var(--ink); color: var(--night);
  font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- Type ---------- */

/* One loud line per view: a section title in heavy italic capitals at Saira's condensed width, as a sports
   channel sets its titles; everything that is read stays upright at full width */
h2 {
  font-family: var(--f-super);
  font-weight: 800;
  font-size: clamp(1.875rem, 1.3rem + 1.5vw, 2.75rem);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
h3 {
  font-family: var(--f-super);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.1;
  letter-spacing: 0;
}
/* Names, times and titles take the italic at the condensed width */
h2, h3, .hero-title, .profile-name, .l3-name, .cam-mono, .strip-time, .rd-time > span:first-child,
.clip-when, .dates-when, .carry-head span, .carry-label, .hero-lede-big, .hero-next-count, .bug-live-time {
  font-style: italic;
  font-stretch: 80%;
}
.lede {
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }

/* ---------- Live state: a word plate in volt while the room is live, a steel label otherwise ---------- */

.on-air-plate,
[data-status="on-air"] [data-status],
[data-session="live"] .slate-state,
[data-session="live"] .hero-next-state {
  display: inline-block;
  padding: 0.4em 0.7em 0.34em 0.6em;
  background: var(--live);
  clip-path: polygon(0.3em 0, 100% 0, calc(100% - 0.3em) 100%, 0 100%);
  color: var(--night);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Buttons: one action, one recipe, a volt key cut at the slant, in three sizes ---------- */

/* The key's volt lies on a layer of its own, cut at the wordmark's slant, so the button itself is not clipped
   and keeps the global focus outline */
.btn {
  --cut: calc(44px * var(--slant));
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 calc(18px + var(--cut) / 2);
  border-radius: 0;
  background: none;
  color: var(--night);
  font-family: var(--f-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--action);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  transition: background-color 0.2s var(--ease-out);
}
.btn:hover::before { background: var(--action-hi); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--hero { --cut: calc(50px * var(--slant)); min-height: 50px; padding: 0 calc(24px + var(--cut) / 2); font-size: 1.0625rem; }
.btn--big { --cut: calc(56px * var(--slant)); min-height: 56px; padding: 0 calc(28px + var(--cut) / 2); font-size: 1.0625rem; }
.btn-note {
  padding: 0.3em 0.45em 0.25em;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgb(var(--night-rgb) / 0.55);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Bug: the floating header bar, a graphite scorebug band cut at the slant on its right end ---------- */

.bug {
  position: sticky;
  /* Clear of a phone's status bar when the page runs edge to edge */
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  z-index: 20;
  /* Wordmark left, the jumps in the middle of the bar, the button right; when the middle runs short,
     the jumps move right of centre instead of under the wordmark */
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 32px;
  width: min(100% - 2 * var(--gutter), var(--max));
  min-height: 58px;
  margin: 20px auto 0;
  /* 20px on the left, like the text in every glass plate under it (the lede's field, the strip) */
  padding: 10px 10px 10px 20px;
  border-radius: var(--r-panel);
}
/* The band lies on a layer of its own, so its cut never clips the menus hanging under the bar */
.bug::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--studio);
  clip-path: polygon(0 0, 100% 0, calc(100% - 58px * var(--slant)) 100%, 0 100%);
}
.bug-brand { --partner-h: 26px; display: flex; align-items: center; gap: 14px; min-width: 0; justify-self: start; }
.bug-act { display: flex; align-items: center; gap: 8px; justify-self: end; }
/* NGT is drawn small, so its link reaches 10px above and below it: a target of 39px instead of 19px, the bar unchanged */
.mark { display: inline-flex; align-items: center; padding-block: 10px; margin-block: -10px; text-decoration: none; }
/* Danny's logo beside ours, set off by a thin vertical rule */
.bug-sep { flex: none; width: 1px; height: 24px; background: rgb(255 255 255 / 0.16); }
/* Its link reaches 10px above and below the logo, as NGT's does, so on phones (16px logo) it is still a 36px target */
.partner { display: inline-flex; flex: none; padding-block: 10px; margin-block: -10px; }
.partner img { display: block; width: auto; height: var(--partner-h); }
/* NGT top left beside Danny's logo, the full wordmark large under it in the first view (owner, 13.10.2026);
   both drawn in the logo workshop and written by its web.mjs. NGT is exactly as tall as what is drawn of
   MrTopStep's logo: its picture is 118px high with 87px of ink, NGT's ink fills its own box. */
.mark-logo { display: block; width: auto; height: calc(var(--partner-h) * 87 / 118); }
/* The scorebug: a plate of the second graphite with the session's state and time, beside the button. Before
   the session it reads NEXT and the opening time, while the room is on air ON AIR in volt and how long the
   session has been running (owner, 13.10.2026); the screen reader hears it from the clock's own line */
.bug-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin-right: 4px;
  padding: 0 calc(14px + 38px * var(--slant) / 2);
  background: var(--studio-2);
  clip-path: polygon(calc(38px * var(--slant)) 0, 100% 0, calc(100% - 38px * var(--slant)) 100%, 0 100%);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bug-live-time { font-family: var(--f-super); font-weight: 800; font-size: 17px; line-height: 1; }
:root:not([data-session="live"]) .bug-live .on-air-plate { padding: 0; background: none; clip-path: none; color: var(--muted); }
/* The header's own button, the smallest size of the one button recipe */
.btn.btn--bug { --cut: calc(38px * var(--slant)); gap: 6px; min-height: 38px; padding: 0 calc(14px + var(--cut) / 2); font-size: 15px; line-height: 18px; }
.btn--bug .ico { width: 14px; height: 14px; }
/* From 1080px the scorebug and the volt key take the band's full height, the key flush with its cut right end
   (owner, 21.10.2026: as in his chosen sketch) */
@media (min-width: 1080px) {
  .bug { padding: 0 0 0 20px; }
  .bug-act { align-self: stretch; align-items: stretch; gap: 0; }
  .bug-live { min-height: 58px; margin-right: 0; padding: 0 calc(18px + 58px * var(--slant) / 2); clip-path: polygon(calc(58px * var(--slant)) 0, 100% 0, calc(100% - 58px * var(--slant)) 100%, 0 100%); }
  .bug-ask { align-items: center; padding: 0 10px; }
  .btn.btn--bug { --cut: calc(58px * var(--slant)); min-height: 58px; padding: 0 calc(20px + var(--cut) / 2); }
}

/* ---------- Navigation: jumps to the three, to Danny and to the room (owner, 10.10.2026) ----------
   On a wide screen the jumps stand in the middle of the bar and the two groups open under it as panes
   of the header's glass. Below 1080px the bar's own glass grows down to hold the whole list. */

.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-top {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink-2);
  font: 600 15px/18px var(--f-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
/* Under the pointer a jump lightens one step; Ink is kept for the open group and the one you are on */
.nav-top:hover { color: var(--ink-2); background: rgb(255 255 255 / 0.04); }
.nav-top[aria-expanded="true"] { color: var(--ink); background: rgb(255 255 255 / 0.04); }
.nav-chev { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease-out); }
.nav-top[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
/* The page or the part of the page you are on: its jump in Ink, lit on the bar's top edge above it
   like the program camera, the one that is on */
.is-here > .nav-top { color: var(--ink); }
.nav-top::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: -10px;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--figure-rgb) / 0) 0%, rgb(var(--figure-rgb) / 0.85) 50%, rgb(var(--figure-rgb) / 0) 100%);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.is-here > .nav-top::after { opacity: 1; }
/* Questions stands right, beside the button (owner, 13.10.2026): what a newcomer asks before going in,
   next to the way in. It is a jump like the ones in the middle and lights the same way; below 1080px it
   stands in the menu with the other jumps instead. */
.bug-ask { display: inline-flex; }
@media (min-width: 1080px) { .nav-item--ask { display: none; } }
/* The bar is full below 1280px: the scorebug before the session leaves first, on air the running time and,
   below 1180px, the ON AIR plate too (measured with the longest time, 6:29:59) */
@media (max-width: 1279px) { :root:not([data-session="live"]) .bug-live { display: none; } }
@media (min-width: 1080px) and (max-width: 1279px) { .bug-live-time { display: none; } }
@media (min-width: 1080px) and (max-width: 1179px) { [data-session="live"] .bug-live { display: none; } }
/* With Membership as a sixth jump (Cody, 31.10.2026) the bar runs short below 1440px: the jumps and the bar's
   three parts move closer, and below 1280px the ON AIR plate leaves on air too, as it does below 1180px without
   Membership (stress test, 31.10.2026: 58px too wide at 1100px, 39px at 1280px, 32px on air at 1180px) */
@media (min-width: 1080px) and (max-width: 1439px) {
  .bug:has([data-member-nav]:not([hidden])) { column-gap: 20px; }
  .bug:has([data-member-nav]:not([hidden])) .nav-list > .nav-item > .nav-top { padding-inline: 8px; }
}
@media (min-width: 1080px) and (max-width: 1279px) {
  .bug:has([data-member-nav]:not([hidden])) { column-gap: 14px; }
  .bug:has([data-member-nav]:not([hidden])) .nav-list > .nav-item > .nav-top { padding-inline: 7px; }
  [data-session="live"] .bug:has([data-member-nav]:not([hidden])) .bug-live { display: none; }
}
/* With Partners as a seventh jump (Cody, 05.11.2026) the bar runs short again: below 1180px the jumps and the
   bar's parts move closer still and the key drops its arrow, as on a phone; below 1350px the scorebug leaves,
   before the session and on air (fresh review and stress test, 05.11.2026: the key stood 42px past the band at
   1080px, 52px on air and 6px before the session at 1280px, 2px on air at 1335px) */
@media (min-width: 1080px) and (max-width: 1179px) {
  .bug:has([data-partners-nav]:not([hidden])) { column-gap: 10px; }
  .bug:has([data-partners-nav]:not([hidden])) .nav-list > .nav-item > .nav-top { padding-inline: 5px; }
  .bug:has([data-partners-nav]:not([hidden])) .bug-ask { padding-inline: 8px; }
  .bug:has([data-partners-nav]:not([hidden])) .btn--bug .ico { display: none; }
}
@media (min-width: 1080px) and (max-width: 1349px) {
  .bug:has([data-partners-nav]:not([hidden])) .bug-live { display: none; }
}

.nav-sub {
  position: absolute;
  top: calc(100% + 18px);
  left: -8px;
  padding: 8px;
  border-radius: var(--r-panel);
  background: var(--studio);
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out), visibility 0s linear 0.18s;
}
/* The gap under the bar belongs to the open menu, so the pointer can cross it */
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; }
.nav-item[data-open] > .nav-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-head { display: none; }

/* Who we are: the three cameras, each opening that trader's page, with the preview cameras' lower third */
.nav-cams { display: grid; grid-template-columns: repeat(3, 7.5rem); gap: 8px; }
.nav-cam { display: block; border-radius: var(--r-panel); color: inherit; text-decoration: none; }
.nav-cam .cam .cam-frame, .nav-cam .cam.is-off .cam-frame { aspect-ratio: 3 / 4; transition: box-shadow 0.25s var(--ease-out); }
.nav-cam .cam-frame img { object-position: 50% 22%; }
.nav-cam .cam-mono { font-size: 2.25rem; }
.nav-cam .cam > .l3 { left: 0.4rem; right: 0.4rem; bottom: 0.4rem; }
.nav-cam .l3-name { font-size: 0.9375rem; letter-spacing: 0.05em; }
.nav-cam .l3-line { font-size: 0.75rem; line-height: 1.3; }
.nav-cam:hover .cam-frame, .nav-cam:focus-visible .cam-frame { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24), var(--frame-drop); }
.nav-cam[aria-current="page"] .cam-frame::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--figure-rgb) / 0) 6%, rgb(var(--figure-rgb) / 0.85) 50%, rgb(var(--figure-rgb) / 0) 94%);
}

/* Danny Riley: his page, its parts and the pit page, each with one line on what is there */
.nav-rows { display: grid; gap: 2px; width: 21rem; }
.nav-rows a {
  display: grid;
  gap: 2px;
  padding: 9px 12px 10px;
  border-radius: var(--r-control);
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
/* On glass over a picture the second line takes Soft Ink, as in the strip: over Danny's video still
   Blue-Grey measured 3.9:1 at the brightest point under the menu, Soft Ink 6.2:1 */
.nav-title { color: var(--ink); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.nav-line { color: var(--ink-2); font-size: 0.8125rem; line-height: 1.35; }
.nav-rows a:hover, .nav-rows a:focus-visible { background: rgb(255 255 255 / 0.04); }
.nav-rows a[aria-current="page"] .nav-title { font-weight: 600; }

/* The menu button, only below 1080px: two drawn lines that cross while the menu is open */
.nav-toggle {
  display: none;
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: rgb(255 255 255 / 0.04); }
.nav-toggle-ico { position: absolute; left: 11px; right: 11px; top: calc(50% - 0.8px); height: 1.6px; }
.nav-toggle-ico::before, .nav-toggle-ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease-out);
}
.nav-toggle-ico::before { transform: translateY(-3.5px); }
.nav-toggle-ico::after { transform: translateY(3.5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-ico::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-ico::after { transform: rotate(-45deg); }
/* While the list is open below 1080px, the page behind it dims under a night veil */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out), visibility 0s linear 0.25s;
}
.bug[data-menu] + .nav-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .nav-sub, .nav-chev, .nav-toggle-ico::before, .nav-toggle-ico::after, .nav-scrim { transition: none; }
  .nav-sub { transform: none; }
}

/* ---------- Lower third: the signature, a sports channel's two-tier name plate ----------
   The name on a chalk plate in carbon, cut at the slant on its right end; the line under it on graphite. Each
   tier is as wide as its own text. */

.l3 {
  display: grid;
  justify-items: start;
  gap: 0;
  width: fit-content;
  max-width: 100%;
}
.l3-name {
  display: block;
  max-width: 100%;
  padding: 0.42em calc(0.75em + 1.1em * var(--slant)) 0.36em 0.7em;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.1em * var(--slant)) 100%, 0 100%);
  color: var(--night);
  font-family: var(--f-super);
  font-weight: 800;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.l3-line {
  display: block;
  max-width: 100%;
  padding: 0.4rem 0.75rem 0.45rem 0.7rem;
  background: var(--studio);
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* ---------- Hero ---------- */

/* The hero's ground runs up behind the floating header, so the bar sits on the hero and not on a band of its own */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--bug-h));
  padding-top: calc(var(--bug-h) + var(--hero-top));
  /* The first view is the hero alone, nothing of the next section shows (owner, 08.10.2026) */
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  /* Carbon with a graphite light behind the lineup; the steel liquidity map runs in it. The light's size, place and
     strength are variables, because site.js paints the same ground again over the map's edges (heroFlow, veil). */
  --light-w: 50%;
  --light-h: 62%;
  --light-x: 72%;
  --light-y: 45%;
  --light-a: 0.32;
  background:
    radial-gradient(var(--light-w) var(--light-h) at var(--light-x) var(--light-y), rgb(var(--plate-rgb) / var(--light-a)), transparent 72%),
    var(--night);
}
/* The room scene: the owner's screenshot of the NxtGen room at MrTopStep, with our webcams,
   chat, chart and order book laid over its empty panels. Overlay sizes follow the screenshot's
   width in container units, so every overlay stays on its panel at any size. Inside the
   screenshot the overlays take the Tradechat look (its greys, cyan, green and red, small radii). */
/* The hero's right side: the three cameras (owner, 08.10.2026: our three pictures at the top,
   the room where they were), centred on the copy, the right edge on the header's */
.hero-side {
  grid-row: 1;
  grid-column: 1;
  justify-self: end;
  align-self: center;
  width: min(56rem, calc(100% - 2 * max(var(--gutter), (100% - var(--max)) / 2) - var(--copy-w, 30rem) - var(--col-gap, 4rem)));
  margin: 0 max(var(--gutter), (100% - var(--max)) / 2) 0 0;
}
.hero .people { gap: clamp(0.75rem, 1.5vw, 1.5rem); }
/* The room stands straight and whole */
.scene { display: grid; gap: 0.85rem; }
.scene-view {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: #050505;
  box-shadow: var(--ring), var(--frame-drop);
}
/* The monitor's lit top edge, brightest at its middle and lit over most of its length, with Site Blue light
   falling from it into the screen's top bar (owner, 13.10.2026: the light up there a little stronger). The
   pit page's screen carries the same edge. The light is sized by the frame, so it stays in the top bar at
   any width */
.scene-view::before, .screen::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgb(var(--figure-rgb) / 0) 2%, rgb(var(--figure-rgb) / 0.6) 26%, rgb(var(--figure-rgb) / 0.85) 50%, rgb(var(--figure-rgb) / 0.6) 74%, rgb(var(--figure-rgb) / 0) 98%) top / 100% 1px no-repeat,
    radial-gradient(52% 9% at 50% 0%, rgb(var(--figure-rgb) / 0.08), rgb(var(--figure-rgb) / 0) 100%);
  pointer-events: none;
}
.scene-shot { position: relative; container-type: inline-size; }
.scene-img { display: block; width: 100%; height: auto; }
.scene-ov { position: absolute; margin: 0; padding: 0; list-style: none; }

.scene-ov--cams {
  left: 0.4926%;
  top: 17.963%;
  width: 38.054%;
  height: 36.035%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.5cqw;
  padding: 0.6cqw;
  background: #0f0f0f;
}
/* Three cameras sit like a three-way call: two on top, one centred below */
.scene-ov--cams > .scene-cam { grid-column: span 2; }
.scene-ov--cams > .scene-cam:nth-child(3):last-child { grid-column: 2 / span 2; }
.scene-cam { position: relative; margin: 0; overflow: hidden; background: #161616; border-radius: 0.3cqw; }
.scene-cam img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 22%; }
.scene-cam.is-empty { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05); }
.scene-cam-name {
  position: absolute;
  left: 0.5cqw;
  bottom: 0.5cqw;
  padding: 0.25cqw 0.55cqw;
  border-radius: 0.25cqw;
  background: rgb(0 0 0 / 0.62);
  color: #f0f0f0;
  font: 600 max(0.95cqw, 8px)/1.2 var(--f-text);
}

.scene-ov--chat {
  left: 0.4926%;
  top: 58.707%;
  width: 38.054%;
  height: 30.778%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6cqw;
  padding: 0.8cqw 1.1cqw;
  overflow: hidden;
  background: #0d0d0d;
  color: #e4e4e4;
  font: 400 max(1.2cqw, 9px)/1.4 var(--f-text);
}
/* The real post stays put; the examples under it scroll up and fade out at the stream's top edge */
.scene-ov--chat > .is-pinned { flex: none; }
.scene-stream {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}
.scene-stream.is-full {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.6cqw);
  mask-image: linear-gradient(180deg, transparent 0, #000 1.6cqw);
}
.scene-stream-list { display: flex; flex: none; flex-direction: column; gap: 0.6cqw; }
.scene-who { margin-right: 0.5cqw; font-weight: 700; }
.fig { color: var(--figure); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.scene-ov--share {
  left: 38.793%;
  top: 17.963%;
  width: 61.207%;
  height: 76.342%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #0b0c0e;
}
.share-bar {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0.65cqw 1cqw;
  background: #131417;
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.06);
  color: #9aa3ad;
  font: 600 1cqw/1 var(--f-text);
}
.share-sym { color: #e6e6e6; }
.share-domtitle { width: 20cqw; margin-left: auto; text-align: center; }
.share-body { display: grid; grid-template-columns: minmax(0, 1fr) 20cqw; min-height: 0; }
.share-chart { position: relative; min-height: 0; overflow: hidden; }
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-grid { stroke: rgb(255 255 255 / 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-zone { fill: rgb(36 162 215 / 0.13); }
.ch-pivot { stroke: rgb(var(--ink-rgb) / 0.55); stroke-width: 1; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.ch-gap { stroke: rgb(var(--muted-rgb) / 0.5); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.ch-wick { stroke-width: 1; vector-effect: non-scaling-stroke; }
.ch-candle.is-up .ch-wick { stroke: #77b300; }
.ch-candle.is-up .ch-body { fill: #77b300; }
.ch-candle.is-down .ch-wick { stroke: #cc0000; }
.ch-candle.is-down .ch-body { fill: #cc0000; }
.ch-lastline { stroke: #24a2d7; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0.8; }
.ch-prof { fill: rgb(var(--muted-rgb) / 0.26); }
.ch-prof.is-poc { fill: rgb(var(--muted-rgb) / 0.6); }
.ch-axis {
  position: absolute;
  right: 0.5cqw;
  transform: translateY(-50%);
  color: #7d8590;
  font: 500 0.85cqw/1 var(--f-text);
  font-variant-numeric: tabular-nums;
}
.ch-label {
  position: absolute;
  left: 0.6cqw;
  transform: translateY(-50%);
  padding: 0.15cqw 0.45cqw;
  border-radius: 0.2cqw;
  font: 600 0.82cqw/1.25 var(--f-text);
  font-variant-numeric: tabular-nums;
}
/* The parts of the screen that explain themselves under the pointer (owner, 13.10.2026) */
[data-explain] { cursor: help; }
.ch-hot { position: absolute; top: 0; bottom: 0; }
.scene-tip {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 0.3rem;
  width: max-content;
  max-width: min(19rem, 80%);
  padding: 0.7rem 0.85rem 0.75rem;
  border-radius: var(--r-panel);
  background: var(--shade);
  box-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.9);
  pointer-events: none;
  text-align: left;
}
.scene-tip-title { color: var(--figure); font: 700 0.75rem/1 var(--f-text); letter-spacing: 0.1em; text-transform: uppercase; }
.scene-tip-text { color: var(--ink-2); font: 400 0.875rem/1.45 var(--f-text); text-wrap: pretty; }
.ch-label.is-zone { background: rgb(36 162 215 / 0.2); color: #9fdaf3; }
.ch-label.is-pivot { background: rgb(255 255 255 / 0.1); color: #f4f8fc; }
.ch-label.is-gap { color: #aab8cb; }
.ch-last {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  padding: 0.18cqw 0.45cqw;
  background: #24a2d7;
  color: #04121c;
  font: 700 0.85cqw/1.2 var(--f-text);
  font-variant-numeric: tabular-nums;
}
.share-dom {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  background: #0e0f12;
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.07);
  font: 600 0.92cqw/1 var(--f-text);
  font-variant-numeric: tabular-nums;
}
.dom-row { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch; box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.035); }
.dom-head { align-items: center; color: #7d8590; font-size: 0.78cqw; letter-spacing: 0.06em; text-transform: uppercase; }
.dom-head span { text-align: center; }
.dom-price { display: grid; place-items: center; color: #c9d1d9; }
.dom-bid, .dom-ask { position: relative; isolation: isolate; display: flex; align-items: center; padding-inline: 0.5cqw; color: #ececec; }
.dom-bid { justify-content: flex-end; }
.dom-bid::before, .dom-ask::before { content: ""; position: absolute; z-index: -1; top: 14%; bottom: 14%; width: calc(var(--s, 0) * 100%); }
.dom-bid::before { right: 0; background: rgb(36 162 215 / 0.38); }
.dom-ask::before { left: 0; background: rgb(204 0 0 / 0.38); }
.dom-bid:empty::before, .dom-ask:empty::before { display: none; }
.dom-row.is-last .dom-price { background: #24a2d7; color: #04121c; }

.scene-clock {
  position: absolute;
  top: 1.64%;
  height: 1.64%;
  display: grid;
  place-items: center;
  background: #121424;
  color: #cc0000;
  font: 700 0.86cqw/1 var(--f-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scene-clock.is-open { color: #77b300; }
.scene-note { color: var(--muted); font-size: 0.75rem; line-height: 1.4; }

.hero-inner {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  align-self: center;
  display: grid;
  justify-items: start;
  max-width: 58rem;
  margin-inline: max(var(--gutter), (100% - var(--max)) / 2);
}
/* The one loud line of the first view */
.hero-title {
  margin-bottom: 1.5rem;
  font-family: var(--f-super);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.75rem + 2.6vw, 4rem);
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* The second half of a title in steel, as TRADERS stands in the wordmark (owner, 08.10.2026) */
.hero-title span { color: var(--muted); font-weight: 700; }
/* On the front page the title is the wordmark in its grey gradient (owner, 21.10.2026: as the logo and the old
   version), its letters about 21rem wide at the owner's 1908px (owner, 21.10.2026: the logo was too big at
   30rem), since the same day as a steel body like the NGT over the last call ("Kann man das Next Gen Traders auch
   in 3D so machen?"). --mark-w is the letters' width; the picture is 3.6 percent wider for the depth and the
   shadow, which also take 1.4 percent on the left and 4.6 percent below, so the title moves left and up by
   those and keeps the line under it where the flat wordmark had it. */
.hero-mark { display: block; width: calc(var(--mark-w) * 1.0358); height: auto; }
/* The title is as wide as the wordmark, so its entrance along the slant ends on the last letter and also
   uncovers the depth. The glint that ran over the letters every ten seconds went out again (owner, 13.10.2026) */
.hero-title--mark {
  --mark-w: clamp(14rem, 4rem + 14.5vw, 21.5rem);
  width: fit-content;
  margin: calc(var(--mark-w) * -0.0036) 0 calc(1.5rem - var(--mark-w) * 0.0459) calc(var(--mark-w) * -0.0142);
}
/* What comes next on air, under the button, ticking every second: the countdown is the scorebug's clock,
   large in the italic, beside small steel labels */
.hero-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; margin-top: 1.5rem; color: var(--ink-2); font-size: 1rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.hero-next-state { color: var(--muted); font-size: 0.75rem; font-weight: 700; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; }
.hero-next-count { color: var(--ink); font-family: var(--f-super); font-weight: 800; font-size: clamp(1.75rem, 1rem + 1.1vw, 2rem); line-height: 1; }
/* The lede stands in the glass field under the title (owner, 08.10.2026: the names plate went,
   its text moved into the field) */
/* The lede in two steps without a plate (owner, 13.10.2026, variant B): one short loud line in Ink, then
   what we trade and where in Blue-Grey */
.hero-lede { display: grid; gap: 1rem; max-width: 31rem; margin-top: 0.75rem; }
/* The loud line in heavy italic capitals, as a sports channel sets a headline */
.hero-lede-big { color: var(--ink); font-family: var(--f-super); font-size: clamp(1.625rem, 1rem + 1.15vw, 2.125rem); font-weight: 800; line-height: 1; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; }
.hero-lede-small { color: var(--muted); font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); line-height: 1.55; text-wrap: pretty; }
/* The DeepMap behind the first view (owner, 13.10.2026: a real one like DeepCharts, moving, but quiet and
   never in front): site.js draws it in DeepCharts' own colours, kept dim here; it shows behind the cameras
   and the strip and fades out towards the copy, so the text stays on the dark. Towards the lower edge it
   fades out over the last 22rem on an eased curve, so it ends softly behind the strip and the next section
   follows on the same Night without an edge (owner, 13.10.2026). The fades are the veil: a second canvas over
   the map on which site.js paints the hero's own ground, whole where the map must not show and gone where it
   shows fully. As a CSS mask on the map they flickered while the page scrolled after a click on the schedule
   band (31.10.2026). */
.hero-flow, .hero-veil {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* site.js draws the faint book in steel and the thick book from teal to volt (owner, 21.10.2026: "farbig, cool
   und harmonisch"); at the 0.46 of the steel-only map the colour hardly showed, so a little more */
.hero-flow { opacity: 0.58; }
/* The empty cameras in the first view are solid graphite tiles over it, the lineup's frames */
.hero .cam.is-off .cam-frame { background: linear-gradient(180deg, #202327 0%, #121416 100%); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

/* The day's schedule: a graphite band on the hero's lower edge, the header's twin. Each slot leads with its
   time large in the italic, the way a match schedule leads with the kick-off; slots part on rules cut at the
   wordmark's slant. */
.strip {
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100% - 2 * var(--gutter), var(--max));
  margin: clamp(2.25rem, 5vh, 3rem) auto 20px;
  background: var(--studio);
  font-variant-numeric: tabular-nums;
}
.strip li { position: relative; }
.strip li + li::before { content: ""; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 2px; background: rgb(255 255 255 / 0.1); transform: skewX(-13.5deg); }
/* The time on the left over the slot's height; entry, local time and the countdown beside it on fixed rows
   (owner, 21.10.2026: as in his chosen sketch) */
.strip a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  align-items: baseline;
  gap: 0.3rem 1.25rem;
  height: 100%;
  padding: 1rem 1.5rem 1.1rem 1.6rem;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
.strip a:hover { background-color: rgb(255 255 255 / 0.04); }
.strip-time {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  display: grid;
  justify-items: start;
  color: var(--ink);
  font-family: var(--f-super);
  font-weight: 800;
  font-size: clamp(2.125rem, 1rem + 2vw, 2.625rem);
  line-height: 0.9;
}
.strip-pre, .strip-zone { color: var(--muted); font-family: var(--f-text); font-style: normal; font-stretch: 100%; font-size: 0.6875rem; font-weight: 700; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; }
.strip-pre { margin-bottom: 0.35rem; }
.strip-zone { margin-top: 0.4rem; }
/* The status opens the countdown's row, a small steel label before the figures, ON AIR in volt while live */
.strip-status {
  margin-right: 0.65rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.strip-what { grid-column: 2; grid-row: 1; color: var(--ink); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.strip-local { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 0.875rem; }
.strip-count {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  display: flex;
  align-items: baseline;
  margin-top: 0.35rem;
  color: var(--ink);
  white-space: nowrap;
}
.strip-count:empty, .strip-count:not(:has(:not(:empty))) { display: none; }
.strip-count [data-clock="clock"] { font-family: var(--f-super); font-style: italic; font-stretch: 80%; font-weight: 800; font-size: 1.375rem; line-height: 1; }
/* The live slot: the whole package switches to live, its band edge turns volt */
.strip li[data-status="on-air"] a { box-shadow: inset 0 3px 0 var(--live); }

/* The one authored moment: the show opens */
@media (prefers-reduced-motion: no-preference) {
  .ch-candle { animation: fade-in 0.5s var(--ease-out) backwards; animation-delay: calc(0.3s + var(--i) * 28ms); }
  .scene-msg { animation: arrive 0.5s var(--ease-out) backwards; animation-delay: calc(1.3s + var(--i) * 0.45s); }
  .scene-msg.is-new { animation-delay: 0s; }
  /* The chart slides one bar to the left when a new bar prints */
  .ch-bars { transition: transform 0.7s var(--ease-out); }
  .hero .person { animation: arrive-frame 1s var(--ease-out) 0.1s backwards; }
  .hero .person:nth-child(2) { animation-delay: 0.22s; }
  .hero .person:nth-child(3) { animation-delay: 0.34s; }
  .hero .hero-lede { animation: wipe 0.8s var(--ease-out) 0.15s backwards; }
  .hero .hero-act { animation: arrive 0.7s var(--ease-out) 0.7s backwards; }
  .hero .hero-next { animation: arrive 0.7s var(--ease-out) 0.85s backwards; }
  /* The wordmark comes in along its own slant */
  .hero-title--mark { animation: mark-in 0.9s var(--ease-out) 0.05s backwards; }
  /* A trader's page opens the same way: the program camera, then the previews, then the copy */
  .profile-cam { animation: arrive-frame 1s var(--ease-out) 0.1s backwards; }
  .preview { animation: arrive-frame 1s var(--ease-out) 0.22s backwards; }
  .preview + .preview { animation-delay: 0.34s; }
  .profile-quote { animation: wipe 0.8s var(--ease-out) 0.15s backwards; }
  .profile-story { animation: arrive 0.7s var(--ease-out) 0.4s backwards; }
  .profile-facts { animation: arrive 0.7s var(--ease-out) 0.55s backwards; }
  .profile-act { animation: arrive 0.7s var(--ease-out) 0.7s backwards; }
  /* The pit page opens with its lede and then the two frames, the pit first */
  .pit-lede { animation: wipe 0.8s var(--ease-out) 0.15s backwards; }
  .twoshot > figure { animation: arrive-frame 1s var(--ease-out) 0.25s backwards; }
  .twoshot > figure + figure { animation-delay: 0.4s; }
}
/* Moving between the pages of the site, the clicked camera becomes the program camera */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
/* Inside a moving camera the two pictures change over at once, so one lower third travels, not two */
.person-link .cam, .profile-cam, .preview .cam { view-transition-class: cam; }
::view-transition-old(*.cam), ::view-transition-new(*.cam) { animation-duration: 0.18s; }
/* The copy beside the cameras: the old text is gone before the new text comes in */
::view-transition-old(page-copy) { animation: 0.14s ease-in both vt-out; }
::view-transition-new(page-copy) { animation: 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
.vt .profile-cam, .vt .preview, .vt .hero .person { animation: none; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mark-in { from { clip-path: polygon(0 0, 0 0, -24% 100%, 0 100%); } to { clip-path: polygon(0 0, 124% 0, 100% 100%, 0 100%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } }
@keyframes arrive-frame { from { opacity: 0; transform: translateY(28px); } }
@keyframes rise { from { transform: translateY(55%); opacity: 0; } }

/* ---------- Sections: one night ground, lit where the eye should go ---------- */

/* :where keeps this at element weight, so a section's own rule can change its padding */
main > section:where(:not(.hero, .profile, .pit-hero, .danny-hero, .lost, .desk)) { position: relative; isolation: isolate; padding-block: var(--section-y); }

/* Logo blue appears only as light: behind Danny's photo, over the room and under the last call */
.danny { background: radial-gradient(42% 58% at 27% 50%, rgb(var(--plate-rgb) / 0.3), transparent 72%), var(--night); }
.three { background: radial-gradient(52% 50% at 50% 62%, rgb(var(--plate-rgb) / 0.32), transparent 72%), var(--night); }
.room { background: radial-gradient(48% 56% at 30% 40%, rgb(var(--plate-rgb) / 0.22), transparent 72%), var(--night); }
.partners { background: radial-gradient(46% 56% at 24% 58%, rgb(var(--plate-rgb) / 0.22), transparent 72%), var(--night); }
.slate { background: radial-gradient(56% 82% at 50% 100%, rgb(var(--plate-rgb) / 0.42), transparent 72%), var(--night); }

/* ---------- Camera frames ---------- */

.cam { position: relative; }
/* A frame without a contour: a lit surface with a soft inner glow, as deepcharts.com sets its cards */
.cam-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, var(--studio-2) 0%, var(--studio) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 0 56px rgb(255 255 255 / 0.03), var(--frame-drop);
}
.cam-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Camera off: until a photo is inserted the frame is a calm 3:2 tile with the initial in its middle,
   the way a video call shows a camera that is switched off */
.cam.is-off .cam-frame { aspect-ratio: 3 / 2; background: linear-gradient(180deg, #202327 0%, #121416 100%); box-shadow: var(--frame-drop); }
.people:has(.cam:not(.is-off)) .cam-frame { aspect-ratio: 4 / 5; }
/* The three in the first view stand upright at 9:16, the format of their photos (owner, 08.10.2026) */
.hero .people .cam .cam-frame { aspect-ratio: 9 / 16; }
/* Live mode: while the room is on air the three cameras are on too, a volt edge along their top, as on the live
   slot of the schedule (owner, 13.10.2026; 21.10.2026 in the game day colors) */
[data-session="live"] .hero .cam-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 3px;
  background: var(--live);
  pointer-events: none;
}
/* Camera off: the initial in the middle of the frame, faint steel in the italic, the way a call shows a camera
   that is switched off (owner, 21.10.2026: as in his chosen sketch) */
.cam-mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  color: rgb(var(--muted-rgb) / 0.18);
  font-family: var(--f-super);
  font-weight: 800;
  font-size: clamp(3.5rem, 2rem + 3vw, 5.5rem);
  line-height: 0.8;
  text-transform: uppercase;
}
.cam:not(.is-off) .cam-mono { display: none; }
/* The lineup's number, large as an outline in the frame's top left corner, the way a sports channel sets a
   player's number in a starting lineup (owner, 21.10.2026: "wie hier", his chosen sketch, numbers 01 to 03) */
.cam-num {
  position: absolute;
  z-index: 1;
  left: 0.85rem;
  top: -0.4rem;
  color: transparent;
  -webkit-text-stroke: 1.5px rgb(var(--ink-rgb) / 0.3);
  font-family: var(--f-super);
  font-style: italic;
  font-stretch: 70%;
  font-weight: 900;
  font-size: clamp(5rem, 1rem + 5.4vw, 7rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.cam > .l3 { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; }
/* An arrow after a name says the camera opens that trader's page */
.l3 .ico { width: 0.8em; height: 0.8em; margin-left: 0.35em; vertical-align: -0.04em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out); }
.person-link, .preview { display: block; border-radius: var(--r-panel); color: inherit; text-decoration: none; }
.person-link .cam-frame, .preview .cam-frame { transition: box-shadow 0.25s var(--ease-out), filter 0.25s var(--ease-out); }
/* Keyboard focus answers like the pointer, on top of the global outline */
.person-link:hover .cam-frame, .preview:hover .cam-frame,
.person-link:focus-visible .cam-frame, .preview:focus-visible .cam-frame { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.24), var(--frame-drop); }
.person-link:hover .l3 .ico, .preview:hover .l3 .ico,
.person-link:focus-visible .l3 .ico, .preview:focus-visible .l3 .ico { transform: translateX(3px); }

/* ---------- Videos: our still with a play button until someone starts it ---------- */

.play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.65rem;
  color: var(--ink);
  text-decoration: none;
}
/* The button is a pane of the header's glass, square like every plate */
.play-disc {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--r-panel);
  background: var(--studio);
  transition: background-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.play-ico { width: 1.75rem; height: 1.75rem; margin-left: 0.2rem; fill: currentColor; }
.play-note {
  padding: 0.3rem 0.55rem 0.32rem;
  border-radius: 0;
  background: var(--shade);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.play:hover .play-disc, .play:focus-visible .play-disc { background: var(--shade); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
.cam-frame .video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* While a video plays its lower third steps aside for the player's own controls */
.cam.is-playing > .l3 { display: none; }

/* ---------- Danny ---------- */

.danny-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 5.5rem) var(--split-gap);
  align-items: center;
}
/* Danny's photo shows the floor behind him, so it keeps its wide frame; the lower third hangs off its bottom edge */
.danny .cam:not(.is-off) .cam-frame { aspect-ratio: 16 / 10; }
/* His portrait at his desk (owner, 13.10.2026) stands upright at 4:5 and no wider than the picture itself
   (470px), so it stays sharp; the copy takes the rest of the row */
@media (min-width: 1080px) {
  .danny-grid:has(.is-portrait) { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
}
.danny .cam.is-portrait { width: 100%; max-width: 26rem; }
.danny .cam.is-portrait .cam-frame { aspect-ratio: 4 / 5; }
.danny .cam { margin-bottom: 1.75rem; }
.danny .cam > .l3 { left: 1.25rem; bottom: 0; transform: translateY(50%); }
.danny-copy { display: grid; gap: 1.25rem; max-width: 62ch; }
.danny-copy h2 { margin-bottom: 0.75rem; }
.danny-copy p { color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); }
.danny-copy .source, .closed-copy .source { color: var(--muted); font-size: 0.875rem; }
.danny-copy .source a, .closed-copy .source a { text-decoration-color: rgb(var(--muted-rgb) / 0.6); }
/* A link to another page of the site: the name and a drawn arrow that moves on hover */
.go { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ink); font-weight: 600; text-decoration: none; }
.go .ico { width: 0.9em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out); }
.go:hover { text-decoration: underline; text-decoration-color: rgb(var(--ink-rgb) / 0.45); }
.go:hover .ico, .go:focus-visible .ico { transform: translateX(3px); }
.go-line { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }

/* ---------- The three ---------- */

.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.person { display: grid; align-content: start; gap: 1.25rem; }
.person-quote p {
  color: var(--ink);
  font-size: 1.1875rem;
  line-height: 1.45;
  text-wrap: pretty;
}
/* In the first view each of the three has one or two sentences under the picture */
.hero .person { gap: 0.9rem; }
.hero .person-quote p { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
/* The lineup's plate in the first view: the number on the second graphite beside the name on chalk, one height,
   standing on the frame's left edge (owner, 21.10.2026: his chosen sketch); the number shows only here */
.l3-num { display: none; }
.hero .cam > .l3 { display: flex; align-items: stretch; left: 0; right: auto; bottom: 1.4rem; }
.hero .l3-num {
  display: grid;
  place-items: center;
  min-width: 3rem;
  padding: 0 0.5rem;
  background: var(--studio-2);
  color: var(--ink);
  font-family: var(--f-super);
  font-style: italic;
  font-stretch: 80%;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero .cam > .l3 .l3-name {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.6rem 0 0.85rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font-size: 1.5rem;
  font-weight: 900;
  font-stretch: 84%;
}
.hero .cam > .l3 .ico { display: none; }

/* ---------- A trader's own page: the program camera on one of the three ---------- */

/* Like the hero, the page's first section runs up behind the floating header */
.profile {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--bug-h));
  padding-block: calc(var(--bug-h) + var(--hero-top)) clamp(2.5rem, 6vh, 4rem);
  background: radial-gradient(34% 58% at 28% 50%, rgb(var(--plate-rgb) / 0.5), transparent 72%), var(--night);
}
/* The pictures stand on the left and the words on the right (owner, 13.10.2026: the personal part on one
   screen, pictures left); the copy keeps its place first in the document for reading order */
.profile-grid {
  /* The program camera's height; the two preview cameras share it */
  --cam-h: clamp(24rem, 100svh - var(--bug-h) - var(--hero-top) - 7rem, 42rem);
  --cam-gap: 1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 44rem);
  justify-content: space-between;
  align-items: center;
  gap: 2.5rem 4rem;
}
.profile-side { grid-column: 1; grid-row: 1; }
.profile-copy { grid-column: 2; grid-row: 1; }
/* The copy waits for site.js, which fills the sentence, the story and the facts from content.js, so name and
   button do not jump up when they arrive (measured 13.10.2026: layout shift 0.10 on Emil's page); the
   sections below wait too, because the posts open between them. Without the script all of it shows after
   2.5s anyway. */
[data-profile]:not(.is-ready) .profile-copy,
[data-profile]:not(.is-ready) > section:not(.profile) { visibility: hidden; animation: show-late 0s linear 2.5s forwards; }
@keyframes show-late { to { visibility: visible; } }
.profile-copy { display: grid; justify-items: start; }
/* The one loud line of the page: the trader's name */
.profile-name {
  margin-bottom: 1.25rem;
  font-family: var(--f-super);
  font-weight: 800;
  font-size: clamp(3.5rem, 2rem + 4vw, 6rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.profile-role { margin: -0.25rem 0 1.5rem; color: var(--muted); font-size: 1.0625rem; text-wrap: balance; }
/* Their sentence stands in the header's glass, as the lede does on the front page */
.profile-quote {
  max-width: 44rem;
  padding: 1rem 1.25rem 1.05rem;
  border-radius: var(--r-panel);
  background: var(--studio);
}
.profile-quote p { color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); line-height: 1.6; text-wrap: pretty; }
.profile-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.55rem 1.5rem;
  margin: 1.75rem 0 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.profile-facts dt { color: var(--muted); }
.profile-facts dd { margin: 0; min-width: 0; color: var(--ink); }
.profile-act { margin-top: 2rem; }

.profile-side { display: flex; align-items: stretch; gap: var(--cam-gap); }
.profile-side .cam .cam-frame { aspect-ratio: 9 / 16; }
.profile-cam .cam-frame { height: var(--cam-h); }
/* The program camera's lit top edge, the room's monitor edge: this one is on */
.profile-cam .cam-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--figure-rgb) / 0) 6%, rgb(var(--figure-rgb) / 0.85) 50%, rgb(var(--figure-rgb) / 0) 94%);
  pointer-events: none;
}
/* The preview cameras: half the program's height, a little dimmer until the pointer is on them */
.previews { display: grid; align-content: space-between; gap: var(--cam-gap); }
.preview .cam-frame { height: calc((var(--cam-h) - var(--cam-gap)) / 2); filter: brightness(0.82); }
.preview:hover .cam-frame, .preview:focus-visible .cam-frame { filter: none; }
.preview .cam > .l3 { left: 0.6rem; right: auto; bottom: 0.6rem; }
.preview .l3-name { font-size: 1rem; }

/* Their own words stand in the first view under the sentence, so the personal part is one screen
   (owner, 13.10.2026): a quiet passage in Soft Ink, one step under the
   sentence. The column is 44rem wide, so the passage stays short (owner, 13.10.2026: wider, it was too
   long); that gives about 95 characters to the line, more than the 65 to 75 of a reading measure */
.profile-story { display: grid; gap: 0.85rem; margin-top: 1.5rem; }
.profile-story p { color: var(--ink-2); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }

/* Posts from the room: each a pane of the header's glass over logo-blue light,
   the poster's name in their color from the room's chat, figures in site blue */
.posts { background: radial-gradient(44% 64% at 32% 58%, rgb(var(--plate-rgb) / 0.28), transparent 72%), var(--night); }
.post-list { display: grid; gap: 1rem; max-width: 52rem; }
.post {
  display: grid;
  gap: 0.6rem;
  padding: 1.2rem 1.5rem 1.35rem;
  border-radius: var(--r-panel);
  background: var(--studio);
}
.post-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; color: var(--muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.post-who { font-size: 0.9375rem; font-weight: 700; }
.post-text { color: var(--ink); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); line-height: 1.5; text-wrap: pretty; }

/* ---------- Danny's own page ---------- */

/* The first view is Danny alone: it fills the screen, so His story comes only with the first scroll (owner,
   13.10.2026), and copy and player stand centred in it */
.danny-hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  min-height: 100svh;
  display: grid;
  align-content: center;
  margin-top: calc(-1 * var(--bug-h));
  padding-block: calc(var(--bug-h) + var(--hero-top)) clamp(2rem, 5vh, 3.5rem);
  background: radial-gradient(42% 60% at 68% 48%, rgb(var(--plate-rgb) / 0.5), transparent 72%), var(--night);
}
/* The copy on the left, his video large on the right, its right edge on the header's */
.danny-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: 2.5rem clamp(2.5rem, 4vw, 4rem);
  align-items: center;
}
.danny-hero-copy { position: relative; isolation: isolate; display: grid; justify-items: start; }
/* MrTopStep's bars and swoosh without the name, as a dot grid behind the copy: big dots at the centre, smaller
   to the edge, turned 14 degrees, in the logo's green and a lighter blue (owner, 19.10.2026) */
.danny-mark { position: absolute; z-index: -1; left: -7rem; top: 50%; width: min(38rem, 130vw); max-width: none; height: auto; transform: translateY(-50%); pointer-events: none; }
.danny-hero-copy .hero-title { margin-bottom: 1rem; }
.danny-role { margin-bottom: 1.5rem; color: var(--muted); font-size: 1.0625rem; text-wrap: balance; }
.danny-player .cam-frame, .danny-player.is-off .cam-frame { aspect-ratio: 16 / 9; }
/* The note stands under the player, as wide as the player, its lines balanced so no word is left alone */
.danny-note { margin-top: 0.85rem; text-align: right; text-wrap: balance; }
/* His two titles stand one over the other, so neither breaks inside and no separator hangs at a line's end */
.danny-role > span { display: block; }

/* His story as the show's rundown: when on the left, what happened on the right. The date column is a
   quarter of the row less two gaps, as in the clips below, so both lists put their text on the site's
   second line, where the front page's rundown, the risk disclosure and the privacy policy start too. */
.timeline .rd-time > span:first-child { font-size: 1.5rem; }
.rundown.timeline li { grid-template-columns: minmax(10rem, calc((100% - 4rem) / 4)) minmax(0, 1fr); }

/* His story in pictures (owner, 13.10.2026: real pictures, really good), each freely licensed and credited.
   Below 1080px each picture stands under its station, 3:2 in the frame recipe */
.story-run { display: grid; grid-template-columns: minmax(0, 1fr); }
.tl-photo { grid-column: 1 / -1; display: grid; gap: 0.55rem; margin: 0.4rem 0 0; }
.tl-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-panel); box-shadow: var(--ring), var(--frame-drop); }
.tl-photo figcaption { display: grid; gap: 0.15rem; }
.tl-what { color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }
.tl-credit { color: var(--muted); font-size: 0.75rem; line-height: 1.45; }
.tl-credit a { color: inherit; text-decoration-color: rgb(var(--muted-rgb) / 0.6); }
.tl-stage { display: none; }
/* From 1080px one frame stands beside the rundown, the program monitor with its lit top edge, and cuts to the
   picture of the station in the middle of the view: the picture's station and subject on a lower third,
   its credit under the frame. A cut fades over 0.8s while the picture settles from 104 percent */
@media (min-width: 1080px) {
  .story-run { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--split-gap); align-items: start; }
  .story-run .tl-photo { display: none; }
  /* The station whose picture stands in the frame is lit: Site Blue light falls into its row from the left,
     as the playing clip's does, and its date turns Ink like the stage's lower third (owner, 13.10.2026: mark
     which picture belongs to which text) */
  .story-run .timeline li { isolation: isolate; }
  .story-run .timeline li::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--studio);
    opacity: 0;
    transition: opacity 0.45s var(--ease-out);
  }
  .story-run .timeline li.is-shown::before { opacity: 1; }
  .story-run .timeline .rd-time > span:first-child { transition: color 0.45s var(--ease-out); }
  .story-run .timeline li.is-shown .rd-time > span:first-child { color: var(--ink); }
  .tl-stage { display: grid; gap: 0.7rem; position: sticky; top: max(calc(var(--bug-h) + 1.5rem), calc(50svh - 16rem)); margin: 0; }
}
.tl-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-panel); background: #050505; box-shadow: var(--ring), var(--frame-drop); }
.tl-frame::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--figure-rgb) / 0) 6%, rgb(var(--figure-rgb) / 0.85) 50%, rgb(var(--figure-rgb) / 0) 94%);
  pointer-events: none;
}
.tl-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 0.8s var(--ease-out), transform 1.6s var(--ease-out); }
.tl-shot.is-on { opacity: 1; transform: none; }
.tl-l3 { position: absolute; z-index: 2; left: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); }
@media (prefers-reduced-motion: reduce) {
  .tl-shot { transform: none; transition: none; }
  .story-run .timeline li::before, .story-run .timeline .rd-time > span:first-child { transition: none; }
}

/* MrTopStep: the name's origin in its own words beside what it offers */
.brand { background: radial-gradient(44% 60% at 24% 50%, rgb(var(--plate-rgb) / 0.26), transparent 72%), var(--night); }
.brand-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2.5rem var(--split-gap); align-items: start; }
.brand-copy { display: grid; gap: 1.25rem; max-width: 62ch; }
.brand-copy h2 { margin-bottom: 0.5rem; }
.brand-copy p { color: var(--ink-2); font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); }
.brand-quote { margin: 0; display: grid; gap: 0.6rem; }
.brand-quote p { color: var(--ink); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.4; text-wrap: balance; }
.brand-quote cite { color: var(--muted); font-size: 0.875rem; font-style: normal; }
.offer { background: var(--fade-x) top / 100% 1px no-repeat; }
.offer li { position: relative; display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.4rem 1.25rem; align-items: start; padding: 1rem 0.25rem 1.05rem; }
.offer li::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--fade-x); }
.offer p { color: var(--ink-2); max-width: 52ch; }
/* Each offer carries its own mark as MrTopStep shows it (owner, 13.10.2026: the pictures where Danny's offer is
   explained): the mark on a 16:10 tile, a pane of faint light with the Ring; the Opening Print's mark is drawn
   for a light ground and keeps one */
.offer-logo { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 0.7rem; border-radius: var(--r-control); background: rgb(255 255 255 / 0.03); box-shadow: var(--ring); }
.offer-logo img { width: 100%; height: 100%; object-fit: contain; }
.offer-logo.is-light { background: #f1f4f8; }
.offer-text { display: grid; gap: 0.4rem; }
/* The mentors of the IMPro room close the copy on the left, so both columns of the split end close together
   (owner, 13.10.2026: the section was too long, the offers ran 660px past the copy) */
.brand-mentors { display: grid; gap: 0.4rem; margin: 0.5rem 0 0; }
.brand-mentors img { width: 100%; height: auto; border-radius: var(--r-control); box-shadow: var(--ring), var(--frame-drop); }
.brand-mentors figcaption { color: var(--muted); font-size: 0.75rem; line-height: 1.45; }
/* PitBullTraders, where Danny is a partner, closes the list as a lit panel: its white mark large on Night, Logo
   Blue light rising behind it and the program edge on top */
.offer .offer-feature { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding-top: 1.25rem; }
.pitbull {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 1;
  padding: 1.5rem;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: radial-gradient(60% 95% at 50% 100%, rgb(var(--plate-rgb) / 0.6), rgb(var(--plate-rgb) / 0) 72%), #050505;
  box-shadow: var(--ring), var(--frame-drop);
}
.pitbull::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--figure-rgb) / 0) 6%, rgb(var(--figure-rgb) / 0.85) 50%, rgb(var(--figure-rgb) / 0) 94%);
}
.pitbull img { width: min(100%, 21rem); height: auto; }

/* His videos: a rundown of clips; one click plays a clip in the big frame above */
.clips { background: var(--fade-x) top / 100% 1px no-repeat; }
.clip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(10rem, calc((100% - 4rem) / 4)) auto minmax(0, 1fr) auto;
  gap: 0.5rem 2rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: var(--r-panel);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
.clip::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--fade-x); }
.clip:hover { background-color: rgb(255 255 255 / 0.04); }
.clip[aria-current] { background: var(--studio); }
.clip-when { color: var(--figure); font-family: var(--f-super); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.clip-what { display: grid; gap: 0.3rem; }
.clip-title { color: var(--ink); font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; }
.clip-place { color: var(--muted); font-size: 0.875rem; text-wrap: pretty; }
.clip-go { display: inline-flex; align-items: center; gap: 0.4em; color: var(--ink-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.clip-go .ico { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out); }
.clip:hover .clip-go .ico, .clip:focus-visible .clip-go .ico { transform: translateX(3px); }
/* Each clip shows its picture, 16:9 like the player above, with the player's play button small on it, a
   little dimmed until the pointer is on it; a video from another channel shows a tile with that channel's
   name (owner, 13.10.2026) */
.clip-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 11rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-control);
  background: rgb(255 255 255 / 0.03);
  box-shadow: var(--ring);
}
.clip-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82); transition: transform 0.5s var(--ease-out), filter 0.25s var(--ease-out); }
.clip:hover .clip-thumb img, .clip:focus-visible .clip-thumb img { transform: scale(1.04); filter: none; }
.clip-channel { position: absolute; left: 0.6rem; bottom: 0.5rem; color: var(--muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.clip-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-panel);
  background: var(--studio);
  color: var(--ink);
}
.clip-play .play-ico { width: 1rem; height: 1rem; margin-left: 0.1rem; }
@media (prefers-reduced-motion: reduce) { .clip-thumb img { transition: none; } .clip:hover .clip-thumb img { transform: none; } }
.photo-sources { margin-top: 1.75rem; }
.photo-sources h3 { color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; }

/* The sources of the page, each one a link. They stand under the last call like the footer, on its
   hairline, so the call's light ends on a line instead of breaking off at the section's edge. */
.sources { padding-block: clamp(2.5rem, 4vw, 3.5rem) var(--section-y); box-shadow: inset 0 1px 0 var(--line); }
.sources h2 { font-size: 1.5rem; }
.source-list { display: grid; gap: 0.5rem; margin-top: 1.25rem; color: var(--muted); font-size: 0.875rem; }
.source-list a { text-decoration-color: rgb(var(--muted-rgb) / 0.6); }

/* ---------- From the pit to the screen ---------- */

/* The page for an address that does not exist (404.html): the title, one line and the ways back,
   standing in the first view's light like the front page's hero */
.lost {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: 78svh;
  margin-top: calc(-1 * var(--bug-h));
  padding-block: calc(var(--bug-h) + var(--hero-top)) var(--section-y);
  background: radial-gradient(50% 62% at 72% 45%, rgb(var(--plate-rgb) / 0.5), transparent 72%), var(--night);
}
.lost-lede { margin: 1.25rem 0 2rem; }

/* Like the hero, the page's first section runs up behind the floating header */
.pit-hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--bug-h));
  padding-block: calc(var(--bug-h) + var(--hero-top)) clamp(1.5rem, 4vh, 2.5rem);
  /* The light behind the two-shot fades into Night over the section's last 12rem on an eased curve, so the
     next section follows without an edge, as under the front page's first view (owner, 13.10.2026) */
  background:
    linear-gradient(180deg, rgb(var(--night-rgb) / 0) calc(100% - 12rem), rgb(var(--night-rgb) / 0.1) calc(100% - 9.6rem), rgb(var(--night-rgb) / 0.35) calc(100% - 7.2rem), rgb(var(--night-rgb) / 0.65) calc(100% - 4.8rem), rgb(var(--night-rgb) / 0.9) calc(100% - 2.4rem), var(--night)),
    radial-gradient(58% 50% at 50% 74%, rgb(var(--plate-rgb) / 0.42), transparent 72%),
    var(--night);
}
/* The title and the lede share one baseline: the title left, the lede's glass field right */
.pit-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.5rem 4rem;
  align-items: last baseline;
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.pit-title { margin-bottom: 0; text-wrap: balance; }
.pit-lede { justify-self: end; }
/* The two-shot: the pit and the screen in equal frames */
.twoshot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.twoshot { align-items: start; }
.twoshot .cam .cam-frame { aspect-ratio: 16 / 10; }
/* The screen's lower third lies on the frame, and the note under it says what is an example */
.shot-screen { display: grid; }
.shot-screen > .screen { grid-area: 1 / 1; }
.shot-screen > figcaption { display: contents; }
.shot-screen .l3 { grid-area: 1 / 1; z-index: 4; align-self: end; justify-self: start; margin: 0 0 1rem 1rem; }
.shot-screen .scene-note { grid-area: 2 / 1; margin-top: 0.85rem; }
.screen {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: #0b0c0e;
  box-shadow: var(--ring), var(--frame-drop);
}
/* Outside the screenshot the room's panel takes the page's Label and Tag steps instead of the
   screenshot's container units; the frame never gets narrower than its 23 order book rows need */
.screen { container-type: inline-size; }
.screen .share-bar { gap: 14px; padding: 9px 14px; font-size: 0.75rem; }
.screen .share-domtitle { width: clamp(6.5rem, 26cqw, 10rem); }
.screen .share-body { grid-template-columns: minmax(0, 1fr) clamp(6.5rem, 26cqw, 10rem); }
.screen .ch-axis { right: 6px; font-size: 0.6875rem; }
.screen .ch-label { left: 8px; padding: 2px 6px; border-radius: 2px; font-size: 0.6875rem; }
.screen .ch-last { padding: 2px 6px; font-size: 0.6875rem; }
/* The screen's lower third lies on the corner where the gap's tag would stand and showed it through its
   glass as a ghost under its own text; the dotted gap line stays */
.screen .ch-label.is-gap { display: none; }
.screen .share-dom { font-size: 0.75rem; }
.screen .dom-head { font-size: 0.6875rem; }
.screen .dom-bid, .screen .dom-ask { padding-inline: 7px; }
/* The example tag in the screen's own bar, set like Tradechat's labels */
.share-tag { padding: 3px 6px 2px; border-radius: 2px; background: rgb(255 255 255 / 0.08); color: #9aa3ad; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* What carried over: three rows under a column head that stays below the floating header */
.carry-head {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 12px + 58px + 10px);
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4.5fr) minmax(0, 4.5fr);
  gap: 0 2.5rem;
  margin-bottom: 0.5rem;
  padding: 0.8rem 1.25rem 0.85rem;
  border-radius: var(--r-panel);
  background: var(--studio);
}
.carry-head span {
  color: var(--ink);
  font-family: var(--f-super);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.carry-head span:first-child { grid-column: 2; }
.carry-rows { background: var(--fade-x) top / 100% 1px no-repeat; }
.carry-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4.5fr) minmax(0, 4.5fr);
  gap: 1rem 2.5rem;
  align-items: start;
  padding: clamp(1.75rem, 3vw, 2.5rem) 1.25rem;
}
.carry-row::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--fade-x); }
.carry-row h3 { text-wrap: balance; }
.carry-pit, .carry-screen { display: grid; gap: 1rem; align-content: start; }
.carry-pit p, .carry-screen > p { max-width: 46ch; color: var(--ink-2); }
/* The column head names the columns on wide screens; each cell names its own on a phone */
.carry-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.closed { background: radial-gradient(46% 60% at 26% 50%, rgb(var(--plate-rgb) / 0.24), transparent 72%), var(--night); }
/* The three dates as the rundown strip's twin: years in Site Blue, slots parted by fading rules */
.dates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-radius: var(--r-panel);
  background: var(--studio);
}
.dates li { display: grid; gap: 0.55rem; align-content: start; padding: 1.1rem 1.35rem 1.25rem; }
.dates li + li { background: var(--fade-y) left / 1px 100% no-repeat; }
.dates-when { color: var(--figure); font-family: var(--f-super); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.dates-what { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.35; text-wrap: pretty; }
.closed-copy { display: grid; gap: 1.25rem; max-width: 62ch; }
.closed-copy .closed-line { color: var(--ink); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.4; text-wrap: balance; }

/* ---------- Room rundown ---------- */

/* Rows part on lines that fade out at both ends */
.rundown { background: var(--fade-x) top / 100% 1px no-repeat; }
.rundown li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(11rem, 3fr) minmax(0, 9fr);
  gap: 0.75rem 2rem;
  align-items: baseline;
  padding: 1.4rem 1.25rem;
  border-radius: var(--r-panel);
}
.rundown li::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--fade-x); }
.rd-time { display: grid; gap: 0.3rem; font-variant-numeric: tabular-nums; }
.rd-time > span:first-child {
  color: var(--figure);
  font-family: var(--f-super);
  font-weight: 800;
  font-size: 2rem;
  line-height: 0.95;
  letter-spacing: 0;
}
.rd-local { color: var(--muted); font-size: 0.875rem; }
.rd-body { display: grid; gap: 0.5rem; }
.rd-body p { max-width: 58ch; color: var(--ink-2); }
/* The status stands right after the entry's title it belongs to, upright like every label */
.rd-status {
  margin-left: 0.6rem;
  vertical-align: 0.2em;
  color: var(--muted);
  font-family: var(--f-text);
  font-style: normal;
  font-stretch: 100%;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* The live row: the whole package switches to live, the row turns graphite under a volt edge */
.rundown li[data-status="on-air"] { background: var(--studio); box-shadow: inset 0 3px 0 var(--live); }
/* From 720px the rows' text stands on the column's edge under the section title; their padding, which
   holds the live row's light and a clip's hover, reaches into the gutter instead */
@media (min-width: 720px) { .rundown, .clips { margin-inline: -1.25rem; } }
.rundown .rd-also { padding-top: clamp(1.75rem, 3vw, 2.25rem); }
.rundown .rd-also::after { display: none; }
.rd-also .rd-time > span:first-child { color: var(--muted); font-size: 1.25rem; }
.rd-body h3 { text-wrap: balance; }

/* ---------- Add to calendar (owner, 13.10.2026) ----------
   A button of the header's glass opens the three calendars. Google gets a link to the next session that
   repeats every weekday (site.js); Apple and Outlook get nextgen-traders-live.ics (tools/calendar.mjs),
   which leaves out the market holidays and ends the early closes at 1:00 PM. */
.cal { position: relative; z-index: 3; justify-self: start; width: fit-content; }
.cal[open] { z-index: 6; }
.cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-control);
  background: var(--studio);
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.cal-btn::-webkit-details-marker { display: none; }
.cal-btn:hover, .cal-btn:focus-visible, .cal[open] > .cal-btn { color: var(--ink); background-color: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.cal-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cal[open] > .cal-btn .nav-chev { transform: rotate(180deg); }
/* The menu is the open navigation's pane: the header's glass with the deeper blur */
.cal-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 2px;
  min-width: 19rem;
  padding: 8px;
  border-radius: var(--r-panel);
  background: var(--studio);
  box-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.9);
}
@media (prefers-reduced-motion: no-preference) {
  .cal[open] > .cal-menu { animation: drop 0.18s var(--ease-out); }
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.cal-opt {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-control);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out);
}
.cal-opt:hover, .cal-opt:focus-visible { background: rgb(255 255 255 / 0.04); }
.cal-note { padding: 9px 12px 5px; background: var(--fade-x) top / 100% 1px no-repeat; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.35; }

/* ---------- Questions (owner, 13.10.2026: simple questions with simple answers, for someone who is new) ----------
   The title on the first quarter, the questions on the site's second line like the footer's risk disclosure;
   each question opens its answer in place, on hairlines that fade at both ends like the rundown */
.faq { background: radial-gradient(46% 56% at 22% 40%, rgb(var(--plate-rgb) / 0.22), transparent 72%), var(--night); }
.faq-grid { display: grid; gap: clamp(2rem, 3.5vw, 3rem) 2rem; align-items: start; }
.faq-list { background: var(--fade-x) top / 100% 1px no-repeat; }
.faq-item { position: relative; }
.faq-item::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--fade-x); pointer-events: none; }
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding: 1.3rem 1.25rem;
  border-radius: var(--r-panel);
  color: var(--ink);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover, .faq-item > summary:focus-visible { background: rgb(255 255 255 / 0.04); }
/* The open question stands on a graphite plate, like the playing clip */
.faq-item[open] { background: var(--studio); }
/* The legal sections' drawn chevron, turning when the answer opens */
.faq-item > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}
.faq-item[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.faq-a { display: grid; justify-items: start; gap: 1.1rem; max-width: 62ch; padding: 0 1.25rem 1.6rem; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] > .faq-a { animation: arrive 0.4s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) { .faq-item > summary::after { transition: none; } }
@media (min-width: 720px) { .faq-list { margin-inline: -1.25rem; } }
/* On phones the rows keep the rundown's 0.75rem inset */
@media (max-width: 719px) { .faq-item > summary, .faq-a { padding-inline: 0.75rem; } }
@media (min-width: 1080px) {
  .faq-grid { grid-template-columns: calc((100% - 4rem) / 4) minmax(0, 1fr); }
  .faq-grid > h2 { padding-top: 1.05rem; }
}

/* ---------- Slate ---------- */

.slate-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 6rem) var(--split-gap);
  align-items: end;
}
/* The steel NGT stands over the last call like the set piece of a broadcast (owner, 21.10.2026: "zwei in die
   Website einbauen, nicht fürs Logo", "etwas größer"). Its picture keeps room for the shadow, 4.1 percent of
   its width on the left and 12 percent of its height at the bottom; margins in its own width put the N's foot
   on the title's edge and move the title up into that room. A transform would do the first too, but it lifts
   the picture over the title. */
.slate-head { display: grid; justify-items: start; }
.slate-ngt { --ngt-w: clamp(17rem, 4rem + 31vw, 41rem); display: block; width: var(--ngt-w); height: auto; margin: 0 0 calc(var(--ngt-w) * -0.05) calc(var(--ngt-w) * -0.041); }
.slate h2 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); line-height: 0.94; }
.slate-copy { display: grid; justify-items: start; gap: 1.5rem; }
.slate-copy > p:first-child { color: var(--ink); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); max-width: 44ch; }
.slate-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.slate-state { color: var(--muted); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.slate-count { color: var(--ink); font-weight: 600; }
.slate-after { color: var(--muted); font-size: 0.9375rem; }

/* ---------- Partners (Cody, 05.11.2026) ----------
   The companies we are affiliate partners with, each as its logo on a graphite board with its name under it.
   A click opens the deal under the boards, built like the rundown's live row: what you get, our code or link,
   and the way there. The way out is a graphite key with the header's ring, not volt: the one volt action on the
   page stays the room's. A logo stands as the company made it; the board keeps every logo whole. */
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; }
.board {
  display: grid;
  gap: 0.7rem;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.board:focus-visible { outline: none; }
.board:focus-visible .board-logo { outline: 2px solid var(--ink); outline-offset: 3px; }
.board-logo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 1.5rem 1.75rem;
  border-radius: var(--r-control);
  background: var(--studio);
  box-shadow: var(--ring);
  transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.board-logo img { width: 100%; height: 100%; object-fit: contain; }
/* Until the logo is there, or when it fails to load, the board carries the company's name in the italic */
.board-word { color: var(--ink); font-family: var(--f-super); font-style: italic; font-stretch: 80%; font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); line-height: 1; text-align: center; text-wrap: balance; }
.board-logo .slot { position: absolute; left: 0.75rem; top: 0.75rem; }
/* The open partner's board carries the Program Edge, the site's mark for what is on */
.board-logo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--figure-rgb) / 0) 6%, rgb(var(--figure-rgb) / 0.85) 50%, rgb(var(--figure-rgb) / 0) 94%);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}
.board:hover .board-logo, .board[aria-expanded="true"] .board-logo { background: var(--studio-2); }
.board[aria-expanded="true"] .board-logo::after { opacity: 1; }
.board-name {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 0.15rem;
  color: var(--ink-2);
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.2s var(--ease-out);
}
.board:hover .board-name, .board[aria-expanded="true"] .board-name { color: var(--ink); }
/* The questions' drawn chevron, turning when the deal opens; it stays on the first line of a long name */
.board-name::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0.45em 4px 0 0;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}
.board[aria-expanded="true"] .board-name::after { transform: translateY(2px) rotate(-135deg); }

/* The deal is the rundown's live row in Graphite: across the column, from 720px reaching into the gutter as the
   rundown's rows do, so the partner's name stands on the first quarter where the rundown has its times and
   what it offers on the site's second line */
.deal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem 2rem;
  align-items: baseline;
  margin-top: 1.5rem;
  padding: 1.4rem 1.25rem 1.6rem;
  border-radius: var(--r-panel);
  background: var(--studio);
}
@media (min-width: 720px) { .deal { grid-template-columns: minmax(11rem, 3fr) minmax(0, 9fr); margin-inline: -1.25rem; } }
@media (prefers-reduced-motion: no-preference) {
  .deal:not([hidden]) { animation: arrive 0.4s var(--ease-out); }
}
.deal-name { color: var(--figure); font-weight: 800; font-size: 2rem; line-height: 0.95; text-wrap: balance; }
.deal-body { display: grid; justify-items: start; gap: 1.25rem; min-width: 0; }
.deal-about { max-width: 58ch; color: var(--ink-2); text-wrap: pretty; }
/* What you get and our code stand as the trader pages' facts: the label in steel, the content in chalk */
.deal-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.75rem 1.5rem; margin: 0; }
.deal-facts dt { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
.deal-facts dd { max-width: 62ch; margin: 0; min-width: 0; color: var(--ink); text-wrap: pretty; }
.deal-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.deal-code { color: var(--figure); font-family: var(--f-super); font-style: italic; font-stretch: 80%; font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: 0.03em; user-select: all; }
.deal-copy, .deal-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0.6rem 14px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--studio-2);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.deal-copy:hover, .deal-go:hover { background: var(--surface-hi); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22); }
.deal-copy { padding: 0.5rem 12px; color: var(--ink-2); font-size: 0.875rem; }
.deal-go .ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out); }
.deal-go:hover .ico, .deal-go:focus-visible .ico { transform: translate(2px, -2px); }
.deal-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
/* The commission stands beside the way out in plain words */
.deal-note { max-width: 40ch; color: var(--muted); font-size: 0.875rem; line-height: 1.45; }
.partners-note { max-width: 62ch; margin-top: 1.75rem; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
@media (max-width: 719px) {
  .boards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 1rem; }
  .board-logo { padding: 1rem 1.1rem; }
  .board-word { font-size: 1.25rem; }
  /* On a phone the deal keeps the rundown rows' 0.75rem inset */
  .deal { padding: 1.25rem 0.75rem 1.4rem; }
  .deal-name { font-size: 1.5rem; }
}
@media (max-width: 479px) {
  /* On a small phone each fact's label stands over its content */
  .deal-facts { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .deal-facts dd + dt { margin-top: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .board-name::after, .board-logo::after, .deal-go .ico { transition: none; }
}

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

/* The membership (Cody, 28.10.2026), hidden until content.js has a price and a payment link: the title and what
   the membership is on the left, the price on a solid graphite plate with the volt key on the right, the risk
   stated plainly under the key */
.join { background: radial-gradient(48% 56% at 72% 50%, rgb(var(--plate-rgb) / 0.26), transparent 72%), var(--night); }
.join-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 3rem) var(--split-gap);
  align-items: center;
}
.join-grid > .section-head { margin-bottom: 0; }
.join-plate {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-panel);
  background: var(--studio);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), var(--frame-drop);
}
.join-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; }
/* The price is a figure, large in the italic like the countdown and the score */
.join-amount { color: var(--figure); font-family: var(--f-super); font-style: italic; font-stretch: 80%; font-weight: 800; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 0.9; font-variant-numeric: tabular-nums; }
.join-period { color: var(--muted); font-size: 0.8125rem; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
.join-note, .join-risk, .join-terms { max-width: 40ch; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
.join-terms a { text-decoration-color: rgb(var(--muted-rgb) / 0.6); }

/* ---------- Your membership ---------- */

/* The membership's own pages (Cody, 31.10.2026): the title and its lede in the first view's light like the 404
   page, under them the rundown's rows, and on the pages to cancel and to withdraw the form beside the title on
   the join plate's solid graphite, its fields one step up in Graphite Two. After sending, the form gives way to
   the receipt, named by a lower third with the time it was received. */
.desk {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--bug-h));
  padding-block: calc(var(--bug-h) + var(--hero-top)) var(--section-y);
  background: radial-gradient(50% 62% at 72% 34%, rgb(var(--plate-rgb) / 0.42), transparent 72%), var(--night);
}
.desk-head { display: grid; justify-items: start; max-width: 44rem; }
.desk-head .hero-title { text-wrap: balance; }
.desk-head .lede + .go-line { margin-top: 1.5rem; }
.desk-list { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }
/* From 1080px the rows' text stands on the site's second line, as the questions and the footer's risk disclosure */
@media (min-width: 1080px) { .desk-list li { grid-template-columns: calc((100% - 4rem) / 4) minmax(0, 1fr); } }
/* A row's name in the italic of the rundown's times */
.desk-key { font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem); line-height: 1; }
.rd-body .go-line, .rd-body .cal { margin-top: 0.4rem; }
/* A long link wraps with its arrow after the last word, not out at the column's edge */
.desk .go { display: inline; }
.desk .go .ico { display: inline-block; margin-left: 0.45em; vertical-align: -0.08em; }
.desk-grid { display: grid; gap: clamp(2rem, 4vw, 3rem) var(--split-gap); align-items: start; }
@media (min-width: 1080px) { .desk-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.desk-plate {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-panel);
  background: var(--studio);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), var(--frame-drop);
}
.desk-form, .receipt { display: grid; gap: 1.5rem; }
/* The account: the membership's name, its price as the join plate shows it, and the facts the backend gives */
.account-plate { display: grid; justify-items: start; gap: 1.25rem; }
.account-out { display: grid; gap: 0.75rem; }
.account-who { margin-top: 1rem; color: var(--ink-2); font-size: 0.9375rem; }
.account-who + .go-line { margin-top: 0.75rem; }
.account-who[hidden] + .go-line { margin-top: 1.5rem; }
/* The contract is named like a lower third's name, in the heavy italic */
.desk-contract { display: grid; gap: 0.35rem; }
.desk-contract > span:last-child { color: var(--ink); font-family: var(--f-super); font-style: italic; font-stretch: 80%; font-weight: 800; font-size: 1.375rem; line-height: 1.1; text-transform: uppercase; }
.field { display: grid; gap: 0.5rem; }
.field-label { padding: 0; color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.field-opt { margin-left: 0.5rem; color: var(--muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.field-hint { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
/* A field is a Graphite Two plate with a steel line under it, so it reads as a place to write */
.field input, .field textarea {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0.65rem 0.9rem;
  border: 0;
  border-radius: 0;
  background: var(--studio-2);
  box-shadow: inset 0 -1px 0 rgb(var(--muted-rgb) / 0.5);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: box-shadow 0.2s var(--ease-out);
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.field input:user-invalid, .field textarea:user-invalid { box-shadow: inset 0 -2px 0 var(--ink); }
/* A choice is a row of Graphite Two with a square box; the chosen row takes a chalk edge on its left */
.choice { display: grid; gap: 2px; min-width: 0; margin: 0; padding: 0; border: 0; }
.choice > legend { margin-bottom: 0.5rem; }
.choice-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  background: var(--studio-2);
  color: var(--ink-2);
  line-height: 1.35;
  cursor: pointer;
  transition: color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.choice-row:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.choice-row:has(:checked) { color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.choice-row:has(:checked):hover { box-shadow: inset 3px 0 0 var(--ink), inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.choice-row input {
  appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1.5px var(--muted);
  cursor: pointer;
}
.choice-row input::before { content: ""; width: 8px; height: 8px; background: var(--ink); transform: scale(0); transition: transform 0.15s var(--ease-out); }
.choice-row input:checked { box-shadow: inset 0 0 0 1.5px var(--ink); }
.choice-row input:checked::before { transform: none; }
/* A field only scripts fill in, out of sight and out of the tab order (the backend drops what has it filled) */
.desk-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.desk-act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.5rem; }
/* The keys elsewhere are links; as a button the key drops the browser's own edge and type */
button.btn { border: 0; font-family: inherit; cursor: pointer; }
.desk-act .btn:disabled { cursor: progress; opacity: 0.7; }
.desk-status { padding: 0.85rem 1rem; background: var(--studio-2); box-shadow: inset 3px 0 0 var(--ink); color: var(--ink); font-size: 0.9375rem; line-height: 1.5; }
.receipt { justify-items: start; }
.desk-plate .l3-line { background: var(--studio-2); }
.receipt-line { color: var(--ink); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); line-height: 1.35; }
.receipt-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.6rem 1.5rem;
  width: 100%;
  margin: 0;
  padding-block: 1.1rem;
  background: var(--fade-x) top / 100% 1px no-repeat, var(--fade-x) bottom / 100% 1px no-repeat;
}
.receipt-facts dt { color: var(--muted); font-size: 0.9375rem; }
.receipt-facts dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.receipt-note { max-width: 56ch; color: var(--ink-2); font-size: 0.9375rem; }
/* The calendar's graphite control as a button, one step up on the plate */
button.cal-btn { border: 0; font-family: inherit; }
.desk-plate .cal-btn, .desk-plate .cal-btn:hover, .desk-plate .cal-btn:focus-visible { background-color: var(--studio-2); }
@media (max-width: 719px) {
  .desk-act .btn { width: 100%; padding-block: 0.6rem; white-space: normal; text-align: center; }
  .receipt-facts { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .receipt-facts dd + dt { margin-top: 0.6rem; }
}
/* A saved or printed receipt: black on white, without the header, the footer and the controls */
@media print {
  .bug, .foot, .skip, .draft-note, .desk-head .go-line, [data-print], .slot { display: none !important; }
  html, body, .desk, .desk-plate, .l3-name, .l3-line, .receipt-facts { background: none !important; box-shadow: none !important; }
  .desk { margin: 0; padding: 0; }
  .desk *, .desk .l3-name { color: #000 !important; }
  .desk .l3-name, .desk .l3-line { padding-left: 0; clip-path: none; }
}

/* ---------- Footer ---------- */

.foot {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0 2.5rem;
  background: var(--night);
  box-shadow: inset 0 1px 0 var(--line);
}
.foot-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 2rem; align-items: start; }
.foot-mark img { display: block; width: auto; height: 40px; }
/* The pages of the site under the wordmark; the page you are on stands in Ink */
.foot-brand { display: grid; gap: 1.25rem; align-content: start; }
.foot-pages { display: grid; gap: 0.45rem; font-size: 0.9375rem; }
.foot-pages a { color: var(--muted); text-decoration: none; }
.foot-pages a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: rgb(var(--ink-rgb) / 0.45); }
.foot-pages a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.risk { color: var(--muted); font-size: 0.875rem; line-height: 1.55; max-width: 68ch; }
.risk strong { color: var(--ink-2); font-weight: 600; }
/* The group's channels as their marks (owner, 13.10.2026): 20px in Blue-Grey on 40px targets, the row's
   outer marks on the column's edges; with an address a mark is a link and lights up in Ink under the
   pointer, without one it only stands there */
.foot-links, .danny-links { display: flex; flex-wrap: wrap; gap: 4px; }
.foot-links { justify-content: flex-end; margin: -10px -10px 0 0; }
/* Danny's channels under his lede, the first mark on the text's edge (owner, 13.10.2026) */
.danny-links { margin: 1rem 0 0 -10px; }
.chan { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-control); color: var(--muted); transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out); }
a.chan:hover, a.chan:focus-visible { color: var(--ink); background-color: rgb(255 255 255 / 0.06); }
.chan-ico { width: 20px; height: 20px; fill: currentColor; }

/* Legal notice and privacy policy: two sections that open in place, side by side under the footer */
.legal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 3rem;
  align-items: start;
  margin-top: 2rem;
  padding-top: 1.5rem;
  background: var(--fade-x) top / 100% 1px no-repeat;
}
.legal-item summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.legal-item summary::-webkit-details-marker { display: none; }
/* A drawn chevron that turns when the section opens */
.legal-item summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s var(--ease-out);
}
.legal-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.legal-item summary:hover { color: var(--ink); }
/* With a membership: cancelling and withdrawing, on every page, as plain as the legal notice beside them */
.legal-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 2rem; }
.legal-acts a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.legal-acts a:hover { color: var(--ink); }
.legal-body { display: grid; gap: 0.85rem; max-width: 68ch; padding-block: 0.5rem 1rem; color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
.legal-body h3 { margin-top: 0.35rem; color: var(--ink-2); font-family: var(--f-text); font-size: 0.875rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.legal-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.45rem 1.25rem; margin: 0; }
.legal-facts dt { color: var(--ink-2); }
.legal-facts dd { margin: 0; min-width: 0; white-space: pre-line; }
.legal-date { font-size: 0.8125rem; }
/* On the traders' pages the legal texts are links to the front page, where they open */
.legal.legal--links { display: flex; flex-wrap: wrap; gap: 0 2.5rem; }
/* Where the footer has its three columns, the legal row stands on them: the legal notice under the
   wordmark, the privacy policy under the risk disclosure */
@media (min-width: 1080px) {
  .legal, .legal.legal--links { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); column-gap: 2rem; }
  .legal > :nth-child(2) { grid-column: 2 / -1; }
  /* With a membership the terms and the right of withdrawal follow the privacy policy on its column (31.10.2026) */
  .legal > #terms, .legal > #withdrawal { grid-column: 2 / -1; }
}
/* The membership's part of the privacy policy stands in the policy's own rhythm */
.legal-member { display: contents; }
.legal--links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.legal--links a:hover { color: var(--ink); }

/* ---------- Draft view (?draft) ---------- */

.slot {
  display: inline-block;
  padding: 0.25em 0.55em;
  border: 1px dashed var(--figure);
  color: var(--figure);
  font: 500 0.8125rem/1.3 var(--f-text);
  letter-spacing: 0;
  text-transform: none;
}
.cam-mono .slot { position: absolute; left: 1rem; right: 1rem; top: 1rem; justify-self: start; }
.draft .is-missing { outline: 2px dashed var(--figure); outline-offset: 3px; }
.draft-note {
  position: fixed; left: 12px; bottom: 12px; z-index: 40;
  max-width: 22rem; padding: 0.7rem 0.9rem;
  background: var(--studio-2); border: 1px dashed var(--figure);
  color: var(--ink-2); font-size: 0.8125rem;
}

/* ---------- Scroll motion (owner, 07.10.2026: like orionquant.com and deepcharts.com) ----------
   Content is visible by default; site.js marks what arrives on scroll and sets --p (0 to 1)
   for the scroll-linked parts. Reduced motion gets everything in place with no movement. */

html.glide { scroll-behavior: auto; }

[data-reveal] {
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out), clip-path 0.95s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
[data-reveal="up"]:not(.is-in) { opacity: 0; transform: translateY(32px); }
[data-reveal="wipe"] { clip-path: inset(-12% -12% -24% -12%); }
[data-reveal="wipe"]:not(.is-in) { clip-path: inset(-12% 100% -24% -12%); }

/* Titles light up word by word as they scroll in */
main h2 .w { opacity: clamp(0.16, calc(var(--p, 1) * (var(--n, 1) + 2) - var(--i, 0)), 1); transition: opacity 0.2s linear; }

/* Danny's photo settles from a close crop while it scrolls in */
[data-danny] .cam-frame img { transform: scale(calc(1.16 - var(--p, 1) * 0.16)); transform-origin: 50% 35%; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; }
}

/* ---------- Wide screens: copy on the left, the room on the right ---------- */

@media (min-width: 1180px) {
  .hero-inner { max-width: var(--copy-w, 30rem); }
  /* The first view holds the whole show: what the bar and the room under it, the sentences and the
     strip leave of the view's height goes to the camera frames, 9:16 where it fits and never wider
     than 3:4, so the strip stays in view on a shorter window too (stress test, 10.10.2026). On a short
     view the frames narrow and the sentences take more lines, so their reserve grows from five lines
     towards seven. */
  .hero { --cam-max: max(16rem, 100svh - var(--bug-h) - var(--hero-top) - clamp(8rem, 365px - 26.5svh, 11rem) - clamp(2.25rem, 5vh, 3rem) - 8.625rem - 20px); }
  .hero-side { width: min(56rem, 100% - 2 * max(var(--gutter), (100% - var(--max)) / 2) - var(--copy-w, 30rem) - var(--col-gap, 4rem), var(--cam-max) * 2.25 + 2 * clamp(0.75rem, 1.5vw, 1.5rem)); }
  .hero .person { container-type: inline-size; }
  .hero .people .cam .cam-frame { aspect-ratio: auto; height: min(100cqw * 16 / 9, var(--cam-max)); }
  .hero .people .cam-frame img { object-position: 50% 22%; }
  /* The pit page's first section fills the first view too, so the next title never stands cut in half
     at the bottom edge (stress test, 10.10.2026: at 1908 by 950 only its top showed) */
  .pit-hero { min-height: 100svh; }
}
/* Laptop widths: a narrower copy column, so the room keeps a readable size */
@media (min-width: 1180px) and (max-width: 1439px) {
  .hero { --copy-w: 24rem; --col-gap: 2.5rem; }
  .hero-title { font-size: 3.25rem; }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 1179px) {
  .hero { min-height: auto; grid-template-rows: auto auto auto; }
  .hero-inner { padding-bottom: 2rem; }
  .hero-side { grid-row: 2; justify-self: start; width: min(100% - 2 * var(--gutter), 60rem); margin: 0 var(--gutter) 0 max(var(--gutter), (100% - var(--max)) / 2); }
  .strip { grid-row: 3; }
  .profile-grid { --cam-h: clamp(22rem, 46vw, 30rem); gap: 2rem 2.5rem; }
}

/* Below laptop width the order book takes the Tag step, so its 23 rows still fit the frame */
@media (max-width: 1279px) {
  .screen .share-dom { font-size: 0.6875rem; }
}

@media (max-width: 1079px) {
  .danny-grid, .slate-grid, .join-grid, .pit-head, .danny-hero-grid, .brand-grid { grid-template-columns: minmax(0, 1fr); }
  .danny-note { text-align: left; }
  .pit-lede { justify-self: start; }
  /* The two-shot stays side by side; both frames stand upright so the order book keeps its rows */
  .twoshot .cam .cam-frame, .screen { aspect-ratio: 4 / 5; }
  .danny-grid .cam { max-width: 46rem; margin-bottom: 4.5rem; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-links { justify-content: flex-start; margin: -10px 0 0 -10px; }

  /* The jumps leave the bar for the menu button. The list opens inside the bar's own glass, which grows
     down to hold it (site.js sets --menu-h to the list's height), while the page behind it dims. */
  .bug { display: flex; justify-content: space-between; }
  .bug::before { transition: bottom 0.32s var(--ease-out); }
  .bug[data-menu]::before { bottom: calc(-1 * var(--menu-h, 0px)); }
  .nav-toggle { display: block; }
  .bug-ask { display: none; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100svh - var(--bug-h) - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.1rem 18px 1.25rem;
    background: var(--fade-x) top / 100% 1px no-repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.14s var(--ease-out), visibility 0s linear 0.14s;
  }
  .bug[data-menu] .nav { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease-out) 0.08s, visibility 0s; }
  .nav-list { display: grid; gap: 0; align-items: start; }
  /* In the list the groups stand open under their names; visibility follows the list, so nothing
     of a group shows while the list is closed */
  .nav-group > .nav-top { display: none; }
  .nav-group + .nav-group { margin-top: 1.25rem; }
  .nav-sub { position: static; padding: 0; background: none; box-shadow: none; opacity: 1; visibility: inherit; transform: none; transition: none; }
  .nav-sub::before { content: none; }
  .nav-head { display: block; margin-bottom: 0.7rem; color: var(--muted); font-size: 0.75rem; font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; }
  .nav-cams { grid-template-columns: repeat(3, minmax(0, 6.5rem)); }
  .nav-rows { width: auto; margin-inline: -12px; }
  /* The jumps into the front page follow under a fading divider, as rows like Danny's */
  .nav-item:not(.nav-group) { margin-inline: -12px; }
  .nav-group + .nav-item:not(.nav-group) { margin-top: 1rem; padding-top: 0.75rem; background: var(--fade-x) top / 100% 1px no-repeat; }
  .nav-item:not(.nav-group) > .nav-top { display: flex; width: 100%; min-height: 44px; color: var(--ink-2); font-size: 0.9375rem; }
  .nav-item:not(.nav-group) > .nav-top:hover { color: var(--ink); }
  .nav-top::after { content: none; }
  .is-here > .nav-top { color: var(--ink); font-weight: 600; }
}
/* On a tablet the list takes two columns: the three with the jumps into the front page, and Danny */
@media (min-width: 720px) and (max-width: 1079px) {
  .nav-list { grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 3rem; }
  .nav-group:first-child { grid-column: 1; grid-row: 1; }
  .nav-group + .nav-group { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  .nav-item:not(.nav-group) { grid-column: 1; }
}
@media (max-width: 1079px) and (prefers-reduced-motion: reduce) {
  .bug::before, .nav, .bug[data-menu] .nav { transition: none; }
}

/* The copy stacks over the cameras */
@media (max-width: 899px) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .profile-copy { grid-column: 1; grid-row: 1; }
  .profile-side { grid-column: 1; grid-row: 2; justify-self: start; }
}

@media (max-width: 719px) {
  :root { --bug-h: 64px; }
  .bug { top: calc(env(safe-area-inset-top, 0px) + 8px); min-height: 52px; margin-top: 12px; padding: 8px 8px 8px 12px; gap: 10px; }
  .bug-brand { --partner-h: 20px; gap: 10px; }
  .bug-sep { height: 20px; }
  .bug-live-time { display: none; }
  .btn.btn--bug { padding: 0 11px; font-size: 14px; }
  .nav { padding-inline: 16px; }

  .hero-inner { padding-bottom: 2rem; }
  /* On a phone the room shows its left column: the cameras and the chat */
  .scene-view { aspect-ratio: 625 / 913; }
  .scene-shot { width: 259.84%; }
  .hero-title { font-size: clamp(2.5rem, 11vw, 3rem); }
  .hero-title--mark { --mark-w: clamp(12rem, 54vw, 15rem); }
  .hero-act { justify-self: stretch; }
  .hero-act .btn, .slate .btn--big { width: 100%; }
  .strip { grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
  .strip li + li::before { left: 1rem; right: 1rem; top: 0; bottom: auto; width: auto; height: 1px; transform: none; }
  .strip a { padding: 0.95rem 1.1rem; }

  /* On a phone each of the three is a row: the upright picture, its sentences beside it */
  .hero .people { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .hero .person { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 1rem; }
  .hero .cam-mono { font-size: 2.25rem; }
  .hero .cam > .l3 { left: 0; bottom: 0.4rem; right: auto; }
  .hero .l3-num { display: none; }
  .hero .cam > .l3 .l3-name { min-height: 0; padding: 0.35rem 0.9rem 0.3rem 0.5rem; font-size: 0.875rem; }
  .hero .cam-num { left: 0.4rem; top: -0.15rem; font-size: 3rem; -webkit-text-stroke-width: 1px; }
  .danny-grid .cam { margin-bottom: 4.5rem; }
  .danny .cam > .l3 { left: 0.75rem; right: 0.75rem; transform: translateY(60%); }

  /* On a phone the pit and the screen stand one over the other, the screen upright so the order book
     keeps readable rows, and each comparison cell names its column itself */
  .twoshot { grid-template-columns: minmax(0, 1fr); }
  .twoshot .cam .cam-frame { aspect-ratio: 16 / 10; }
  /* Danny's videos: the date over the title, the play word under it */
  .clip { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; padding: 1.25rem 0.5rem; }
  .clip-thumb { width: 100%; }
  .offer li { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; }
  .offer-logo { padding: 0.55rem; }
  .rundown.timeline li { grid-template-columns: minmax(0, 1fr); }
  .play-disc { width: 3.75rem; height: 3.75rem; }
  /* On a small frame the note moves to the top edge, clear of the lower third */
  .play-note { position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%); white-space: nowrap; }
  /* Danny's player is too small to carry its lower third over the picture; it stands under it */
  .danny-player > .l3, .shot-pit > .l3 { position: static; margin-top: 0.6rem; }
  .screen { aspect-ratio: 4 / 5; }
  .dates { grid-template-columns: minmax(0, 1fr); }
  .dates li + li { background: var(--fade-x) top / 100% 1px no-repeat; }
  .carry-head { display: none; }
  .carry-row { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-inline: 0.25rem; }
  .carry-label {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
    color: var(--ink); font-family: var(--f-super); font-weight: 600; font-size: 1rem; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .carry-pit, .carry-screen { gap: 0.6rem; }

  /* On a phone the name comes first, then the cameras, then the sentence, the facts and the button */
  /* The cameras fill the column: the program's height follows from its width (100cqw is the grid's) */
  .profile-grid { container-type: inline-size; --cam-gap: 0.75rem; --cam-h: min(72svh, 100cqw * 32 / 27 - var(--cam-gap) * 23 / 27); justify-items: start; gap: 0; }
  .profile-copy { display: contents; }
  .profile-name { order: 1; }
  .profile-role { order: 2; }
  .profile-side { order: 3; grid-row: auto; margin: 0.5rem 0 1.75rem; }
  .profile-quote { order: 4; }
  .profile-story { order: 5; }
  .profile-facts { order: 6; }
  .profile-act { order: 7; justify-self: stretch; }
  .profile-act .btn { width: 100%; }
  .preview .cam-mono { font-size: 2.25rem; }
  .preview .cam > .l3 { left: 0.4rem; bottom: 0.4rem; }
  .preview .l3-name { font-size: 0.8125rem; }


  .rundown li { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 0.75rem; }

  .legal { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

@media (max-width: 479px) {
  .bug { gap: 8px; padding-left: 10px; }
  .bug-brand { --partner-h: 16px; gap: 8px; }
  /* No room left for the ON AIR plate; the strip under the first view shows it */
  [data-session="live"] .bug-live { display: none; }
  .btn.btn--bug { padding: 0 10px; }
  /* Room for the menu button: the rule and the button's arrow step aside, MrTopStep's logo stays */
  .bug-brand .bug-sep, .btn--bug .ico { display: none; }
  .nav-toggle { width: 34px; }
  .nav-toggle-ico { left: 9px; right: 9px; }
}
/* Below 375px only NGT, the button and the menu fit the bar; without MrTopStep's logo beside it NGT
   takes the size of the bar's button text */
@media (max-width: 374px) {
  .bug-brand .partner { display: none; }
  .mark-logo { height: 16px; }
}