/* ─── ACCENT — mode-aware pairs ──────────────────────────── */

/* YELLOW: bright in dark → mustard gold in light */
:root,
[data-accent="yellow"] {
  --accent:      #F0E44A;
  --accent-dim:  rgba(240,228,74,0.1);
  --f-disp:      'Syne', sans-serif;
  --name-weight: 300;
}
html[data-theme="light"][data-accent="yellow"] {
  --accent:     #C9A800;
  --accent-dim: rgba(201,168,0,0.1);
}

/* GREEN: terminal green in dark → deep forest in light */
[data-accent="green"] {
  --accent:      #00FF41;
  --accent-dim:  rgba(0,255,65,0.08);
  --f-disp:      'DM Serif Display', serif;
  --name-weight: 400;
}
html[data-theme="light"][data-accent="green"] {
  --accent:     #00C032;
  --accent-dim: rgba(0,192,50,0.1);
}

/* CYAN: electric in dark → deep teal in light */
[data-accent="cyan"] {
  --accent:      #00E5CC;
  --accent-dim:  rgba(0,229,204,0.1);
  --f-disp:      'Space Grotesk', sans-serif;
  --name-weight: 300;
}
html[data-theme="light"][data-accent="cyan"] {
  --accent:     #00B8A8;
  --accent-dim: rgba(0,184,168,0.1);
}

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:      #F5F4F0;
  --fg:      #0D0D0D;
  --mid:     #888888;
  --faint:   #C8C7C3;
  --divider: rgba(13,13,13,0.12);
  --nav-h:   52px;
  --pad-x:   clamp(20px,4vw,56px);
  --f-body:  'Lora', serif;
  --f-mono:  'IBM Plex Mono', monospace;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg:      #0F0F0D;
  --fg:      #F0EFE9;
  --mid:     #525250;
  --faint:   #2A2A27;
  --divider: rgba(240,239,233,0.09);
  color-scheme: dark;
}

/* ─── RESET ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
  overflow-x: hidden;
}
a { color:inherit; text-decoration:none; }

/* ─── NAV — scroll reveal ─────────────────────────────────── */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-x);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .35s, transform .35s, background .25s, border-color .25s;
}
nav.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  border-bottom-color: var(--divider);
}
.nav-wordmark {
  font-family: var(--f-disp);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  transition: color .15s, font-family .25s;
}
.nav-wordmark:hover { color: var(--accent); }
.nav-links { display:flex; gap:28px; list-style:none; }
.nav-links a {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--mid);
  transition: color .15s;
}
.nav-links a:hover { color: var(--fg); }
.nav-links a[aria-current="page"] { color: var(--accent); }
.nav-links a[aria-current="page"]::before {
  content: '>_';
  margin-right: .25em;
  opacity: .8;
}

/* ─── FLOATING CONTROLS ───────────────────────────────────── */
.float-ctrl {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.float-ctrl-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--divider);
  padding: 11px 16px;
  font-family: var(--f-mono);
  font-size: .6rem;
  color: var(--mid);
  letter-spacing: .06em;
}
.accent-dots { display:flex; gap:6px; align-items:center; }
.dot {
  width: 12px; height: 12px; border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: transform .15s;
  flex-shrink: 0;
}
.dot:hover { transform: scale(1.3); }

/* outer ring indicator */
.dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color .15s;
}
.dot[data-active="true"]::after {
  border-color: var(--mid);
}

/* dot fill colors — dark mode (default) */
.dot-y { background: #F0E44A; }
.dot-g { background: #00FF41; }
.dot-c { background: #00E5CC; }

/* dot fill colors — light mode overrides */
html[data-theme="light"] .dot-y { background: #C9A800; }
html[data-theme="light"] .dot-g { background: #00C032; }
html[data-theme="light"] .dot-c { background: #00B8A8; }

.divider-v {
  width: 1px; height: 14px;
  background: var(--divider);
}

.icon-btn {
  background:none; border:none; cursor:pointer;
  color: var(--mid); display:flex; align-items:center; padding:2px;
  transition: color .15s;
}
.icon-btn:hover { color: var(--fg); }
.icon-btn svg { width:19px; height:19px; display:block; }
.icon-sun  { display: block;  }
.icon-moon { display: none;   }
html[data-theme="dark"]  .icon-sun  { display: none;  }
html[data-theme="dark"]  .icon-moon { display: block; }
html[data-theme="light"] .icon-sun  { display: block; }
html[data-theme="light"] .icon-moon { display: none;  }

/* ─── HERO ────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1px minmax(200px, 310px);
  grid-template-rows: 1fr auto;
}
.hero-vline {
  grid-column: 2; grid-row: 1 / 3;
  background: var(--divider);
}

/* left */
.hero-left {
  grid-column:1; grid-row:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(32px,6vw,80px) var(--pad-x);
  padding-bottom: clamp(36px,5vw,56px);
}

.hero-eyebrow {
  font-family: var(--f-mono);
  font-size: .63rem;
  color: var(--mid);
  letter-spacing: .1em;
  margin-bottom: 1.6rem;
  min-height: 1.2em;
  opacity: 0;
  animation: fadeIn .1s ease .05s forwards;
}

.hero-name {
  font-family: var(--f-disp);
  font-size: clamp(3.8rem, 9.5vw, 9rem);
  font-weight: var(--name-weight);
  letter-spacing: -.03em;
  line-height: .92;
  color: var(--fg);
  opacity: 0;
  animation: up .65s cubic-bezier(.22,1,.36,1) .15s forwards;
  transition: font-family .25s, font-weight .25s;
}
.hero-name .underline {
  background-image: linear-gradient(var(--accent),var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: 0 102%;
  padding-bottom: 3px;
  transition: background-color .25s;
}

/* right */
.hero-right {
  grid-column:3; grid-row:1;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: clamp(32px,6vw,80px) clamp(20px,3vw,36px);
  padding-bottom: clamp(36px,5vw,56px);
}

/* section preview nav — full bleed to column edges */
.preview-nav {
  list-style: none;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  margin: 0 calc(-1 * clamp(20px,3vw,36px));
  opacity: 0;
  animation: up .5s ease .4s forwards;
}
.preview-nav li { border-bottom: 1px solid var(--divider); }
.preview-nav li:last-child { border-bottom: none; }

.preview-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px clamp(20px,3vw,36px); gap: 8px;
  transition: background .18s;
  position: relative;
  overflow: hidden;
}
.preview-link::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.preview-link:hover::after { transform: scaleY(1); }
.preview-link:hover { background: var(--accent-dim); }
.preview-link:hover .preview-title { color: var(--accent); }

.preview-num {
  font-family: var(--f-mono);
  font-size: .58rem; color: var(--mid);
  letter-spacing: .06em; flex-shrink: 0;
}
.preview-title {
  font-family: var(--f-mono);
  font-size: .72rem; font-weight: 500;
  flex: 1; padding: 0 8px;
  transition: color .18s;
  letter-spacing: .03em;
}
.preview-arrow {
  font-family: var(--f-mono);
  font-size: .65rem; color: var(--faint);
  transition: color .18s, transform .18s;
}
.preview-link:hover .preview-arrow { color: var(--accent); transform: translateY(3px); }

/* statement + sys readout */
.hero-right-bottom {
  display:flex; flex-direction:column; gap:18px;
  opacity: 0;
  animation: up .5s ease .58s forwards;
}
.hero-statement {
  font-family: var(--f-body);
  font-size: clamp(.82rem,1.1vw,.9rem);
  font-style: italic;
  line-height: 1.65;
  color: var(--fg);
}

/* system readout */
.sys-readout {
  border-top: 1px solid var(--divider);
  padding-top: 13px;
  display:flex; flex-direction:column; gap:4px;
}
.sys-row {
  display:flex; justify-content:space-between;
  align-items:baseline; gap:8px;
}
.sys-key {
  font-family: var(--f-mono);
  font-size: .56rem; color: var(--mid);
  letter-spacing: .09em; opacity:.55;
}
.sys-val {
  font-family: var(--f-mono);
  font-size: .56rem; color: var(--mid);
  letter-spacing: .03em; opacity:.55;
  text-align:right;
}
.sys-val.hi { color: var(--accent); opacity:1; }
.blink {
  display:inline-block;
  animation: blink 1.1s step-end infinite;
}

/* bottom bar */
.hero-bottom {
  grid-column: 1 / -1; grid-row:2;
  border-top: 1px solid var(--divider);
  display:flex; align-items:center; justify-content:space-between;
  padding: 13px var(--pad-x);
  opacity: 0;
  animation: up .4s ease .72s forwards;
}
.hero-bottom-label {
  font-family: var(--f-mono);
  font-size: .6rem; color: var(--mid); letter-spacing:.06em;
}
.scroll-cue {
  font-family: var(--f-mono);
  font-size: .6rem; color: var(--mid); letter-spacing:.06em;
  display:flex; align-items:center; gap:6px;
}
.scroll-arrow { animation: bounce 2s ease-in-out 1.8s infinite; display:inline-block; }

/* ─── TRANSITION RULE ─────────────────────────────────────── */
.section-break {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  margin-top: 0;
}
.section-break-label {
  font-family: var(--f-mono);
  font-size: .6rem;
  color: var(--mid);
  letter-spacing: .1em;
  padding: 12px var(--pad-x);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-break-label::before {
  content: '';
  display: inline-block;
  width: clamp(24px, 4vw, 48px);
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.section-break-label .lbl-accent { color: var(--accent); }

/* ─── ENTRIES ─────────────────────────────────────────────── */
.entries {
  padding: clamp(36px,5vw,64px) var(--pad-x);
  max-width: 1200px; margin: 0 auto;
}
.entry-list { list-style:none; }
.entry-item { border-bottom: 1px solid var(--divider); }

.entry-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px,2.8vw,30px) 0;
  position: relative;
}

.entry-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0;
}

.entry-prefix {
  font-family: var(--f-mono);
  font-size: clamp(1.1rem,2.8vw,1.7rem);
  color: var(--accent);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.1;
  opacity: 0;
  max-width: 0;
  margin-right: 0;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s, max-width .2s cubic-bezier(.22,1,.36,1), margin-right .2s;
}
.entry-link:hover .entry-prefix {
  opacity: 1;
  max-width: 2.2ch;
  margin-right: 0.15em;
}

.entry-title {
  font-family: var(--f-disp);
  font-size: clamp(1.1rem,2.8vw,1.7rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
  transition: color .2s, font-family .25s;
  flex: 1;
}
.entry-link:hover .entry-title { color: var(--accent); }

.entry-arrow {
  font-family: var(--f-mono);
  font-size: .85rem; color: var(--mid); flex-shrink:0;
  align-self: baseline;
  margin-left: 1rem;
  transition: color .2s, transform .2s;
}
.entry-link:hover .entry-arrow { color: var(--accent); transform: translateX(5px); }

.entry-desc {
  font-family: var(--f-body);
  font-size: .9rem; color: var(--mid);
  line-height: 1.55; max-width: 560px;
}

/* ─── SIGNAL BAR ──────────────────────────────────────────── */
.signal-bar {
  border-top: 1px solid var(--divider);
  margin: 0 var(--pad-x);
  padding: 16px 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.signal-comment {
  font-family: var(--f-mono);
  font-size: .63rem; color: var(--mid); letter-spacing:.03em;
}
.signal-comment strong { color: var(--accent); font-weight:400; }
.signal-subscribe {
  font-family: var(--f-mono);
  font-size: .63rem; letter-spacing:.06em;
  color: var(--accent); transition: opacity .15s;
}
.signal-subscribe:hover { opacity:.6; }

/* ─── FOOTER — system log ─────────────────────────────────── */
footer {
  margin-top: clamp(48px,6vw,80px);
  border-top: 2px solid var(--fg);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1px minmax(200px,310px);
  border-bottom: 1px solid var(--divider);
}
.footer-vline {
  background: var(--divider);
  width: 1px;
}

/* left: nav */
.footer-nav-col {
  padding: clamp(24px,3vw,40px) var(--pad-x);
}
.footer-col-label {
  font-family: var(--f-mono);
  font-size: .58rem; color: var(--mid);
  letter-spacing: .1em; opacity:.5;
  margin-bottom: 14px;
}
.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer-nav li {
  border-bottom: 1px solid var(--divider);
}
.footer-nav li:first-child { border-top: 1px solid var(--divider); }

.footer-nav a {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 11px 0;
  font-family: var(--f-mono);
  font-size: clamp(.78rem,1.2vw,.88rem);
  color: var(--mid);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transition: color .15s;
}
.footer-nav a:hover { color: var(--accent); }

/* prompt prefix */
.fn-prompt {
  color: var(--accent);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity .15s, max-width .18s;
  flex-shrink: 0;
}
.footer-nav a:hover .fn-prompt { opacity: 1; max-width: 3em; }

/* the pathname */
.fn-path {
  flex-shrink: 0;
  transition: color .15s;
}

/* separator + description — slides in on hover, wide screens only */
.fn-sep {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity .2s .05s, max-width .3s cubic-bezier(.22,1,.36,1) .05s;
  color: var(--mid);
  flex-shrink: 0;
}
.fn-desc {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  font-size: clamp(.68rem,1vw,.76rem);
  color: var(--mid);
  transition: opacity .2s .08s, max-width .35s cubic-bezier(.22,1,.36,1) .08s;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .footer-nav a:hover .fn-sep  { opacity: 1; max-width: 4em; }
  .footer-nav a:hover .fn-desc { opacity: 1; max-width: 280px; }
}

/* right: system log */
.footer-sys-col {
  padding: clamp(24px,3vw,40px) clamp(20px,3vw,36px);
}
.footer-sys-grid {
  display:flex; flex-direction:column; gap:5px;
}
.footer-sys-row {
  display:flex; justify-content:space-between;
  align-items:baseline; gap:8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--divider);
}
.footer-sys-row:last-child { border-bottom:none; }
.f-sys-k {
  font-family: var(--f-mono);
  font-size: .57rem; color: var(--mid);
  letter-spacing: .1em; opacity:.5;
}
.f-sys-v {
  font-family: var(--f-mono);
  font-size: .57rem; color: var(--mid);
  letter-spacing: .03em; text-align:right;
}
.f-sys-v.hi { color: var(--accent); opacity:1; }

/* bottom strip */
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px var(--pad-x); flex-wrap:wrap; gap:1rem;
}
.footer-wordmark {
  font-family: var(--f-disp);
  font-size: .8rem; font-weight:500;
  transition: font-family .25s;
}
.footer-copy {
  font-family: var(--f-mono);
  font-size: .6rem; color: var(--mid); letter-spacing:.04em;
}

/* ─── KEYFRAMES ───────────────────────────────────────────── */
@keyframes up {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes fadeIn {
  to { opacity:1; }
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.sc-lead { color: var(--accent); }
@keyframes bounce {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(4px); }
}

/* ─── INTERIOR PAGES ─────────────────────────────────────── */

.page-wrap {
  padding-top: var(--nav-h);
}

/* ─── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--divider);
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .05em;
  color: var(--mid);
}
.bc-left {
  display: flex;
  align-items: center;
  gap: 0;
}
.bc-back {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--mid);
  white-space: nowrap;
  transition: color .15s;
}
.bc-back:hover { color: var(--accent); }
.bc-sep { margin: 0 .45rem; opacity: .3; }
.bc-current { color: var(--fg); white-space: nowrap; }

/* right-side easter egg — system data field */
.bc-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bc-egg-k {
  font-size: .5rem;
  letter-spacing: .1em;
  opacity: .4;
}
.bc-egg-v {
  letter-spacing: .04em;
  color: var(--mid);
  opacity: .7;
  font-variant-numeric: tabular-nums;
  min-width: 11ch; /* stable width prevents layout shift */
  text-align: right;
}

/* ─── PAGE HEADER — 2-col grid matching hero ─────────────── */
.page-header {
  display: grid;
  grid-template-columns: 1fr 1px minmax(200px, 310px);
  border-bottom: 1px solid var(--divider);
}
.ph-left {
  padding: clamp(28px,5vw,56px) var(--pad-x);
  display: flex;
  align-items: flex-end;
}
.ph-vline {
  background: var(--divider);
  width: 1px;
}
.ph-right {
  padding: clamp(28px,5vw,56px) clamp(20px,3vw,36px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 14px;
}
.page-title {
  font-family: var(--f-disp);
  font-size: clamp(3rem,8vw,7rem);
  font-weight: var(--name-weight);
  letter-spacing: -.03em;
  line-height: .92;
  transition: font-family .25s, font-weight .25s;
}
.page-framing {
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(.82rem,1.2vw,.9rem);
  line-height: 1.65;
}
.page-note {
  font-family: var(--f-mono);
  font-size: .65rem;
  color: var(--mid);
  letter-spacing: .04em;
}

/* ─── PROJECT LIST — Swiss grid cards ────────────────────── */
.project-list {
  padding-bottom: clamp(48px,6vw,80px);
}

/* 5-col grid: [left-edge + index] [rule] [meta] [rule] [content] */
.project-card {
  display: grid;
  grid-template-columns: calc(var(--pad-x) + 2.5rem) 1px clamp(160px,22%,240px) 1px 1fr;
  border-top: 1px solid var(--divider);
  position: relative;
  overflow: hidden;
}
.project-card:first-child { border-top: 2px solid var(--fg); }

/* left accent sweep on hover — mirrors preview-link */
.project-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.project-card:has(.pc-cta:hover)::before { transform: scaleY(1); }

/* index column */
.pc-index {
  padding: clamp(20px,3vw,32px) 1.25rem clamp(20px,3vw,32px) var(--pad-x);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.pc-num {
  font-family: var(--f-mono);
  font-size: .55rem;
  color: var(--mid);
  letter-spacing: .08em;
  opacity: .45;
  margin-top: 4px;
}

/* vertical rules */
.pc-vline {
  background: var(--divider);
  width: 1px;
  align-self: stretch;
}

/* meta column — system log style */
.pc-meta {
  padding: clamp(20px,3vw,32px) clamp(14px,2vw,22px);
  display: flex;
  flex-direction: column;
}
.pc-row {
  display: flex;
  flex-direction: column;
  padding: 7px 0;
  border-bottom: 1px solid var(--divider);
}
.pc-row:last-child { border-bottom: none; }
.pc-k {
  font-family: var(--f-mono);
  font-size: .5rem;
  color: var(--mid);
  letter-spacing: .1em;
  opacity: .45;
  margin-bottom: 2px;
}
.pc-v {
  font-family: var(--f-mono);
  font-size: .62rem;
  color: var(--mid);
  line-height: 1.4;
  letter-spacing: .02em;
}
.pc-v.hi { color: var(--accent); opacity: 1; }

/* content column */
.pc-content {
  padding: clamp(20px,3vw,32px) var(--pad-x) clamp(20px,3vw,32px) clamp(20px,3vw,28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pc-title {
  font-family: var(--f-disp);
  font-size: clamp(1.3rem,3vw,2.25rem);
  font-weight: var(--name-weight);
  letter-spacing: -.02em;
  line-height: 1;
  transition: font-family .25s, font-weight .25s;
  display: flex;
  align-items: baseline;
}
.pc-title a { transition: color .15s; }
.project-card:has(.pc-cta:hover) .pc-title a { color: var(--accent); }

.pc-prefix {
  font-family: var(--f-mono);
  font-size: inherit;
  font-weight: 400;
  color: var(--accent);
  opacity: 0;
  max-width: 0;
  margin-right: 0;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s, max-width .2s cubic-bezier(.22,1,.36,1), margin-right .2s;
}
.project-card:has(.pc-cta:hover) .pc-prefix {
  opacity: 1;
  max-width: 2.2ch;
  margin-right: 0.15em;
}

/* image placeholder zone */
.pc-image {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--faint);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.pc-image-label {
  font-family: var(--f-mono);
  font-size: .58rem;
  color: var(--mid);
  letter-spacing: .06em;
  opacity: .5;
  text-align: center;
}
.pc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-teaser {
  font-family: var(--f-body);
  font-size: .875rem;
  line-height: 1.75;
  opacity: .85;
}
.pc-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .05em;
  color: var(--mid);
  margin-top: 2px;
  transition: color .15s;
}
.pc-cta:hover { color: var(--accent); }

/* ─── LEADERSHIP ──────────────────────────────────────────── */

/* Philosophy grid — same column skeleton as project cards */
.phil-list {
  padding-bottom: clamp(48px,6vw,80px);
}
.phil-item {
  display: grid;
  grid-template-columns: calc(var(--pad-x) + 2.5rem) 1px clamp(200px,34%,340px) 1px 1fr;
  border-top: 1px solid var(--divider);
}
.phil-item:first-child { border-top: 2px solid var(--fg); }

.phil-name-col {
  padding: clamp(20px,3vw,32px) clamp(14px,2vw,22px);
  display: flex;
  align-items: flex-start;
}
.phil-name {
  font-family: var(--f-disp);
  font-size: clamp(1rem,2.2vw,1.625rem);
  font-weight: var(--name-weight);
  letter-spacing: -.015em;
  line-height: 1.2;
  transition: font-family .25s, font-weight .25s;
}
.phil-body-col {
  padding: clamp(20px,3vw,32px) var(--pad-x) clamp(20px,3vw,32px) clamp(20px,3vw,28px);
}
.phil-body-col p {
  font-family: var(--f-body);
  font-size: .9375rem;
  line-height: 1.8;
  opacity: .9;
}

/* Credentials — system log block */
.cred-section {
  border-top: 1px solid var(--divider);
  padding: clamp(24px,3.5vw,44px) var(--pad-x) clamp(24px,3.5vw,44px) calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
}
.section-kicker {
  font-family: var(--f-mono);
  font-size: .55rem;
  color: var(--mid);
  letter-spacing: .1em;
  opacity: .5;
  margin-bottom: 16px;
}
.cred-grid {
  display: flex;
  flex-direction: column;
}
.cred-row {
  display: flex;
  gap: clamp(16px,3vw,36px);
  padding: 7px 0;
  border-bottom: 1px solid var(--divider);
  align-items: baseline;
}
.cred-row:last-child { border-bottom: none; }
.cred-k {
  font-family: var(--f-mono);
  font-size: .5rem;
  color: var(--mid);
  letter-spacing: .1em;
  opacity: .45;
  flex-shrink: 0;
  width: 5rem;
}
.cred-v {
  font-family: var(--f-mono);
  font-size: .65rem;
  color: var(--mid);
  letter-spacing: .02em;
  line-height: 1.5;
}
.cred-v.hi { color: var(--accent); opacity: 1; }

/* Availability CTA */
.avail-section {
  border-top: 1px solid var(--divider);
  padding: clamp(28px,4vw,52px) var(--pad-x) clamp(28px,4vw,52px) calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  max-width: 680px;
}
.avail-text {
  font-family: var(--f-body);
  font-size: .9375rem;
  line-height: 1.75;
  opacity: .9;
  margin-bottom: 1.5rem;
}
.avail-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--mid);
  border: 1px solid var(--divider);
  padding: .625rem 1rem;
  transition: color .15s, border-color .15s;
}
.avail-cta:hover { color: var(--accent); border-color: var(--accent); }

/* ─── ABOUT ──────────────────────────────────────────────── */

/* Portrait intro zone — mirrors page-header grid */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1px minmax(200px, 310px);
  border-top: 2px solid var(--fg);
  border-bottom: 1px solid var(--divider);
}
.about-portrait-zone {
  padding: clamp(28px,5vw,56px) var(--pad-x);
}
.about-portrait-img {
  width: min(280px, 100%);
  aspect-ratio: 3/4;
  background: var(--faint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-portrait-label {
  font-family: var(--f-mono);
  font-size: .58rem;
  color: var(--mid);
  letter-spacing: .06em;
  opacity: .5;
  text-align: center;
  padding: 0 1rem;
}
.about-intro-right {
  padding: clamp(28px,5vw,56px) clamp(20px,3vw,36px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Bio prose */
.about-bio {
  padding: clamp(40px,5.5vw,68px) var(--pad-x) clamp(40px,5.5vw,68px) calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  max-width: 860px;
}
.about-bio p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.82;
  opacity: .9;
  margin-bottom: 1.5em;
}
.about-bio p:last-child { margin-bottom: 0; }

/* Currently thinking about */
.about-thinking {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: clamp(28px,4vw,48px) var(--pad-x) clamp(28px,4vw,48px) calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
}
.thinking-kicker {
  font-family: var(--f-mono);
  font-size: .55rem;
  color: var(--mid);
  letter-spacing: .1em;
  opacity: .5;
  margin-bottom: 20px;
}
.thinking-list {
  list-style: none;
  max-width: 640px;
}
.thinking-item {
  font-family: var(--f-body);
  font-style: italic;
  font-size: .9375rem;
  line-height: 1.72;
  padding: 16px 0 16px 1.25rem;
  border-bottom: 1px solid var(--divider);
  position: relative;
}
.thinking-item:first-child { border-top: 1px solid var(--divider); }
.thinking-item::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 2px;
  background: var(--accent);
}
.thinking-updated {
  font-family: var(--f-mono);
  font-size: .55rem;
  color: var(--mid);
  letter-spacing: .07em;
  opacity: .4;
  margin-top: 14px;
}

/* Elsewhere */
.about-elsewhere {
  padding: clamp(24px,3.5vw,44px) var(--pad-x) clamp(24px,3.5vw,44px) calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  max-width: 640px;
}
.elsewhere-kicker {
  font-family: var(--f-mono);
  font-size: .55rem;
  color: var(--mid);
  letter-spacing: .1em;
  opacity: .5;
  margin-bottom: 16px;
}
.elsewhere-list { list-style: none; }
.elsewhere-item {
  display: flex;
  gap: clamp(16px,3vw,36px);
  padding: 9px 0;
  border-bottom: 1px solid var(--divider);
  align-items: baseline;
}
.elsewhere-item:first-child { border-top: 1px solid var(--divider); }
.elsewhere-label {
  font-family: var(--f-mono);
  font-size: .5rem;
  color: var(--mid);
  letter-spacing: .1em;
  opacity: .45;
  flex-shrink: 0;
  width: 5rem;
}
.elsewhere-val,
.elsewhere-link {
  font-family: var(--f-mono);
  font-size: .65rem;
  color: var(--mid);
  letter-spacing: .02em;
}
.elsewhere-link { color: var(--accent); transition: opacity .15s; }
.elsewhere-link:hover { opacity: .6; }

/* ─── SIGNAL+STATIC PAGE ─────────────────────────────────── */

/* Inline prose links — underline + accent on hover */
.prose-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s;
}
.prose-link:hover { color: var(--accent); }

/* CTA links inside page-header right column */
.ph-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ph-cta-link {
  font-family: var(--f-mono);
  font-size: .65rem;
  letter-spacing: .05em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: .45rem .85rem;
  transition: opacity .15s;
}
.ph-cta-link:hover { opacity: .6; }

/* Publication intro prose */
.signal-pub-intro {
  border-top: 2px solid var(--fg);
  border-bottom: 1px solid var(--divider);
  padding: clamp(36px,5vw,60px) var(--pad-x) clamp(36px,5vw,60px) calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  max-width: 860px;
}
.signal-pub-intro p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.82;
  opacity: .9;
  margin-bottom: 1.4em;
}
.signal-pub-intro p:last-child { margin-bottom: 0; }
.signal-pub-intro .signal-tier-note {
  font-family: var(--f-mono);
  font-size: .63rem;
  color: var(--mid);
  letter-spacing: .04em;
  opacity: .7;
  margin-bottom: 0;
}

/* Transmission list */
.tx-list {
  list-style: none;
  padding-bottom: clamp(48px,6vw,80px);
}
.tx-item {
  display: grid;
  grid-template-columns: calc(var(--pad-x) + 2.5rem) 1px 1fr;
  border-top: 1px solid var(--divider);
  position: relative;
  overflow: hidden;
}
.tx-item:first-child { border-top: 2px solid var(--fg); }

/* left accent bar on hover */
.tx-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.tx-item:hover::before { transform: scaleY(1); }

.tx-num-col {
  padding: clamp(18px,2.8vw,28px) 1.25rem clamp(18px,2.8vw,28px) var(--pad-x);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.tx-num {
  font-family: var(--f-mono);
  font-size: .55rem;
  color: var(--mid);
  letter-spacing: .08em;
  opacity: .4;
  margin-top: 4px;
}
.tx-vline {
  background: var(--divider);
  width: 1px;
  align-self: stretch;
}
.tx-content {
  padding: clamp(18px,2.8vw,28px) var(--pad-x) clamp(18px,2.8vw,28px) clamp(20px,3vw,28px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tx-meta-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.tx-date {
  font-family: var(--f-mono);
  font-size: .58rem;
  color: var(--mid);
  letter-spacing: .06em;
  opacity: .55;
}
.tx-tier {
  font-family: var(--f-mono);
  font-size: .5rem;
  letter-spacing: .1em;
  padding: 1px 5px;
  border: 1px solid var(--divider);
  color: var(--mid);
  opacity: .6;
}
.tx-tier.paid {
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}
.tx-tags {
  font-family: var(--f-mono);
  font-size: .55rem;
  color: var(--mid);
  letter-spacing: .04em;
  opacity: .4;
}
.tx-title {
  font-family: var(--f-disp);
  font-size: clamp(1.1rem,2.5vw,1.75rem);
  font-weight: var(--name-weight);
  letter-spacing: -.02em;
  line-height: 1.1;
  transition: color .18s, font-family .25s, font-weight .25s;
  display: block;
}
.tx-item:hover .tx-title { color: var(--accent); }
.tx-excerpt {
  font-family: var(--f-body);
  font-style: italic;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--mid);
  max-width: 560px;
}

/* Field dispatch callout */
.field-dispatch {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding: 20px var(--pad-x) 22px calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-eyebrow {
  font-family: var(--f-mono);
  font-size: .52rem;
  letter-spacing: .1em;
  color: var(--accent);
  opacity: .8;
}
.fd-title {
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--fg);
  letter-spacing: .02em;
  line-height: 1.35;
}
.fd-desc {
  font-family: var(--f-body);
  font-size: .82rem;
  font-style: italic;
  color: var(--mid);
  line-height: 1.65;
  max-width: 52ch;
}
.fd-link {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .05em;
  color: var(--accent);
  text-decoration: none;
  margin-top: 4px;
  opacity: .8;
  transition: opacity .15s;
}
.fd-link:hover { opacity: 1; }

/* Subscribe CTA block */
.signal-sub-cta {
  border-top: 1px solid var(--divider);
  padding: clamp(32px,4.5vw,56px) var(--pad-x) clamp(32px,4.5vw,56px) calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  max-width: 680px;
}
.signal-sub-cta p {
  font-family: var(--f-body);
  font-size: .9375rem;
  line-height: 1.75;
  opacity: .9;
  margin-bottom: 1.25rem;
}
.signal-sub-cta p:last-of-type { margin-bottom: 1.5rem; }
.signal-sub-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--mid);
  border: 1px solid var(--divider);
  padding: .625rem 1rem;
  transition: color .15s, border-color .15s;
}
.signal-sub-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ─── CONTACT PAGE ───────────────────────────────────────── */

.contact-wrap {
  border-top: 2px solid var(--fg);
  padding: clamp(52px,8vw,100px) var(--pad-x) clamp(52px,8vw,100px) calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: clamp(36px,5vw,56px);
}
.contact-framing {
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(.95rem,1.4vw,1.0625rem);
  line-height: 1.82;
  opacity: .9;
  max-width: 520px;
}
.contact-email {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: clamp(1rem,2.5vw,1.5rem);
  letter-spacing: .01em;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity .15s;
}
.contact-email:hover { opacity: .6; }
.contact-secondary {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--divider);
  padding-top: clamp(20px,3vw,28px);
}
.contact-sec-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--divider);
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--mid);
  transition: color .15s;
}
.contact-sec-link:hover { color: var(--accent); }
.contact-sec-label { opacity: .45; font-size: .5rem; letter-spacing: .1em; }

/* ─── CASE STUDIES ───────────────────────────────────────── */

/* password gate — fixed full-screen overlay */
.cs-gate {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad-x);
  transition: opacity .4s;
}
.cs-gate.fading { opacity: 0; pointer-events: none; }
.cs-gate-inner {
  max-width: 420px; width: 100%;
  display: flex; flex-direction: column; gap: 22px;
}
.cs-gate-eyebrow {
  font-family: var(--f-mono); font-size: .58rem;
  color: var(--mid); letter-spacing: .1em; opacity: .45;
}
.cs-gate-title {
  font-family: var(--f-disp);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: var(--name-weight);
  letter-spacing: -.02em; line-height: 1.05;
  transition: font-family .25s, font-weight .25s;
}
.cs-gate-sub {
  font-family: var(--f-mono); font-size: .63rem;
  color: var(--mid); letter-spacing: .03em;
  line-height: 1.7; opacity: .8;
}
.cs-gate-form { display: flex; flex-direction: column; gap: 8px; }
.cs-gate-input {
  font-family: var(--f-mono); font-size: .78rem;
  background: none; border: 1px solid var(--divider);
  color: var(--fg); padding: .7rem 1rem;
  letter-spacing: .06em; outline: none;
  transition: border-color .15s;
}
.cs-gate-input:focus { border-color: var(--accent); }
.cs-gate-btn {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em;
  background: none; border: 1px solid var(--divider);
  color: var(--mid); padding: .625rem 1rem;
  cursor: pointer; text-align: left;
  transition: color .15s, border-color .15s;
}
.cs-gate-btn:hover { color: var(--accent); border-color: var(--accent); }
.cs-gate-error {
  font-family: var(--f-mono); font-size: .6rem;
  color: var(--accent); letter-spacing: .05em;
  opacity: 0; transition: opacity .15s; min-height: 1em;
}
.cs-gate-error.show { opacity: 1; }

/* metadata block */
.cs-meta {
  border-top: 2px solid var(--fg);
  border-bottom: 1px solid var(--divider);
  padding: clamp(18px,2.5vw,28px) var(--pad-x);
  display: flex; flex-wrap: wrap; gap: 0;
}
.cs-meta-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px clamp(14px,2vw,24px) 8px 0;
  margin-right: clamp(14px,2vw,24px);
  border-right: 1px solid var(--divider);
  flex-shrink: 0;
}
.cs-meta-row:last-child { border-right: none; margin-right: 0; }
.cs-meta-key {
  font-family: var(--f-mono); font-size: .5rem;
  color: var(--mid); letter-spacing: .1em; opacity: .45;
}
.cs-meta-val {
  font-family: var(--f-mono); font-size: .63rem;
  color: var(--mid); letter-spacing: .02em; line-height: 1.4;
}

/* BLUF — italic lead-in */
.cs-bluf {
  border-bottom: 1px solid var(--divider);
  padding: clamp(40px,5.5vw,68px) var(--pad-x) clamp(40px,5.5vw,68px)
    calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  max-width: 860px;
}
.cs-bluf p {
  font-family: var(--f-body); font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.82; opacity: .9; margin-bottom: 1.25em;
}
.cs-bluf p:last-child { margin-bottom: 0; }

/* editorial body sections */
.cs-body {
  padding: clamp(36px,5vw,60px) var(--pad-x) 0
    calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  max-width: 860px;
}
.cs-section-header {
  font-family: var(--f-disp); font-weight: var(--name-weight);
  font-size: clamp(1.25rem,2.8vw,1.875rem);
  letter-spacing: -.02em; line-height: 1.1;
  margin-top: 0; margin-bottom: 1.5rem;
  transition: font-family .25s, font-weight .25s;
}
.cs-body p {
  font-family: var(--f-body); font-size: 1rem;
  line-height: 1.82; opacity: .9; margin-bottom: 1.5em;
}
.cs-body p:last-child { margin-bottom: 0; }
.cs-body strong { font-weight: 600; }
.cs-body blockquote {
  border-left: 2px solid var(--accent);
  padding: .25rem 0 .25rem 1.5rem;
  margin: 1.75rem 0;
}
.cs-body blockquote p {
  font-style: italic;
  font-size: clamp(.9rem,1.3vw,1.0625rem);
  opacity: .75; margin-bottom: 0;
}

/* image placeholder zones */
.cs-image-zone {
  margin-top: clamp(28px,4vw,48px);
  margin-left: calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  margin-right: var(--pad-x);
  aspect-ratio: 16/9;
  background: var(--faint);
  border: 1px solid var(--divider);
  display: flex; align-items: flex-end;
}
.cs-image-caption {
  padding: 10px 14px;
  font-family: var(--f-mono); font-size: .55rem;
  color: var(--mid); letter-spacing: .06em; opacity: .5;
}

/* closing sections */
.cs-proud {
  border-top: 1px solid var(--divider);
  padding: clamp(40px,5.5vw,68px) var(--pad-x) clamp(40px,5.5vw,68px)
    calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
  max-width: 860px;
}
.cs-proud p {
  font-family: var(--f-body); font-size: 1rem;
  line-height: 1.82; opacity: .9; margin-bottom: 1.5em;
}
.cs-proud p:last-child { margin-bottom: 0; }

/* contact CTA */
.cs-cta-section {
  border-top: 1px solid var(--divider);
  padding: clamp(28px,4vw,48px) var(--pad-x) clamp(28px,4vw,48px)
    calc(var(--pad-x) + 2.5rem + 1px + clamp(14px,2vw,22px));
}
.cs-nda-note {
  font-family: var(--f-mono); font-style: italic;
  font-size: .62rem; color: var(--mid);
  letter-spacing: .03em; opacity: .65;
  margin-bottom: 1.25rem; line-height: 1.65;
}
.cs-cta-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .05em;
  color: var(--mid); border: 1px solid var(--divider);
  padding: .625rem 1rem; transition: color .15s, border-color .15s;
}
.cs-cta-link:hover { color: var(--accent); border-color: var(--accent); }

/* hide mobile menu panel on desktop */
@media (min-width: 681px) {
  .nav-mobile-menu { display: none; }
}

/* ─── MOBILE NAV ─────────────────────────────────────────── */

/* hamburger button — hidden on desktop */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--mid);
  padding: 4px 0;
  transition: color .15s;
  line-height: 1;
}
.nav-hamburger:hover { color: var(--fg); }

/* mobile menu panel — slides from top */
.nav-mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  z-index: 190;
  background: var(--bg);
  border-bottom: 2px solid var(--fg);
  transform: translateY(-105%);
  transition: transform .38s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.nav-mobile-menu.open {
  transform: translateY(0);
  pointer-events: all;
}
.nav-mobile-menu ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  gap: 0;
}
.nav-mobile-menu ul li {
  border-bottom: 1px solid var(--divider);
}
.nav-mobile-menu ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--pad-x);
  font-family: var(--f-mono);
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--mid);
  transition: color .15s, background .15s;
}
.nav-mobile-menu ul a::after {
  content: '→';
  opacity: .4;
  font-size: .75rem;
}
.nav-mobile-menu ul a:hover { color: var(--accent); background: var(--accent-dim); }
.nav-mobile-menu ul li:has(a[aria-current="page"]) {
  border-left: 2px solid var(--accent);
}
.nav-mobile-menu ul a[aria-current="page"] { color: var(--accent); }
.nav-mobile-menu ul a[aria-current="page"]::before { content: none; }

/* ─── MOBILE ──────────────────────────────────────────────── */
@media (max-width:680px) {
  /* nav: always visible, links hidden, hamburger shown */
  nav {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: all !important;
    border-bottom-color: var(--divider) !important;
  }
  .nav-links { display: none; }
  .nav-hamburger { display: block; }

  /* hero: two full-screen panels stacked */
  .hero { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .hero-vline { display:none; }

  /* panel 1 — name + eyebrow, anchored to lower third */
  .hero-left {
    grid-column:1; grid-row:1;
    justify-content: flex-end;
    min-height: 100svh;
    padding: var(--nav-h) var(--pad-x) 22svh;
  }
  .hero-name { font-size: clamp(5rem, 23vw, 7rem); }

  /* panel 2 — preview nav + description, content at ~22% from top */
  .hero-right {
    grid-column:1; grid-row:2;
    min-height: 100svh;
    padding: 22svh var(--pad-x) clamp(40px,6vw,60px);
    justify-content: flex-start;
    gap: 40px;
  }
  .hero-bottom{ grid-column:1; grid-row:3; }
  .footer-top { grid-template-columns:1fr; }
  .footer-vline { display:none; }
  .footer-sys-col { border-top: 1px solid var(--divider); }
  .float-ctrl { bottom:16px; right:16px; }

  /* float-ctrl: 25% larger touch targets on mobile */
  .float-ctrl-inner { padding: 14px 20px; gap: 13px; }
  .accent-dots { gap: 10px; }
  .dot { width: 15px; height: 15px; }
  .icon-btn svg { width: 24px; height: 24px; }

  /* contrast: darken mid tokens for older-audience legibility */
  html[data-theme="light"] { --mid: #5A5A5A; }
  html[data-theme="dark"]  { --mid: #7D7D7B; }

  /* type: lift sub-.65rem sizes to readable floor */
  .sys-key, .sys-val          { font-size: .68rem; }
  .f-sys-k, .f-sys-v          { font-size: .68rem; }
  .pc-k                        { font-size: .62rem; }
  .pc-v                        { font-size: .68rem; }
  .cred-k                      { font-size: .62rem; }
  .cred-v                      { font-size: .72rem; }
  .section-kicker,
  .thinking-kicker             { font-size: .65rem; }
  .tx-date                     { font-size: .68rem; }
  .tx-tier                     { font-size: .62rem; }
  .tx-tags                     { font-size: .62rem; }
  .bc-egg-k                    { font-size: .62rem; }
  .footer-col-label            { font-size: .65rem; }
  .signal-tier-note            { font-size: .7rem; }
  .pc-cta, .avail-cta,
  .signal-sub-btn              { font-size: .78rem; }

  /* interior page header
     Title anchored at golden section from top (~38svh = 1 - 1/φ),
     consistent across all pages regardless of description length.
     17svh (1/6 screen) guaranteed below last line of description. */
  .page-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100svh;
    padding-top: 38svh;
    padding-bottom: 17svh;
  }
  .ph-vline { display:none; }
  .ph-left  { padding-top: 0; padding-bottom: 0; }
  .ph-right {
    padding-top: clamp(16px,3vw,24px);
    padding-bottom: 0;
    border-top: 1px solid var(--divider);
  }
  .page-title { font-size: clamp(3.2rem, 13vw, 5rem); }

  /* philosophy — collapse to stacked */
  .phil-item {
    grid-template-columns: 1fr;
  }
  .phil-item .pc-index { display: none; }
  .phil-item .pc-vline { display: none; }
  .phil-name-col { padding-bottom: 0; padding-left: var(--pad-x); }
  .phil-body-col { padding-left: var(--pad-x); padding-top: 12px; }
  .cred-section,
  .avail-section { padding-left: var(--pad-x); }

  /* about — collapse portrait intro */
  .about-intro { grid-template-columns: 1fr; }
  .about-intro .ph-vline { display: none; }
  .about-intro-right { border-top: 1px solid var(--divider); padding-top: clamp(20px,3vw,28px); }
  .about-portrait-img { max-width: 180px; }
  .about-bio,
  .about-thinking,
  .about-elsewhere { padding-left: var(--pad-x); }

  /* project cards — collapse to stacked */
  .project-card {
    grid-template-columns: 1fr;
  }
  .pc-index { display:none; }
  .pc-vline { display:none; }
  .pc-meta {
    padding: 16px var(--pad-x);
    border-bottom: 1px solid var(--divider);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 24px;
  }
  .pc-row {
    border-bottom: none;
    padding: 0;
  }
  .pc-content { padding: 20px var(--pad-x); }

  /* contact */
  .contact-wrap { padding-left: var(--pad-x); }

  /* signal transmission list — collapse to stacked */
  .tx-item { grid-template-columns: 1fr; }
  .tx-num-col { display: none; }
  .tx-vline { display: none; }
  .tx-content { padding: 18px var(--pad-x); }
  .signal-pub-intro,
  .signal-sub-cta,
  .field-dispatch { padding-left: var(--pad-x); }

  /* ── golden ratio vertical rhythm ───────────────────────────
     Fibonacci svh scale: 5 · 8 · 13 · 21  (ratio ≈ φ 1.618)
     Each step ~1.6× the previous, tied to viewport height.    */

  /* homepage */
  .section-break { margin: 8svh 0; }
  .entries { padding-top: 8svh; padding-bottom: 13svh; }
  .signal-bar { margin: 8svh var(--pad-x); }

  /* about */
  .about-intro { padding-top: 0; }
  .about-bio    { padding-top: 13svh; padding-bottom: 13svh; }
  .about-thinking { padding-top: 8svh; padding-bottom: 8svh; }
  .about-elsewhere { padding-top: 5svh; padding-bottom: 8svh; }

  /* work */
  .pc-content   { padding-top: 8svh; padding-bottom: 8svh; }
  .pc-meta      { padding-top: 5svh; padding-bottom: 5svh; }

  /* leadership */
  .phil-name-col { padding-top: 8svh; padding-bottom: 0; }
  .phil-body-col { padding-top: 5svh; padding-bottom: 8svh; }
  .cred-section  { padding-top: 8svh; padding-bottom: 8svh; }
  .avail-section { padding-top: 8svh; padding-bottom: 13svh; }

  /* signal */
  .signal-pub-intro { padding-top: 13svh; padding-bottom: 8svh; }
  .tx-content       { padding-top: 5svh; padding-bottom: 5svh; }
  .signal-sub-cta   { padding-top: 8svh; padding-bottom: 13svh; }

  /* contact */
  .contact-wrap { padding-top: 13svh; padding-bottom: 21svh; gap: 8svh; }

  /* case studies */
  .cs-meta { flex-direction: column; gap: 0; }
  .cs-meta-row { border-right: none; border-bottom: 1px solid var(--divider); margin-right: 0; padding-right: 0; }
  .cs-meta-row:last-child { border-bottom: none; }
  .cs-meta-key { font-size: .62rem; }
  .cs-meta-val { font-size: .7rem; }
  .cs-bluf { padding-left: var(--pad-x); }
  .cs-body { padding-left: var(--pad-x); }
  .cs-image-zone { margin-left: var(--pad-x); margin-right: var(--pad-x); }
  .cs-proud { padding-left: var(--pad-x); }
  .cs-cta-section { padding-left: var(--pad-x); }
  .cs-nda-note { font-size: .7rem; }
  .cs-cta-link { font-size: .78rem; }

  /* homepage mobile tweaks */
  .hero-bottom { display: none; }
  .section-break-detail { display: none; }

  /* ── scroll hint (mobile-only) ───────────────────────────── */
  .scroll-hint {
    position: fixed;
    bottom: 28px;
    left: var(--pad-x);
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--mid);
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .scroll-hint.hidden { opacity: 0; }
  .scroll-hint-label { opacity: 0.7; }
  .scroll-hint-arrow {
    display: inline-block;
    animation: bounce 1.4s ease-in-out infinite;
  }
}