/* claque* · v10 · dot-matrix build
   ink ground, paper type, curtain as the only accent.
   spacing + radius scale adapted from the fluid max() technique. */

:root {
  --ink: #0E0D0B;
  --paper: #F2EEE3;
  --curtain: #C43B2E;

  --line: rgba(242, 238, 227, 0.14);
  --line-soft: rgba(242, 238, 227, 0.09);
  --dim: rgba(242, 238, 227, 0.55);
  --dimmer: rgba(242, 238, 227, 0.38);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Cossette Titre", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* fluid spacing: a rem floor that scales with the viewport above it */
  --spacing-xs:  max(calc(8/16*1rem),  calc(12/1440*100vw));
  --spacing-sm:  max(calc(12/16*1rem), calc(16/1440*100vw));
  --spacing-md:  max(calc(16/16*1rem), calc(24/1440*100vw));
  --spacing-lg:  max(calc(24/16*1rem), calc(32/1440*100vw));
  --spacing-xl:  max(calc(32/16*1rem), calc(48/1440*100vw));
  --spacing-2xl: max(calc(48/16*1rem), calc(64/1440*100vw));

  --section-2xs: max(calc(20/16*1rem), calc(40/1440*100vw));
  --section-xs:  max(calc(30/16*1rem), calc(60/1440*100vw));
  --section-sm:  max(calc(40/16*1rem), calc(80/1440*100vw));
  --section-md:  max(calc(60/16*1rem), calc(120/1440*100vw));
  --section-lg:  max(calc(80/16*1rem), calc(160/1440*100vw));
  --section-xl:  max(calc(100/16*1rem), calc(200/1440*100vw));
  --section-2xl: max(calc(110/16*1rem), calc(220/1440*100vw));

  /* page gutter */
  --pad: 1rem;

  /* radius scale · slightly rounded, never capsules */
  --r-sm: 4px;
  --r-btn: 8px;
  --r-panel: 8px;

  /* translucent surface over the film */
  --glass: rgba(14, 13, 11, 0.55);
  --glass-solid: rgba(14, 13, 11, 0.78);
  --glass-line: rgba(242, 238, 227, 0.10);
  --blur: blur(14px);

  --pill-h: 48px;
  --micro: clamp(10px, calc(0.46875rem + 0.31vw), 12px);

  /* the band where the film dissolves into the dot matrix */
  --feather: 40vh;
  --hero-h: 128svh;
  /* the band where the stage's dot field dissolves into the footer's */
  --feather-foot: 32vh;
}

@media (min-width: 700px) {
  :root { --pad: 2.5rem; }
}

* { box-sizing: border-box; }

/* the gutter is reserved permanently, so locking the scroll for the loader,
   the drawer or the theater cannot shift the page sideways underneath them */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--curtain); color: var(--paper); }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--curtain);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--r-btn);
  font-size: 12px;
}
.skip:focus { left: 12px; }

/* ---------------------------------------------------------- loader */
/* The same dot field the rest of the page is built from, with the mark
   resolving out of it. It is added by script and removed by script, and the
   page underneath is complete the whole time it is up. */

html.is-loading { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--ink);
  opacity: 1;
  transition: opacity 0.5s ease;
}
.loader[hidden] { display: none; }

.is-revealing .loader {
  opacity: 0;
  pointer-events: none;
}

/* the field: the fallback dot texture, brightest at the centre, the way the
   dither reads under the cursor */
.loader-field {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(242, 238, 227, 0.17) 0.75px, transparent 0.85px);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.4) 30%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.4) 30%, transparent 62%);
  animation: loader-field 2.4s ease-in-out infinite;
}
@keyframes loader-field {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.loader-mark {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--spacing-md);
  animation: loader-mark 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: opacity 0.42s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes loader-mark {
  from { opacity: 0; transform: scale(0.84); }
  to { opacity: 1; transform: none; }
}
.is-revealing .loader-mark {
  opacity: 0;
  transform: scale(1.06);
}

.loader-ast {
  display: block;
  color: var(--curtain);
  line-height: 0;
}

.loader-word {
  margin: 0;
  color: var(--dim);
}

/* ---------------------------------------------------------- type roles */

.micro {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0;
}

.sec-h,
.hero-h,
.foot-line {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

.ast { color: var(--curtain); }

/* ---------------------------------------------------------- scramble */
/* the real string sits in a hidden sizing layer that holds the box open,
   and the animation paints in an absolute layer on top, so nothing reflows */

.is-pending { opacity: 0; }

.scr { position: relative; }
.scr-inline { display: inline-block; }
.scr-ghost { visibility: hidden; }
.scr-live {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

/* ---------------------------------------------------------- nav */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  pointer-events: none;
  padding: var(--spacing-sm);
}

/* the bar and the menu are one object: the bar widens and unfolds downward */
.nav-pill {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: var(--spacing-sm);
  transform: translateX(-50%);
  /* 100% is the fixed nav's own width, which excludes the scrollbar; 100vw
     does not, and centred the bar past the visual centre on desktop */
  width: min(440px, calc(100% - var(--spacing-sm) * 2));
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-panel);
  overflow: hidden;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s ease, border-color 0.4s ease;
}
.nav-pill.is-open {
  width: min(720px, calc(100% - var(--spacing-sm) * 2));
  background: rgba(17, 16, 14, 0.9);
  border-color: var(--line);
}

.nav-bar { height: var(--pill-h); }

/* the entire bar is the disclosure control, so the hit area, the hover state
   and the focus ring all belong to the bar rather than to the dash */
.nav-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  color: var(--paper);
  border-radius: var(--r-panel);
  transition: background 0.28s ease;
}
/* every hover state on this page is gated on a real pointer: on a touch screen
   a tap leaves :hover applied to whatever was last pressed until something else
   is pressed, which paints states nobody asked for */
@media (hover: hover) {
  .nav-toggle:hover { background: rgba(242, 238, 227, 0.06); }
}
/* the pill clips its children, so the ring sits inside the bar */
.nav-toggle:focus-visible {
  outline: 2px solid var(--curtain);
  outline-offset: -3px;
}

.nav-drop {
  height: 0;
  overflow: hidden;
  max-height: calc(100svh - var(--pill-h) - var(--spacing-sm) * 3);
}
.nav-drop[hidden] { display: none; }
/* the drawer takes focus when it is opened by pointer, and it is a container,
   not a control, so it never draws a ring. Every control inside it keeps one. */
.nav-drop:focus,
.nav-drop:focus-visible { outline: none; }
.nav-drop-inner { border-top: 1px solid var(--line-soft); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6, 6, 5, 0.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
}
.nav-scrim[hidden] { display: none; }

.nav-mark {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--curtain);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .nav-toggle:hover .nav-mark { transform: scale(1.16); }
}

.nav-label {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--paper);
}

/* MANUFACTURING holds; the second word cycles. The slot reserves the widest
   word in the set up front, in ch, so the bar never resizes mid loop. */
.nav-fixed { margin-right: 0.42em; }
.nav-word {
  display: inline-block;
  text-align: left;
  min-width: calc(9ch + 9 * 0.14em);
}
.nav-label.is-single .nav-fixed { display: none; }
.nav-label.is-single .nav-word { min-width: 0; text-align: center; }

/* a single dash, not three lines */
.nav-dash {
  display: grid;
  place-items: center;
  height: 100%;
}
.nav-dash::before {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--paper);
  transition: background 0.28s ease, width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .nav-toggle:hover .nav-dash::before { background: var(--curtain); width: 22px; }
}

.nav-stack {
  pointer-events: auto;
  position: absolute;
  right: var(--spacing-sm);
  top: var(--spacing-sm);
  width: 190px;
  display: grid;
  gap: 6px;
}

.pill {
  height: var(--pill-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-panel);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.pill-primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

@media (hover: hover) {
  .pill:hover { background: rgba(242, 238, 227, 0.09); border-color: var(--line); }
  .pill-primary:hover { background: var(--curtain); border-color: var(--curtain); color: var(--paper); }
}

/* ---------------------------------------------------------- menu rows */

.menu-rows { list-style: none; margin: 0; padding: 0; }
.menu-rows li + li { border-top: 1px solid var(--line-soft); }
.menu-rows li:last-child { border-bottom: 1px solid var(--line-soft); }

.menu-rows a {
  display: flex;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.05rem + 1.5vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  transition: color 0.25s ease, padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease;
}
/* the rows run the full width of a pill that clips, so an outset ring loses
   its left and right edges. Inset keeps all four. */
.menu-rows a:focus-visible { outline-offset: -3px; }

@media (hover: hover) {
  .menu-rows a:hover {
    color: var(--curtain);
    padding-left: calc(var(--spacing-xl) + 12px);
    background: rgba(242, 238, 227, 0.03);
  }
}

.menu-actions {
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
  display: grid;
  gap: var(--spacing-sm);
}
.menu-actions-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  width: 100%;
  cursor: pointer;
  padding: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-btn);
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.26s ease, color 0.26s ease, border-color 0.26s ease;
}
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--paper);
}
.btn-solid {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
}

@media (hover: hover) {
  .btn-ghost:hover { border-color: var(--paper); background: rgba(242, 238, 227, 0.05); }
  .btn-solid:hover { background: var(--curtain); border-color: var(--curtain); color: var(--paper); }
}

/* ---------------------------------------------------------- hero */

.hero {
  position: relative;
  z-index: 2;
  min-height: var(--hero-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* the whole media stack is masked out across the feather band, so the dot
   field underneath takes over with exactly the complementary ramp */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--feather)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--feather)), transparent 100%);
}
.hero-film,
.hero-dither {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* transparent at rest; the cursor trail is what turns the film into dots */
.dither.hero-dither {
  z-index: 1;
  background: none;
  pointer-events: none;
}
.dither.hero-dither.is-fallback { background-image: none; }

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(14, 13, 11, 0.5) 0%, rgba(14, 13, 11, 0) 22%),
    linear-gradient(to top, rgba(14, 13, 11, 0.34) 24%, rgba(14, 13, 11, 0.16) 46%, rgba(14, 13, 11, 0) 64%);
}

/* the block is anchored to the bottom of the viewport rather than to the top
   of the feather band: the hero overshoots the screen by (--hero-h - 100svh),
   so paying that back plus one section step leaves exactly --section-sm of air
   under the copy at every viewport height. The feather band itself is
   untouched, the copy simply reaches the top of it. */
.hero-body {
  position: relative;
  z-index: 3;
  padding: 0 var(--pad) calc(var(--hero-h) - 100svh + var(--section-2xs));
}

.hero-tag { margin-bottom: var(--spacing-md); color: var(--paper); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.38fr);
  align-items: end;
  gap: var(--spacing-2xl);
}

.hero-h {
  font-size: clamp(2.25rem, 1.05rem + 3.9vw, 4.75rem);
  max-width: 17ch;
}

.hero-side { display: grid; gap: var(--spacing-md); }

.hero-p {
  margin: 0;
  font-size: clamp(13px, 0.78rem + 0.25vw, 15px);
  line-height: 1.65;
  color: rgba(242, 238, 227, 0.86);
  max-width: 38ch;
}

.hero-ctl { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }

.ctl {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-panel);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.26s ease, border-color 0.26s ease, color 0.26s ease;
}
@media (hover: hover) {
  .ctl:hover { background: rgba(242, 238, 227, 0.1); border-color: var(--line); }
}
.ctl-i { display: flex; }

/* ---------------------------------------------------------- dither stage */

/* The stage carries the record, the price list and the founding slots, so one
   dot field runs under all three. Its tail is an empty band the footer climbs
   into, which is where the two fields cross. The hero set is untouched: the
   negative margin-top, the sticky canvas at -100svh and the stage-body padding
   are the same three values they were, and the padding is added at the bottom
   where the hero cannot see it. */
.stage {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--feather));
  padding-bottom: var(--feather-foot);
}

.dither {
  display: block;
  background: var(--ink);
}

.dither-main {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  margin-bottom: -100svh;
  z-index: 0;
}

.stage-body {
  position: relative;
  z-index: 1;
  padding-top: var(--feather);
}

/* WebGL unavailable: a static dot texture keeps the ground alive */
.dither.is-fallback {
  background-image: radial-gradient(rgba(242, 238, 227, 0.10) 0.7px, transparent 0.8px);
  background-size: 8px 8px;
}

/* ---------------------------------------------------------- section heads */

.sec-h {
  font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.4rem);
  max-width: 15ch;
}
.sec-h--wide { max-width: 22ch; }

.sec-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--dim);
  max-width: 54ch;
}

.sec-head {
  padding: 0 var(--pad);
  margin-bottom: var(--section-xs);
}
.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--spacing-xl);
}
.sec-head-tag { text-align: right; padding-bottom: 0.3em; }

/* ---------------------------------------------------------- the record */

.record { padding: var(--section-sm) 0 var(--section-lg); }

.record-grid {
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: var(--spacing-2xl);
  align-items: start;
}

.record-aside {
  position: sticky;
  top: calc(var(--pill-h) + var(--section-2xs));
  display: grid;
  gap: var(--spacing-md);
  align-content: start;
}

.rows { border-top: 1px solid var(--line-soft); }

.row-r {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) 0;
  border-bottom: 1px solid var(--line-soft);
}

.r-val {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.r-key {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--dim);
}

/* ---------------------------------------------------------- price list */

.prices { padding: var(--section-lg) 0 var(--section-xl); }

/* every row runs on the same four tracks. All flexible tracks are fr with a
   zero min, and the control track is a fixed width, so no row can size a
   column from its own content: name, tags, ( + ) and price share one x each. */
.offers {
  border-top: 1px solid var(--line-soft);
  --col-name: minmax(0, 0.9fr);
  --col-tags: minmax(0, 1.05fr);
  --col-plus: 3.75rem;
  --col-meta: minmax(0, 0.55fr);
}

.offer { border-bottom: 1px solid var(--line-soft); }
.offer h3 { margin: 0; font-weight: 400; }

.offer-head {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  width: 100%;
  color: inherit;
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  padding: var(--spacing-xl) var(--pad);
  display: grid;
  grid-template-columns: var(--col-name) var(--col-tags) var(--col-plus) var(--col-meta);
  align-items: center;
  gap: var(--spacing-lg);
  transition: background 0.3s ease;
}
@media (hover: hover) {
  .offer-head:hover { background: rgba(242, 238, 227, 0.035); }
}
/* the row is full bleed to the gutter, so the ring goes inside it */
.offer-head:focus-visible { outline-offset: -3px; }

.offer-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1.35vw, 2.35rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 5px 9px;
  font-size: var(--micro);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: var(--dim);
  white-space: nowrap;
}

.plus {
  justify-self: start;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--dimmer);
  transition: color 0.28s ease;
}
.plus i { font-style: normal; }
.offer-head[aria-expanded="true"] .plus { color: var(--curtain); }
@media (hover: hover) {
  .offer-head:hover .plus { color: var(--curtain); }
}

.offer-meta {
  justify-self: end;
  text-align: right;
  display: grid;
  gap: 3px;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
.offer-meta em { font-style: normal; color: var(--dimmer); }

.offer-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.offer-panel.is-open { grid-template-rows: 1fr; }
.offer-inner { overflow: hidden; padding: 0 var(--pad); }
.offer-panel.is-open .offer-inner { padding-bottom: var(--spacing-xl); }

.offer-inner p {
  margin: 0 0 var(--spacing-sm);
  max-width: 58ch;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(242, 238, 227, 0.86);
}
.offer-inner .foot { margin-bottom: 0; }

.prices-note { padding: 0 var(--pad); margin-top: var(--section-2xs); }

.foot {
  font-size: 12px;
  line-height: 1.7;
  color: var(--dim);
  max-width: 58ch;
}

/* ---------------------------------------------------------- founding slots */

/* no background of its own: the ticket stands on the stage's dot field */
.slots {
  position: relative;
  border-top: 1px solid var(--line-soft);
  padding: var(--section-md) 0 var(--section-lg);
}

.slots-wrap {
  padding: 0 var(--pad);
  display: grid;
  gap: var(--spacing-lg);
  justify-items: start;
}

/* the ticket · paper stock on the ink ground, printed in ink and curtain.
   The stub, the perforation and the ticket data do the layout work. */
.ticket {
  --stub: 13rem;
  --notch: 20px;
  --t-dim: rgba(14, 13, 11, 0.56);
  --t-rule: rgba(14, 13, 11, 0.16);

  position: relative;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-panel);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stub);
}

/* the printed face: rail across the top, the offer left, the terms right,
   the footnote across the bottom. Nothing floats in dead paper. */
.ticket-main {
  padding: var(--spacing-xl) var(--spacing-2xl);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: var(--spacing-2xl);
  row-gap: var(--spacing-md);
  align-content: start;
  justify-items: start;
  min-width: 0;
}
.ticket-rail { grid-column: 1 / -1; grid-row: 1; }
.ticket-h { grid-column: 1; grid-row: 2; }
.cta { grid-column: 1; grid-row: 3; align-self: end; }
.ticket-data { grid-column: 2; grid-row: 2; align-self: start; }
.ticket-foot { grid-column: 2; grid-row: 3; align-self: start; }

.ticket-rail {
  margin: 0 0 var(--spacing-xs);
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--t-rule);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-dim);
}
.ticket-rail-r { color: rgba(14, 13, 11, 0.4); }

.ticket-h {
  color: var(--ink);
  font-size: clamp(2rem, 1.1rem + 2.7vw, 3.6rem);
  max-width: 12ch;
}

.ticket-data {
  margin: 0.35rem 0 0;
  width: 100%;
  display: grid;
  align-content: start;
}

.ticket-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--spacing-sm);
  align-items: baseline;
  padding: 0.62rem 0;
  border-top: 1px solid var(--t-rule);
}
.ticket-row:last-child { border-bottom: 1px solid var(--t-rule); }

.ticket-row dt {
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-dim);
}
.ticket-row dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}

.cta {
  margin-top: var(--spacing-xs);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding: 0 var(--spacing-xl);
  border-radius: var(--r-btn);
  background: var(--ink);
  color: var(--paper);
  font-size: clamp(11px, 0.5rem + 0.4vw, 13px);
  font-weight: 500;
  letter-spacing: 0.14em;
  box-shadow: inset 0 0 0 0 var(--curtain);
  transition: box-shadow 0.26s ease, background 0.28s ease, color 0.28s ease;
}
.cta svg { transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); }
/* the ring reads on ink without ever setting small type on curtain */
@media (hover: hover) {
  .cta:hover { box-shadow: inset 0 0 0 2px var(--curtain); }
  .cta:hover svg { transform: translateX(5px); color: var(--curtain); }
}

.ticket-foot {
  margin: var(--spacing-xs) 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--t-dim);
  max-width: 56ch;
}

/* the stub */
.ticket-stub {
  position: relative;
  padding: var(--spacing-xl) var(--spacing-md);
  display: grid;
  justify-items: center;
  align-content: space-between;
  gap: var(--spacing-md);
  text-align: center;
}

/* the perforation: dash rhythm plus two punched holes, one element */
.ticket-stub::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--notch) / -2);
  width: var(--notch);
  background-image:
    radial-gradient(circle at 50% 0, var(--ink) calc(var(--notch) / 2 - 0.5px), transparent calc(var(--notch) / 2)),
    radial-gradient(circle at 50% 100%, var(--ink) calc(var(--notch) / 2 - 0.5px), transparent calc(var(--notch) / 2)),
    repeating-linear-gradient(to bottom, var(--t-rule) 0 5px, transparent 5px 11px);
  background-repeat: no-repeat;
  background-position: center top, center bottom, center center;
  background-size: 100% 100%, 100% 100%, 1px 100%;
}

.stub-mark {
  font-size: 18px;
  line-height: 1;
  color: var(--curtain);
}

.stub-count {
  display: grid;
  justify-items: center;
  gap: var(--spacing-xs);
}

.stub-n {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stub-num {
  font-size: clamp(2.75rem, 1.6rem + 2.6vw, 4.25rem);
  line-height: 0.86;
  color: var(--curtain);
}
.stub-of {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--t-dim);
}

.stub-label {
  margin: 0;
  font-size: var(--micro);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-dim);
}

.stub-ser {
  margin: 0;
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(14, 13, 11, 0.38);
}

/* ---------------------------------------------------------- footer */

/* the footer climbs back into the stage's tail by exactly the feather band, so
   its own dot field fades in over the stage's instead of starting at an edge.
   The pull-up is paid for by the stage's padding-bottom, so nothing below the
   ticket moves and the page is the same height it was. */
.foot-wrap {
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 82svh;
  display: flex;
  margin-top: calc(-1 * var(--feather-foot));
}

/* the complementary ramp: transparent where the stage's field is still whole,
   opaque by the time that field has run out */
.dither-foot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--feather-foot), #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--feather-foot), #000 100%);
}

.foot-body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--section-md) var(--pad) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--spacing-2xl);
}

.foot-line {
  font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.4rem);
  max-width: 20ch;
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1.6fr);
  gap: var(--spacing-2xl);
  align-items: start;
}

.disclosure {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.8;
  color: rgba(242, 238, 227, 0.6);
  max-width: 78ch;
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--line-soft);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.colophon a { transition: color 0.24s ease; }
.colophon .dot { color: var(--dimmer); }
@media (hover: hover) {
  .colophon a:hover { color: var(--curtain); }
}

.colophon-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* the mark and the handle carry the same size, weight and tracking */
.colophon-mark { color: var(--dimmer); }

.colophon-by {
  color: var(--dimmer);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color 0.24s ease, text-decoration-color 0.24s ease;
}
.colophon-by:focus-visible { color: var(--paper); }
@media (hover: hover) {
  .colophon-by:hover { color: var(--curtain); text-decoration-color: var(--curtain); }
}

/* ---------------------------------------------------------- theater */

.theater {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: var(--spacing-2xl) var(--pad);
  opacity: 0;
}
.theater[hidden] { display: none; }

.theater-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 5, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theater-stage {
  position: relative;
  width: min(1180px, 100%);
  display: grid;
  gap: var(--spacing-sm);
}

.theater-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.theater-t { color: var(--dim); margin: 0; }

.theater-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - var(--spacing-2xl) * 2 - 44px);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: #000;
}

.theater-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.theater-x {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--paper);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
@media (hover: hover) {
  .theater-x:hover { background: var(--curtain); border-color: var(--curtain); }
}

/* the button is 34px because that is what reads next to the label, but the
   press target is the 46px a thumb needs */
.theater-x { position: relative; }
.theater-x::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* ---------------------------------------------------------- clap burst */

.burst {
  position: fixed;
  z-index: 150;
  pointer-events: none;
  color: var(--curtain);
  will-change: transform, opacity;
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .record-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); }
  .record-aside { position: static; }

  .offer-head {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name plus"
      "meta meta"
      "tags tags";
    row-gap: var(--spacing-sm);
  }
  .offer-name { grid-area: name; }
  .tags { grid-area: tags; }
  .offer-meta { grid-area: meta; justify-self: start; text-align: left; grid-auto-flow: column; gap: var(--spacing-sm); }
  .plus { grid-area: plus; justify-self: end; align-self: start; }

  .foot-grid { grid-template-columns: 1fr; gap: var(--spacing-md); }

}

/* below this the terms column gets too narrow to set values on one line,
   so the printed face runs as a single column instead */
@media (max-width: 1180px) {
  .ticket-main { grid-template-columns: minmax(0, 1fr); }
  .ticket-rail,
  .ticket-h,
  .cta,
  .ticket-data,
  .ticket-foot { grid-column: 1; grid-row: auto; }
  .ticket-data { max-width: 46ch; }
  .ticket-h { max-width: 14ch; }
}

@media (max-width: 900px) {
  :root { --feather: 30vh; --hero-h: 118svh; --feather-foot: 26vh; }

  .nav-stack { display: none; }
  .nav-pill { width: calc(100% - var(--spacing-sm) * 2); }

  .hero-grid { grid-template-columns: 1fr; align-items: start; gap: var(--spacing-lg); }
  .hero-h { font-size: clamp(2rem, 1rem + 6.2vw, 3.25rem); max-width: 18ch; }
  .hero-p { max-width: 44ch; }

  .sec-head--split { grid-template-columns: 1fr; align-items: start; gap: var(--spacing-md); }
  .sec-head-tag { text-align: left; order: -1; padding-bottom: 0; }

  .row-r { grid-template-columns: 1fr; gap: var(--spacing-xs); }

  /* the ticket tears across instead of down: stub below, perforation horizontal */
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket-main { padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl); }

  .ticket-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 0.7rem 0;
  }

  .ticket-stub {
    padding: var(--spacing-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm) var(--spacing-md);
    text-align: left;
  }
  .ticket-stub::before {
    top: calc(var(--notch) / -2);
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: var(--notch);
    background-image:
      radial-gradient(circle at 0 50%, var(--ink) calc(var(--notch) / 2 - 0.5px), transparent calc(var(--notch) / 2)),
      radial-gradient(circle at 100% 50%, var(--ink) calc(var(--notch) / 2 - 0.5px), transparent calc(var(--notch) / 2)),
      repeating-linear-gradient(to right, var(--t-rule) 0 5px, transparent 5px 11px);
    background-position: left center, right center, center center;
    background-size: 100% 100%, 100% 100%, 100% 1px;
  }
  .stub-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }
  .stub-num { font-size: clamp(2.5rem, 1.4rem + 3.4vw, 3.25rem); }
  .stub-label { text-align: left; }
  .stub-ser { margin-left: auto; }

  .cta { width: 100%; justify-content: center; text-align: center; }
}

@media (max-width: 600px) {
  .menu-actions-pair { grid-template-columns: 1fr; }
  .menu-rows a { padding: var(--spacing-md) var(--spacing-lg); }
  .menu-actions { padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg); }
  .hero-ctl .ctl { flex: 1 1 auto; justify-content: center; }
  .theater { padding: var(--spacing-lg) var(--spacing-sm); }
}

@media (hover: hover) and (max-width: 600px) {
  .menu-rows a:hover { padding-left: calc(var(--spacing-lg) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .is-pending { opacity: 1; }
  /* an infinite animation forced to 0.001ms is a busy loop, so both loader
     animations are switched off outright and the mark rests in its end state */
  .loader-field,
  .loader-mark { animation: none; }
}