/* ============================================================================
   Planetary Health Check 2026 — Mission-Control Bento (variant)
   Standalone page at /phc2026/bento. Deep observatory dark theme.
   Everything namespaced "bento-".
   ========================================================================== */

/* ── Brand fonts (self-hosted) ─────────────────────────────────────────────── */
@font-face { font-family: 'Alcyone'; src: url('/fonts/alcyone/Alcyone-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alcyone'; src: url('/fonts/alcyone/Alcyone-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alcyone'; src: url('/fonts/alcyone/Alcyone-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alcyone'; src: url('/fonts/alcyone/Alcyone-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Comma Serif'; src: url('/fonts/comma-serif/4-CommaSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bento-display: 'Bricolage Grotesque', 'Alcyone', system-ui, sans-serif;
  --bento-ui: 'Alcyone', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bento-serif: 'Comma Serif', Georgia, serif;

  /* the signature ramp is theme-independent */
  --grad: linear-gradient(
    to right,
    #006837 0%, #8cc63f 25%, #ffe657 25.01%, #fcce17 30%,
    #df711c 40%, #c31920 60%, #871e5e 80%, #3d1e5e 100%
  );

  --pb-pos: 25%;
  --hr-pos: 39.62%;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── DARK theme — deep observatory (default) ─────────────────────────────────── */
:root,
[data-theme='dark'] {
  --bg-0: #05070d;
  --bg-1: #0a0e18;
  --bg-2: #0f1422;
  --ink: #eef3fb;
  --ink-dim: rgba(238, 243, 251, 0.66);
  --ink-faint: rgba(238, 243, 251, 0.4);
  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.14);
  --glass: rgba(255, 255, 255, 0.025);
  --cyan: #5fd0e6;

  /* surface helpers (theme-aware) */
  --tile-sheen: rgba(255, 255, 255, 0.035);
  --tile-edge: rgba(255, 255, 255, 0.18);
  --tile-bg-mix: 88%;
  --hover-fill: rgba(255, 255, 255, 0.05);
  --tile-shadow: rgba(0, 0, 0, 0.7);
  --drawer-sheen: rgba(255, 255, 255, 0.04);
  --drawer-shadow: rgba(0, 0, 0, 0.8);
  --scrim: rgba(2, 4, 9, 0.6);

  /* hero big-number gradient (light → warm → deep red) */
  --num-grad: linear-gradient(160deg, #fff 10%, #ff8a6a 55%, #c31920 100%);

  /* gauge ink — must read on a dark track */
  --gauge-tick-pb: rgba(255, 255, 255, 0.85);
  --gauge-tick-hr: rgba(255, 255, 255, 0.45);
  --gauge-marker-fg: #fff;     /* used in color-mix() for "hot" emphasis */
  --gauge-track-sat: 1.05;

  /* breach status text */
  --breach-bad: #e8786e;
  --breach-ok: #6dc16a;

  /* status pill */
  --pill-text-mix: #fff;
  --pill-bg-amt: 16%;

  /* atmosphere overlays */
  --mesh-1: rgba(95, 208, 230, 0.10);
  --mesh-2: rgba(135, 30, 94, 0.16);
  --mesh-3: rgba(0, 104, 55, 0.10);
  --grain-opacity: 0.05;
  --mark-glow: rgba(95, 208, 230, 0.25);
}

/* ── LIGHT theme — premium daylight counterpart ──────────────────────────────── */
[data-theme='light'] {
  --bg-0: #eef1f6;          /* page: cool paper */
  --bg-1: #ffffff;          /* tile body */
  --bg-2: #f4f6fb;          /* recessed cells */
  --ink: #131a26;
  --ink-dim: rgba(19, 26, 38, 0.66);
  --ink-faint: rgba(19, 26, 38, 0.46);
  --hair: rgba(19, 26, 38, 0.10);
  --hair-2: rgba(19, 26, 38, 0.16);
  --glass: rgba(19, 26, 38, 0.018);
  --cyan: #0e7c93;          /* darkened so it reads on white */

  --tile-sheen: rgba(255, 255, 255, 0.9);
  --tile-edge: rgba(255, 255, 255, 0.95);
  --tile-bg-mix: 100%;
  --hover-fill: rgba(19, 26, 38, 0.04);
  --tile-shadow: rgba(19, 33, 66, 0.18);
  --drawer-sheen: rgba(255, 255, 255, 0.7);
  --drawer-shadow: rgba(19, 33, 66, 0.22);
  --scrim: rgba(28, 38, 58, 0.32);

  --num-grad: linear-gradient(160deg, #1f6b3f 6%, #df711c 52%, #a3121a 100%);

  --gauge-tick-pb: rgba(19, 26, 38, 0.78);
  --gauge-tick-hr: rgba(19, 26, 38, 0.42);
  --gauge-marker-fg: #131a26;
  --gauge-track-sat: 1.0;

  --breach-bad: #c3402f;
  --breach-ok: #2f8f3c;

  --pill-text-mix: #0b0f17;
  --pill-bg-amt: 13%;

  --mesh-1: rgba(14, 124, 147, 0.10);
  --mesh-2: rgba(135, 30, 94, 0.08);
  --mesh-3: rgba(0, 104, 55, 0.08);
  --grain-opacity: 0.028;
  --mark-glow: rgba(14, 124, 147, 0.18);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }
html[data-theme='light'] { color-scheme: light; }
body {
  margin: 0;
  font-family: var(--bento-ui);
  background: var(--bg-0);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
}

/* layered atmosphere: aurora mesh + fine grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 12% 0%, var(--mesh-1), transparent 60%),
    radial-gradient(55% 60% at 95% 8%, var(--mesh-2), transparent 62%),
    radial-gradient(70% 70% at 50% 120%, var(--mesh-3), transparent 60%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain-opacity);
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#bento-stage {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 48px) 80px;
}

/* ── top bar ───────────────────────────────────────────────────────────────── */
/* Header markup is now the shared <SubHeader> (see /phc2026/phc-chrome.css);
   only the page-local spacing below the bar lives here. */
#bento-stage .phc-subhead { margin-bottom: clamp(28px, 5vw, 56px); }

/* sun / moon theme toggle */
.bento-theme-toggle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--glass);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s var(--ease);
}
.bento-theme-toggle:hover {
  color: var(--ink);
  border-color: var(--hair-2);
  background: var(--hover-fill);
}
.bento-theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--cyan);
}
.bento-theme-toggle svg { width: 19px; height: 19px; display: block; }
/* show the icon for the mode you'd switch TO */
.bento-theme-toggle .bento-icon-sun { display: none; }
.bento-theme-toggle .bento-icon-moon { display: block; }
[data-theme='light'] .bento-theme-toggle .bento-icon-sun { display: block; }
[data-theme='light'] .bento-theme-toggle .bento-icon-moon { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bento-theme-toggle { transition: none; }
}

/* ── the bento grid ──────────────────────────────────────────────────────────*/
#bento-grid,
.bento-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.bento-hero { margin-bottom: clamp(12px, 1.6vw, 20px); }
#bento-grid { grid-auto-rows: 1fr; }

/* shared tile surface */
.bento-hero-tile,
.bento-tile {
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--hair);
  background:
    linear-gradient(180deg, var(--tile-sheen), transparent 42%),
    color-mix(in srgb, var(--bg-1) var(--tile-bg-mix), transparent);
  backdrop-filter: blur(10px) saturate(115%);
  overflow: hidden;
  isolation: isolate;
}
.bento-hero-tile::before,
.bento-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--tile-edge), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

/* ── HERO summary tile ─────────────────────────────────────────────────────── */
.bento-hero-tile {
  grid-column: span 3;
  border-radius: 0; /* square corners — the other tiles stay rounded */
  padding: clamp(26px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  min-height: 340px;
}
.bento-hero-tile::after {
  content: '';
  position: absolute;
  inset: -2px -2px auto -2px;
  height: 4px;
  background: var(--grad);
  opacity: 0.9;
  z-index: 3;
}
.bento-hero-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bento-hero-eyebrow b { color: var(--cyan); font-weight: 500; }
.bento-hero-main { display: flex; align-items: flex-end; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; }
#bento-hero-num {
  display: flex;
  align-items: baseline;
  font-family: var(--bento-display);
  line-height: 0.82;
  font-weight: 600;
  font-optical-sizing: auto;
}
.bento-big {
  font-size: clamp(5.5rem, 16vw, 12rem);
  background: var(--num-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.03em;
}
.bento-slash { font-size: clamp(3rem, 8vw, 6rem); color: var(--ink-faint); margin: 0 0.06em; font-weight: 300; }
.bento-tot { font-size: clamp(3.4rem, 9vw, 7rem); color: var(--ink-dim); font-weight: 400; }
.bento-hero-headline {
  font-family: var(--bento-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  max-width: 12ch;
  margin: 0;
  color: var(--ink);
}
.bento-hero-sub {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 46ch;
  margin: 0;
}

/* tally side tile */
.bento-tally-tile {
  grid-column: span 1;
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 340px;
}
.bento-tally-h {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 6px;
}
#bento-hero-tally { display: flex; flex-direction: column; gap: 2px; flex: 1; justify-content: center; }
.bento-tally-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
}
.bento-tally-row:last-child { border-bottom: none; }
.bento-tally-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.bento-tally-name { font-size: 0.84rem; color: var(--ink-dim); }
.bento-tally-val { font-family: var(--bento-display); font-size: 1.7rem; font-weight: 500; }
.bento-tally-foot { font-size: 0.74rem; color: var(--ink-faint); line-height: 1.4; margin: 0; }
.bento-tally-foot b { color: var(--ink-dim); font-weight: 500; }

/* ── boundary tile ─────────────────────────────────────────────────────────── */
.bento-tile {
  grid-column: span 1;
  padding: clamp(18px, 1.9vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  min-height: 210px;
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s var(--ease);
}
.bento-tile.is-wide { grid-column: span 2; }
.bento-tile:hover,
.bento-tile:focus-visible {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--hair-2));
  box-shadow:
    0 24px 50px -22px var(--tile-shadow),
    0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
    0 0 44px -18px var(--accent);
  outline: none;
}
.bento-tile:focus-visible { box-shadow: 0 0 0 2px var(--accent), 0 24px 50px -22px var(--tile-shadow); }
/* accent glow wash that intensifies on hover */
.bento-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
  opacity: 0.45;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  z-index: -1;
}
.bento-tile:hover::after,
.bento-tile:focus-visible::after { opacity: 1; }

.bento-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bento-tile-idx {
  font-family: var(--bento-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.bento-pill {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  color: color-mix(in srgb, var(--pill) 72%, var(--pill-text-mix));
  background: color-mix(in srgb, var(--pill) var(--pill-bg-amt), transparent);
  border: 1px solid color-mix(in srgb, var(--pill) 40%, transparent);
  white-space: nowrap;
}
.bento-tile-name {
  font-family: var(--bento-display);
  font-weight: 500;
  font-size: clamp(1.04rem, 1.5vw, 1.32rem);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.005em;
}
.is-wide .bento-tile-name { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.bento-breach {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-faint);
}
.bento-breach::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.bento-breach.is-breached { color: var(--breach-bad); }
.bento-breach.is-safe { color: var(--breach-ok); }

.bento-gauges { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.is-wide .bento-gauges { margin-top: auto; }

/* plain-language definition — always shown so the card never changes height on
   hover (hover only lifts + glows; no layout shift / row reflow) */
.bento-def {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-dim);
  margin: 4px 0 0;
}

/* ── mini gauge ────────────────────────────────────────────────────────────── */
.bento-gauge { display: flex; flex-direction: column; gap: 4px; }
.bento-gauge-sub {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bento-gauge-svg { width: 100%; height: 26px; display: block; overflow: visible; }
.bento-gauge-track { filter: saturate(var(--gauge-track-sat)); }
.bento-tick-pb, .bento-tick-hr { stroke-width: 1.4; }
.bento-tick-pb { stroke: var(--gauge-tick-pb); }
.bento-tick-hr { stroke: var(--gauge-tick-hr); stroke-dasharray: 1.5 1.5; }
/* marker overlaid on the bar as a real circle (immune to the SVG's
   non-uniform horizontal stretch on wide cards) */
.bento-gauge-bar { position: relative; }
.bento-gauge-dot {
  position: absolute;
  top: 50%;
  left: var(--dot-x);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--dot-color);
  filter: drop-shadow(0 0 4px var(--dot-color));
  pointer-events: none;
}
.bento-gauge-read {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.bento-gauge-cur {
  font-family: var(--bento-display);
  font-size: 0.96rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.bento-gauge-status { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

/* marker slide-in (animates left so it tracks the stretched bar correctly) */
@media (prefers-reduced-motion: no-preference) {
  .bento-gauge-anim {
    left: var(--dot-from);
    animation: bento-marker 0.9s var(--ease) forwards;
    animation-delay: 0.5s;
  }
  @keyframes bento-marker { to { left: var(--dot-x); } }
}

/* ── entrance orchestration ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  #bento-stage .bento-hero-tile,
  #bento-stage .bento-tally-tile,
  #bento-stage .bento-tile {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
  }
  #bento-stage.is-live .bento-hero-tile,
  #bento-stage.is-live .bento-tally-tile {
    animation: bento-rise 0.8s var(--ease) forwards;
  }
  #bento-stage.is-live .bento-tally-tile { animation-delay: 0.1s; }
  #bento-stage.is-live .bento-tile {
    animation: bento-rise 0.7s var(--ease) forwards;
    animation-delay: calc(0.2s + var(--enter-delay, 0s));
  }
  @keyframes bento-rise {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* ── detail drawer ─────────────────────────────────────────────────────────── */
#bento-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
#bento-scrim.is-open { opacity: 1; visibility: visible; }

#bento-drawer {
  position: fixed; top: 0; right: 0; z-index: 41;
  width: min(560px, 100vw);
  height: 100%;
  background:
    linear-gradient(180deg, var(--drawer-sheen), transparent 30%),
    var(--bg-1);
  border-left: 1px solid var(--hair-2);
  box-shadow: -40px 0 80px -30px var(--drawer-shadow);
  transform: translateX(102%);
  transition: transform 0.5s var(--ease);
  display: flex;
  flex-direction: column;
}
#bento-drawer.is-open { transform: translateX(0); }
.bento-drawer-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--hair);
  flex-shrink: 0;
}
.bento-drawer-bar span { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); }
.bento-drawer-bar-band { flex: 1; height: 3px; margin: 0 18px; border-radius: 2px; background: var(--grad); opacity: 0.85; }
#bento-drawer-close {
  background: var(--glass); border: 1px solid var(--hair); color: var(--ink-dim);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; transition: color 0.3s, border-color 0.3s, transform 0.3s;
}
#bento-drawer-close:hover { color: var(--ink); border-color: var(--hair-2); transform: rotate(90deg); }
#bento-drawer-close svg { width: 16px; height: 16px; }

#bento-drawer-body { overflow-y: auto; padding: clamp(22px, 3vw, 34px); }
.bento-dc-eyebrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 10px;
}
.bento-dc-title {
  font-family: var(--bento-display); font-weight: 500;
  font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.04; margin: 0 0 14px; letter-spacing: -0.01em;
}
.bento-dc-insight {
  font-family: var(--bento-serif); font-style: italic;
  font-size: 1.04rem; line-height: 1.5; color: var(--ink);
  border-left: 2px solid var(--cyan); padding-left: 16px; margin: 0 0 28px;
}

.bento-cv {
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 18px 18px 20px;
  margin-bottom: 16px;
  background: var(--glass);
}
.bento-cv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bento-cv-label { font-family: var(--bento-display); font-weight: 500; font-size: 1.04rem; margin: 0; }
.bento-cv-statp {
  font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.bento-cv .bento-gauge { margin-bottom: 14px; }
.bento-cv-table { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border-radius: 10px; overflow: hidden; }
.bento-cv-cell {
  background: var(--bg-2);
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 3px;
}
.bento-cv-cell.is-hot { background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); }
.bento-cv-k { font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); }
.bento-cv-v { font-family: var(--bento-display); font-size: 1.02rem; font-weight: 500; }
.bento-cv-cell.is-hot .bento-cv-v { color: color-mix(in srgb, var(--accent) 62%, var(--gauge-marker-fg)); }
.bento-cv-blurb { font-size: 0.86rem; line-height: 1.55; color: var(--ink-dim); margin: 14px 0 0; }
.bento-cv-note { font-size: 0.76rem; line-height: 1.45; color: var(--ink-faint); margin: 8px 0 0; font-style: italic; }
.bento-dc-foot { font-size: 0.76rem; line-height: 1.55; color: var(--ink-faint); margin: 22px 0 0; }
.bento-dc-foot strong { color: var(--ink-dim); font-weight: 500; }

/* ── footer ────────────────────────────────────────────────────────────────── */
.bento-foot {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.76rem; color: var(--ink-faint);
}
.bento-foot a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--hair-2); }
.bento-foot a:hover { color: var(--ink); }

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #bento-grid, .bento-hero { grid-template-columns: repeat(2, 1fr); }
  .bento-hero-tile { grid-column: span 2; min-height: 280px; }
  .bento-tally-tile { grid-column: span 2; min-height: auto; }
  .bento-tile.is-wide { grid-column: span 2; }
  #bento-hero-tally { flex-direction: row; gap: 18px; }
  .bento-tally-row { flex: 1; border-bottom: none; border-top: 1px solid var(--hair); flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 560px) {
  #bento-grid, .bento-hero { grid-template-columns: 1fr; }
  .bento-hero-tile, .bento-tally-tile, .bento-tile, .bento-tile.is-wide { grid-column: span 1; }
  #bento-hero-tally { flex-direction: column; }
  .bento-tally-row { flex-direction: row; align-items: center; }
  .bento-cv-table { grid-template-columns: 1fr; }
}