/* ==========================================================================
   kolzivosolution — design system v2 · "Kiln"
   --------------------------------------------------------------------------
   Canonical source: design.md. Every page reads design.md before emitting code.
   Tailwind CDN config in header.ejs mirrors these values as hex — tokens.css
   stays the canonical source. Do not introduce inline colour values in views.

   Direction: slate paper, one lemon accent spent as a fill, varied radius,
   tinted shadows, sentence-case everywhere (no all-caps micro-labels), grain
   over flat fill.
   --------------------------------------------------------------------------
   Anti-tell rules held here:
   · no exposed hairline grid rails        · no zero-radius-everywhere
   · no all-caps eyebrow above headings    · no middle-dot meta strings
   · no lowercase display type             · no blue/violet accent
   · no three-equal-card feature row       · no stat-card kit
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* surfaces — slate sheet, stepped */
  --color-paper:       #EEF1F3;
  --color-paper-2:     #E5EAED;
  --color-paper-3:     #D8DFE3;
  --color-surface:     #FFFFFF;

  /* text — cool-tinted neutrals, one family, never pure black */
  --color-ink:         #15181C;
  --color-ink-2:       #464C52;
  --color-ink-3:       #676E75;

  /* lines */
  --color-rule:        #D9DFE3;
  --color-rule-2:      #C0C8CE;

  /* the one accent — lemon, spent as a fill. Dark gold carries the text role,
     because a light fill cannot hold readable type as a text colour. */
  --color-accent:       #F2C200;
  --color-accent-hover: #D9AD00;
  --color-accent-deep:  #7A5A00;
  --color-accent-wash:  #FBF2CE;
  --color-accent-ink:   #1A1712;
  --color-focus:        #7A5A00;

  /* the plate — one flooded dark band per page, at the close */
  --color-band:           #15181B;
  --color-on-band:        #F1F3F4;
  --color-on-band-2:      #A3ADB4;
  --color-band-rule:      #2E353B;
  --color-band-rule-soft: #4A545C;

  /* the one permitted semantic exception — destructive actions stay red */
  --color-danger:      #A63A2E;
  --color-danger-wash: #F7E9E6;
  --color-danger-rule: #E2BDB7;

  /* ST baseline contract — variable names locked, values re-pointed */
  --primary:      #F2C200;   /* = --color-accent */
  --primary-soft: #7A5A00;   /* = --color-accent-deep */

  /* type — Bricolage Grotesque display / Instrument Sans body / JetBrains Mono data */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 700;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   1.3125rem;
  --text-xl:   1.75rem;

  --text-display: clamp(44px, 7.4vw, 92px);
  --text-section: clamp(1.75rem, 3.2vw, 2.625rem);
  --text-numeral: clamp(96px, 17vw, 240px);

  --tracking-display: -0.035em;
  --tracking-tight:   -0.02em;
  --tracking-label:   0.01em;

  /* space — 4-point named scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* shell */
  --shell-max: 1240px;
  --shell-pad: var(--space-md);

  /* radius — varied by hierarchy, never uniform */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* elevation — cool-tinted, never black */
  --shadow-xs: 0 1px 2px rgba(16, 24, 27, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 27, 0.05), 0 4px 12px -6px rgba(16, 24, 27, 0.10);
  --shadow-md: 0 2px 4px rgba(16, 24, 27, 0.04), 0 14px 32px -16px rgba(16, 24, 27, 0.18);
  --shadow-lg: 0 4px 8px rgba(16, 24, 27, 0.04), 0 32px 64px -28px rgba(16, 24, 27, 0.24);

  /* motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-short: 160ms;
  --dur-mid:   240ms;
  --dur-long:  520ms;

  --nav-h: 4.25rem;
}

/* --------------------------------------------------------------------------
   1b · Reset — the views previously leaned on the Tailwind Play CDN preflight
   for these normalisations. Declared here so the project ships with no
   external CSS or JS at all. Scope covers only what this project renders.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body { margin: 0; }

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, pre, dl, dd { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

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

table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; }

/* --------------------------------------------------------------------------
   2 · Base
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* grain — breaks the digital flatness of pure vector fills */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100%;
  z-index: 1000;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: top var(--dur-short) var(--ease-out);
}
.skip-link:focus { top: var(--space-sm); }

/* the ambient ground — a soft top wash, replacing the exposed rail grid */
.rails {
  position: fixed;
  inset: 0 0 auto 0;
  height: 60vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(242, 194, 0, 0.16), transparent 62%),
    radial-gradient(90% 70% at 4% -18%, rgba(242, 194, 0, 0.08), transparent 58%);
}

/* --------------------------------------------------------------------------
   3 · Layout
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell--narrow { max-width: 720px; }

.section         { padding-block: var(--space-3xl); }
.section--tight  { padding-block: var(--space-2xl); }
.section--hero   { padding-block: var(--space-2xl) var(--space-3xl); }

.section--paper2 {
  background: var(--color-paper-2);
}
.section--rule-top    { border-top: 1px solid var(--color-rule); }
.section--rule-bottom { border-bottom: 1px solid var(--color-rule); }

/* the plate — the page's one flooded close, inset inside the shell */
.plate,
.section--band {
  position: relative;
  overflow: clip;
  background: var(--color-band);
  color: var(--color-on-band);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-lg);
}
@media (min-width: 768px) {
  .plate,
  .section--band { padding: var(--space-2xl) var(--space-2xl); }
}
.plate > *,
.section--band > * { position: relative; z-index: 1; }
.section--band .h-display,
.section--band .h-section,
.section--band .h-card,
.section--band .ledger__title,
.section--band .strip__v { color: var(--color-on-band); }
.section--band .lead,
.section--band .body-sm,
.section--band p { color: var(--color-on-band-2); }
.section--band .eyebrow,
.section--band .mono-num { color: var(--color-on-band-2); }
.section--band .bar { background: var(--color-on-band); }
.section--band .chip { border-color: var(--color-band-rule-soft); color: var(--color-on-band-2); }

.section--band .btn-primary {
  background: var(--color-on-band);
  color: var(--color-band);
  border-color: var(--color-on-band);
}
.section--band .btn-primary:hover {
  background: var(--color-on-band-2);
  border-color: var(--color-on-band-2);
}

/* page frame — sticky-footer column */
.page      { position: relative; min-height: 100dvh; display: flex; flex-direction: column; }
.page-main { position: relative; z-index: 1; flex: 1; }
.scroll-x  { overflow-x: auto; }

.rule     { border: 0; border-top: 1px solid var(--color-rule); margin: 0; }
.rule-ink { border: 0; border-top: 1px solid var(--color-ink);    margin: 0; }

/* --------------------------------------------------------------------------
   4 · Type
   -------------------------------------------------------------------------- */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: normal;
  font-size: var(--text-display);
  line-height: 0.96;
  letter-spacing: var(--tracking-display);
  text-transform: none;
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

.h-section {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: var(--text-section);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

.h-card {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: var(--text-md);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}

.lead {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-ink-2);
  max-width: 34rem;
}

.body-sm {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink-2);
}

/* label voice — sentence case, medium weight, no tracking-out, no caps */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--color-accent-deep);
}
.eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-deep);
}
.eyebrow--accent { color: var(--color-accent-deep); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.mono-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-accent-deep);
  font-variant-numeric: tabular-nums;
}

.section-head {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  max-width: 46rem;
}
.section-head > .lead { margin-top: var(--space-2xs); }

.link-quiet {
  color: var(--color-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule-2);
  padding-bottom: 1px;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.link-quiet:hover { color: var(--color-accent-deep); border-color: var(--color-accent-deep); }

.link-accent {
  color: var(--color-accent-deep);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.link-accent:hover { color: var(--color-ink); }

/* --------------------------------------------------------------------------
   5 · Buttons — pill primary, quiet outline, plain text tertiary
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-ghost,
.btn-danger,
.btn-on-band {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  min-height: 2.875rem;
  padding: 0 1.5rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.btn-primary:active,
.btn-ghost:active,
.btn-danger:active,
.btn-on-band:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: 1px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { border-color: var(--color-ink-3); color: var(--color-ink); }

.btn-danger {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-danger-rule);
}
.btn-danger:hover { background: var(--color-danger-wash); }

/* tertiary — a plain text action, used to thin out button rows */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  padding: 0.5rem 0.25rem;
  transition: color var(--dur-short) var(--ease-out);
}
.btn-text:hover { color: var(--color-accent-deep); }
.btn-text::after { content: "\2192"; transition: transform var(--dur-short) var(--ease-out); }
.btn-text:hover::after { transform: translateX(3px); }

.btn-primary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled,
.btn-on-band:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.btn-sm { font-size: var(--text-xs); min-height: 2.25rem; padding: 0 1rem; }
.btn-block { width: 100%; }

.btn-on-band {
  background: transparent;
  color: var(--color-on-band);
  border: 1px solid var(--color-band-rule-soft);
}
.btn-on-band:hover {
  color: var(--color-band);
  border-color: var(--color-on-band);
  background: var(--color-on-band);
}

/* --------------------------------------------------------------------------
   6 · Surfaces — real elevation, varied radius, never a uniform kit
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.card--paper2 { background: var(--color-paper-2); }

/* panel — the working surface inside the console */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  background: color-mix(in oklab, var(--color-paper-2) 55%, var(--color-surface));
}
.panel__body { padding: var(--space-md); }

/* --------------------------------------------------------------------------
   7 · Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--space-3xs); }
.form-stack { display: grid; gap: var(--space-md); }

.label {
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--color-ink-2);
}

.input,
.select,
.textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.35;
  min-height: 2.875rem;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  padding: 0.6875rem 0.875rem;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: border-color var(--dur-short) var(--ease-out),
              box-shadow var(--dur-short) var(--ease-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--color-ink-3); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--color-ink-3); }

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--color-accent-deep);
  outline-color: var(--color-focus);
  box-shadow: 0 0 0 4px var(--color-accent-wash);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--color-paper-2);
  color: var(--color-ink-3);
  cursor: not-allowed;
}
.textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

.help { font-size: var(--text-xs); color: var(--color-ink-3); min-height: 1lh; }
.help--ok     { color: var(--color-accent-deep); }
.help--danger { color: var(--color-danger); }

.alert-danger {
  font-size: var(--text-sm);
  color: var(--color-danger);
  background: var(--color-danger-wash);
  border: 1px solid var(--color-danger-rule);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm);
}

/* --------------------------------------------------------------------------
   8 · Chips, tags, badges — sentence case, filled soft, pill
   -------------------------------------------------------------------------- */
.chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.6875rem;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  padding: 0.1875rem 0.625rem;
  white-space: nowrap;
}
.badge--ok      { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.badge--warn    { color: var(--color-ink-2); background: var(--color-paper-2); border-color: var(--color-rule); }
.badge--danger  { color: var(--color-danger); background: var(--color-danger-wash); border-color: var(--color-danger-rule); }
.badge--neutral { color: var(--color-ink-2); background: var(--color-paper-2); border-color: var(--color-rule); }

.method {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: none;
  border: 1px solid;
  border-radius: var(--radius-xs);
  padding: 0.125rem 0.4375rem;
}
.method--get  { color: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.method--post { color: var(--color-ink);    border-color: var(--color-ink); }

/* --------------------------------------------------------------------------
   9 · Split layouts — diptych, evidence, ledger, strip
   -------------------------------------------------------------------------- */
.diptych {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 1024px) {
  .diptych {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
  .diptych > .diptych__text  { grid-column: 1 / span 6; }
  .diptych > .diptych__aside { grid-column: 8 / span 5; }
  .diptych--flip > .diptych__text  { grid-column: 7 / span 6; }
  .diptych--flip > .diptych__aside { grid-column: 1 / span 5; }
}

.diptych__text { display: grid; gap: var(--space-md); align-content: start; }
.diptych__aside { display: grid; gap: var(--space-md); align-content: start; }
.diptych__aside--center { align-content: center; }

/* evidence panel — a soft raised sheet */
.evidence {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.evidence__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  background: color-mix(in oklab, var(--color-paper-2) 55%, var(--color-surface));
}
.evidence__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}
.evidence__row:last-child { border-bottom: 0; }
.evidence__row > * { min-width: 0; overflow-wrap: anywhere; }
a.evidence__row { text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
a.evidence__row:hover { background: var(--color-paper-2); }
.evidence__k { font-size: var(--text-base); color: var(--color-ink); font-weight: 500; }
.evidence__v {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--color-ink-3);
  text-align: right;
}

/* ledger — ruled entries, radius-free inside a rounded sheet */
.ledger {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ledger__row {
  display: grid;
  gap: var(--space-2xs) var(--space-md);
  padding: var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out);
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__row:hover { background: var(--color-paper-2); }
@media (min-width: 768px) {
  .ledger__row { grid-template-columns: 3rem 1fr; }
  .ledger__body { grid-column: 2; }
}
.ledger__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--color-ink);
}
.ledger__desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink-2);
  max-width: 44rem;
}
.ledger__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); margin-top: var(--space-2xs); }

/* strip — metric cells inside a rounded sheet */
.strip {
  display: grid;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
@media (min-width: 640px)  { .strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .strip { grid-template-columns: repeat(4, 1fr); } }

.strip__item {
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-md);
  border-inline-start: 1px solid var(--color-rule);
  border-top: 1px solid var(--color-rule);
}
.strip__item:first-child { border-top: 0; }
@media (min-width: 1024px) { .strip__item { border-top: 0; } }
.strip__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.025em;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   10 · Constructed objects — abstract data geometry, never fake screenshots
   -------------------------------------------------------------------------- */

/* the accent tick — a short signal bar, used as a section opener */
.bar {
  display: block;
  width: 2.5rem;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* the cropped numeral — art, not a heading */
.numeral {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-numeral);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: color-mix(in oklab, var(--color-ink) 8%, transparent);
  user-select: none;
  overflow: clip;
}
.numeral--signal { color: var(--color-accent-deep); }

/* a solid full stop */
.period {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-deep);
  vertical-align: baseline;
}

/* the register — a small ring, kept as a folio device */
.register {
  position: relative;
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-ink);
  border-radius: 50%;
}
.register::before,
.register::after {
  content: "";
  position: absolute;
  background: var(--color-ink);
}
.register::before { top: -0.3125rem; bottom: -0.3125rem; left: 50%; width: 1px; }
.register::after  { left: -0.3125rem; right: -0.3125rem; top: 50%; height: 1px; }

.quarter {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-accent);
  border-radius: 0 0 100% 0;
  transform-origin: top right;
  transition: transform var(--dur-mid) var(--ease-out);
}
.quarter:hover { transform: rotate(90deg); }

.stepped { display: grid; gap: var(--space-2xs); align-content: end; }
.stepped__bar {
  height: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  transition: width var(--dur-mid) var(--ease-out);
}
.stepped__bar--1 { width: 20%; background: var(--color-accent); }
.stepped__bar--2 { width: 40%; }
.stepped__bar--3 { width: 60%; background: var(--color-accent); }
.stepped__bar--4 { width: 80%; }
.stepped__bar--5 { width: 100%; background: var(--color-accent); }
.stepped:hover .stepped__bar--1 { width: 30%; }
.stepped:hover .stepped__bar--3 { width: 70%; }

.dots {
  aspect-ratio: 1 / 1;
  background-image: radial-gradient(var(--color-ink) 1px, transparent 1.2px);
  background-size: 8px 8px;
  opacity: 0.28;
  border-radius: var(--radius-md);
}

.figure {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-md);
  box-shadow: var(--shadow-xs);
}
.figure__cap { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-3); }

/* a cell matrix inside a rounded sheet */
.cells {
  display: grid;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
@media (min-width: 768px) { .cells { grid-template-columns: repeat(3, 1fr); } }
.cells__cell {
  padding: var(--space-lg) var(--space-md);
  border-top: 1px solid var(--color-rule);
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}
.cells__cell:first-child { border-top: 0; }
@media (min-width: 768px) {
  .cells__cell { border-top: 0; border-inline-start: 1px solid var(--color-rule); }
  .cells__cell:nth-child(3n + 1) { border-inline-start: 0; }
  .cells--2 { grid-template-columns: repeat(2, 1fr); }
  .cells--2 > .cells__cell { border-top: 1px solid var(--color-rule); }
  .cells--2 > .cells__cell:nth-child(-n + 2) { border-top: 0; }
  .cells--2 > .cells__cell:nth-child(2n + 1) { border-inline-start: 0; }
}

/* --------------------------------------------------------------------------
   10b · Icons & media — Phosphor bold, one weight across the whole site
   -------------------------------------------------------------------------- */

/* the icon tile — a soft square holding a single glyph */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  font-size: 1.375rem;
  line-height: 1;
}
.icon-tile--solid { background: var(--color-accent); color: var(--color-accent-ink); }
.icon-tile--sm { width: 2rem; height: 2rem; border-radius: var(--radius-sm); font-size: 1.0625rem; }

/* on the dark plate and dark cells, re-ink the tile */
.section--band .icon-tile,
.bento__cell--feature .icon-tile {
  background: color-mix(in oklab, var(--color-paper) 16%, transparent);
  color: var(--color-paper);
}

/* a glyph that sits inline beside a heading or a list row */
.icon-inline {
  font-size: 1.125rem;
  color: var(--color-accent-deep);
  line-height: 1;
}
.section--band .icon-inline { color: var(--color-on-band); }

/* a text row that leads with a glyph */
.k-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
}
.k-icon > i { flex: 0 0 auto; }

/* media frame — for generated imagery */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-rule);
  background: var(--color-paper-2);
  box-shadow: var(--shadow-sm);
}
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }

/* channel cards — the image-led grid */
.channel-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.channel-card {
  display: grid;
  align-content: start;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out);
}
.channel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.channel-card .media { border: 0; border-radius: 0; box-shadow: none; }
.channel-card__body { display: grid; gap: var(--space-2xs); padding: var(--space-md); }
.channel-card__head { display: flex; align-items: center; gap: var(--space-xs); }

/* a wide image band — depth between sections */
.band-media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-md);
}
.band-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.band-media__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-lg);
  background: linear-gradient(to top, rgba(16, 24, 27, 0.88), rgba(16, 24, 27, 0));
  color: var(--color-on-band);
  display: grid;
  gap: var(--space-3xs);
}
.band-media__overlay h2,
.band-media__overlay h3,
.band-media__overlay .h-card { color: var(--color-on-band); }
.band-media__overlay p { color: color-mix(in oklab, var(--color-on-band) 80%, transparent); }

/* --------------------------------------------------------------------------
   11 · Hero & bento — the asymmetric front page
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: var(--space-2xl) var(--space-3xl); }
.hero__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
}
.hero__copy { display: grid; gap: var(--space-md); align-content: center; }
.hero__copy .lead { max-width: 32rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-2xs); }

/* the hero visual — a photographic frame, offset past the fold */
.hero__object { position: relative; }
@media (min-width: 1024px) {
  .hero__object { margin-right: calc(var(--space-xl) * -1); }
}
.hero__figure {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-rule);
  box-shadow: var(--shadow-lg);
  background: var(--color-paper-2);
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }

/* a floating chip that breaks the panel edge */
.hero__float {
  position: absolute;
  left: calc(var(--space-lg) * -1);
  bottom: var(--space-lg);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-md);
  padding: 0.625rem 0.875rem;
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 0.125rem;
}
.hero__float-k { font-size: var(--text-2xs); color: var(--color-ink-3); }
.hero__float-v { font-size: var(--text-sm); font-weight: 600; }

/* bento — mixed-size asymmetric tile grid (no three-equal-card row) */
.bento {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px)  { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.bento__cell {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-mid) var(--ease-out),
              box-shadow var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out);
}
.bento__cell:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-rule-2);
}
.bento__cell--wide { grid-column: span 3; }
.bento__cell--half { grid-column: span 3; }
.bento__cell--third { grid-column: span 2; }
@media (max-width: 1023px) {
  .bento__cell--wide,
  .bento__cell--half,
  .bento__cell--third { grid-column: auto; }
}
.bento__cell--feature {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.bento__cell--feature .h-card,
.bento__cell--feature .stat__v { color: var(--color-paper); }
.bento__cell--feature .body-sm,
.bento__cell--feature p { color: color-mix(in oklab, var(--color-paper) 72%, transparent); }
.bento__cell--feature .chip { background: color-mix(in oklab, var(--color-paper) 12%, transparent); border-color: transparent; color: var(--color-paper); }

/* zig-zag feature row — text and object alternate sides */
.zig {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 1024px) {
  .zig { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl); }
  .zig__text  { grid-column: 1 / span 5; }
  .zig__aside { grid-column: 7 / span 6; }
  .zig--flip .zig__text  { grid-column: 8 / span 5; }
  .zig--flip .zig__aside { grid-column: 1 / span 6; }
}
.zig__text  { display: grid; gap: var(--space-sm); align-content: center; }
.zig__aside { display: grid; gap: var(--space-sm); align-content: center; }

/* quote — one lead pull-quote + supporting smaller entries */
.quote-lead {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--space-md);
}
.quote-lead__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  text-wrap: pretty;
}
.quote-lead__by { display: flex; align-items: center; gap: var(--space-xs); }
.quote-lead__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-wash);
  color: var(--color-accent-deep);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-family: var(--font-display);
}

/* --------------------------------------------------------------------------
   12 · Nav
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--color-paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--color-rule);
}
.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--nav-h);
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__tail { color: var(--color-accent-deep); }

.nav__links { display: none; align-items: center; gap: var(--space-2xs); }
.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  transition: color var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink); background: var(--color-paper-2); }
.nav__link--active { color: var(--color-accent-deep); background: var(--color-accent-wash); }

.nav__actions { display: none; align-items: center; gap: var(--space-2xs); }
.nav__drawer-auth { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); padding-top: var(--space-md); }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}
.nav__toggle:hover { border-color: var(--color-ink-3); }

.nav__drawer {
  display: none;
  border-top: 1px solid var(--color-rule);
  background: var(--color-paper);
}
.nav__drawer[data-open="true"] { display: block; }
.nav__drawer-inner {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-sm) var(--space-md);
}
.nav__drawer .nav__link {
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
}

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__actions { display: flex; }
  .nav__toggle { display: none; }
  .nav__drawer { display: none !important; }
}

/* --------------------------------------------------------------------------
   13 · Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 1;
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-2xl) var(--space-lg);
  margin-top: var(--space-3xl);
}
.footer__mast {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-lg);
}
@media (min-width: 900px) {
  .footer__mast { grid-template-columns: minmax(0, 20rem) 1fr; gap: var(--space-2xl); }
}
.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  text-decoration: none;
}
.footer__tagline { font-size: var(--text-sm); line-height: 1.6; max-width: 32ch; margin-top: var(--space-xs); }
.footer__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
.footer__gtitle {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}
.footer__links { display: grid; gap: 0.5rem; font-size: var(--text-sm); }
.footer__link {
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.footer__link:hover { color: var(--color-accent-deep); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

/* --------------------------------------------------------------------------
   14 · Console shell — top navigation, not a left rail
   -------------------------------------------------------------------------- */
.app { display: block; }

/* the account strip that replaced the sidebar */
.side {
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper-2);
}
.side__nav { display: none; }
.side__link { display: none; }
.side__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--space-xs) var(--shell-pad);
}
.side__foot .help { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }

.work {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--space-lg) var(--shell-pad) var(--space-2xl);
}
@media (min-width: 1024px) { .work { padding-top: var(--space-xl); } }

.work__col { max-width: 44rem; display: grid; gap: var(--space-md); }
.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.work__head h1 { margin-top: var(--space-xs); }

/* the console tab bar */
.worknav {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  overflow-x: auto;
  margin-bottom: var(--space-lg);
  padding: 0.375rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
  scrollbar-width: none;
}
.worknav::-webkit-scrollbar { display: none; }
.worknav__link {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--color-ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.4375rem 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.worknav__link:hover { color: var(--color-ink); background: var(--color-paper-2); }
.worknav__link--active {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* the summary strip — cells inside one rounded sheet */
.grid-stats {
  display: grid;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}
@media (min-width: 640px)  { .grid-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .grid-stats--3 { grid-template-columns: repeat(3, 1fr); } }
.stat {
  padding: var(--space-md);
  display: grid;
  gap: var(--space-3xs);
  border-top: 1px solid var(--color-rule);
  border-inline-start: 1px solid var(--color-rule);
}
.stat:first-child { border-top: 0; }
@media (min-width: 1024px) { .stat { border-top: 0; } }
.stat__k { font-size: var(--text-sm); color: var(--color-ink-3); }
.stat__v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: -0.025em;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.table th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: none;
  color: var(--color-ink-3);
  padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
  border-bottom: 1px solid var(--color-rule);
  white-space: nowrap;
}
.table td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink-2);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-paper-2); }
.table__empty { text-align: left; padding: var(--space-xl) 0; color: var(--color-ink-3); }

.kv-list { display: grid; }
.kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out);
}
.kv-row:first-child { border-top: 0; }
.kv-row:last-child { border-bottom: 0; }
.kv-row:hover { background: var(--color-paper-2); }

/* --------------------------------------------------------------------------
   15 · Long Document — legal pages
   -------------------------------------------------------------------------- */
.doc { max-width: 68ch; }
.doc__meta { font-size: var(--text-sm); color: var(--color-ink-3); }
.doc h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: var(--text-lg);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-ink);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
}
.doc h2:first-child { margin-top: 0; }
.doc h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-ink);
  margin-top: var(--space-md);
  margin-bottom: var(--space-2xs);
}
.doc p { margin-bottom: var(--space-sm); color: var(--color-ink-2); }
.doc ul { margin: var(--space-sm) 0; padding-left: var(--space-md); }
.doc li { margin-bottom: 0.375rem; color: var(--color-ink-2); }
.doc strong { color: var(--color-ink); font-weight: 600; }
.doc a { color: var(--color-accent-deep); text-decoration: none; border-bottom: 1px solid var(--color-accent-wash); }
.doc a:hover { border-bottom-color: var(--color-accent-deep); }
.doc__contact {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-md);
}
.doc__contact p { margin-bottom: 0.25rem; }

/* --------------------------------------------------------------------------
   16 · Code
   -------------------------------------------------------------------------- */
.code {
  background: var(--color-band);
  color: var(--color-on-band);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.code .c-key { color: #F2C200; font-weight: 600; }
.code .c-str { color: #9FD3C7; }
.code .c-var { color: #A3ADB4; }
.code .c-com { color: #6E7C82; }

.code-inline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xs);
  padding: 0.125rem 0.375rem;
}

/* --------------------------------------------------------------------------
   17 · Auth
   -------------------------------------------------------------------------- */
.auth { padding-block: var(--space-3xl); }
.auth__panel {
  max-width: 27rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-xl);
}
.auth__head { display: grid; gap: var(--space-3xs); margin-bottom: var(--space-lg); }
.auth__foot { font-size: var(--text-sm); color: var(--color-ink-3); margin-top: var(--space-md); }
@media (max-width: 480px) { .auth__panel { padding: var(--space-lg); } }

/* --------------------------------------------------------------------------
   18 · Reveal — one orchestrated entrance, CSS-only, no library
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal-in var(--dur-long) var(--ease-out) forwards;
}
.reveal--1 { animation-delay: 60ms; }
.reveal--2 { animation-delay: 140ms; }
.reveal--3 { animation-delay: 220ms; }
.reveal--4 { animation-delay: 300ms; }
.reveal--5 { animation-delay: 380ms; }

@keyframes reveal-in {
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19 · Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .quarter:hover,
  .stepped:hover .stepped__bar--1,
  .stepped:hover .stepped__bar--3 { transform: none; width: auto; }
  .bento__cell:hover,
  .channel-card:hover { transform: none; }
  .btn-text:hover::after { transform: none; }
}

/* --------------------------------------------------------------------------
   20 · Responsive guard — 320 / 375 / 414 / 768
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .shell { padding-inline: var(--space-sm); }
  .side__foot { padding-inline: var(--space-sm); }
  .work { padding-inline: var(--space-sm); }
  .hero__float { left: var(--space-sm); }
  .btn-primary,
  .btn-ghost,
  .btn-danger,
  .btn-on-band { padding-inline: 1.125rem; }
}

/* --------------------------------------------------------------------------
   21 · Spacing helpers
   The handful of utilities the views previously took from the Tailwind Play
   CDN. Defined locally so the site ships with no external CSS or JS at all.
   -------------------------------------------------------------------------- */
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-6 { margin-bottom: 1.5rem; }