/* ==========================================================================
   kinefoliosolution — design system
   genre: modern-tech (dark) · macrostructure: Photographic Marquee
   --------------------------------------------------------------------------
   Black-dominant sheet, #F3F3F4 light bands, white bento cards, brand blue
   #0061FF with a cyan #7FDFFD / #06BDE0 second tone. Space Grotesk (display)
   + Source Sans 3 (body). Pill buttons, 12px cards. Self-hosted type.
   No external CDN. Do not introduce inline colour values in views.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Preflight — Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }

ul, ol { list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

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

/* --------------------------------------------------------------------------
   1 · Tokens — studied from the reference (black + #0061FF / #7FDFFD)
   -------------------------------------------------------------------------- */
:root {
  /* surfaces — black ground, stepped dark panels */
  --color-paper:   #000000;
  --color-paper-2: #0c121a;   /* stepped dark */
  --color-paper-3: #181e26;   /* raised panel */
  --color-surface: #181e26;
  --color-surface-2: #242a31;

  /* text — near-white, stepped down */
  --color-ink:   #f9f9f9;
  --color-ink-2: #a6a8ab;
  --color-ink-3: #66696e;

  /* lines */
  --color-rule:   #242a31;
  --color-rule-2: #454a50;

  /* the brand — blue, with a cyan second tone */
  --color-accent:      #0061ff;
  --color-accent-deep: #509aff;   /* accent as text on black */
  --color-accent-soft: #a0d3ff;
  --color-accent-wash: #01153d;   /* dark blue tint */
  --color-accent-ink:  #ffffff;
  --color-cyan:        #7fdffd;
  --color-teal:        #06bde0;
  --color-focus:       #509aff;

  /* the one gradient statement band */
  --grad-band: linear-gradient(135deg, #06bde0 0%, #0061ff 100%);

  /* the light band */
  --color-light:       #f3f3f4;
  --color-on-light:    #0c121a;
  --color-on-light-2:  #454a50;
  --color-on-light-3:  #66696e;
  --color-light-rule:  #e7e7e8;

  /* on-gradient / on-blue */
  --color-on-band:      #ffffff;
  --color-on-band-2:    #eaf5ff;
  --color-band-rule:    rgba(255, 255, 255, 0.34);
  --color-band-rule-soft: rgba(255, 255, 255, 0.24);

  /* reserved semantic exceptions */
  --color-danger:      #ff6b6b;
  --color-danger-wash: #2a1416;
  --color-danger-rule: #5c2b30;
  --color-ok:          #4fd1a1;
  --color-ok-wash:     #0d2419;

  /* type */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Source Sans 3", system-ui, sans-serif; /* tabular labels */
  --display-weight: 500;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5rem;
  --text-xl:   2rem;

  --text-display: clamp(2.25rem, 4.6vw, 3.25rem);
  --text-section: clamp(1.75rem, 3.1vw, 2.75rem);

  --tracking-display: -0.02em;
  --tracking-label:   0.02em;

  /* space — 4pt 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-max: 1280px;
  --shell-pad: var(--space-md);

  /* radius — pills for actions, 12px for surfaces, 5px tiles */
  --radius-tile:  5px;
  --radius-sm:    10px;
  --radius-card:  12px;
  --radius-lg:    20px;
  --radius-input: 12px;
  --radius-btn:   64px;
  --radius-pill:  9999px;

  /* depth is carried by colour steps, not glow (matches the reference) */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 18px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.6);

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short:  160ms;
  --dur-mid:    240ms;
  --dur-reveal: 560ms;
}

/* --------------------------------------------------------------------------
   2 · Base
   -------------------------------------------------------------------------- */
html { 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;
}

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

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

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -120%;
  z-index: 200;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-btn);
  font-weight: 600;
  transition: top var(--dur-short) var(--ease-out);
}
.skip-link:focus { top: var(--space-sm); }

.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-repeat: repeat;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");
}

.rails {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
}

.page { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.page-main { position: relative; z-index: 1; flex: 1; }
.footer { position: relative; z-index: 1; }

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

.section          { padding-block: var(--space-3xl); }
.section--tight   { padding-block: var(--space-xl); }
.section--hero    { padding-block: var(--space-3xl); }
.section--paper2,
.section--light   { background: var(--color-light); color: var(--color-on-light); }
.section--rule-top    { border-top: 1px solid var(--color-rule); }
.section--rule-bottom { border-bottom: 1px solid var(--color-rule); }

/* text re-inked on a light band */
.section--light .h-display,
.section--light .h-section,
.section--light .h-card,
.section--light .strip__v,
.section--light .stat__v,
.section--light .ledger__title,
.section--light .evidence__k,
.section--light .doc h2 { color: var(--color-on-light); }
.section--light .lead,
.section--light .body-sm,
.section--light p { color: var(--color-on-light-2); }
.section--light .eyebrow,
.section--light .label,
.section--light .mono-num,
.section--light .doc__meta { color: var(--color-on-light-3); }
.section--light .card,
.section--light .panel,
.section--light .evidence { background: #fff; border-color: var(--color-light-rule); }
.section--light .panel__head { background: #f9f9f9; border-color: var(--color-light-rule); }
.section--light .evidence__head { background: #f9f9f9; border-color: var(--color-light-rule); }
.section--light .evidence__row,
.section--light .kv-row,
.section--light .panel__head { border-color: var(--color-light-rule); }
.section--light .ledger__row { border-color: var(--color-light-rule); }
.section--light .chip { background: #eaf5ff; color: #0045be; }
.section--light .btn-ghost { background: transparent; color: var(--color-on-light); border-color: var(--color-light-rule); }
.section--light .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
.section--light .table th { border-color: var(--color-light-rule); color: var(--color-on-light-3); }
.section--light .table td { border-color: var(--color-light-rule); color: var(--color-on-light-2); }
.section--light .table tbody tr:hover { background: #f9f9f9; }
.section--light .progress { background: #e7e7e8; }

/* the one statement band — cyan → brand blue */
.plate,
.section--band {
  position: relative;
  overflow: clip;
  background: var(--grad-band);
  color: var(--color-on-band);
}
.plate > *, .section--band > * { position: relative; z-index: 1; }
.section--band .h-display,
.section--band .h-section,
.section--band .h-card,
.section--band .strip__v,
.section--band .stat__v,
.section--band .ledger__title { 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,
.section--band .label { color: var(--color-on-band-2); }
.section--band .chip { border-color: var(--color-band-rule); background: transparent; color: var(--color-on-band-2); }

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

/* --------------------------------------------------------------------------
   4 · Type
   -------------------------------------------------------------------------- */
.h-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.h-section {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-section);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.h-card {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
.lead {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-ink-2);
  max-width: 40rem;
}
.body-sm { font-size: var(--text-base); line-height: 1.6; color: var(--color-ink-2); }

.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);
  color: var(--color-ink-2);
}
.eyebrow--accent { color: var(--color-cyan); }
.eyebrow--muted { color: var(--color-ink-3); }

.mono { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.mono-num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-accent-deep);
  font-variant-numeric: tabular-nums;
}

.section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); max-width: 46rem; }

.link-quiet {
  color: var(--color-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-rule-2);
  transition: color var(--dur-short) var(--ease-out);
}
.link-quiet:hover { 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-cyan); }

/* --------------------------------------------------------------------------
   5 · Buttons — pill, solid brand blue / outline
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-ghost,
.btn-on-band,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  min-height: 3rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  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);
}
.btn-primary:disabled,
.btn-ghost:disabled,
.btn-on-band:disabled,
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-primary:hover { background: #0045be; border-color: #0045be; }

.btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.btn-ghost:hover { border-color: var(--color-ink); color: #fff; }

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

.btn-on-band { background: #fff; color: var(--color-accent); border-color: #fff; }
.btn-on-band:hover { background: var(--color-on-band-2); border-color: var(--color-on-band-2); }

.btn-sm { font-size: var(--text-sm); padding: 0.625rem 1.125rem; min-height: 2.5rem; border-radius: var(--radius-btn); }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   6 · Surfaces
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}
.card--paper2 { background: var(--color-paper-2); }

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.panel__head { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); background: var(--color-paper-2); }
.panel__body { padding: var(--space-lg); }

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

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

.input, .select, .textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.3;
  min-height: 3rem;
  color: var(--color-ink);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-input);
  padding: 0.6875rem 0.9375rem;
  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 {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 97, 255, 0.25);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--color-paper-3); color: var(--color-ink-3); cursor: not-allowed; }
.textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

.help { font-size: var(--text-sm); color: var(--color-ink-3); }
.help--ok { color: var(--color-ok); }
.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-input);
  padding: var(--space-xs) var(--space-sm);
}
.alert-ok {
  font-size: var(--text-sm);
  color: var(--color-ok);
  background: var(--color-ok-wash);
  border: 1px solid #1c4433;
  border-radius: var(--radius-input);
  padding: var(--space-xs) var(--space-sm);
}

/* --------------------------------------------------------------------------
   8 · Chips / badges
   -------------------------------------------------------------------------- */
.chip {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent-soft);
  background: var(--color-accent-wash);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  padding: 0.1875rem 0.6875rem;
  white-space: nowrap;
}
.badge--ok      { color: var(--color-ok); background: var(--color-ok-wash); border-color: #1c4433; }
.badge--warn    { color: var(--color-ink-2); background: var(--color-paper-3); border-color: var(--color-rule-2); }
.badge--danger  { color: var(--color-danger); background: var(--color-danger-wash); border-color: var(--color-danger-rule); }
.badge--accent  { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }
.badge--neutral { color: var(--color-ink-2); background: var(--color-paper-2); border-color: var(--color-rule-2); }

/* --------------------------------------------------------------------------
   9 · Media
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-paper-3);
}
.media__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media__cap {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
}

/* --------------------------------------------------------------------------
   10 · Grids — bento (white cards on black), cells, cols, strip
   -------------------------------------------------------------------------- */
.bento { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .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: #ffffff;
  color: var(--color-on-light);
  border: 1px solid var(--color-light-rule);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.bento__cell:hover { transform: translateY(-3px); }
.bento__cell .h-card { color: var(--color-on-light); }
.bento__cell .body-sm { color: var(--color-on-light-2); }
.bento__cell--wide { grid-column: span 2; }
@media (min-width: 1024px) {
  .bento__cell { grid-column: span 2; }
  .bento__cell--wide { grid-column: span 4; }
  .bento__cell--full { grid-column: 1 / -1; }
}
.bento__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--radius-tile);
  background: #eaf5ff;
  color: var(--color-accent);
}

.cells { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cells--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cols { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stack { display: grid; gap: var(--space-md); align-content: start; }
.stack--sm { gap: var(--space-sm); }
.stack--xs { gap: var(--space-xs); }
.stack--lg { gap: var(--space-lg); }

.strip { display: grid; gap: 0; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
@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) var(--space-lg); border-inline-start: 1px solid var(--color-rule); }
.strip__item:first-child { border-inline-start: 0; }
.strip__v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--color-ink); }

/* --------------------------------------------------------------------------
   11 · Photographic Marquee — full-bleed hero
   -------------------------------------------------------------------------- */
.marquee { position: relative; overflow: clip; background: #000; }
.marquee__media { position: absolute; inset: 0; z-index: 0; }
.marquee__media img,
.marquee__media video { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.45) 42%, rgba(0,0,0,0.88) 100%);
}
.marquee__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
  padding-block: clamp(5.5rem, 15vh, 10rem);
}
.marquee__title { color: #fff; }
.marquee__lead { color: var(--color-on-band-2); max-width: 46rem; margin-inline: auto; }
.marquee__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }

.hero__line {
  display: block;
  animation: hero-rise var(--dur-reveal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__dot {
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--color-cyan);
  animation: hero-pulse 2.4s var(--ease-out) infinite;
}
@keyframes hero-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.hero__status b { color: var(--color-ink); font-weight: 600; }

/* a dark panel for structured lists (channel workspace) */
.panel-dark {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel-dark__bar {
  display: flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-rule);
}
.panel-dark__dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--color-rule-2); }
.panel-dark__title { margin-inline-start: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-3); }
.panel-dark__body { padding: var(--space-md); display: grid; gap: var(--space-2xs); }
.panel-dark__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
}
.panel-dark__row-k { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-base); color: var(--color-ink); }
.panel-dark__row-v { font-size: var(--text-xs); color: var(--color-ink-3); }
.panel-dark__swatch { width: 0.625rem; height: 0.625rem; border-radius: 3px; background: var(--color-accent); }

/* --------------------------------------------------------------------------
   12 · Ticker / channel strip — the one loop
   -------------------------------------------------------------------------- */
.ticker { position: relative; overflow: hidden; background: var(--color-paper-2); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.ticker__track { display: flex; width: max-content; animation: ticker-scroll 44s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker__group { display: flex; flex: 0 0 auto; }
.ticker__item {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-lg);
  border-inline-start: 1px solid var(--color-rule);
  font-size: var(--text-sm); color: var(--color-ink-3); white-space: nowrap;
}
.ticker__item--signal { color: var(--color-cyan); }
.ticker__item .period { background: var(--color-accent); }

/* --------------------------------------------------------------------------
   13 · Ledger / evidence
   -------------------------------------------------------------------------- */
.ledger { display: grid; }
.ledger__row { display: grid; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
@media (min-width: 768px) { .ledger__row { grid-template-columns: 4rem 1fr; } .ledger__body { grid-column: 2; } }
.ledger__num { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-deep); }
.ledger__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.015em; 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; gap: var(--space-2xs); margin-top: var(--space-xs); }

.evidence { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.evidence__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper-2);
}
.evidence__row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
}
.evidence__row:last-child { border-bottom: 0; }
.evidence__k { font-size: var(--text-base); color: var(--color-ink); font-weight: 500; }
.evidence__v { font-size: var(--text-sm); color: var(--color-ink-3); text-align: right; }

/* --------------------------------------------------------------------------
   14 · Marks
   -------------------------------------------------------------------------- */
.period { display: inline-block; width: 0.45em; height: 0.45em; border-radius: 2px; background: var(--color-cyan); }
.bar { display: block; width: 3rem; height: 3px; border-radius: 2px; background: var(--color-accent); }
.numeral {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.16);
  user-select: none;
}
.dots {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background-image: radial-gradient(var(--color-accent-soft) 1.2px, transparent 1.4px);
  background-size: 10px 10px;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   15 · Nav — solid black
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #000;
  border-bottom: 1px solid var(--color-rule);
}
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 4.375rem; }
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__tail { color: var(--color-cyan); }

/* brand mark — orbit ring + core + satellite */
.brand-mark {
  --mark-ink: var(--color-accent);
  position: relative;
  display: inline-block;
  width: 1.5rem; height: 1.5rem;
  flex: 0 0 auto;
  border: 2px solid var(--mark-ink);
  border-radius: 50%;
}
.brand-mark::before { content: ""; position: absolute; inset: 32%; border-radius: 50%; background: var(--mark-ink); }
.brand-mark::after {
  content: ""; position: absolute; top: -0.1875rem; right: -0.1875rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--color-cyan); 
}
.footer .brand-mark, .side .brand-mark { --mark-ink: var(--color-accent-soft); }
.footer .brand-mark::after, .side .brand-mark::after { background: var(--color-cyan); }

.nav__links { display: none; align-items: center; gap: var(--space-lg); }
.nav__link {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.nav__link:hover { color: #fff; }
.nav__link--active { color: #fff; }
.nav__actions { display: none; align-items: center; gap: var(--space-2xs); }

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

.nav__drawer { display: none; border-top: 1px solid var(--color-rule); background: #000; }
.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); }
.nav__drawer-auth { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding-top: var(--space-md); }

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

/* --------------------------------------------------------------------------
   16 · Footer — black
   -------------------------------------------------------------------------- */
.footer {
  background: #000;
  color: var(--color-ink-2);
  padding-block: var(--space-2xl) var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.footer__mast { display: grid; gap: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
@media (min-width: 900px) { .footer__mast { grid-template-columns: 1.2fr 2fr; gap: var(--space-2xl); } }
.footer__brand { display: grid; gap: var(--space-xs); align-content: start; }
.footer__wordmark {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none;
}
.footer__wordmark .wordmark__tail { color: var(--color-cyan); }
.footer__tagline { font-size: var(--text-base); line-height: 1.6; max-width: 38ch; color: var(--color-ink-2); }
.footer__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(3, 1fr); } }
.footer__gtitle {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-ink-3); margin-bottom: var(--space-xs);
}
.footer__links { display: grid; gap: 0.5rem; }
.footer__link {
  font-size: var(--text-base); color: var(--color-ink-2); text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: left;
}
.footer__link:hover { color: #fff; }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  padding-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-3);
}

/* --------------------------------------------------------------------------
   17 · App shell — console
   -------------------------------------------------------------------------- */
.app { display: flex; min-height: calc(100vh - 4.375rem); }
.side {
  flex: 0 0 16rem; width: 16rem;
  background: #000;
  display: none; flex-direction: column;
  position: sticky; top: 4.375rem; height: calc(100vh - 4.375rem);
  border-right: 1px solid var(--color-rule);
}
@media (min-width: 900px) { .side { display: flex; } }
.side__brand { padding: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.side__brand .wordmark { font-size: 1.125rem; }
.side__nav { flex: 1; padding: var(--space-sm); display: grid; gap: 2px; align-content: start; overflow-y: auto; }
.side__link {
  display: flex; align-items: center; gap: var(--space-xs);
  font-size: var(--text-base); font-weight: 500;
  color: var(--color-ink-2); text-decoration: none; white-space: nowrap;
  padding: 0.625rem 0.75rem; border-radius: var(--radius-sm);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.side__link:hover { background: var(--color-paper-3); color: #fff; }
.side__link--active { background: var(--color-accent); color: #fff; }
.side__foot { border-top: 1px solid var(--color-rule); padding: var(--space-sm) var(--space-md); }
.side__user { color: var(--color-ink); font-size: var(--text-base); word-break: break-all; }

.work { flex: 1; min-width: 0; padding: var(--space-lg) var(--space-md); background: var(--color-paper-2); }
@media (min-width: 1024px) { .work { padding: var(--space-xl); } }
.work__col { max-width: 46rem; 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);
  padding-bottom: var(--space-md); margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
}

.worknav { display: flex; align-items: center; gap: var(--space-2xs); overflow-x: auto; margin-bottom: var(--space-lg); padding-bottom: var(--space-2xs); }
.worknav__link {
  flex: 0 0 auto; font-size: var(--text-sm); font-weight: 500;
  color: var(--color-ink-2); background: var(--color-paper-3);
  border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill);
  padding: 0.375rem 0.875rem; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.worknav__link:hover { color: #fff; border-color: var(--color-ink-3); }
.worknav__link--active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
@media (min-width: 900px) { .worknav { display: none; } }

.grid-stats { display: grid; gap: var(--space-md); 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); } }
.stat {
  background: var(--color-surface); border: 1px solid var(--color-rule);
  border-radius: var(--radius-card); padding: var(--space-md);
  display: grid; gap: var(--space-2xs);
}
.stat__k { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-3); }
.stat__v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--color-ink); }

/* --------------------------------------------------------------------------
   18 · Table / key-value list
   -------------------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.table th {
  text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-3);
  padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
  border-bottom: 1px solid var(--color-rule-2); 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-3); }
.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-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.kv-row:last-child { border-bottom: 0; }

.progress { height: 0.5rem; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.progress__bar { height: 100%; border-radius: var(--radius-pill); background: var(--color-accent); }

/* --------------------------------------------------------------------------
   19 · Long Document — legal pages
   -------------------------------------------------------------------------- */
.doc { max-width: 70ch; }
.doc__meta { font-size: var(--text-sm); color: var(--color-ink-3); }
.doc h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  letter-spacing: -0.015em; color: var(--color-ink);
  margin-top: var(--space-xl); margin-bottom: var(--space-xs);
}
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-3); margin-top: var(--space-lg); 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); list-style: disc; }
.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-rule-2); }
.doc a:hover { border-bottom-color: var(--color-accent); }
.doc__contact { margin-top: var(--space-xl); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); }
.doc__contact p { margin-bottom: 0.25rem; }

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

/* --------------------------------------------------------------------------
   21 · Utility helpers
   -------------------------------------------------------------------------- */
.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* --------------------------------------------------------------------------
   22 · Cookie consent
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed; left: 50%; bottom: var(--space-md); transform: translateX(-50%);
  width: min(64rem, calc(100vw - 2rem)); z-index: 150;
  background: var(--color-paper-3); border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  padding: var(--space-md) var(--space-lg); display: grid; gap: var(--space-md);
}
@media (min-width: 760px) { .cookie { grid-template-columns: 1fr auto; align-items: center; } }
.cookie__text { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 62ch; }
.cookie__text strong { color: var(--color-ink); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.cookie-prefs {
  position: fixed; inset: 0; z-index: 160; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.7); padding: var(--space-md);
}
.cookie-prefs__panel {
  background: var(--color-paper-3); border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  width: min(40rem, 100%); max-height: 90vh; overflow-y: auto;
  padding: var(--space-lg); display: grid; gap: var(--space-md);
}
.cookie-prefs__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.cookie-prefs__row:last-of-type { border-bottom: 0; }
.switch { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-accent); }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   23 · 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;
  }
  .ticker__track { animation: none !important; transform: none !important; }
  .hero__line, .hero__dot { animation: none !important; opacity: 1 !important; transform: none !important; }
  .bento__cell:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   24 · Responsive guard
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .shell { padding-inline: var(--space-sm); }
  .btn-primary, .btn-ghost, .btn-on-band, .btn-danger { padding-inline: 1.125rem; }
  .ticker__item { padding-inline: var(--space-md); }
  .panel__head, .panel__body { padding-inline: var(--space-md); }
  .evidence__row, .evidence__head { padding-inline: var(--space-md); }
}