/* ==========================================================================
   SOG — The Society of Athens
   Single stylesheet for all static pages.

   Contents
   1.  Tokens (dark = default, light = [data-theme="light"])
   2.  Reset & base
   3.  Bilingual visibility
   4.  Layout primitives
   5.  Typography
   6.  Buttons & links
   7.  Header / nav / drawer
   8.  Hero
   9.  Stats
   10. Pillars
   11. Plaque (quote panel)
   12. Tier table (responsive: table -> stacked cards under 1100px)
   13. Forms
   14. Steps (application flow)
   15. Footer
   16. Utilities

   ACCESSIBILITY NOTES
   - --gold is a FILL colour (button backgrounds, rules, circles). It is NOT
     used for text. --gold-text is the AA-compliant text/link colour:
       light theme  #7d5f26 on #fffdf7  = 5.9:1
       dark  theme  #e0bf82 on #0a0908  = 11.3:1
   - --ink-3 was raised to 5.2:1 (dark) / 5.6:1 (light). Nothing renders
     below 14px anywhere in this stylesheet; --fs-label is the floor.
   ========================================================================== */

/* 1. Tokens ================================================================ */

:root {
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Roboto Mono', 'DM Sans', ui-monospace, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --display-weight: 400;

  /* type scale — 14px floor */
  --fs-label: 14px;
  --fs-body-sm: 15.5px;
  --fs-body: 17px;
  --fs-body-lg: 18.5px;
  --fs-h3: clamp(26px, 3vw, 34px);
  --fs-h2: clamp(32px, 4vw, 52px);
  --fs-h1: clamp(38px, 5.4vw, 75px);
  --fs-stat: clamp(40px, 4.4vw, 55px);
  --fs-quote: clamp(23px, 2.6vw, 38px);

  --track-label: .09em;
  --track-eyebrow: .11em;
  --track-wordmark: .28em;

  /* surfaces */
  --bg-0: #0a0908;
  --bg-1: #100e0b;
  --bg-2: #16140f;
  --bg-3: #1d1a14;
  --bg-4: #25211a;

  --line-1: rgba(245, 239, 227, .11);
  --line-2: rgba(245, 239, 227, .19);
  --line-3: rgba(245, 239, 227, .30);

  /* ink */
  --ink-0: #f7f2e7;
  --ink-1: #d8cfba;
  --ink-2: #9c9484;
  --ink-3: #8b8171;   /* 5.21:1 on --bg-0 */

  /* brand */
  --gold: #d3b070;         /* fill only */
  --gold-text: #e0bf82;    /* 11.3:1 on --bg-0 */
  --gold-bright: #f2ddb2;
  --gold-dim: rgba(211, 176, 112, .10);
  --gold-glow: rgba(211, 176, 112, .22);
  --on-gold: #14100a;      /* text on a gold fill — 9.8:1 */

  --field: rgba(245, 239, 227, .04);
  --shadow: 0 24px 60px rgba(0, 0, 0, .55);

  --ok: #8fb089;
  --ok-bg: rgba(124, 154, 118, .10);
  --ok-line: rgba(124, 154, 118, .45);
  --warn: #d99284;
  --warn-bg: rgba(184, 93, 78, .10);
  --warn-line: rgba(184, 93, 78, .45);

  --gut: clamp(20px, 4vw, 40px);
  --max: 1280px;
}

:root[data-theme="light"] {
  --bg-0: #f7f3ea;
  --bg-1: #fffdf7;
  --bg-2: #f2ece0;
  --bg-3: #eae3d4;
  --bg-4: #e2d9c7;

  --line-1: rgba(26, 22, 16, .13);
  --line-2: rgba(26, 22, 16, .22);
  --line-3: rgba(26, 22, 16, .34);

  --ink-0: #191510;
  --ink-1: #443d31;
  --ink-2: #6a6253;
  --ink-3: #6e6658;   /* 5.58:1 on --bg-1 */

  --gold: #a5823a;
  --gold-text: #7d5f26;   /* 5.94:1 on --bg-1 */
  --gold-bright: #5f4718;
  --gold-dim: rgba(165, 130, 58, .10);
  --gold-glow: rgba(165, 130, 58, .18);
  --on-gold: #fffdf7;     /* on --gold #a5823a = 4.6:1 */

  --field: rgba(26, 22, 16, .035);
  --shadow: 0 20px 50px rgba(60, 48, 28, .14);

  --ok: #40663a;
  --ok-bg: rgba(64, 102, 58, .08);
  --ok-line: rgba(64, 102, 58, .40);
  --warn: #8f3323;
  --warn-bg: rgba(143, 51, 35, .07);
  --warn-line: rgba(143, 51, 35, .38);
}

/* 2. Reset & base ========================================================== */

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

/* The browser's own [hidden] rule is display:none at the lowest specificity, so
   any class that sets display beats it. .form and .notice both do — which meant
   every element this site marks hidden was in fact on screen: the whole
   password-recovery form sat open under the sign-in box, and each page carried
   an empty warning panel waiting for text. Marked !important because hiding is
   never something a component's own display rule should be able to override. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .35s var(--ease), color .35s var(--ease);
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

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

::selection { background: var(--gold-dim); color: var(--ink-0); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 20px;
  background: var(--bg-1);
  border: 1px solid var(--gold);
  color: var(--gold-text);
  font: 500 var(--fs-label) / 1 var(--mono);
  letter-spacing: var(--track-label);
}
.skip-link:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* 3. Bilingual visibility ================================================== */
/* Both languages ship in the markup; :root[data-lang] decides which shows.
   Default (no attribute) = English, so the page is correct before JS runs. */

[data-l="el"] { display: none; }
:root[data-lang="el"] [data-l="el"] { display: inline; }
:root[data-lang="el"] [data-l="en"] { display: none; }
:root[data-lang="en"] [data-l="en"] { display: inline; }
:root[data-lang="en"] [data-l="el"] { display: none; }

/* block-level language spans */
[data-l].is-block { display: none; }
:root[data-lang="el"] [data-l="el"].is-block,
:root:not([data-lang="el"]) [data-l="en"].is-block { display: block; }

/* 4. Layout primitives ===================================================== */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gut);
}

.section { padding-block: clamp(44px, 6vw, 76px); }
.section--tint { background: var(--bg-1); border-block: 1px solid var(--line-1); }

.rule { height: 1px; background: var(--line-1); border: 0; margin: 0; }

.stack { display: flex; flex-direction: column; }
.stack--sm { gap: 12px; }
.stack--md { gap: 22px; }
.stack--lg { gap: 34px; }

.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* 5. Typography ============================================================ */

.eyebrow {
  font: 400 var(--fs-label) / 1.6 var(--mono);
  letter-spacing: var(--track-eyebrow);
  color: var(--gold-text);
  text-transform: uppercase;
  margin: 0;
}

.label {
  font: 500 var(--fs-label) / 1.4 var(--mono);
  letter-spacing: var(--track-label);
  color: var(--ink-2);
  text-transform: uppercase;
}

/* sentence case — used for longer captions, easier to read than all-caps */
.meta {
  font: 400 var(--fs-label) / 1.5 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-2);
}

.h1, .h2, .h3 {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  color: var(--ink-0);
  margin: 0;
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.015em; }
.h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.012em; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; }

.h1 em, .h2 em, .h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-text);
}

.lede {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 1.75;
  color: var(--ink-1);
  max-width: 52ch;
  text-wrap: pretty;
}

.prose { margin: 0; color: var(--ink-1); text-wrap: pretty; }
.prose--sm { font-size: var(--fs-body-sm); }

/* 6. Buttons & links ======================================================= */

a { color: var(--gold-text); text-decoration: none; }
a:hover { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }

.link-quiet { color: var(--ink-2); }
.link-quiet:hover { color: var(--ink-0); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  font: 500 var(--fs-label) / 1 var(--mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { text-decoration: none; }

.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { background: var(--gold-bright); color: var(--on-gold); }
:root[data-theme="light"] .btn--gold:hover { background: #8a6a2c; }

.btn--ghost { border-color: var(--line-2); color: var(--ink-0); }
.btn--ghost:hover { border-color: var(--line-3); background: var(--field); color: var(--ink-0); }

.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 46px; padding: 0 18px; }

/* icon button — 44px minimum target */
.icon-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  color: var(--ink-1);
  cursor: pointer;
  border-radius: 2px;
}
.icon-btn:hover { color: var(--ink-0); background: var(--field); }

/* 7. Header / nav / drawer ================================================= */

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg-0);
  border-bottom: 1px solid var(--line-1);
}
.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__seal {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font: 500 17px/1 var(--serif);
  color: var(--gold-text);
}
.brand__word {
  font: 500 var(--fs-label) / 1 var(--mono);
  letter-spacing: var(--track-wordmark);
  color: var(--ink-0);
}
.brand__tag {
  padding-left: 13px;
  border-left: 1px solid var(--line-2);
  font: 400 var(--fs-label) / 1.2 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-2);
}

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); }
.nav__link { color: var(--ink-1); font-size: var(--fs-body-sm); }
.nav__link:hover { color: var(--ink-0); }
.nav__link[aria-current="page"] { color: var(--gold-text); }
.nav__actions { display: flex; align-items: center; gap: 10px; padding-left: 8px; }

/* preference toggles */
.prefs { display: flex; align-items: center; gap: 8px; }
.pref-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-1);
  font: 500 var(--fs-label) / 1 var(--mono);
  letter-spacing: .06em;
  cursor: pointer;
}
.pref-btn:hover { background: var(--field); color: var(--ink-0); }
.pref-btn--theme { background: var(--gold-dim); color: var(--gold-text); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* Direct children only, and never the screen-reader label. A bare
   `.nav-toggle span` also matched the label spans inside .visually-hidden:
   at 0,1,1 it outranked `[data-l="el"] { display:none }` at 0,1,0, so with
   JavaScript off a screen reader announced both "Open menu" and
   "Άνοιγμα μενού" — and the labels were being painted as hamburger bars. */
.nav-toggle > span:not(.visually-hidden) { display: block; width: 22px; height: 2px; background: var(--ink-0); }
.nav-toggle > span:not(.visually-hidden):last-of-type { width: 22px; }
.nav-toggle > span:not(.visually-hidden):nth-of-type(3) { width: 14px; background: var(--gold); }

/* drawer */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(6, 5, 4, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  width: min(340px, 88vw);
  padding: 22px 24px 28px;
  background: var(--bg-1);
  border-left: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  transform: translateX(101%);
  transition: transform .34s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.drawer-open .drawer-scrim { opacity: 1; visibility: visible; }
body.drawer-open .drawer { transform: none; }
body.drawer-open { overflow: hidden; }

.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.drawer__close { font-size: 26px; line-height: 1; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  padding: 16px 0;
  border-top: 1px solid var(--line-1);
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink-0);
}
.drawer__link:hover { color: var(--gold-text); text-decoration: none; }
.drawer__link:last-of-type { border-bottom: 1px solid var(--line-1); }
.drawer__prefs { display: flex; gap: 8px; margin-top: 22px; }
.drawer__prefs .pref-btn { flex: 1; justify-content: center; }
.drawer__foot { margin-top: auto; padding-top: 30px; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 1099px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .site-head__inner { min-height: 64px; }
  .brand__tag { display: none; }
}
@media (min-width: 1100px) {
  .drawer, .drawer-scrim { display: none; }
}

/* 8. Hero ================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(38px, 5.6vw, 76px) clamp(34px, 4.4vw, 60px);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.hero__ring {
  position: absolute;
  top: -140px;
  right: -120px;
  width: 520px;
  height: 520px;
  border: 1px solid var(--line-1);
  border-radius: 50%;
  opacity: .5;
  pointer-events: none;
}
.hero__body { position: relative; }
.hero .eyebrow { margin-bottom: clamp(20px, 2.4vw, 30px); }
.hero .lede { margin-top: 26px; }
.hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1099px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__cta .btn { flex: 1 1 260px; }
}

/* 9. Stats ================================================================= */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(38px, 5vw, 62px);
  border-top: 1px solid var(--line-2);
}
.stat { padding: 26px 24px 0 0; }
.stat + .stat { border-left: 1px solid var(--line-1); padding-left: 24px; }
.stat__num {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--ink-0);
}
.stat:first-child .stat__num { color: var(--gold-text); }
.stat__cap { margin-top: 10px; }

@media (max-width: 767px) {
  .stats { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .stat, .stat + .stat {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid var(--line-1);
    display: flex;
    align-items: baseline;
    gap: 16px;
  }
  .stat__num { min-width: 3.6em; }
  .stat__cap { margin-top: 0; }
}

/* 10. Pillars ============================================================== */

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillar { padding: clamp(30px, 4vw, 52px) var(--gut); }
.pillar + .pillar { border-left: 1px solid var(--line-1); }
.pillar__no {
  font: 500 var(--fs-label) / 1 var(--mono);
  letter-spacing: var(--track-eyebrow);
  color: var(--gold-text);
}
.pillar .h3 { margin-top: 18px; }
.pillar .prose { margin-top: 14px; }

@media (max-width: 1099px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar + .pillar { border-left: 0; border-top: 1px solid var(--line-1); }
}

/* 11. Plaque =============================================================== */

.plaque {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-height: 520px;
  padding: 26px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  background: linear-gradient(148deg, var(--bg-3), var(--bg-1) 55%, var(--bg-2));
}
.plaque::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 78% 18%, var(--gold-glow), transparent 62%);
  pointer-events: none;
}
.plaque__seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: .16;
  font: 300 150px/1 var(--serif);
  color: var(--gold);
  animation: sog-spin 120s linear infinite;
}
@keyframes sog-spin { to { transform: rotate(360deg); } }

.plaque__coords, .plaque__body { position: relative; }
.plaque__coords { display: flex; justify-content: space-between; gap: 12px; }
.plaque__body .rule-short { width: 34px; height: 1px; background: var(--gold); margin-bottom: 18px; }
.plaque__quote {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.32;
  color: var(--ink-0);
  max-width: 22ch;
  margin: 0;
}
.plaque__attr { margin-top: 16px; }

/* The plaque was designed as a narrow aside holding a one-line motto, so 22ch
   and 38px are right there. A full-width plaque carrying a paragraph — the
   founder's statement on about.html — broke into 25-character lines with half
   the panel empty. This modifier keeps the material and drops the constraints
   that only made sense at aside width. */
.plaque--wide { min-height: 0; padding: clamp(26px, 3.4vw, 44px); }
.plaque--wide .plaque__quote { max-width: 42ch; font-size: var(--fs-h3); line-height: 1.38; }

@media (max-width: 1099px) {
  .plaque { min-height: 340px; }
  .plaque__quote { max-width: none; }
}

/* 12. Tier table =========================================================== */
/* One markup source. Real <table> at >=1100px; stacked cards below, using
   data-tier / data-feature attributes for the labels. */

.tiers__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.tiers__note { max-width: 38ch; font-size: var(--fs-body-sm); color: var(--ink-2); margin: 0; }

.tier-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  table-layout: fixed;
}
.tier-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 12px;
  font: 400 var(--fs-label) / 1.5 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-2);
}
.tier-table th, .tier-table td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-1);
  overflow-wrap: anywhere;
}
.tier-table thead th { background: var(--bg-2); border-bottom: 1px solid var(--line-2); }
.tier-table thead th + th, .tier-table tbody td { border-left: 1px solid var(--line-1); }
.tier-table tbody th {
  font: 400 var(--fs-body-sm) / 1.5 var(--sans);
  color: var(--ink-1);
  width: 30%;
}
.tier-name-sm {
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  color: var(--ink-1);
}

/* directory / recently admitted — cards injected from the API */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin-top: 26px;
  min-height: 120px;
}
.tier-table tbody td { font-size: var(--fs-body-sm); color: var(--ink-0); }
.tier-table tbody td.is-off { color: var(--ink-3); }
.tier-table tr:last-child th, .tier-table tr:last-child td { border-bottom: 0; }

.tier-name {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  color: var(--ink-0);
}
.tier-price {
  display: block;
  margin-top: 6px;
  font: 500 var(--fs-label) / 1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-2);
}
.tier-table .is-featured { background: var(--gold-dim); }
.tier-table .is-featured .tier-name { color: var(--gold-text); }
.tier-table tfoot td { border-bottom: 0; padding-top: 20px; }

@media (max-width: 1099px) {
  .tier-table, .tier-table tbody, .tier-table tr, .tier-table th, .tier-table td { display: block; }
  .tier-table { border: 0; }
  .tier-table thead, .tier-table tfoot { display: none; }
  .tier-table tbody { display: flex; flex-direction: column; gap: 14px; }

  /* each row becomes a card: the feature, then what each tier gets */
  .tier-table tbody tr {
    padding: 16px 18px 18px;
    border: 1px solid var(--line-2);
    border-radius: 3px;
  }
  .tier-table tbody th, .tier-table tbody td { width: auto; padding: 0; border: 0; }
  .tier-table tbody th {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-1);
  }
  .tier-table tbody td {
    display: flex;
    gap: 14px;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 11px;
  }
  .tier-table tbody td::before {
    content: attr(data-tier);
    flex: none;
    min-width: 8.5em;
    font: 500 var(--fs-label) / 1.4 var(--mono);
    letter-spacing: .04em;
    color: var(--ink-2);
    text-transform: uppercase;
  }
  :root[data-lang="el"] .tier-table tbody td::before { content: attr(data-tier-el); }
  .tier-table tbody td.is-featured::before { color: var(--gold-text); }
  .tier-table tbody td > .cell {
    text-align: right;
    font-size: var(--fs-body-sm);
    color: var(--ink-0);
    overflow-wrap: anywhere;
  }
  .tier-table tbody td.is-off > .cell,
  .tier-table tbody td.is-off::before { color: var(--ink-3); }
  .tier-table tbody td.is-featured { background: transparent; }
}

/* 13. Forms ================================================================ */

.form { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.field { display: block; }
.field__label {
  display: block;
  margin-bottom: 9px;
  font: 500 var(--fs-label) / 1.4 var(--mono);
  letter-spacing: var(--track-label);
  color: var(--ink-2);
  text-transform: uppercase;
}
.field__hint { display: block; margin-top: 8px; font-size: var(--fs-label); color: var(--ink-2); }

.input {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  background: var(--field);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  color: var(--ink-0);
  font-family: var(--sans);
  font-size: var(--fs-body);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--line-3); }
.input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
textarea.input { min-height: 130px; padding: 14px 16px; line-height: 1.6; resize: vertical; }

/* chip group — plain checkboxes, styled */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: var(--fs-body-sm);
  color: var(--ink-1);
  transition: all .15s var(--ease);
}
.chip input:checked + span { border-color: var(--gold); background: var(--gold-dim); color: var(--gold-text); }
.chip input:focus-visible + span { outline: 2px solid var(--gold-text); outline-offset: 3px; }

/* notices */
.notice {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
}
.notice--warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn); }
.notice--ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.notice__mark { flex: none; font: 500 var(--fs-label) / 1.5 var(--mono); }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
}

/* split page (sign in) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); min-height: calc(100vh - 72px); }
.split__aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(28px, 4vw, 48px);
  border-right: 1px solid var(--line-2);
  background: linear-gradient(155deg, var(--bg-2), var(--bg-0) 60%);
}
.split__aside .plaque__seal { width: 520px; height: 520px; margin: -260px 0 0 -260px; font-size: 250px; opacity: .13; }
.split__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 64px) clamp(24px, 5vw, 68px);
}
.split__main .form { margin-top: 34px; }

@media (max-width: 1099px) {
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split__aside { order: 2; border-right: 0; border-top: 1px solid var(--line-2); min-height: 320px; }
  .split__main { order: 1; }
}

/* 14. Steps ================================================================ */

.steps { max-width: 560px; margin-inline: auto; }
.steps__bar { height: 3px; background: var(--line-1); }
.steps__fill { height: 100%; background: var(--gold); transition: width .4s var(--ease); }
.steps__count {
  font: 500 var(--fs-label) / 1 var(--mono);
  letter-spacing: .06em;
  color: var(--gold-text);
}
.steps__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}

.summary { border: 1px solid var(--line-2); border-radius: 3px; margin: 0; }
.summary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-1);
}
.summary__row:last-child { border-bottom: 0; }
.summary dt { margin: 0; }
.summary dd { margin: 0; font-size: var(--fs-body-sm); color: var(--ink-0); text-align: right; }

.confirmation { text-align: center; padding-block: clamp(40px, 7vw, 80px); }
.confirmation__seal {
  width: 78px;
  height: 78px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  font: 400 36px/1 var(--serif);
  color: var(--gold-text);
}
.confirmation .eyebrow { margin-top: 28px; }
.confirmation .h2 { margin-top: 16px; }
.confirmation .lede { margin: 18px auto 0; max-width: 42ch; }
.reference {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 30px;
  padding: 16px 22px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
}
.reference__value {
  font: 500 20px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--gold-text);
}

/* 15. Footer =============================================================== */

.site-foot {
  border-top: 1px solid var(--line-1);
  background: var(--bg-1);
  padding-block: 26px;
}
.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 26px;
}
.site-foot__links { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; }
.leave { color: var(--gold-text); font-weight: 500; }

@media (max-width: 767px) {
  .site-foot__inner { flex-direction: column; align-items: flex-start; }
}

/* 16. Utilities ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.center { text-align: center; }
.mt-sm { margin-top: 12px; }
.mt-md { margin-top: 22px; }
.mt-lg { margin-top: 34px; }
.mt-xl { margin-top: 56px; }

/* ── the member shell and rail ────────────────────────────────────────────
   A standing left-hand column on every member page, so the Society reads as
   one place rather than four pages that each require a token.

   It exists only from 1100px up. Below that the header's hamburger and the
   drawer already carry the same links, and two navigations fighting over a
   phone screen is worse than one that works. */

.shell { display: block; }
.shell__body { min-width: 0; }

@media (min-width: 1100px) {
  .shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: clamp(34px, 4vw, 60px);
    align-items: start; }
}

.rail { display: none; }

@media (min-width: 1100px) {
  .rail { display: block; position: sticky; top: 92px; }
}

.rail__label {
  margin: 26px 0 8px;
  font: 500 var(--fs-label)/1.4 var(--mono);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }

.rail__link {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  border: 0; border-left: 2px solid transparent; border-radius: 0 2px 2px 0;
  background: none; text-align: left; text-decoration: none;
  font-size: var(--fs-body-sm); color: var(--ink-2);
  transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
  cursor: pointer;
}
.rail__link:hover { color: var(--ink-0); background: var(--bg-1); }
.rail__link[aria-current="page"] {
  color: var(--ink-0); background: var(--bg-1);
  border-left-color: var(--gold);
}
.rail__name { flex: 1 1 auto; min-width: 0; }

/* Locked entries stay in the list. An applicant who cannot open the directory
   should see that it exists and is coming, not be shown a shorter menu than
   the one the site described to them. */
.rail__link--off { cursor: default; color: var(--ink-3); opacity: .55; }
.rail__link--off:hover { background: none; color: var(--ink-3); }

.rail__count {
  flex: 0 0 auto;
  padding: 1px 7px; border-radius: 999px;
  background: var(--field); color: var(--ink-3);
  font: 500 12px/1.6 var(--mono);
}
/* Something is actually waiting, as opposed to a total that is merely a fact. */
.rail__count--live { background: var(--gold); color: var(--on-gold); }

.rail__foot { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line-1); }
.rail__link--quiet { color: var(--ink-3); }
.rail__hint { margin: 10px 0 0 12px; font: 400 13px/1.5 var(--mono); color: var(--ink-3); opacity: .8; }

/* ── the member's home ────────────────────────────────────────────────────
   Two blocks: what is waiting, and where you can go. No charts — the layouts
   this borrows from are reporting revenue, and there is no revenue to report.
   No faces either: photographs are masked by design and there is a panic exit
   on Shift+Escape, so a landing page covered in members would undo both. */

.attn { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.attn__none { font-size: var(--fs-body); color: var(--ink-2); font-style: italic; }

.attn__card {
  position: relative;
  display: block;
  padding: 22px 46px 22px 22px;
  border: 1px solid var(--line-1);
  border-radius: 3px;
  background: var(--bg-1);
  text-decoration: none;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.attn__card:hover { border-color: var(--line-3); background: var(--bg-2); transform: translateY(-2px); }
.attn__card:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.attn__card--gold { border-color: rgba(211, 176, 112, .38); background: var(--gold-dim); }
.attn__card--gold:hover { border-color: var(--gold-text); }

.attn__title { display: block; font: var(--display-weight) var(--fs-body-lg)/1.3 var(--serif); color: var(--ink-0); }
.attn__body  { display: block; margin-top: 6px; font-size: var(--fs-body-sm); color: var(--ink-2); line-height: 1.5; }
.attn__count {
  display: block; margin-bottom: 6px;
  font: var(--display-weight) var(--fs-h3)/1 var(--serif); color: var(--gold-text);
}
.attn__go {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: var(--fs-body); transition: color .18s var(--ease), right .18s var(--ease);
}
.attn__card:hover .attn__go { color: var(--gold-text); right: 16px; }

/* The rooms of the house. Every tile is a page that exists — a grid of links
   to things not yet built would be worse than no grid at all. */
/* Separate bordered cards rather than one grid with hairline gaps: auto-fit
   leaves the last row short, and with the rule lines painted by the container's
   background those empty cells rendered as a grey slab. */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Above 1100px the rail carries these same destinations, and showing the menu
   twice on one screen is worse than showing it once. Below that the rail is
   gone and the tiles are the only way through — with touch targets a phone can
   actually use, which a drawer behind a hamburger is not. */
@media (min-width: 1100px) {
  .tiles, .tiles-heading { display: none; }
}

.tile {
  display: block; padding: 22px; background: var(--bg-1); text-decoration: none;
  border: 1px solid var(--line-1); border-radius: 3px;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.tile:hover { background: var(--bg-2); border-color: var(--line-3); }
.tile:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.tile__name { display: block; font: var(--display-weight) var(--fs-body-lg)/1.3 var(--serif); color: var(--ink-0); }
.tile:hover .tile__name { color: var(--gold-text); }
.tile__note { display: block; margin-top: 8px; font-size: var(--fs-body-sm); color: var(--ink-3); line-height: 1.5; }

/* Shown, not hidden: an applicant who cannot open the directory yet should see
   that it is there and why it is shut, not wonder whether the site is broken. */
.tile--off { cursor: default; opacity: .5; }
.tile--off .tile__name { color: var(--ink-2); }

/* Unread count in the top navigation. */
.nav__count {
  display: inline-block; min-width: 18px; margin-left: 7px; padding: 1px 5px;
  border-radius: 999px; background: var(--gold); color: var(--on-gold);
  font: 500 12px/1.5 var(--mono); text-align: center; vertical-align: 1px;
}

@media (max-width: 640px) {
  .attn { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
}
.nowrap { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   17. Document pages — privacy, code of discretion, about, contact, letter

   Long-form reading rather than landing-page rhythm: a measure that stays
   readable, a table of contents that sticks on desktop and collapses to a
   plain list on narrow screens, and headings that can be linked to directly.
   ═══════════════════════════════════════════════════════════════════════════ */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.doc__toc { position: sticky; top: 88px; }
.doc__toc-title { font: 500 var(--fs-label)/1.3 var(--mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.doc__toc a { display: block; padding: 6px 0 6px 12px; border-left: 1px solid var(--line-1);
  font-size: var(--fs-body-sm); color: var(--ink-2); }
.doc__toc a:hover, .doc__toc a:focus-visible { color: var(--gold-text); border-left-color: var(--gold); }

.doc__body { max-width: 68ch; }
.doc__section { scroll-margin-top: 96px; }
.doc__section + .doc__section { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line-1); }
.doc__section h2 { font: var(--display-weight) var(--fs-h3)/1.15 var(--serif); color: var(--gold-text); margin: 0 0 14px; }
.doc__section h3 { font: 500 var(--fs-body-lg)/1.3 var(--sans); color: var(--ink-0); margin: 24px 0 8px; }
.doc__section p { font: 400 var(--fs-body)/1.7 var(--sans); color: var(--ink-1); margin: 0 0 14px; }
.doc__section ul { margin: 0 0 14px; padding-left: 22px; }
.doc__section li { font: 400 var(--fs-body)/1.7 var(--sans); color: var(--ink-1); margin-bottom: 7px; }
.doc__section strong { color: var(--ink-0); font-weight: 500; }

.doc__note { padding: 18px 20px; border: 1px solid var(--line-1); border-left: 2px solid var(--gold);
  background: var(--bg-1); border-radius: 3px; margin: 0 0 18px; }
.doc__note p:last-child { margin-bottom: 0; }

.doc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px;
  background: var(--line-1); border: 1px solid var(--line-1); border-radius: 3px; margin: 0 0 18px; }
.doc__cell { background: var(--bg-1); padding: 16px 18px; }
.doc__cell-label { font: 500 var(--fs-label)/1.3 var(--mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 5px; }
.doc__cell-value { font-size: var(--fs-body-sm); color: var(--ink-0); }

@media (max-width: 1099px) {
  .doc { grid-template-columns: 1fr; gap: 28px; }
  .doc__toc { position: static; padding-bottom: 20px; border-bottom: 1px solid var(--line-1); }
  .doc__toc a { display: inline-block; border-left: 0; padding: 5px 14px 5px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. Member area — directory, dossier, correspondence

   Photography is present but never legible: a real image sits behind the
   silhouette, blurred and darkened past recognition. That masking is the
   product's stated feature, not a placeholder for a missing upload, and it is
   also why no identifiable stock model is ever shown as a member.
   ═══════════════════════════════════════════════════════════════════════════ */
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters .field { margin: 0; min-width: 180px; flex: 1 1 180px; }
.filters__count { margin-left: auto; font: 500 var(--fs-label)/1.4 var(--mono);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); }

select.input { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239c9484' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }

.card-member { border: 1px solid var(--line-1); border-radius: 3px; overflow: hidden;
  background: var(--bg-1); text-align: left; width: 100%; padding: 0; cursor: pointer;
  transition: border-color .18s var(--ease), transform .18s var(--ease); }
.card-member:hover, .card-member:focus-visible { border-color: var(--line-3); transform: translateY(-2px); }
.card-member__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-3); }
.card-member__mask { position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(22px) saturate(.55) brightness(.45); transform: scale(1.25); }
.card-member__figure { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.card-member__figure svg { width: 62%; height: 62%; opacity: .32; }
.card-member__veil { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px;
  display: flex; align-items: center; gap: 6px;
  font: 500 var(--fs-label)/1.2 var(--mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-2);
  background: linear-gradient(180deg, transparent, rgba(10, 9, 8, .92)); }
:root[data-theme="light"] .card-member__veil { background: linear-gradient(180deg, transparent, rgba(20, 16, 10, .82)); color: #d8cfba; }
.card-member__here { position: absolute; top: 10px; left: 10px; }
.card-member__body { padding: 14px 16px 16px; }
.card-member__name { font: var(--display-weight) var(--fs-h3)/1.1 var(--serif); color: var(--ink-0); }
.card-member__meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.card-member__id { font: 500 var(--fs-label)/1.3 var(--mono); letter-spacing: var(--track-label); color: var(--gold-text); }
.card-member__where { font-size: var(--fs-body-sm); color: var(--ink-2); }

.chip--live { border-color: rgba(124, 154, 118, .5); color: #9dbd96; }
:root[data-theme="light"] .chip--live { color: #47693f; }

.dossier { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 44px; align-items: start; }
.dossier__frame { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--line-1);
  border-radius: 3px; overflow: hidden; background: var(--bg-3); }
.dossier__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--line-1); border: 1px solid var(--line-1); border-radius: 3px; margin-top: 22px; }
.dossier__fact { background: var(--bg-1); padding: 14px 16px; }

.thread { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 28px; align-items: start; }
.thread__list { border: 1px solid var(--line-1); border-radius: 3px; overflow: hidden; }
.thread__item { display: block; width: 100%; text-align: left; padding: 14px 16px; background: var(--bg-1);
  border: 0; border-bottom: 1px solid var(--line-1); cursor: pointer; }
.thread__item:last-child { border-bottom: 0; }
.thread__item[aria-current="true"] { background: var(--bg-2); box-shadow: inset 2px 0 0 var(--gold); }
.thread__who { font-size: var(--fs-body); color: var(--ink-0); }
.thread__preview { font-size: var(--fs-body-sm); color: var(--ink-2); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread__unread { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--gold); color: #17130b; font: 500 var(--fs-label)/18px var(--mono); text-align: center; }

.transcript { border: 1px solid var(--line-1); border-radius: 3px; padding: 20px;
  min-height: 240px; max-height: 52vh; overflow-y: auto; background: var(--bg-1); }
.bubble { max-width: 74%; padding: 12px 15px; border-radius: 3px; margin-bottom: 12px;
  font: 400 var(--fs-body)/1.6 var(--sans); color: var(--ink-0);
  border: 1px solid var(--line-1); background: var(--bg-2); }
.bubble--mine { margin-left: auto; background: var(--gold-dim); border-color: rgba(211, 176, 112, .28); }

.empty { padding: 28px 4px; font-size: var(--fs-body); color: var(--ink-2); }

@media (max-width: 1099px) {
  .dossier, .thread { grid-template-columns: 1fr; gap: 26px; }
  .transcript { max-height: none; }
  .filters__count { margin-left: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. Account and the operator desk
   ═══════════════════════════════════════════════════════════════════════════ */
.acct { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 44px; align-items: start; }
.acct__nav { position: sticky; top: 88px; display: grid; gap: 2px; }
.acct__nav button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0;
  border-left: 1px solid var(--line-1); background: none; cursor: pointer;
  font-size: var(--fs-body-sm); color: var(--ink-2); }
.acct__nav button[aria-current="true"] { color: var(--ink-0); border-left-color: var(--gold); background: var(--bg-1); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--line-1); border: 1px solid var(--line-1); border-radius: 3px; }
.kpi { background: var(--bg-1); padding: 18px 18px 16px; }
.kpi__num { font: var(--display-weight) var(--fs-stat)/1 var(--serif); color: var(--gold-text); }
.kpi__cap { margin-top: 6px; font: 500 var(--fs-label)/1.35 var(--mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-2); }
.kpi__note { margin-top: 4px; font-size: var(--fs-body-sm); color: var(--ink-3); }

.queue { border: 1px solid var(--line-1); border-radius: 3px; overflow: hidden; }
/* The facts column carries a report's whole reason, which is a sentence rather
   than a date and a neighbourhood, so it gets the room. */
.queue__row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.8fr) auto auto;
  gap: 14px; align-items: center; padding: 14px 16px; background: var(--bg-1);
  border-bottom: 1px solid var(--line-1); }
.queue__row:last-child { border-bottom: 0; }
.queue__who { font-size: var(--fs-body); color: var(--ink-0); }
.queue__id { display: block; font: 500 var(--fs-label)/1.4 var(--mono);
  letter-spacing: var(--track-label); color: var(--gold-text); }
.queue__facts { font-size: var(--fs-body-sm); color: var(--ink-2); }
.queue__actions { display: flex; gap: 8px; }
.queue__row[data-done="true"] { opacity: .45; pointer-events: none; }

/* Status markers inside a queue row. These were written as .chip, which is the
   class for a checkbox label — its pill lives on `.chip span`, so a bare
   `<span class="chip">` rendered as unstyled text and the only thing the
   operator saw was a word. */
.queue__mark {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px;
  font: 500 var(--fs-label)/1.5 var(--mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.queue__mark + .queue__mark { margin-left: 6px; }
.queue__mark--ok { border-color: rgba(124, 154, 118, .5); color: #9dbd96; }
.queue__mark--warn { border-color: var(--warn-line); color: var(--warn); }
:root[data-theme="light"] .queue__mark--ok { color: #47693f; }
/* The marks wrap under the facts on a narrow screen rather than squeezing the
   buttons, which is why they are their own flex row and not inline text. */
.queue__marks { display: flex; flex-wrap: wrap; gap: 6px; }
.queue__marks .queue__mark + .queue__mark { margin-left: 0; }

@media (max-width: 1099px) {
  .acct { grid-template-columns: 1fr; gap: 24px; }
  .acct__nav { position: static; grid-auto-flow: column; overflow-x: auto; padding-bottom: 8px; }
  .acct__nav button { border-left: 0; border-bottom: 1px solid var(--line-1); white-space: nowrap; }
  .acct__nav button[aria-current="true"] { border-bottom-color: var(--gold); }
  .queue__row { grid-template-columns: 1fr; gap: 8px; }
  .queue__actions { justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. Gatherings
   ═══════════════════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-1); }
.tabs button { padding: 10px 16px; border: 0; background: none; cursor: pointer;
  font-size: var(--fs-body-sm); color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-current="true"] { color: var(--ink-0); border-bottom-color: var(--gold); }

.gathering { display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 220px);
  gap: 24px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line-1); }
.gathering:last-child { border-bottom: 0; }
.gathering__when { text-align: center; }
.gathering__day { font: var(--display-weight) var(--fs-h2)/1 var(--serif); color: var(--gold-text); }
.gathering__mon { font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.gathering__name { font: var(--display-weight) var(--fs-h3)/1.15 var(--serif); color: var(--ink-0); }
.gathering__where { margin-top: 6px; font-size: var(--fs-body-sm); color: var(--ink-2); }
.gathering__desc { margin-top: 10px; font: 400 var(--fs-body)/1.65 var(--sans); color: var(--ink-1); }
.gathering__side { display: grid; gap: 10px; justify-items: stretch; }

.seats { height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.seats__fill { height: 100%; background: var(--gold); }
.seats__cap { font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-2); }

.seat-pick { display: flex; gap: 6px; }
.seat-pick button { flex: 1; padding: 8px 0; border: 1px solid var(--line-2); background: none;
  color: var(--ink-1); font-size: var(--fs-body-sm); cursor: pointer; border-radius: 3px; }
.seat-pick button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-text); background: var(--gold-dim); }

@media (max-width: 1099px) {
  .gathering { grid-template-columns: 64px minmax(0, 1fr); }
  .gathering__side { grid-column: 1 / -1; }
}