/* korb — cabin.css */
/* note: hero bg referenced via ../res/. keep folder layout intact. */

:root {
  --ink: #0b1a3a;
  --ink-soft: #25324f;
  --ink-mute: #5a6480;
  --paper: #ffffff;
  --paper-warm: #f6f4ec;
  --paper-cool: #eef3fb;
  --line: #d6dce8;
  --line-thin: #e6ebf3;
  --hue-deep: #0b3a82;
  --hue-mid: #1f5fc9;
  --hue-pale: #cfdcf2;
  --stamp: #b88a3a;
  --stamp-dim: rgba(184, 138, 58, .12);

  --type-display: 'Bricolage Grotesque', Georgia, serif;
  --type-mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  --rail: 1.25rem;
  --shore: clamp(1rem, 4vw, 3rem);

  --tween-fast: 220ms cubic-bezier(.2,.8,.2,1);
  --tween-slow: 520ms cubic-bezier(.2,.8,.2,1);
}

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

html, body { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body.tarmac {
  font-family: var(--type-display);
  font-weight: 400;
  font-size: clamp(15px, 1vw + .55rem, 17px);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  overflow-x: hidden;
}

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

img { max-width: 100%; display: block; }

/* ======================================================== */
/* hatch · top nav. logo dead-center, two thin rails flanking */
/* ======================================================== */

.hatch {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(.75rem, 3vw, 2.5rem);
  padding: 1.1rem var(--shore);
  background: var(--paper);
  border-bottom: 1px solid var(--line-thin);
  backdrop-filter: saturate(1.1);
}

.hatch__rail {
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent 0,
      var(--line) 12%,
      var(--ink) 50%,
      var(--line) 88%,
      transparent 100%);
  position: relative;
}

.hatch__rail::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(50%, -50%);
}

.hatch__rail--mirror::after {
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
}

.hatch__glyph {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .25rem 1rem;
  border-radius: 2px;
  transition: opacity var(--tween-fast);
}

.hatch__glyph:hover { opacity: .72; }

.hatch__glyph-img {
  height: 36px;
  width: auto;
  /* logo is dark in source — invert filter request applied at footer.
     here we keep its native colors. */
}

/* ============================================ */
/* frieze · hero. bg via background-image / ../  */
/* ============================================ */

.frieze {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, 86vh, 880px);
  display: flex;
  align-items: center;
  padding: clamp(3rem, 8vw, 6rem) var(--shore);
  background-color: var(--hue-deep);
  background-image:
    linear-gradient(180deg, rgba(11,26,58,.55) 0%, rgba(11,26,58,.78) 70%, rgba(11,26,58,.92) 100%),
    url('../res/terminal-7.webp');
  background-size: cover, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat, no-repeat;
  color: var(--paper);
  overflow: hidden;
}

/* faint grid overlay. evokes a meridian map. */
.frieze::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(255,255,255,.06) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.06) 95%);
  background-size: 56px 56px, 56px 56px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .55;
}

.frieze__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 22% 35%, rgba(31,95,201,.35) 0%, transparent 55%);
  pointer-events: none;
}

.frieze__plate {
  position: relative;
  z-index: 2;
  max-width: 56rem;
  width: 100%;
}

.frieze__pretext {
  font-family: var(--type-mono);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hue-pale);
  margin: 0 0 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .85rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
}

.frieze__pin {
  color: var(--stamp);
  font-size: .7rem;
}

.frieze__shout {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6.4vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 1.6rem;
  color: var(--paper);
}

.frieze__shout--accent {
  font-style: italic;
  font-weight: 600;
  color: var(--hue-pale);
  position: relative;
  display: inline-block;
}

.frieze__shout--accent::after {
  content: '';
  position: absolute;
  left: -.3rem;
  right: -.3rem;
  bottom: .12em;
  height: .14em;
  background: var(--stamp);
  z-index: -1;
  opacity: .65;
  transform: skewY(-1.2deg);
}

.frieze__murmur {
  font-size: clamp(1rem, 1.05vw + .55rem, 1.2rem);
  line-height: 1.6;
  max-width: 38rem;
  color: rgba(255,255,255,.86);
  margin: 0 0 2.2rem;
}

.frieze__tickets {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 2.6rem;
}

.ticket {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.4rem;
  font-family: var(--type-mono);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: transform var(--tween-fast), background var(--tween-fast), color var(--tween-fast);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
}

.ticket--primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.ticket--primary:hover {
  background: var(--stamp);
  color: var(--paper);
  border-color: var(--stamp);
  transform: translateY(-1px);
}

.ticket--ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255,255,255,.32);
}

.ticket--ghost:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.7);
}

.frieze__strip {
  list-style: none;
  margin: 0;
  padding: 1.1rem 0 0;
  border-top: 1px dashed rgba(255,255,255,.22);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.4rem);
  font-family: var(--type-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.78);
  max-width: 44rem;
}

.frieze__strip li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.frieze__strip-tag {
  font-weight: 500;
  color: var(--stamp);
  border: 1px solid rgba(184,138,58,.5);
  padding: .12rem .42rem;
  border-radius: 2px;
  font-size: .68rem;
}

.frieze__corner {
  position: absolute;
  right: var(--shore);
  bottom: var(--shore);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  font-family: var(--type-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.frieze__corner span {
  display: inline-block;
  border-left: 2px solid var(--stamp);
  padding-left: .55rem;
}

@media (max-width: 640px) {
  .frieze__corner { display: none; }
  .frieze { background-attachment: scroll; }
}

/* ====================================== */
/* runway · footer. mirrors top, inverted  */
/* ====================================== */

.runway {
  background: var(--ink);
  color: var(--paper);
  padding: 3.2rem var(--shore) 2rem;
  position: relative;
}

.runway::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent 0,
      rgba(255,255,255,.4) 50%,
      transparent 100%);
}

.runway__bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0 2.2rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 1.8rem;
}

.runway__glyph {
  display: inline-flex;
  padding: .25rem 1rem;
  transition: opacity var(--tween-fast);
}

.runway__glyph:hover { opacity: .75; }

.runway__glyph-img {
  height: 32px;
  width: auto;
  /* same image as top nav, repainted white via filter chain */
  filter: brightness(0) invert(1);
}

.runway__index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.85rem, 2.5vw, 1.8rem);
  font-family: var(--type-mono);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: lowercase;
  margin-bottom: 2.2rem;
}

.runway__index a {
  color: rgba(255,255,255,.74);
  position: relative;
  padding-bottom: 2px;
  transition: color var(--tween-fast);
}

.runway__index a:hover {
  color: var(--paper);
}

.runway__index a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--stamp);
  transition: right var(--tween-slow);
}

.runway__index a:hover::after { right: 0; }

.runway__fineprint {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
  color: rgba(255,255,255,.62);
  font-size: .85rem;
  line-height: 1.6;
}

.runway__age-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .55rem;
  border: 1.5px solid var(--stamp);
  color: var(--stamp);
  border-radius: 50%;
  font-family: var(--type-mono);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .04em;
  flex-shrink: 0;
}

.runway__contact {
  margin: 0 0 1.4rem;
  font-family: var(--type-mono);
  font-size: .8rem;
  letter-spacing: .06em;
}

.runway__contact a {
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 1px;
  transition: border-color var(--tween-fast);
}

.runway__contact a:hover { border-color: var(--stamp); }

.runway__copy {
  margin: 0;
  font-family: var(--type-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* ============================================== */
/* responsive tweaks                                */
/* ============================================== */

@media (max-width: 720px) {
  .hatch {
    grid-template-columns: 1fr auto 1fr;
    padding: .85rem var(--shore);
  }
  .hatch__glyph { padding: .15rem .5rem; }
  .hatch__glyph-img { height: 28px; }

  .frieze__shout { font-size: clamp(2.1rem, 9vw, 3.2rem); }
  .frieze__pretext { font-size: .72rem; }
  .frieze__strip { font-size: .72rem; }

  .runway__glyph-img { height: 26px; }
}

/* ============================================================ */
/* shared eyebrow — the section tag that runs above each headline */
/* ============================================================ */

.eyebrow {
  display: inline-block;
  font-family: var(--type-mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.1rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}

.eyebrow--ink {
  color: var(--hue-deep);
  border-bottom-color: var(--hue-pale);
}

.eyebrow--invert {
  color: var(--hue-pale);
  border-bottom-color: rgba(255,255,255,.18);
}

/* ============================================ */
/* dispatch — welcome. two-column, asymmetric    */
/* ============================================ */

.dispatch {
  background: var(--paper);
  padding: clamp(3.5rem, 7vw, 6rem) var(--shore);
  border-bottom: 1px solid var(--line-thin);
}

.dispatch__inner {
  max-width: 78rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.dispatch__col--left {
  position: sticky;
  top: 5rem;
}

.dispatch__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
}

.dispatch__h-mark {
  font-style: italic;
  font-weight: 600;
  color: var(--hue-deep);
  position: relative;
}

.dispatch__h-mark::before {
  content: '';
  position: absolute;
  left: -.2rem; right: -.2rem;
  bottom: .14em;
  height: .12em;
  background: var(--stamp);
  opacity: .5;
  z-index: -1;
}

.dispatch__col--right p {
  font-size: clamp(1rem, 1vw + .5rem, 1.18rem);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
  max-width: 32rem;
}

.dispatch__stub {
  margin: 2.4rem 0 0;
  max-width: 18rem;
  transform: rotate(-1.4deg);
}

.dispatch__stub img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 18px 40px -16px rgba(11,26,58,.25);
}

.dispatch__stub figcaption {
  font-family: var(--type-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: .6rem;
  text-align: right;
}

@media (max-width: 820px) {
  .dispatch__inner { grid-template-columns: 1fr; gap: 2rem; }
  .dispatch__col--left { position: static; }
  .dispatch__stub { margin-left: auto; margin-right: 0; }
}

/* ====================================== */
/* ritual — three steps, on a paper grid   */
/* ====================================== */

.ritual {
  background: var(--paper-warm);
  padding: clamp(3.5rem, 7vw, 6rem) var(--shore);
  position: relative;
  overflow: hidden;
}

/* faint paper grid behind the steps */
.ritual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(11,26,58,.05) 95%);
  background-size: 100% 32px;
  pointer-events: none;
  opacity: .6;
}

.ritual__head {
  max-width: 60rem;
  margin: 0 auto 3rem;
  position: relative;
  z-index: 1;
}

.ritual__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ink);
}

.ritual__steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 78rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  position: relative;
  z-index: 1;
}

.ritual__step {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: 2px;
  position: relative;
  transition: transform var(--tween-fast), box-shadow var(--tween-fast);
}

.ritual__step:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -18px rgba(11,26,58,.25);
}

.ritual__num {
  display: inline-block;
  font-family: var(--type-display);
  font-style: italic;
  font-weight: 600;
  font-size: 2.6rem;
  color: var(--stamp);
  line-height: 1;
  margin-bottom: .8rem;
}

.ritual__step h3 {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  margin: 0 0 .6rem;
  color: var(--ink);
}

.ritual__step p {
  margin: 0;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .ritual__steps { grid-template-columns: 1fr; }
}

/* ============================================== */
/* tableau — playable demo. dark slab, light type. */
/* ============================================== */

.tableau {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(3.5rem, 7vw, 6rem) var(--shore);
  position: relative;
}

.tableau::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(31,95,201,.25) 0%, transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(184,138,58,.12) 0%, transparent 50%);
  pointer-events: none;
}

.tableau__inner {
  max-width: 64rem;
  margin: 0 auto;
  position: relative;
}

.tableau__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  letter-spacing: -.02em;
  margin: 0 0 1.1rem;
  color: var(--paper);
}

.tableau__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  max-width: 42rem;
  margin: 0 0 2.6rem;
}

.tableau__board {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  position: relative;
}

.tableau__board::before {
  content: '';
  position: absolute;
  top: 0; left: 1.4rem; right: 1.4rem;
  height: 2px;
  background: var(--stamp);
}

.tableau__targets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .55rem;
  margin-bottom: 1.6rem;
}

.tableau__target {
  font-family: var(--type-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  padding: .85rem .9rem;
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--tween-fast), border-color var(--tween-fast), transform 200ms;
}

.tableau__target:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--paper);
}

.tableau__target.is-stamped {
  animation: target-stamp 520ms cubic-bezier(.2,.85,.25,1);
  background: var(--stamp);
  border-color: var(--stamp);
  color: var(--paper);
}

@keyframes target-stamp {
  0% { transform: scale(1); }
  35% { transform: scale(.96) rotate(-1.5deg); }
  70% { transform: scale(1.03) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}

.tableau__readout {
  background: rgba(0,0,0,.18);
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 2px;
  padding: 1rem 1.1rem;
  min-height: 7rem;
  margin-bottom: 1.2rem;
  font-family: var(--type-mono);
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.tableau__readout-line {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  color: rgba(255,255,255,.84);
  animation: readout-in .42s cubic-bezier(.2,.85,.25,1) both;
}

@keyframes readout-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

.tableau__readout-line--placeholder {
  color: rgba(255,255,255,.42);
  font-style: italic;
}

.tableau__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  flex-shrink: 0;
}

.tableau__dot--lit {
  background: var(--stamp);
  box-shadow: 0 0 0 3px rgba(184,138,58,.18);
}

.tableau__city {
  font-weight: 500;
  color: var(--paper);
  letter-spacing: .04em;
}

.tableau__sep { color: rgba(255,255,255,.25); }

.tableau__pts {
  color: var(--stamp);
  font-weight: 500;
}

.tableau__quip {
  font-style: italic;
  color: rgba(255,255,255,.6);
  font-size: .78rem;
}

.tableau__small {
  margin: 0;
  font-family: var(--type-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  line-height: 1.55;
}

/* ====================================== */
/* caveat — why korb. asymmetric tile grid */
/* ====================================== */

.caveat {
  background: var(--paper);
  padding: clamp(3.5rem, 7vw, 6rem) var(--shore);
  border-bottom: 1px solid var(--line-thin);
}

.caveat__head {
  max-width: 56rem;
  margin: 0 auto 3rem;
}

.caveat__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 1.1rem;
  color: var(--ink);
}

.caveat__h em {
  font-style: italic;
  font-weight: 600;
  color: var(--hue-deep);
}

.caveat__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 42rem;
  margin: 0;
}

.caveat__grid {
  max-width: 78rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(13rem, auto);
  gap: 1rem;
}

.caveat__tile {
  background: var(--paper-cool);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background var(--tween-fast), transform var(--tween-fast);
  overflow: hidden;
}

.caveat__tile:hover {
  background: var(--paper);
  transform: translateY(-2px);
}

.caveat__tile--wide { grid-column: span 2; }
.caveat__tile--tall { grid-column: span 2; grid-row: span 2; }

.caveat__no {
  font-family: var(--type-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: .8rem;
}

.caveat__tile h3 {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 1.6vw + .4rem, 1.7rem);
  letter-spacing: -.01em;
  margin: 0 0 .55rem;
  color: var(--ink);
}

.caveat__tile p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.caveat__deco {
  position: absolute;
  right: -1.5rem;
  bottom: -1.5rem;
  width: 11rem;
  opacity: .12;
  pointer-events: none;
}

@media (max-width: 880px) {
  .caveat__grid { grid-template-columns: repeat(2, 1fr); }
  .caveat__tile--wide { grid-column: span 2; }
  .caveat__tile--tall { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 540px) {
  .caveat__grid { grid-template-columns: 1fr; }
  .caveat__tile--wide,
  .caveat__tile--tall { grid-column: span 1; }
}

/* ============================================ */
/* lexicon — dictionary entry treatment          */
/* ============================================ */

.lexicon {
  background: var(--paper-warm);
  padding: clamp(3.5rem, 7vw, 6rem) var(--shore);
}

.lexicon__inner {
  max-width: 56rem;
  margin: 0 auto;
}

.lexicon__entry {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 6px solid var(--ink);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  border-radius: 2px;
  box-shadow: 0 24px 50px -28px rgba(11,26,58,.2);
}

.lexicon__entry-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  margin-bottom: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .85rem;
}

.lexicon__word {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  letter-spacing: -.015em;
  margin: 0;
  color: var(--ink);
}

.lexicon__pron {
  font-family: var(--type-mono);
  font-size: .92rem;
  color: var(--ink-mute);
}

.lexicon__pos {
  font-family: var(--type-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-left: auto;
  border: 1px solid var(--stamp-dim);
  padding: .25rem .55rem;
  border-radius: 2px;
}

.lexicon__defs {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  counter-reset: defcount;
}

.lexicon__defs li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: .4rem;
  align-items: baseline;
}

.lexicon__num {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--hue-deep);
}

.lexicon__defs p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.lexicon__defs em {
  font-style: italic;
  color: var(--ink);
}

.lexicon__source {
  margin: 0;
  text-align: right;
  font-family: var(--type-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
}

@media (max-width: 540px) {
  .lexicon__pos { margin-left: 0; }
  .lexicon__defs li { grid-template-columns: 1.8rem 1fr; }
}

/* ============================================ */
/* crew — dev duo, two cards side by side        */
/* ============================================ */

.crew {
  background: var(--paper);
  padding: clamp(3.5rem, 7vw, 6rem) var(--shore);
}

.crew__head {
  max-width: 56rem;
  margin: 0 auto 3rem;
}

.crew__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 1.1rem;
  color: var(--ink);
}

.crew__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0;
}

.crew__pair {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
}

.crew__card {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: transform var(--tween-fast), box-shadow var(--tween-fast);
}

.crew__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px -22px rgba(11,26,58,.25);
}

.crew__card:nth-child(odd)  { transform: translateY(.6rem); }
.crew__card:nth-child(even) { transform: translateY(-.6rem); }
.crew__card:nth-child(odd):hover  { transform: translateY(calc(.6rem - 3px)); }
.crew__card:nth-child(even):hover { transform: translateY(calc(-.6rem - 3px)); }

.crew__portrait {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--paper-cool);
  overflow: hidden;
}

.crew__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(.92);
}

.crew__corner {
  position: absolute;
  top: .8rem;
  right: .9rem;
  font-family: var(--type-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--paper);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  background: rgba(11,26,58,.5);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crew__card figcaption {
  padding: 1.4rem 1.4rem 1.6rem;
}

.crew__name {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  margin: 0 0 .15rem;
  color: var(--ink);
}

.crew__role {
  font-family: var(--type-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--stamp);
  margin: 0 0 .9rem;
}

.crew__bio {
  margin: 0;
  font-size: .94rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .crew__pair { grid-template-columns: 1fr; }
  .crew__card:nth-child(odd),
  .crew__card:nth-child(even) { transform: none; }
}

/* ============================== */
/* ledger — faq with native details */
/* ============================== */

.ledger {
  background: var(--paper-cool);
  padding: clamp(3.5rem, 7vw, 6rem) var(--shore);
}

.ledger__inner {
  max-width: 60rem;
  margin: 0 auto;
}

.ledger__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -.02em;
  margin: 0 0 2.4rem;
  color: var(--ink);
}

.ledger__list {
  display: grid;
  gap: .6rem;
}

.ledger__row {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color var(--tween-fast);
}

.ledger__row[open] {
  border-color: var(--ink);
}

.ledger__row summary {
  list-style: none;
  cursor: pointer;
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--type-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  transition: color var(--tween-fast);
}

.ledger__row summary::-webkit-details-marker { display: none; }

.ledger__row summary:hover { color: var(--hue-deep); }

.ledger__q { flex: 1; }

.ledger__sign {
  font-family: var(--type-mono);
  font-size: 1.1rem;
  color: var(--stamp);
  flex-shrink: 0;
  transition: transform var(--tween-fast);
}

.ledger__row[open] .ledger__sign { transform: rotate(45deg); }

.ledger__a {
  padding: 0 1.4rem 1.4rem;
  border-top: 1px dashed var(--line);
  margin-top: 0;
  padding-top: 1rem;
}

.ledger__a p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ================================================== */
/* anthem — closing piece. dark, atmospheric, longer.  */
/* ================================================== */

.anthem {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(4rem, 8vw, 7rem) var(--shore);
  overflow: hidden;
  isolation: isolate;
}

.anthem__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(11,26,58,.7) 0%, rgba(11,26,58,.94) 100%),
    url('../res/border-strip.webp');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  opacity: .92;
}

.anthem__inner {
  position: relative;
  z-index: 1;
  max-width: 50rem;
  margin: 0 auto;
}

.anthem__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 2rem;
  color: var(--paper);
}

.anthem__body p {
  font-size: clamp(1.05rem, 1vw + .55rem, 1.22rem);
  line-height: 1.75;
  color: rgba(255,255,255,.85);
  margin: 0 0 1.5rem;
  max-width: 44rem;
}

.anthem__sign {
  font-family: var(--type-mono);
  font-style: normal !important;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stamp) !important;
  margin-top: 2rem !important;
}

/* ====================================================== */
/* dossier-page — shared layout for legal / policy pages   */
/* narrow column, paper-warm bg, ledger-style sub-heads    */
/* ====================================================== */

.dossier-page {
  background: var(--paper-warm);
  padding: clamp(3rem, 6vw, 5.5rem) var(--shore) clamp(4rem, 8vw, 6rem);
  position: relative;
}

/* faint ruled-paper sense, but only in the gutter */
.dossier-page::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(46rem, 100% - var(--shore) * 2);
  background-image:
    linear-gradient(transparent 95%, rgba(11,26,58,.04) 95%);
  background-size: 100% 32px;
  pointer-events: none;
  opacity: .8;
}

.dossier-page__inner {
  position: relative;
  max-width: 42rem;
  margin: 0 auto;
}

.dossier-page__head {
  margin-bottom: 2.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.dossier-page__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
  color: var(--ink);
}

.dossier-page__kicker {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
  max-width: 36rem;
  font-style: italic;
}

.dossier-page__stamp {
  display: inline-block;
  margin: 0;
  padding: .35rem .7rem;
  font-family: var(--type-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 1px dashed var(--stamp-dim);
  border-radius: 2px;
}

.dossier-page__body {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.6rem, 3.5vw, 2.8rem);
  box-shadow: 0 24px 50px -32px rgba(11,26,58,.18);
}

.dossier-page__body p,
.dossier-page__body li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.dossier-page__body p:last-child { margin-bottom: 0; }

.dossier-page__body a {
  color: var(--hue-deep);
  border-bottom: 1px solid var(--hue-pale);
  padding-bottom: 1px;
  transition: border-color var(--tween-fast), color var(--tween-fast);
}

.dossier-page__body a:hover {
  color: var(--ink);
  border-bottom-color: var(--stamp);
}

.dossier-page__body code {
  font-family: var(--type-mono);
  font-size: .86em;
  background: var(--paper-cool);
  padding: .12em .4em;
  border-radius: 2px;
  color: var(--ink);
  border: 1px solid var(--line);
}

/* lede paragraph with drop-cap */
.dossier-page__lede {
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  color: var(--ink) !important;
  margin-bottom: 1.6rem !important;
}

.dossier-page__cap {
  float: left;
  font-family: var(--type-display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: .9;
  padding: .15rem .55rem .15rem 0;
  margin-right: .15rem;
  color: var(--hue-deep);
  font-feature-settings: "ss01" on;
}

/* sub-heads ride a ledger-rule */
.dossier-page__sub {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 1.8rem 0 .7rem;
  padding-bottom: .35rem;
  border-bottom: 1px dashed var(--line);
  position: relative;
}

.dossier-page__sub::before {
  content: '§';
  font-family: var(--type-mono);
  font-weight: 400;
  color: var(--stamp);
  margin-right: .55rem;
  font-size: .9em;
  opacity: .7;
}

.dossier-page__sub:first-of-type { margin-top: 1.6rem; }

@media (max-width: 540px) {
  .dossier-page__cap { font-size: 2.6rem; padding-right: .4rem; }
  .dossier-page__h { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ====================================================== */
/* advisory · red 18+ thread strip immediately after hero  */
/* ====================================================== */

.advisory {
  background: #fff;
  border-bottom: 1px solid var(--line-thin);
  position: relative;
}

/* the red thread — wider than the band itself, otherwise reads as a flat banner. */
.advisory::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background:
    repeating-linear-gradient(
      90deg,
      #c8202c 0 18px,
      #fff 18px 22px
    );
}

.advisory__inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 1.4rem var(--shore);
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.5vw, 1.6rem);
  flex-wrap: wrap;
}

.advisory__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 .55rem;
  border: 1.5px solid #c8202c;
  color: #c8202c;
  border-radius: 50%;
  font-family: var(--type-mono);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .04em;
  background: #fff;
}

.advisory__line {
  flex: 1 1 24rem;
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.advisory__door {
  flex-shrink: 0;
  font-family: var(--type-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c8202c;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--tween-fast);
  white-space: nowrap;
}

.advisory__door:hover { border-bottom-color: #c8202c; }

@media (max-width: 640px) {
  .advisory__line { font-size: .86rem; flex-basis: 100%; order: 3; }
  .advisory__door { font-size: .72rem; }
}

/* ============================================ */
/* runway__playwise · footer "play wise" block   */
/* ============================================ */

.runway__playwise {
  max-width: 52rem;
  margin: 0 auto 2rem;
  text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 2px solid var(--stamp);
  padding: 1.5rem 1.6rem 1.3rem;
  border-radius: 2px;
}

.runway__playwise-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .9rem;
}

.runway__playwise-title {
  margin: 0;
  font-family: var(--type-mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
}

.runway__playwise-body {
  margin: 0 0 1.1rem;
  font-size: .88rem;
  line-height: 1.65;
  color: rgba(255,255,255,.74);
}

.runway__playwise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}

.runway__playwise-list li {
  font-family: var(--type-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.86);
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.runway__playwise-tick {
  color: var(--stamp);
  font-size: 1.1rem;
  line-height: 1;
}

/* ================================================== */
/* runway__stamps · regulator logos. each one a stamp  */
/* ================================================== */

.runway__stamps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin: 0 auto 2rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  max-width: 52rem;
}

.runway__stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 80px;        /* fallback so logos w/o intrinsic dims still hold space */
  padding: 0 .25rem;
  opacity: .68;
  transition: opacity var(--tween-fast), transform var(--tween-fast);
}

.runway__stamp:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.runway__stamp img {
  max-height: 100%;
  /* some of the regulator SVGs ship without width/height attrs and resolve
     to 0px under width:auto. clamp it so the logo always has a footprint. */
  width: auto;
  max-width: 160px;
  min-width: 60px;
  height: auto;
  /* paint everything to a uniform off-white so logos read as a stamp set */
  filter: brightness(0) invert(1) opacity(.92);
}

/* ============================================== */
/* gatekeeper · age verification door (yes only)   */
/* ============================================== */

html.is-locked,
body.is-locked {
  overflow: hidden;
  height: 100%;
}

.gatekeeper {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--shore);
  background: rgba(8, 16, 36, .82);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  animation: gatekeeper-fade .32s ease-out both;
}

/* the [hidden] attribute is how the JS opens/closes the door — without
   this, our display:flex above wins and the panel never goes away. */
.gatekeeper[hidden] { display: none; }

@keyframes gatekeeper-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gatekeeper__pane {
  background: var(--paper);
  color: var(--ink);
  max-width: 30rem;
  width: 100%;
  padding: 2.4rem clamp(1.4rem, 4vw, 2.4rem) 2rem;
  border-radius: 4px;
  text-align: center;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  animation: gatekeeper-rise .42s cubic-bezier(.2,.85,.25,1) both;
  animation-delay: .08s;
}

@keyframes gatekeeper-rise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.gatekeeper__pane::before {
  content: '';
  position: absolute;
  top: 0; left: 1.4rem; right: 1.4rem;
  height: 3px;
  background: var(--stamp);
}

.gatekeeper__seal {
  width: 4.6rem;
  height: 4.6rem;
  margin: 0 auto 1.2rem;
  border: 2px solid var(--stamp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--type-mono);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--stamp);
  position: relative;
}

.gatekeeper__seal::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--stamp-dim);
  border-radius: 50%;
}

.gatekeeper__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 1.85rem);
  letter-spacing: -.01em;
  margin: 0 0 .9rem;
  color: var(--ink);
}

.gatekeeper__copy {
  margin: 0 0 1.7rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.gatekeeper__yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 1.4rem;
  font-family: var(--type-mono);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--tween-fast), color var(--tween-fast), transform var(--tween-fast);
}

.gatekeeper__yes:hover {
  background: var(--stamp);
  border-color: var(--stamp);
  transform: translateY(-1px);
}

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

.gatekeeper__sub {
  margin: 1.1rem 0 0;
  font-family: var(--type-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ============================== */
/* customs · cookies notice strip  */
/* ============================== */

.customs {
  position: fixed;
  z-index: 80;
  left: clamp(.6rem, 2vw, 1.6rem);
  right: clamp(.6rem, 2vw, 1.6rem);
  bottom: clamp(.6rem, 2vw, 1.4rem);
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 22px 60px -20px rgba(0,0,0,.55);
  animation: customs-slide .42s cubic-bezier(.2,.85,.25,1) both;
}

.customs[hidden] { display: none; }

@keyframes customs-slide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.customs::before {
  content: '';
  position: absolute;
  top: 0; left: 1rem; right: 1rem;
  height: 2px;
  background: var(--stamp);
}

.customs__inner {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.6rem);
  padding: 1.05rem clamp(1rem, 2.5vw, 1.6rem);
  flex-wrap: wrap;
}

.customs__line {
  flex: 1 1 22rem;
  margin: 0;
  font-size: .85rem;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
}

.customs__line a {
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 1px;
  transition: border-color var(--tween-fast);
}

.customs__line a:hover { border-bottom-color: var(--stamp); }

.customs__actions {
  display: flex;
  gap: .55rem;
  flex-shrink: 0;
}

.customs__btn {
  font-family: var(--type-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .7rem 1.1rem;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid;
  background: transparent;
  transition: background var(--tween-fast), color var(--tween-fast), border-color var(--tween-fast);
}

.customs__btn--no {
  color: rgba(255,255,255,.66);
  border-color: rgba(255,255,255,.24);
}

.customs__btn--no:hover {
  color: var(--paper);
  border-color: rgba(255,255,255,.6);
}

.customs__btn--yes {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--paper);
}

.customs__btn--yes:hover {
  background: var(--stamp);
  border-color: var(--stamp);
  color: var(--paper);
}

@media (max-width: 600px) {
  .customs__actions { width: 100%; }
  .customs__btn { flex: 1; padding: .8rem .6rem; }
}

/* ====================================================== */
/* play-warn — red strip on the play page                  */
/* ====================================================== */

.play-warn {
  background: #c8202c;
  color: #fff;
  position: relative;
}

/* tiny tape pattern along the bottom edge so it doesn't read as a flat banner */
.play-warn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      #fff 0 14px,
      transparent 14px 22px
    );
  opacity: .5;
}

.play-warn__inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 1.1rem var(--shore) 1.3rem;
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.5vw, 1.4rem);
  flex-wrap: wrap;
}

.play-warn__mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 .55rem;
  border: 1.5px solid #fff;
  color: #fff;
  border-radius: 50%;
  font-family: var(--type-mono);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .04em;
  background: rgba(255,255,255,.08);
}

.play-warn__line {
  flex: 1 1 22rem;
  margin: 0;
  font-size: .94rem;
  line-height: 1.55;
  color: rgba(255,255,255,.94);
}

.play-warn__line strong {
  font-weight: 700;
  letter-spacing: .01em;
}

.play-warn__line a {
  color: #fff;
  font-family: var(--type-mono);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 1px;
  margin-left: .5rem;
  white-space: nowrap;
  transition: border-color var(--tween-fast);
}

.play-warn__line a:hover { border-bottom-color: #fff; }

/* ====================================================== */
/* boardroom — slot cabinet section                        */
/* ====================================================== */

.boardroom {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 6vw, 5rem) var(--shore) clamp(3rem, 6vw, 5rem);
  background-color: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.boardroom__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(11,26,58,.78) 0%, rgba(11,26,58,.92) 100%),
    url('../res/terminal-7.webp');
  background-size: cover, cover;
  background-position: center, center 28%;
  background-repeat: no-repeat, no-repeat;
  filter: blur(2px);
  transform: scale(1.04);
}

.boardroom__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(255,255,255,.05) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.05) 95%);
  background-size: 64px 64px, 64px 64px;
  opacity: .6;
}

.boardroom__inner {
  position: relative;
  z-index: 1;
  max-width: 68rem;
  margin: 0 auto;
}

.boardroom__head {
  text-align: center;
  margin-bottom: 2.4rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.boardroom__head .eyebrow {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

.boardroom__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}

.boardroom__h em {
  font-style: italic;
  font-weight: 600;
  color: var(--stamp);
}

.boardroom__lead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  margin: 0 auto;
}

.boardroom__lead em {
  font-family: var(--type-mono);
  font-style: normal;
  font-size: .82em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stamp);
  background: rgba(184,138,58,.12);
  padding: .08em .35em;
  border-radius: 2px;
}

/* ============================== */
/* cabinet · the slot housing      */
/* shadow values tuned by eye —    */
/* don't touch without checking on */
/* the dark and the white pages    */
/* ============================== */

.cabinet {
  background: linear-gradient(180deg, #0d2244 0%, #07142e 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}

.cabinet__rim {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1rem;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--type-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.cabinet__rim::before,
.cabinet__rim::after {
  content: '';
  flex: 1;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent 0,
      rgba(255,255,255,.18) 50%,
      transparent 100%);
  margin: 0 1rem;
}

.cabinet__board {
  position: relative;
  padding: clamp(1.2rem, 3vw, 2rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(31,95,201,.16) 0%, transparent 60%),
    rgba(0,0,0,.18);
}

.cabinet__lines {
  position: absolute;
  inset: clamp(1.2rem, 3vw, 2rem);
  pointer-events: none;
  z-index: 0;
}

.cabinet__line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent 0,
      rgba(184,138,58,.22) 8%,
      rgba(184,138,58,.4) 50%,
      rgba(184,138,58,.22) 92%,
      transparent 100%);
}

.cabinet__line--top { top: calc(16.66% - .5px); }
.cabinet__line--mid { top: calc(50% - .5px); }
.cabinet__line--bot { top: calc(83.33% - .5px); }

.cabinet__reels {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .55rem;
}

.reel {
  position: relative;
  aspect-ratio: 1 / 3;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.5) 0%,
      rgba(0,0,0,.15) 12%,
      rgba(0,0,0,.15) 88%,
      rgba(0,0,0,.5) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}

/* glassy gloss on top of each reel */
.reel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.45) 0%,
      transparent 14%,
      transparent 86%,
      rgba(0,0,0,.45) 100%);
}

.reel__strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.reel__strip.is-landed {
  animation: reel-thud 260ms cubic-bezier(.2,.85,.2,1);
}

@keyframes reel-thud {
  /* 4px is the smallest bounce that still reads as weight. less = sterile. */
  0% { transform: translateY(var(--final, 0)); }
  40% { transform: translateY(calc(var(--final, 0) + 4px)); }
  100% { transform: translateY(var(--final, 0)); }
}

.pip {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.02);
  border-bottom: 1px dashed rgba(255,255,255,.06);
  position: relative;
  transition: background var(--tween-fast);
}

.pip img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  pointer-events: none;
  user-select: none;
}

.pip.is-win {
  animation: pip-win 1400ms ease-in-out infinite;
}

@keyframes pip-win {
  0%, 100% {
    background: rgba(184,138,58,.18);
    box-shadow: inset 0 0 0 2px rgba(184,138,58,.6);
  }
  50% {
    background: rgba(184,138,58,.35);
    box-shadow: inset 0 0 0 2px rgba(184,138,58,1);
  }
}

/* announcement layer — sits over the cabinet board */
.cabinet__shout {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.94);
  z-index: 4;
  background: rgba(11,26,58,.92);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  padding: 1rem 1.4rem;
  text-align: center;
  font-family: var(--type-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms, transform 220ms, visibility 220ms;
  max-width: 80%;
  box-shadow: 0 14px 40px -10px rgba(0,0,0,.6);
}

.cabinet__shout.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.cabinet__shout--win {
  background: linear-gradient(180deg, #2c5da8 0%, #1c3f7a 100%);
  border-color: var(--stamp);
}

.cabinet__shout--win::before {
  content: '';
  position: absolute;
  top: -2px; left: 1rem; right: 1rem;
  height: 2px;
  background: var(--stamp);
}

.cabinet__shout--lose {
  background: rgba(11,26,58,.96);
  color: rgba(255,255,255,.7);
}

.cabinet__shout-head {
  display: block;
  font-family: var(--type-display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.005em;
  text-transform: none;
  margin-bottom: .4rem;
  color: var(--paper);
}

.cabinet__shout--win .cabinet__shout-head {
  color: var(--stamp);
}

.cabinet__shout-row {
  display: block;
  font-size: .72rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.85);
  margin-top: .15rem;
}

.cabinet__shout-row em {
  font-style: italic;
  color: var(--stamp);
  text-transform: lowercase;
}

.cabinet__shout-sub {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  font-size: .8rem;
  margin-top: .3rem;
  color: rgba(255,255,255,.6);
}

/* ============================== */
/* control panel below the board   */
/* ============================== */

.cabinet__panel {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.2rem);
  padding: 1.1rem clamp(1.2rem, 3vw, 2rem);
  background: rgba(0,0,0,.3);
  border-top: 1px solid rgba(255,255,255,.08);
}

.cabinet__meter {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.cabinet__meter-label {
  font-family: var(--type-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.cabinet__meter-val {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--stamp);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.cabinet__meter-val--small {
  font-size: 1rem;
  color: var(--paper);
}

.cabinet__spin {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .04em;
  padding: .9rem 1.6rem;
  background: var(--stamp);
  color: var(--paper);
  border: 1px solid var(--stamp);
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  min-width: 7rem;
  transition: background var(--tween-fast), transform var(--tween-fast), box-shadow var(--tween-fast);
  box-shadow: 0 6px 14px -6px rgba(184,138,58,.5);
}

.cabinet__spin:hover:not(:disabled) {
  background: #d09d4a;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(184,138,58,.6);
}

.cabinet__spin:active:not(:disabled) {
  transform: translateY(0);
}

.cabinet__spin:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.cabinet__spin.is-spinning .cabinet__spin-label::after {
  content: '...';
  animation: spin-ellipsis 800ms steps(4) infinite;
}

@keyframes spin-ellipsis {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

.cabinet__spin-label {
  font-style: italic;
  text-transform: lowercase;
}

.cabinet__spin-cost {
  font-family: var(--type-mono);
  font-style: normal;
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}

.cabinet__reset {
  font-family: var(--type-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .8rem 1.1rem;
  background: transparent;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 2px;
  cursor: pointer;
  transition: color var(--tween-fast), border-color var(--tween-fast);
}

.cabinet__reset:hover {
  color: var(--paper);
  border-color: var(--paper);
}

@media (max-width: 720px) {
  .cabinet__panel {
    grid-template-columns: 1fr 1fr;
    gap: .9rem 1.2rem;
  }
  .cabinet__spin { grid-column: span 2; }
  .cabinet__reset { grid-column: span 2; }
  .reel { aspect-ratio: 1 / 2.6; }
  .pip img { width: 64%; height: 64%; }
}

/* ============================== */
/* paytable                        */
/* ============================== */

.paytable {
  margin-top: 2.6rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 3px;
  padding: 1.4rem clamp(1.2rem, 3vw, 2rem) 1.6rem;
}

.paytable__h {
  font-family: var(--type-mono);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin: 0 0 1.1rem;
  border-bottom: 1px dashed rgba(255,255,255,.12);
  padding-bottom: .6rem;
}

.paytable__grid {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--type-mono);
  font-size: .82rem;
}

.paytable__grid thead th {
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  padding: .35rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-align: left;
}

.paytable__grid tbody td {
  padding: .55rem .75rem;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
}

.paytable__grid tbody tr:last-child td {
  border-bottom: none;
}

.paytable__grid tbody td:first-child {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.paytable__grid tbody td em {
  font-style: italic;
  color: var(--paper);
}

.paytable__pip {
  display: inline-flex;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 2px;
  background: rgba(255,255,255,.06);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paytable__pip img {
  width: 75%;
  height: 75%;
  object-fit: contain;
}

.paytable__small {
  margin: 1rem 0 0;
  font-family: var(--type-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
}

@media (max-width: 540px) {
  .paytable__grid { font-size: .74rem; }
  .paytable__grid thead th:nth-child(3),
  .paytable__grid tbody td:nth-child(3) { display: none; }
}

/* ============================== */
/* afterword reminder              */
/* ============================== */

.afterword {
  background: var(--paper);
  padding: clamp(2.2rem, 5vw, 3.4rem) var(--shore);
  border-bottom: 1px solid var(--line-thin);
}

.afterword__inner {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.afterword__inner p {
  margin: 0;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--ink-mute);
  font-style: italic;
}

/* ====================================================== */
/* about-korb page                                         */
/* ====================================================== */

.about {
  background: var(--paper);
  padding: clamp(3rem, 6vw, 5.5rem) var(--shore) clamp(4rem, 8vw, 6rem);
}

.about__inner {
  max-width: 44rem;
  margin: 0 auto;
}

.about__head {
  margin-bottom: 2.4rem;
}

.about__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
}

.about__h em {
  font-style: italic;
  font-weight: 600;
  color: var(--hue-deep);
}

.about__figure {
  margin: 0 0 2.4rem;
  position: relative;
  transform: rotate(-.6deg);
}

.about__figure img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  border: 1px solid var(--line);
  box-shadow: 0 26px 50px -28px rgba(11,26,58,.3);
  filter: contrast(1.04) saturate(.95);
}

.about__figure figcaption {
  font-family: var(--type-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: .8rem;
  text-align: right;
}

.about__section {
  margin-bottom: 2.4rem;
}

.about__sub {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 1rem;
  padding-bottom: .35rem;
  border-bottom: 1px dashed var(--line);
  position: relative;
  display: inline-block;
}

.about__sub::before {
  content: '§';
  font-family: var(--type-mono);
  font-weight: 400;
  color: var(--stamp);
  margin-right: .55rem;
  font-size: .8em;
  opacity: .8;
}

.about__section p {
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

.about__section p:last-child { margin-bottom: 0; }

.about__sign {
  margin: 2.6rem 0 0;
  text-align: right;
  font-family: var(--type-mono);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stamp);
}

/* ====================================================== */
/* pass — boarding-pass card linking to the game           */
/* ====================================================== */

.pass {
  background: var(--paper-warm);
  padding: clamp(3rem, 6vw, 5rem) var(--shore);
  border-bottom: 1px solid var(--line-thin);
}

.pass__inner {
  max-width: 64rem;
  margin: 0 auto;
}

.pass__h {
  font-family: var(--type-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 2rem;
  max-width: 36rem;
}

.pass__h em {
  font-style: italic;
  font-weight: 600;
  color: var(--hue-deep);
}

.pass__card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.4fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 28px 60px -28px rgba(11,26,58,.28);
  position: relative;
}

.pass__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--stamp);
}

/* art column */
.pass__art {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper-cool);
  overflow: hidden;
}

.pass__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) saturate(.95);
}

.pass__corner-tag {
  position: absolute;
  bottom: .9rem;
  left: .9rem;
  font-family: var(--type-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(11,26,58,.78);
  padding: .35rem .6rem;
  border-radius: 2px;
  backdrop-filter: blur(2px);
}

/* the perforated stub between art and body */
.pass__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 4.4rem;
  background: var(--paper-warm);
  /* the dashed vertical lines = perforations */
  border-left: 2px dashed var(--line);
  border-right: 2px dashed var(--line);
  text-align: center;
  position: relative;
  padding: 1rem .4rem;
}

/* the cut-corner notches at top and bottom of the stub */
.pass__stub::before,
.pass__stub::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--paper-warm);
  border-radius: 50%;
  transform: translateX(-50%);
}

.pass__stub::before { top: -7px; }
.pass__stub::after  { bottom: -7px; }

.pass__stub-label {
  font-family: var(--type-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.pass__stub-no {
  font-family: var(--type-display);
  font-weight: 800;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--hue-deep);
  line-height: 1;
}

.pass__stub-mark {
  font-family: var(--type-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stamp);
  border: 1px solid var(--stamp-dim);
  padding: .12rem .4rem;
  border-radius: 2px;
  margin-top: .2rem;
}

/* body column */
.pass__body {
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pass__caption {
  font-family: var(--type-mono);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 .8rem;
}

.pass__lede {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}

.pass__pills {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.pass__pills li {
  font-family: var(--type-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-cool);
  border: 1px solid var(--line);
  padding: .35rem .65rem;
  border-radius: 999px;
}

.pass__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.pass__cta {
  display: inline-flex;
  align-items: center;
  padding: .85rem 1.3rem;
  font-family: var(--type-mono);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background var(--tween-fast), color var(--tween-fast), transform var(--tween-fast);
}

.pass__cta--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.pass__cta--primary:hover {
  background: var(--stamp);
  border-color: var(--stamp);
  transform: translateY(-1px);
}

.pass__cta--ghost {
  color: var(--ink-soft);
  border-color: var(--line);
}

.pass__cta--ghost:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* mobile: stack image, stub becomes horizontal divider, body below */
@media (max-width: 720px) {
  .pass__card {
    grid-template-columns: 1fr;
  }
  .pass__art {
    aspect-ratio: 16 / 10;
  }
  .pass__stub {
    width: auto;
    flex-direction: row;
    border-left: none;
    border-right: none;
    border-top: 2px dashed var(--line);
    border-bottom: 2px dashed var(--line);
    padding: .8rem 1rem;
    gap: .8rem;
  }
  .pass__stub::before,
  .pass__stub::after {
    top: 50%;
    transform: translateY(-50%);
    left: auto;
  }
  .pass__stub::before { left: -7px; }
  .pass__stub::after  { right: -7px; left: auto; }
  .pass__stub-no { font-size: 1.2rem; }
  .pass__stub-mark { margin-top: 0; }
}