@import url('../fonts/fonts.css');

/* ============================================================
   Togos — design tokens

   The room is loud and illustrated; the maths is clean and exact.
   Indigo ground, one acid accent for anything you press, gold kept
   for money and wins only. Corners are near-square and shadows are
   hard offsets with no blur — the drop is the signature.
   ============================================================ */
:root {
  /* A soft lacquer — the red is muted and warm rather than a hard crimson, so the
     gold, the artwork and the type all sit on it without fighting. It stays on the
     red side of the hue wheel rather than drifting to brown. Everything you
     press is white with black on it, the only bright surface on the page. */
  --ink:        #571825;   /* the ground */
  --ink-raise:  #68202D;   /* panels, cards, rails */
  --ink-lift:   #7D2A38;   /* the step above a panel */
  --ink-sink:   #300A13;   /* wells, and the colour the drop shadow is cast in */
  --felt:       #68202D;   /* game stages sit on the panel tone */
  --felt-deep:  #571825;

  --accent:       #FFFFFF;   /* every primary action, and nothing else */
  --accent-press: #DED7D8;
  --on-accent:    #16060A;

  --gold:       #FFC24D;   /* money, multipliers, wins */
  --gold-deep:  #C98A12;
  --bone:       #FCF3F2;
  /* A loss cannot be red on a red ground, so it desaturates instead: gold reads
     as money coming back, warm grey as nothing. */
  --red:        #C6A6AB;
  --live:       #FF6B84;

  --bone-70: #F0D2D7;
  --bone-65: #E6C2C8;
  --bone-45: #C89AA3;
  --bone-35: #A87680;

  --line:    #93414E;
  --surface: var(--ink-raise);
  --bar-h:   var(--bar, 62px);

  --gold-40: rgba(255, 194, 77, .40);
  --gold-18: rgba(255, 194, 77, .18);
  --gold-08: rgba(255, 194, 77, .08);
  --accent-40: rgba(255, 255, 255, .40);
  --accent-18: rgba(255, 255, 255, .18);
  --accent-08: rgba(255, 255, 255, .09);

  /* Archivo carries a width axis the display type leans on; drop the two woff2
     files into assets/fonts and fonts.css picks them up. Until then both fall
     back to the stacks below and the layout is unaffected. */
  --serif: 'Archivo', 'Jost', system-ui, sans-serif;
  --sans:  'Jost', 'Futura', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --hair: 1px solid var(--line);
  --hair-strong: 1px solid var(--bone-35);

  --r:      4px;
  --r-sm:   4px;
  --r-md:   4px;
  --r-pill: 999px;
  --drop:   4px 4px 0 var(--ink-sink);
  --lift:   var(--drop);
  --glow:   0 0 24px rgba(255, 255, 255, .25);
  --glass:  none;

  /* Firefox paints a light scrollbar over dark panels otherwise. */
  scrollbar-color: var(--bone-35) transparent;
  scrollbar-width: thin;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 68ch;
  --shell: 1180px;

  --step: cubic-bezier(.22, .61, .36, 1);
  --swing: cubic-bezier(.16, 1, .3, 1);
}

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

/* .btn and .acts set display, which outranks the [hidden] UA rule. */
[hidden] { display: none !important; }
body:not(.is-shell) { visibility: hidden; animation: shellReveal 0s 4s forwards; }
@keyframes shellReveal { to { visibility: visible; } }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--gold); color: #fff; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: #fff;
  padding: .75rem 1.25rem;
  z-index: 100;
}
.skip:focus { left: 0; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================================================
   Type
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0;
}

.display {
  font-size: clamp(3.2rem, 1.6rem + 7vw, 7.5rem);
  font-weight: 800;
  line-height: .94;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.display em {
  font-style: normal;
  color: var(--gold);
}

.h2 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.4rem); }
.h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); }

.label {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.label--mute { color: var(--bone-45); }

.lede {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  line-height: 1.62;
  color: var(--bone-70);
  max-width: 46ch;
  font-weight: 300;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.num {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -.01em;
}

/* The design's two type roles, carried on every rebuilt page:
   .m for anything factual, .d for display. Without these the whole site
   falls back to the body face and the mono columns stop lining up. */
.m {
  font-family: var(--mono);
  font-variant-numeric: lining-nums tabular-nums;
}
.d {
  font-family: var(--serif);
  font-weight: 800;
}

/* Every number the player reads fast gets lining, tabular figures so columns
   line up and a changing digit does not shift the ones beside it. */
.num, .stake__val, .purse__amt, .chip, .spot, .bin,
.crash__past li, .roul__past li, .readout dd, .ticker .num {
  font-variant-numeric: lining-nums tabular-nums;
}

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

section { padding-block: clamp(4.5rem, 9vw, 9rem); }

/* Classical rule: hairline, centre lozenge */
.rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--gold);
  margin-block: 2.5rem;
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-40), transparent);
}
.rule span { font-size: .55rem; opacity: .8; }

.rule--left::before { display: none; }

/* Deco corner brackets */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--line);
  pointer-events: none;
}
.bracket::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bracket::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: var(--hair);
}
.nav__in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--gold);
  margin-right: auto;
}
.brand svg { width: 22px; height: 22px; }
.brand b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.32rem;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--bone);
}
.nav__links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-70);
  padding-block: .4rem;
  border-bottom: 1px solid transparent;
  transition: color .28s var(--step), border-color .28s var(--step);
}
.nav__links a:hover,
.nav__links a[aria-current='page'] {
  color: var(--bone);
  border-bottom-color: var(--gold);
}

.nav__toggle { display: none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --btn-fg: var(--bone);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .85rem 1.6rem;
  font-family: var(--serif);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: transparent;
  border: 2px solid var(--ink-sink);
  border-radius: var(--r);
  cursor: pointer;
  overflow: hidden;
  transition: color .3s var(--step), border-color .3s var(--step);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .38s var(--swing);
  z-index: -1;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover:not(:disabled) { color: var(--ink); border-color: var(--gold); }
.btn:hover:not(:disabled)::after { transform: scaleY(1); }
.btn:disabled {
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
  color: var(--bone-45);
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
}
.btn:disabled::after { display: none; }

.btn--solid {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  box-shadow: var(--drop);
}
.btn--solid::after { background: var(--accent-press); }
.btn--solid:hover:not(:disabled) { color: var(--on-accent); }
.btn--solid:active:not(:disabled) { box-shadow: none; translate: 4px 4px; }

.btn--quiet {
  border-color: transparent;
  color: var(--bone-70);
  padding-inline: 0;
}
.btn--quiet::after { display: none; }
.btn--quiet:hover { color: var(--accent); }

.btn--sm { padding: .6rem 1.1rem; font-size: .68rem; letter-spacing: .16em; }

/* ============================================================
   Hero
   ============================================================ */
/* The lobby's hero now lives in lobby.css, built to the design's measurements.
   Only the shared CTA row below is still used elsewhere (fair.html). */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.5rem;
}

.ticker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2.2rem;
  border-top: var(--hair);
}
.ticker div { text-align: center; }
.ticker .num { display: block; font-size: 2rem; color: var(--gold); }
.ticker .label { font-size: .64rem; }

/* ============================================================
   Game grid
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr));
  gap: 1px;
  background: var(--line);
  border: var(--hair);
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--ink);
  min-height: 190px;
  isolation: isolate;
  transition: background .4s var(--step);
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(120% 100% at 50% 100%, rgba(20, 64, 47, .85), transparent 70%);
  transition: opacity .45s var(--step);
}
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
.tile__ico {
  display: block;
  width: 34px;
  height: 34px;
  color: var(--gold);
  margin-bottom: .5rem;
  transition: transform .5s var(--swing);
}
.tile__ico svg { width: 100%; height: 100%; }
.tile:hover .tile__ico { transform: translateY(-3px); }
.tile h3 { font-size: 1.5rem; }
.tile p {
  font-size: .88rem;
  color: var(--bone-45);
  line-height: 1.55;
  margin: 0;
}
.tile__edge {
  margin-top: auto;
  padding-top: 1rem;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-45);
}
.tile__edge b { color: var(--gold); font-weight: 500; }

/* ============================================================
   Feature rows
   ============================================================ */
.split {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: center;
}

.notes {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: var(--hair);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.note { background: var(--ink); padding: clamp(1.6rem, 3vw, 2.3rem); }
.note h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.note p { font-size: .9rem; color: var(--bone-45); margin: 0; }
.note .label { display: block; margin-bottom: 1.1rem; }

.panel {
  border: var(--hair);
  background: linear-gradient(180deg, var(--ink-raise), var(--ink));
  padding: clamp(1.5rem, 3vw, 2.4rem);
}

code, .mono {
  font-family: var(--mono);
  font-size: .85em;
  color: var(--gold);
  word-break: break-all;
}

/* ============================================================
   Footer
   ============================================================ */
.foot {
  border-top: var(--hair);
  padding-block: 3.5rem 2.5rem;
  margin-top: 2rem;
}
.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
.foot__note {
  font-size: .78rem;
  color: var(--bone-45);
  line-height: 1.7;
  max-width: 52ch;
}
.foot__note strong { color: var(--bone-70); font-weight: 400; }
.foot__links { display: flex; flex-direction: column; gap: .5rem; }
.foot__links a {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-45);
  transition: color .3s var(--step);
}
.foot__links a:hover { color: var(--gold); }

.age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  font-size: .7rem;
  font-weight: 500;
  flex-shrink: 0;
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
/* Visible by default: an element that paints a background must never depend on
   JavaScript to become opaque. The observer only plays the entrance. */
.rise.in { animation: rise .8s var(--step) backwards; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
  .nav__links {
    position: fixed;
    inset: 68px 0 auto;
    flex-direction: column;
    gap: 0;
    background: var(--ink);
    border-bottom: var(--hair);
    padding: .5rem var(--gutter) 1.5rem;
    transform: translateY(-120%);
    transition: transform .4s var(--swing);
  }
  .nav__links a {
    display: block;
    padding: .9rem 0;
    font-size: .9rem;
    border-bottom: var(--hair);
  }
  .nav[data-open='true'] .nav__links { transform: none; }

  .nav__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    padding: 0 8px;
    background: none;
    border: 1px solid var(--line);
    cursor: pointer;
  }
  .nav__toggle i {
    display: block;
    height: 1px;
    background: var(--gold);
    transition: transform .35s var(--swing), opacity .2s;
  }
  .nav[data-open='true'] .nav__toggle i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav[data-open='true'] .nav__toggle i:nth-child(2) { opacity: 0; }
  .nav[data-open='true'] .nav__toggle i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .ticker { gap: 1.5rem 2.5rem; }
  .ticker .num { font-size: 1.6rem; }
  .foot__in { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Decoration stops. The games keep their motion, because in a casino the spin,
     the deal and the falling ball ARE the thing being played — removing them
     removes the game, not the distraction. Durations are shortened in script. */
  .hero__rose,
  .card__live i,
  .pick__dot,
  .auto.is-running > summary::before,
  .rise.in { animation: none; }

  .tile::before, .card::before { transition: none; }
  .stage, .console > * { animation: none; }
}

/* ============================================================
   Retention Features
   ============================================================ */
.card-row {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .3rem;
}
.card-row .card { flex: 0 0 auto; scroll-snap-align: start; min-width: 140px; }

.personal-section { margin-bottom: 1.8rem; }
.personal-section .h3 { margin-bottom: .8rem; }

/* ---- streak ---- */
.streak-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .4rem;
}
.streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .5rem .2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .68rem;
}
.streak-day--done { background: var(--gold-08); border-color: var(--gold-40); }
.streak-day--current { border-color: var(--gold); box-shadow: 0 0 12px rgba(232, 184, 75, .25); }
.streak-day__num { color: var(--bone-45); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
.streak-day__tp { color: var(--gold); font-weight: 600; }

/* ---- missions ---- */
.mission {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .6rem;
  border: 1px solid var(--gold-08);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.mission--ready { border-color: var(--gold-40); background: var(--gold-08); }
.mission__icon { font-size: 1.4rem; flex-shrink: 0; }
.mission__info { flex: 1; min-width: 0; }
.mission__info b { display: block; font-size: .78rem; color: var(--bone); }
.mission__info p { margin: .1rem 0 .3rem; font-size: .65rem; color: var(--bone-45); }
.mission__bar { position: relative; height: 5px; background: var(--gold-08); border-radius: 3px; overflow: hidden; }
.mission__fill { position: absolute; inset: 0; background: var(--gold); border-radius: 3px; transform-origin: left; transition: width .4s var(--step); }
.mission__prog { position: absolute; right: 0; top: -14px; font-size: .58rem; color: var(--bone-45); }

/* ---- tournaments ---- */
.tournament-card {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .55rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .72rem;
}
.tournament-card b { color: var(--gold); }
.tournament-card span { color: var(--bone-45); font-size: .65rem; }

/* ---- welcome box ---- */
.welcome-box {
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--gold-08), transparent);
  text-align: center;
}
.welcome-box p { margin: 0 0 .5rem; font-size: .78rem; color: var(--bone); }

/* ---- promo form ---- */
.promo-row {
  display: flex;
  gap: .4rem;
  align-items: center;
}
.promo-row input {
  flex: 1;
  padding: .4rem .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--bone);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ---- section titles ---- */
.section-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--gold);
  margin: 1.5rem 0 .6rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--line);
}

/* ---- admin tools ---- */
#owner-tools { margin-top: 1.5rem; }

/* ---- weekly race ---- */
.weekly-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--gold-08);
  font-size: .78rem;
}
.weekly-row:last-child { border-bottom: none; }
.weekly-row--me { background: var(--gold-08); border-radius: var(--r-sm); }
.weekly-rank {
  width: 2rem;
  text-align: center;
  font-family: var(--serif);
  color: var(--bone-45);
  font-size: .7rem;
}
.weekly-name { flex: 1; color: var(--bone); }


/* ---- account sections ---- */
.acct-head {
  margin: clamp(2.5rem, 5vw, 3.75rem) 0 0;
  padding-bottom: .6rem;
  border-bottom: var(--hair);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  font-weight: 400;
  color: var(--bone);
}
.acct-head + .duo { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ---- standing ladder ---- */
.ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.rung {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .85rem .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink);
  text-align: center;
}
/* the rail the rungs sit on */
.rung::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -.5rem;
  width: .5rem;
  height: 1px;
  background: var(--line);
}
.rung:first-child::before { display: none; }
.rung__mark {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-style: normal;
  font-size: .72rem;
  color: var(--bone-45);
}
.rung b {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-70);
}
.rung .num { font-size: .8rem; color: var(--bone-45); }

.rung--past { border-color: var(--accent-40); }
.rung--past .rung__mark { border-color: var(--accent); color: var(--accent); }
.rung--past::before { background: var(--accent-40); }

.rung--here { border-color: var(--accent); box-shadow: var(--drop); }
.rung--here .rung__mark { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rung--here b { color: var(--bone); }
.rung--here .num { color: var(--accent); }
.rung__you {
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.ladder .rung:last-child .rung__mark { border-color: var(--gold-40); color: var(--gold); }
.ladder .rung:last-child.rung--here .rung__mark { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ---- section rules ---- */
.sect__head {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.sect__no {
  padding: .15rem .4rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r);
  font-size: .68rem;
  font-weight: 700;
}
.sect__head h2 {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: .01em;
  margin: 0;
}
.sect__rule { flex: 1; height: 1px; background: var(--line); }
.sect__head .label { margin-left: 0; white-space: nowrap; }

/* ---- the hero's standing commitment ---- */
.commit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1.1rem;
  margin: 1.1rem 0 0;
  padding: .55rem .8rem;
  border: 2px solid var(--ink-sink);
  border-radius: var(--r);
  background: var(--ink-raise);
  width: fit-content;
}
.commit dt {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-45);
}
.commit dd {
  margin: 0 .5rem 0 0;
  font-size: .76rem;
  color: var(--bone);
}

/* ---- account columns ---- */
.acct-cols {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 980px) { .acct-cols { grid-template-columns: 1.05fr .95fr; } }
.acct-col { display: grid; gap: clamp(1rem, 2vw, 1.5rem); align-content: start; }

.who-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.chip-flat {
  padding: .35rem .7rem;
  border: 2px solid var(--ink-sink);
  border-radius: var(--r);
  background: var(--ink-raise);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone-70);
}
.chip-flat--gold { background: var(--gold); border-color: var(--gold-deep); color: #2A1B02; font-weight: 600; }