/* ==========================================================================
   ANTEROOM — design system
   Black · off-white · charcoal · platinum. Nothing else.
   ========================================================================== */

:root {
  /* --- ground ------------------------------------------------------------ */
  --ink:          #060708;
  --bg:           #0A0B0C;
  --bg-raise:     #0E0F11;
  --surface:      #121416;
  --surface-2:    #17191C;
  --surface-3:    #1D2023;

  /* --- lines ------------------------------------------------------------- */
  --line-soft:    #17191C;
  --line:         #232629;
  --line-strong:  #34383D;

  /* --- type -------------------------------------------------------------- */
  --fg:           #E9E6DF;
  --fg-dim:       #B2AFA8;
  --muted:        #7E8085;
  --muted-deep:   #5A5C61;

  /* --- platinum ---------------------------------------------------------- */
  --metal:        #C7C2B6;
  --metal-bright: #EAE7DE;
  --metal-dim:    #8A867C;
  --metal-ghost:  rgba(199,194,182,.10);
  --metal-line:   rgba(199,194,182,.28);

  /* --- status: deliberately desaturated ------------------------------- */
  --pos:          #7F9C79;
  --warn:         #C0A76E;
  --neg:          #B37461;
  --info:         #7E93A6;

  /* --- rhythm ------------------------------------------------------------ */
  --gut:          clamp(1.25rem, 4vw, 2.5rem);
  --measure:      68ch;
  --shell-max:    1440px;
  --edit-max:     1120px;

  /* --- motion ------------------------------------------------------------ */
  --ease:         cubic-bezier(.16, 1, .3, 1);
  --slow:         620ms;
  --mid:          420ms;
  --fast:         220ms;

  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans:    "Archivo", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, "Menlo", "Consolas", monospace;

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; }

::selection { background: var(--metal); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--metal);
  outline-offset: 3px;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 0;
  color: var(--fg);
}

.display-xl { font-size: clamp(2.9rem, 8.5vw, 7.5rem); line-height: 1.02; letter-spacing: -0.03em; }
.display-l  { font-size: clamp(2.1rem, 5.2vw, 4.05rem); line-height: 1.06; letter-spacing: -0.022em; }
.display-m  { font-size: clamp(1.6rem, 3.2vw, 2.55rem); line-height: 1.14; letter-spacing: -0.015em; }
.display-s  { font-size: clamp(1.2rem, 2vw, 1.6rem);   line-height: 1.24; letter-spacing: -0.008em; }

.serif  { font-family: var(--font-display); font-weight: 200; }
.italic { font-style: italic; }
.metal  { color: var(--metal); }
.dim    { color: var(--muted); }
.fgdim  { color: var(--fg-dim); }

p { margin: 0; }
.lede {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.05rem, 1.9vw, 1.42rem);
  line-height: 1.62;
  color: var(--fg-dim);
  max-width: 46ch;
}
.body    { font-size: .9375rem; line-height: 1.78; color: var(--fg-dim); max-width: var(--measure); }
.body-sm { font-size: .8125rem; line-height: 1.75; color: var(--muted); max-width: var(--measure); }

/* the small wide-tracked label that sets the whole tone */
.eyebrow {
  font-family: var(--font-sans);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--metal-dim);
  margin: 0;
  display: block;
}
.eyebrow.pale { color: var(--muted-deep); }

.label {
  font-family: var(--font-sans);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

.num {
  font-family: var(--font-display);
  font-weight: 200;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}
.mono {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

a { color: inherit; text-decoration: none; }
a.link {
  color: var(--metal);
  border-bottom: 1px solid var(--metal-line);
  transition: border-color var(--mid) var(--ease), color var(--mid) var(--ease);
}
a.link:hover { color: var(--metal-bright); border-color: var(--metal); }

/* ==========================================================================
   RULES, TEXTURES, ORNAMENT
   ========================================================================== */

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right, transparent, var(--metal-line), transparent);
}
.rule-left {
  height: 1px; border: 0; margin: 0; width: 4.5rem;
  background: linear-gradient(to right, var(--metal-line), transparent);
}
.hr { height: 1px; border: 0; margin: 0; background: var(--line); }

/* engine-turned guilloché — the plate on a share certificate, not a chessboard */
.vault {
  background-image:
    repeating-linear-gradient(90deg,  rgba(199,194,182,.055) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg,   rgba(199,194,182,.035) 0 1px, transparent 1px 9px);
}
.vault-fade {
  -webkit-mask-image: radial-gradient(58% 62% at 50% 42%, #000, transparent 100%);
          mask-image: radial-gradient(58% 62% at 50% 42%, #000, transparent 100%);
}
.aura {
  background: radial-gradient(118% 82% at 50% 0%, rgba(199,194,182,.085), transparent 66%);
}
.aura-low {
  background: radial-gradient(90% 60% at 50% 100%, rgba(199,194,182,.05), transparent 70%);
}

/* ==========================================================================
   MOTION
   ========================================================================== */

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes widen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes breathe { 0%,100% { opacity: .35; } 50% { opacity: .9; } }

.rise  { animation: rise 1100ms var(--ease) both; }
.rise-1 { animation-delay: 90ms; }  .rise-2 { animation-delay: 180ms; }
.rise-3 { animation-delay: 280ms; } .rise-4 { animation-delay: 390ms; }
.rise-5 { animation-delay: 510ms; } .rise-6 { animation-delay: 640ms; }
.widen { transform-origin: left; animation: widen 1300ms var(--ease) both; animation-delay: 420ms; }

/* ==========================================================================
   SCROLL MOTION
   Four devices, each borrowed from the product rather than from a library:

   .unseal   headlines arrive a word at a time, as a sentence is disclosed
   .draw     hairlines engrave themselves, like a rule struck on a certificate
   .stagger  lists and grids settle in sequence, the way a ledger is read
   .lift     a platinum bar retracts off the text, the redaction lifting

   All of it is transform and opacity only, so it composites on the GPU and
   never triggers layout. All of it is switched off under reduced motion.
   ========================================================================== */

/* --- .unseal: word by word ---------------------------------------------- */
.js .unseal .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.42em);
  transition: opacity 1550ms var(--ease), transform 1900ms var(--ease);
}
.unseal.in .w { opacity: 1; transform: none; }

/* --- .draw: the hairline engraves itself -------------------------------- */
.js .draw { transform: scaleX(0); transform-origin: left center; transition: transform 2400ms var(--ease); }
.draw.in { transform: scaleX(1); }
.draw-c { transform-origin: center; }

/* --- .stagger: children settle in sequence ------------------------------ */
.js .stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1700ms var(--ease), transform 1700ms var(--ease);
}
.stagger.in > * { opacity: 1; transform: none; }

/* --- .lift: the redaction retracts -------------------------------------- */
.lift { position: relative; display: inline-block; }
.js .lift::after {
  content: ""; position: absolute; inset: -.14em -.3em;
  background: var(--metal);
  transform: scaleX(1); transform-origin: right center;
  transition: transform 2300ms var(--ease);
}
.lift.in::after { transform: scaleX(0); }

/* scroll-revealed sections */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 2050ms var(--ease), transform 2050ms var(--ease); }
.reveal.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise, .widen { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* Nothing above may leave content invisible or covered when motion is off. */
  .unseal .w, .stagger > * { opacity: 1 !important; transform: none !important; }
  .draw { transform: scaleX(1) !important; }
  .lift::after { display: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.wrap  { width: 100%; max-width: var(--shell-max); margin: 0 auto; padding-inline: var(--gut); }
.wrap-n{ width: 100%; max-width: var(--edit-max); margin: 0 auto; padding-inline: var(--gut); }
.wrap-s{ width: 100%; max-width: 780px;  margin: 0 auto; padding-inline: var(--gut); }

.section      { padding-block: clamp(5rem, 13vw, 11rem); position: relative; }
.section-tight{ padding-block: clamp(3.5rem, 8vw, 6.5rem); position: relative; }
.section-line { border-top: 1px solid var(--line-soft); }

.stack   { display: flex; flex-direction: column; }
.stack-1 { gap: .35rem; }  .stack-2 { gap: .75rem; }  .stack-3 { gap: 1.25rem; }
.stack-4 { gap: 2rem; }    .stack-5 { gap: 3rem; }    .stack-6 { gap: 4.5rem; }

.row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.row-tight { gap: .5rem; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.75rem}
.mt-4{margin-top:2.75rem}.mt-5{margin-top:4rem}.mt-6{margin-top:6rem}

.grid { display: grid; gap: var(--gut); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
@media (max-width: 980px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

/* Figure rows stay two-up on a phone — a column of single numbers wastes the
   screen and buries everything below it. */
.g-stat { grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (max-width: 900px) { .g-stat { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Two-column editorial splits. They MUST collapse: a desk file holds long
   unbreakable strings (emails, hashes) that cannot survive a narrow column. */
.split, .split-even, .split-wide {
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.split      { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.split-wide { grid-template-columns: minmax(0, 1.9fr)  minmax(0, 1fr); }
.split-even { grid-template-columns: minmax(0, 1fr)    minmax(0, 1fr); }
@media (max-width: 1000px) {
  .split, .split-even, .split-wide { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-sans);
  font-size: .625rem; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  padding: 1.15rem 2.4rem;
  border: 1px solid var(--line-strong);
  background: transparent; color: var(--fg);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--slow) var(--ease),
              color var(--slow) var(--ease),
              border-color var(--slow) var(--ease);
}
.btn:hover { border-color: var(--metal-line); color: var(--metal); }
.btn-primary { border-color: var(--metal-line); color: var(--metal); }
.btn-primary:hover { background: var(--metal); color: var(--ink); border-color: var(--metal); }
.btn-solid { background: var(--metal); border-color: var(--metal); color: var(--ink); }
.btn-solid:hover { background: var(--metal-bright); border-color: var(--metal-bright); color: var(--ink); }
.btn-quiet { border-color: var(--line); color: var(--muted); }
.btn-quiet:hover { border-color: var(--line-strong); color: var(--fg); }
.btn-danger { border-color: rgba(179,116,97,.4); color: var(--neg); }
.btn-danger:hover { background: var(--neg); border-color: var(--neg); color: var(--ink); }
.btn-sm { padding: .72rem 1.35rem; font-size: .5625rem; letter-spacing: .22em; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .38; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
/* An action row with no permitted actions must not leave a hole in the page. */
.btn-row:empty, .row:empty, .chips:empty { display: none; }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: .7rem; }
.field > .label { margin: 0; }

.input, .select, .textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: .875rem; font-weight: 300;
  color: var(--fg);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: .8rem 0;
  border-radius: 0;
  transition: border-color var(--mid) var(--ease);
}
.textarea {
  border: 1px solid var(--line);
  padding: 1rem 1.1rem;
  line-height: 1.7;
  resize: vertical;
  min-height: 8rem;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-deep); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--metal); }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) center, calc(100% - 7px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.6rem;
}
.select option { background: var(--surface-2); color: var(--fg); }
.input[type="file"] { border-bottom: 1px dashed var(--line); font-size: .75rem; color: var(--muted); padding: 1rem 0; }
.input[type="file"]::file-selector-button {
  font-family: var(--font-sans); font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase;
  background: transparent; color: var(--metal); border: 1px solid var(--line-strong);
  padding: .6rem 1.1rem; margin-right: 1rem; cursor: pointer;
}

.hint { font-size: .6875rem; color: var(--muted-deep); line-height: 1.6; }
.err  { font-size: .6875rem; color: var(--neg); letter-spacing: .04em; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* A <legend> is rendered out of flow, so neither the parent's `gap` nor the
   legend's own margin-bottom separates it from the first field. Push the
   following sibling down instead — that one IS a flex item. */
legend { padding: 0; }
fieldset > legend + * { margin-top: 1.5rem; }

/* chip-style multi-select */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-family: var(--font-sans); font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--muted);
  padding: .68rem 1.15rem; background: transparent; cursor: pointer;
  transition: border-color var(--mid) var(--ease), color var(--mid) var(--ease), background-color var(--mid) var(--ease);
}
.chip:hover { border-color: var(--line-strong); color: var(--fg); }
.chip[aria-pressed="true"], .chip.on {
  border-color: var(--metal-line); color: var(--metal); background: var(--metal-ghost);
}

.check { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; }
.check input { accent-color: var(--metal); margin-top: .25rem; }

/* ==========================================================================
   CARDS, PANELS, TABLES
   ========================================================================== */

.panel {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
}
.panel-flat { border: 1px solid var(--line); background: transparent; padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem;
  padding-bottom: 1.1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
/* the panel head already draws a rule; the list below must not draw a second */
.panel-head + .deflist, .panel-head + * > .deflist:first-child { border-top: 0; }

/* the deal card */
.deal {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  position: relative;
  transition: border-color var(--slow) var(--ease), background-color var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.deal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(199,194,182,.05), transparent 70%);
  opacity: 0; transition: opacity var(--slow) var(--ease);
}
.deal:hover { border-color: var(--metal-line); background: var(--surface-2); }
.deal:hover::after { opacity: 1; }
.deal-ref { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; color: var(--metal-dim); }
.deal-title {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.18; letter-spacing: -0.015em;
  margin-top: .9rem; color: var(--fg);
  min-height: 2.36em;   /* two lines, so a row of cards keeps its rhythm */
}
.deal-meta {
  margin-top: .7rem; font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  min-height: 2.4em;
}
.deal .figs { margin-top: auto; }   /* figures sit on the card floor */
.deal-meta .sep { color: var(--muted-deep); margin-inline: .55rem; }

/* the figure grid inside a deal card */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.figs-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.fig { background: var(--surface); padding: .95rem 1.05rem; }
.deal:hover .fig { background: var(--surface-2); transition: background-color var(--slow) var(--ease); }
.fig .label { font-size: .5625rem; letter-spacing: .2em; color: var(--muted-deep); }
.fig .val { font-family: var(--font-display); font-weight: 200; font-size: 1.1rem; margin-top: .3rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.fig .val.sm { font-size: .8125rem; font-family: var(--font-sans); letter-spacing: .04em; }

/* progress — capital committed */
.meter { height: 2px; background: var(--line); margin-top: .55rem; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--metal); }

/* category tile — label above, figure below, so wrapped labels still line up */
.tile {
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--line); background: var(--surface);
  padding: 1.5rem 1.6rem 1.4rem; min-height: 8.5rem;
  transition: border-color var(--slow) var(--ease), background-color var(--slow) var(--ease);
}
.tile:hover { border-color: var(--metal-line); background: var(--surface-2); }
.tile .label { min-height: 2.4em; }
.tile .n {
  font-family: var(--font-display); font-weight: 200; font-size: 2.1rem; line-height: 1;
  letter-spacing: -0.03em; color: var(--metal); font-variant-numeric: tabular-nums;
  margin-top: 1.1rem;
}

/* statistics */
.stat { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.stat .n { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat .label { margin-top: .9rem; }

/* definition rows */
.deflist { border-top: 1px solid var(--line); }
.defrow {
  display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 1rem 2rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--line-soft);
}
.defrow dt { font-family: var(--font-sans); font-size: .625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.defrow dd { margin: 0; font-size: .875rem; color: var(--fg-dim); line-height: 1.7;
              overflow-wrap: anywhere; }
@media (max-width: 680px) { .defrow { grid-template-columns: 1fr; gap: .5rem; padding: 1.1rem 0; } }

/* tables */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
table.tbl { width: 100%; border-collapse: collapse; min-width: 660px; }
table.tbl th {
  text-align: left; font-family: var(--font-sans); font-weight: 400;
  font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-deep);
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); background: var(--bg-raise);
  white-space: nowrap;
}
table.tbl td { padding: 1.05rem 1.15rem; border-bottom: 1px solid var(--line-soft); font-size: .8125rem; color: var(--fg-dim); vertical-align: middle; }
table.tbl tbody tr { transition: background-color var(--mid) var(--ease); }
table.tbl tbody tr:hover { background: var(--surface); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td .mono { color: var(--metal-dim); }

/* status pills */
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-sans); font-size: .5rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .38rem .7rem; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap;
}
.pill::before { content: ""; width: 3px; height: 3px; background: currentColor; }
.pill.open, .pill.approved, .pill.active, .pill.passed { color: var(--pos); border-color: rgba(127,156,121,.34); }
.pill.pending, .pill.review, .pill.paused { color: var(--warn); border-color: rgba(192,167,110,.34); }
.pill.closed, .pill.rejected, .pill.failed { color: var(--neg); border-color: rgba(179,116,97,.34); }
.pill.metal { color: var(--metal); border-color: var(--metal-line); }
/* A size up, for a pill that is a label in its own right rather than a status
   marker sitting beside other text. */
.pill-lg { font-size: .6875rem; letter-spacing: .22em; padding: .5rem 1rem; }
.pill-lg::before { width: 4px; height: 4px; }
.pill.plain { color: var(--muted); }

/* verification ticks — only ever rendered for checks that actually passed */
.ticks { display: flex; flex-direction: column; gap: .55rem; }
.tick { display: flex; align-items: center; gap: .7rem; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.tick i { font-style: normal; color: var(--pos); font-size: .8rem; line-height: 1; }
.tick.no { color: var(--muted-deep); }
.tick.no i { color: var(--muted-deep); }

/* seal — for confidential notices */
.seal {
  border: 1px solid var(--metal-line); background: var(--metal-ghost);
  padding: 1.15rem 1.4rem; font-size: .75rem; line-height: 1.7; color: var(--fg-dim);
}
.seal .eyebrow { margin-bottom: .55rem; }
.notice { border-left: 1px solid var(--line-strong); padding-left: 1.2rem; font-size: .8125rem; color: var(--muted); line-height: 1.75; }
.notice.warn { border-color: rgba(192,167,110,.5); color: var(--warn); }
.notice.neg  { border-color: rgba(179,116,97,.5); color: var(--neg); }

.empty { border: 1px dashed var(--line); padding: clamp(2.5rem,6vw,4.5rem) 1.5rem; text-align: center; }
.empty .eyebrow { margin-bottom: 1rem; }

/* ==========================================================================
   PUBLIC SITE CHROME
   ========================================================================== */

.topbar {
  position: fixed; inset-inline: 0; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background-color var(--slow) var(--ease), border-color var(--slow) var(--ease), backdrop-filter var(--slow);
}
.topbar.stuck { background: rgba(10,11,12,.86); backdrop-filter: blur(14px); border-bottom-color: var(--line-soft); }
.topbar .inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 1.5rem; }
.mark {
  display: inline-flex; flex-direction: column; gap: .34rem;
  line-height: 1; white-space: nowrap;
}
.mark-name {
  font-family: var(--font-display); font-weight: 200;
  font-size: 1.02rem; letter-spacing: .24em; text-transform: uppercase; color: var(--fg);
  line-height: 1;
}
.mark-name b { font-weight: 200; color: var(--metal); }
.mark-sub {
  font-family: var(--font-sans); font-weight: 300;
  font-size: .5rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--metal-dim); line-height: 1;
}
/* the lockup sits centred and larger where the brand is being presented */
.mark-lg          { gap: .6rem; align-items: center; }
.mark-lg .mark-name { font-size: 1.35rem; letter-spacing: .26em; }
.mark-lg .mark-sub  { font-size: .5625rem; letter-spacing: .34em; color: var(--metal-dim); }
@media (max-width: 480px) {
  .mark-name { font-size: .82rem; letter-spacing: .18em; }
  .mark-sub  { font-size: .4375rem; letter-spacing: .24em; }
}
.topnav { display: flex; align-items: center; gap: 2.2rem; }
.topnav a {
  font-size: .5625rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
  transition: color var(--mid) var(--ease);
}
.topnav a:hover { color: var(--metal); }
/* --- the menu button: three rules that become a cross --------------------- */
.burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px;                 /* a comfortable touch target */
  margin-right: -10px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.burger span {
  display: block; height: 1px; width: 22px;
  background: var(--fg);
  transition: transform var(--mid) var(--ease), opacity var(--mid) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- the panel it opens --------------------------------------------------- */
.site-menu {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(6,7,8,.97); backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  animation: fade 320ms var(--ease) both;
}
.site-menu-inner { display: flex; flex-direction: column; gap: .35rem; text-align: center; }
.site-menu-inner a {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(1.6rem, 7vw, 2.3rem); letter-spacing: .02em;
  color: var(--fg); padding: .55rem 2rem;
  transition: color var(--mid) var(--ease);
}
.site-menu-inner a:last-child { color: var(--metal); }
.site-menu-inner a:hover, .site-menu-inner a:focus-visible { color: var(--metal-bright); }

@media (max-width: 860px) {
  .topnav { display: none; }
  .burger { display: flex; }
  .mark-name { font-size: .82rem; letter-spacing: .18em; }
}
/* Above the breakpoint the panel can never be shown, whatever its state. */
@media (min-width: 861px) { .site-menu { display: none !important; } }

.footer { border-top: 1px solid var(--line-soft); padding-block: 4.5rem 3.5rem; }

/* ==========================================================================
   APPLICATION SHELL  (member + admin)
   ========================================================================== */

.app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }

.appbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,11,12,.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.appbar .inner { display: flex; align-items: center; gap: 1.5rem; height: 66px; }
.appbar .mark-name { font-size: .82rem; letter-spacing: .2em; }
.appbar .mark-sub  { font-size: .4375rem; letter-spacing: .26em; }
@media (max-width: 700px) { .appbar .mark-sub { display: none; } }
.desk-badge {
  font-size: .5rem; letter-spacing: .24em; text-transform: uppercase;
  border: 1px solid var(--metal-line); color: var(--metal); padding: .28rem .55rem;
}

.appnav { display: flex; gap: 1.9rem; margin-left: auto; align-items: center; }
.appnav a {
  position: relative; padding-block: .4rem;
  font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
  transition: color var(--mid) var(--ease); white-space: nowrap;
}
.appnav a:hover { color: var(--fg); }
.appnav a.on { color: var(--metal); }
.appnav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--metal); }
.appnav .dot { display: inline-block; width: 4px; height: 4px; background: var(--metal); margin-left: .4rem; vertical-align: middle; }

.app-main { flex: 1; padding-block: clamp(2rem, 4vw, 3.25rem) clamp(4rem, 8vw, 6rem); }

/* secondary rail used by the desk */
.subnav {
  display: flex; gap: 1.5rem; overflow-x: auto; border-bottom: 1px solid var(--line);
  padding-bottom: 0; scrollbar-width: none;
  /* fade the trailing edge so it reads as scrollable rather than clipped */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
}
.subnav::-webkit-scrollbar { display: none; }
@media (min-width: 1500px) { .subnav { -webkit-mask-image: none; mask-image: none; } }
.subnav a {
  font-size: .5625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  padding: .9rem .1rem; white-space: nowrap; border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
.subnav a:hover { color: var(--fg); }
.subnav a.on { color: var(--metal); border-bottom-color: var(--metal); }

/* mobile bottom navigation */
.mobnav { display: none; }
@media (max-width: 900px) {
  .appnav { display: none; }
  .mobnav {
    display: grid; position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: rgba(10,11,12,.96); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobnav a {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    padding: .8rem .25rem .7rem;
    font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  }
  .mobnav a.on { color: var(--metal); }
  .mobnav a .ic { font-size: .95rem; line-height: 1; opacity: .9; }
  .mobnav a .bdg { position: absolute; margin-left: 1.15rem; margin-top: -.15rem; width: 4px; height: 4px; background: var(--metal); }
  .app-main { padding-bottom: 6.5rem; }
  .mob-more { display: block; }
}

/* the "more" drawer on mobile */
.drawer { display: none; }
.drawer[open] { display: block; }
.drawer-panel {
  position: fixed; inset: 0; z-index: 70; background: rgba(6,7,8,.97);
  padding: 5rem var(--gut) 7rem; overflow-y: auto;
}
.drawer-panel a { display: block; padding: 1.15rem 0; border-bottom: 1px solid var(--line-soft); font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase; color: var(--fg-dim); }
.drawer-panel a.on { color: var(--metal); }
.drawer-close { position: fixed; top: 1.4rem; right: var(--gut); z-index: 71; }

/* ==========================================================================
   FLASH
   ========================================================================== */
.flash {
  /* bottom-right: never collides with the app bar, the desk's section rail,
     or a page heading, on any viewport */
  position: fixed; z-index: 90; right: var(--gut); bottom: 1.6rem;
  max-width: min(420px, calc(100vw - 2rem));
  border: 1px solid var(--metal-line); background: rgba(18,20,22,.97); backdrop-filter: blur(10px);
  padding: .95rem 1.4rem; font-size: .75rem; letter-spacing: .05em; color: var(--fg);
  animation: rise 700ms var(--ease) both;
}
@media (max-width: 900px) {
  .flash { bottom: 5.6rem; left: var(--gut); right: var(--gut); max-width: none; }
}
.flash.err { border-color: rgba(179,116,97,.5); color: var(--neg); }

/* ==========================================================================
   PRINT-ish utilities
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }