/* The 66th — Blog shared styles (post template + hub) */

:root{
  --bg:#0A0A0B;
  --bg-2:#0E0E10;
  --ink:#EDE8DE;
  --ink-soft:rgba(237,232,222,.7);
  --ink-dim:#8A857A;
  --ink-mute:#55524C;
  --line:rgba(237,232,222,.08);
  --line-2:rgba(237,232,222,.14);
  --accent: oklch(78% 0.12 72);
  --accent-2: oklch(88% 0.06 72);
  --glow: oklch(78% 0.12 72 / 0.35);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.32,.72,0,1);
  --f-sans:'Geist',system-ui,sans-serif;
  --f-mono:'Geist Mono',monospace;
  --f-serif:'Instrument Serif',serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
body{overflow-x:hidden;line-height:1.55;font-size:16px;letter-spacing:-0.005em}
::selection{background:var(--accent);color:#0A0A0B}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/></svg>")}

.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
@media (max-width:800px){.wrap{padding:0 20px}}

/* ============ NAV (canonical floating-island, double-bezel) ============ */
/* Mirror of assets/the66th.css so blog template matches the main site nav. */
nav.top{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:50;display:flex;align-items:center;gap:6px;
  padding:6px;
  background:linear-gradient(180deg,rgba(20,20,24,.55) 0%,rgba(10,10,12,.55) 100%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  backdrop-filter:blur(28px) saturate(140%);
  border:1px solid rgba(237,232,222,.06);
  border-radius:999px;
  box-shadow:
    0 1px 0 rgba(237,232,222,.05) inset,
    0 0 0 1px rgba(0,0,0,.4),
    0 24px 60px -20px rgba(0,0,0,.7),
    0 8px 24px -8px rgba(0,0,0,.5);
  transition:top .6s cubic-bezier(.32,.72,0,1), padding .6s cubic-bezier(.32,.72,0,1), transform .6s cubic-bezier(.32,.72,0,1), background .35s;
  isolation:isolate;
}
nav.top::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%, rgba(237,232,222,.08) 0%, transparent 50%);
  opacity:.9;
}
nav.top.scrolled{
  top:14px;
  padding:5px;
  background:linear-gradient(180deg,rgba(14,14,17,.85) 0%,rgba(8,8,10,.85) 100%);
  box-shadow:
    0 1px 0 rgba(237,232,222,.06) inset,
    0 0 0 1px rgba(0,0,0,.5),
    0 18px 40px -16px rgba(0,0,0,.8);
}
.nav-left{
  display:flex;align-items:center;gap:6px;
  height:40px;padding:0 6px 0 14px;
  border-radius:999px;
  position:relative;
}
.nav-left::after{
  content:"";position:absolute;right:-3px;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg, transparent 0%, rgba(237,232,222,.12) 50%, transparent 100%);
}
.logo{
  display:flex;align-items:center;gap:11px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  padding-right:12px;
  transition:opacity .35s ease;
}
.logo:hover{opacity:.85}
.logo-mark{
  width:26px;height:26px;
  border-radius:5px;
  flex-shrink:0;
  display:block;
}
.navlinks{display:flex;gap:2px;align-items:center}
.navlinks a{
  position:relative;
  padding:9px 14px;border-radius:999px;
  font-size:.81rem;font-weight:400;letter-spacing:-.005em;
  color:rgba(237,232,222,.62);text-decoration:none;white-space:nowrap;
  transition:color .4s cubic-bezier(.32,.72,0,1);
  display:inline-flex;align-items:center;gap:6px;
}
.navlinks a::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(237,232,222,.04);
  opacity:0;transform:scale(.92);
  transition:opacity .35s cubic-bezier(.32,.72,0,1), transform .35s cubic-bezier(.32,.72,0,1);
}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::before{opacity:1;transform:scale(1)}
.navlinks a.active{color:var(--ink)}
.navlinks a.active::before{
  opacity:1;transform:scale(1);
  background:rgba(237,232,222,.05);
  box-shadow:inset 0 0 0 1px rgba(237,232,222,.1), inset 0 1px 0 rgba(237,232,222,.08);
}
.navlinks a.active::after{
  content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--glow);
}
.nav-cta-ghost{
  display:inline-flex;align-items:center;gap:9px;
  height:40px;padding:0 18px;
  background:transparent;color:rgba(237,232,222,.7);
  border:1px solid rgba(237,232,222,.08);
  border-radius:999px;
  font-family:var(--f-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  margin-right:2px;position:relative;
  transition:color .4s cubic-bezier(.32,.72,0,1), border-color .4s cubic-bezier(.32,.72,0,1), background .4s cubic-bezier(.32,.72,0,1);
}
.nav-cta-ghost::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:rgba(237,232,222,.3);
  transition:background .35s cubic-bezier(.32,.72,0,1), box-shadow .35s cubic-bezier(.32,.72,0,1), transform .35s cubic-bezier(.32,.72,0,1);
}
.nav-cta-ghost:hover{
  color:var(--ink);
  border-color:rgba(237,232,222,.2);
  background:rgba(237,232,222,.03);
}
.nav-cta-ghost:hover::before{
  background:var(--accent-2);
  box-shadow:0 0 12px var(--glow);
  transform:scale(1.2);
}
.nav-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 6px 6px 18px;height:40px;
  background:var(--ink);color:var(--bg);
  border-radius:999px;
  font-family:var(--f-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 8px 20px -10px rgba(0,0,0,.6);
  transition:background .4s cubic-bezier(.32,.72,0,1), transform .25s cubic-bezier(.32,.72,0,1), box-shadow .4s cubic-bezier(.32,.72,0,1);
}
.nav-cta .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--glow), 0 0 0 3px rgba(255,180,100,.12);
  animation:cta-pulse 2.6s cubic-bezier(.32,.72,0,1) infinite;
}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 0 10px var(--glow), 0 0 0 3px rgba(255,180,100,.1)}
  50%{box-shadow:0 0 16px var(--glow), 0 0 0 5px rgba(255,180,100,.18)}
}
@media (prefers-reduced-motion: reduce){ .nav-cta .dot{animation:none} }
.nav-cta .arr{
  width:28px;height:28px;border-radius:50%;
  background:var(--bg);color:var(--ink);
  display:grid;place-items:center;font-size:.75rem;
  transition:transform .45s cubic-bezier(.32,.72,0,1), background .4s cubic-bezier(.32,.72,0,1);
}
.nav-cta:hover{
  background:var(--accent);color:var(--bg);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 14px 30px -10px var(--glow);
}
.nav-cta:hover .arr{
  transform:translate(2px,-2px) rotate(-12deg) scale(1.06);
  background:var(--bg);
}
.nav-cta:active{transform:scale(.97)}
.nav-burger{
  display:none;width:40px;height:40px;
  border:1px solid rgba(237,232,222,.1);border-radius:50%;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  padding:0;background:rgba(237,232,222,.02);cursor:pointer;
  transition:background .35s ease, border-color .35s ease;
}
.nav-burger:hover{background:rgba(237,232,222,.06);border-color:rgba(237,232,222,.18)}
.nav-burger span{
  display:block;width:14px;height:1.5px;background:var(--ink);
  transition:transform .5s cubic-bezier(.32,.72,0,1), opacity .35s ease;
}
.nav-burger.open span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-3.25px) rotate(-45deg)}
.mobile-menu{
  display:none;position:fixed;inset:0;
  background:radial-gradient(120% 80% at 50% 0%, rgba(20,20,24,.4), rgba(6,6,8,.94) 60%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  backdrop-filter:blur(28px) saturate(140%);
  z-index:49;padding:104px 28px 40px;
  flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .5s cubic-bezier(.32,.72,0,1);
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 4px;
  border-bottom:1px solid rgba(237,232,222,.08);
  font-size:1.6rem;letter-spacing:-.025em;line-height:1;
  color:var(--ink);text-decoration:none;
  opacity:0;transform:translateY(28px);filter:blur(8px);
  transition:opacity .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1), filter .7s cubic-bezier(.32,.72,0,1), color .3s ease;
}
.mobile-menu a::after{
  content:"→";font-family:var(--f-mono);font-size:.85rem;color:var(--ink-mute);
  transition:transform .35s cubic-bezier(.32,.72,0,1), color .3s ease;
}
.mobile-menu a:hover::after{transform:translateX(6px) rotate(-12deg);color:var(--accent)}
.mobile-menu.open a{opacity:1;transform:translateY(0);filter:blur(0)}
.mobile-menu.open a:nth-child(1){transition-delay:.08s}
.mobile-menu.open a:nth-child(2){transition-delay:.14s}
.mobile-menu.open a:nth-child(3){transition-delay:.20s}
.mobile-menu.open a:nth-child(4){transition-delay:.26s}
.mobile-menu.open a:nth-child(5){transition-delay:.32s}
.mobile-menu.open a:nth-child(6){transition-delay:.38s}
.mobile-menu.open a:nth-child(7){transition-delay:.44s}
.mobile-menu.open a:nth-child(8){transition-delay:.50s}
@media (prefers-reduced-motion: reduce){
  .mobile-menu a,.mobile-menu.open a{transition-duration:.2s !important;filter:none !important;transform:none !important}
}
@media (max-width:1000px){
  nav.top{top:14px;padding:5px;gap:4px}
  .navlinks{display:none}
  .nav-left{padding:0 4px 0 12px;gap:0}
  .nav-left::after{display:none}
  .logo{padding-right:0}
  .nav-burger{display:flex}
  .mobile-menu{display:flex}
  .nav-cta-ghost{display:inline-flex}
  .nav-cta{display:none}
}
@media (max-width:520px){
  nav.top{left:14px;right:14px;transform:none;width:auto;justify-content:space-between}
  .logo span:not(.logo-mark){font-size:.66rem}
}

/* ============ POST HERO ============ */
.post-hero{padding:160px 40px 60px;position:relative;overflow:hidden}
.post-hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 50% at 50% 100%, oklch(78% 0.12 72 / 0.06), transparent 70%),
  radial-gradient(circle 800px at 80% 0%, oklch(78% 0.12 72 / 0.04), transparent 60%);pointer-events:none}
.post-hero-inner{max-width:920px;margin:0 auto;position:relative;z-index:2}
.post-back{display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;margin-bottom:32px;transition:color .3s, transform .3s}
.post-back:hover{color:var(--accent)}
.post-back::before{content:"←";display:inline-block;transition:transform .3s var(--ease-spring)}
.post-back:hover::before{transform:translateX(-3px)}
.post-eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.post-eyebrow .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);background:var(--bg-2)}
.post-eyebrow .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--glow)}
.post-eyebrow .meta{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.12em;color:var(--ink-dim);text-transform:uppercase;display:flex;align-items:center;gap:14px}
.post-eyebrow .meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-mute)}
.post-hero h1{font-family:'Geist',sans-serif;font-weight:400;font-size:clamp(32px,5vw,60px);line-height:1.06;letter-spacing:-0.035em;color:var(--ink);max-width:24ch}
.post-dek{margin-top:28px;font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(20px,2.4vw,28px);line-height:1.4;color:var(--ink-dim);max-width:60ch;letter-spacing:-0.005em}
.post-author-row{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.12em;color:var(--ink-dim);text-transform:uppercase}
.post-author-row .name{color:var(--ink);font-family:'Geist',sans-serif;font-size:14px;letter-spacing:-0.01em;text-transform:none;font-weight:500}
.post-author-row .dash{width:24px;height:1px;background:var(--accent)}

/* ============ HERO IMAGE (Double-Bezel) ============ */
.post-hero-image{max-width:1100px;margin:0 auto;padding:0 40px}
.post-hero-image .frame{padding:8px;border-radius:24px;background:rgba(237,232,222,0.04);border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,0.4)}
.post-hero-image .frame .inner{border-radius:18px;overflow:hidden;background:var(--bg-2);box-shadow:inset 0 1px 1px rgba(237,232,222,.05)}
.post-hero-image img{width:100%;height:auto;display:block}
@media (max-width:800px){.post-hero-image{padding:0 20px}.post-hero-image .frame{padding:5px;border-radius:16px}.post-hero-image .frame .inner{border-radius:11px}}

/* ============ POST BODY ============ */
.post-body{max-width:760px;margin:80px auto 120px;padding:0 40px;font-size:18px;line-height:1.75;color:var(--ink)}
@media (max-width:800px){.post-body{padding:0 20px;margin:48px auto 80px;font-size:17px}}

.post-body p{margin-bottom:24px;color:var(--ink)}
.post-body p:has(+ ul),.post-body p:has(+ ol){margin-bottom:14px}
.post-body a{color:var(--accent-2);text-decoration:none;border-bottom:1px solid oklch(78% 0.12 72 / 0.4);transition:border-color .3s, color .3s}
.post-body a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.post-body strong{color:var(--ink);font-weight:500}
.post-body em{font-style:italic;color:var(--ink)}

.post-body h2{font-family:'Geist',sans-serif;font-weight:500;font-size:clamp(26px,3vw,36px);line-height:1.18;letter-spacing:-0.025em;color:var(--ink);margin:72px 0 24px;padding-top:24px;border-top:1px solid var(--line);max-width:28ch}
.post-body h2:first-child{margin-top:0;border-top:none;padding-top:0}
.post-body h3{font-family:'Geist',sans-serif;font-weight:500;font-size:clamp(20px,2.2vw,26px);line-height:1.25;letter-spacing:-0.02em;color:var(--ink);margin:48px 0 16px;max-width:30ch}
.post-body h4{font-family:'Geist',sans-serif;font-weight:500;font-size:18px;line-height:1.3;color:var(--ink);margin:32px 0 12px}

.post-body ul,.post-body ol{margin-bottom:24px;padding-left:24px}
.post-body li{margin-bottom:10px;line-height:1.65}
.post-body li::marker{color:var(--accent)}

.post-body blockquote{margin:40px 0;padding:24px 32px;border-left:2px solid var(--accent);background:linear-gradient(90deg, oklch(78% 0.12 72 / 0.05), transparent);font-family:'Instrument Serif',serif;font-style:italic;font-size:22px;line-height:1.45;color:var(--ink)}

.post-body code{font-family:'Geist Mono',monospace;font-size:0.88em;padding:2px 6px;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;color:var(--accent-2)}
.post-body pre{margin:32px 0;padding:24px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;overflow-x:auto;font-family:'Geist Mono',monospace;font-size:14px;line-height:1.55}
.post-body pre code{background:none;border:none;padding:0;color:var(--ink)}

.post-body img{margin:40px auto;border-radius:14px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,0.4)}

.post-body table{width:100%;margin:32px 0;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:15px}
.post-body table th{padding:14px 18px;background:var(--bg-2);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-dim);text-align:left;border-bottom:1px solid var(--line)}
.post-body table td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink-dim)}
.post-body table tr:last-child td{border-bottom:none}

.post-body hr{margin:56px auto;border:none;border-top:1px solid var(--line);max-width:120px}

/* ============ POST FOOTER (Related + CTA) ============ */
.post-related{padding:80px 40px;border-top:1px solid var(--line);background:linear-gradient(180deg, transparent, oklch(78% 0.12 72 / 0.02))}
.post-related-head{max-width:1200px;margin:0 auto 40px;display:flex;align-items:end;justify-content:space-between;gap:32px}
.post-related-head h2{font-family:'Geist',sans-serif;font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.06;letter-spacing:-0.03em;max-width:18ch}
.post-related-head h2 .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--accent-2)}
.post-related-head .all{display:inline-flex;align-items:center;gap:10px;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color .3s}
.post-related-head .all:hover{color:var(--accent)}
.post-related-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.post-related-grid{grid-template-columns:1fr;gap:16px}.post-related-head{flex-direction:column;align-items:start}}

.post-card{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .4s var(--ease-spring), border-color .45s, box-shadow .45s;position:relative}
.post-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--accent) 50%,transparent 100%);opacity:0;transition:opacity .45s var(--ease-spring);z-index:1;pointer-events:none}
.post-card:hover{transform:translateY(-4px);border-color:oklch(78% 0.12 72 / 0.45);box-shadow:0 0 0 1px oklch(78% 0.12 72 / 0.08),0 24px 48px rgba(0,0,0,.4),0 0 40px oklch(78% 0.12 72 / 0.07)}
.post-card:hover::before{opacity:1}
.post-card-img{aspect-ratio:16/10;background:radial-gradient(ellipse 90% 90% at 75% 50%, oklch(78% 0.12 72 / 0.12) 0%, var(--bg) 70%);overflow:hidden;position:relative}
.post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.post-card:hover .post-card-img img{transform:scale(1.04)}
.post-card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px}
.post-card .pill{display:inline-flex;align-items:center;padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);align-self:start;transition:background .35s,border-color .35s}
.post-card:hover .pill{background:oklch(78% 0.12 72 / 0.1);border-color:oklch(78% 0.12 72 / 0.4)}
.post-card h3{font-family:'Geist',sans-serif;font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-0.02em;color:var(--ink);max-width:24ch}
.post-card .meta{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.12em;color:var(--ink-mute);text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-top:4px}
.post-card .meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-mute)}

/* ============ CTA ============ */
.cta-section{padding:140px 40px;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta-section::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:900px;height:900px;border-radius:50%;background:radial-gradient(circle, oklch(78% 0.12 72 / 0.10), transparent 60%);pointer-events:none;filter:blur(40px)}
.cta-section .eyebrow{font-family:'Instrument Serif',serif;font-style:italic;font-size:20px;color:var(--ink-dim);margin-bottom:24px;position:relative}
.cta-section h2{font-family:'Geist',sans-serif;font-weight:400;font-size:clamp(40px,7vw,96px);line-height:0.98;letter-spacing:-0.04em;max-width:18ch;margin:0 auto 40px;position:relative}
.cta-section h2 .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--accent-2)}
.cta-btn{display:inline-flex;align-items:center;gap:14px;padding:9px 9px 9px 26px;background:var(--ink);color:var(--bg);border-radius:999px;text-decoration:none;font-weight:500;font-size:15px;letter-spacing:-0.01em;transition:transform .35s var(--ease-spring), background .35s}
.cta-btn .arr{width:32px;height:32px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;font-size:13px;transition:transform .35s var(--ease-spring)}
.cta-btn:hover{background:var(--accent)}
.cta-btn:hover .arr{transform:translateX(3px)}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:64px 40px 32px;background:var(--bg-2)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:60px;margin-bottom:64px;max-width:1200px;margin-left:auto;margin-right:auto}
.footer-brand h3{font-family:'Geist',sans-serif;font-weight:400;font-size:56px;line-height:1;letter-spacing:-0.04em;margin-bottom:20px}
.footer-brand h3 .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--accent-2)}
.footer-brand p{color:var(--ink-dim);font-size:13px;max-width:32ch;line-height:1.55}
.footer-col h4{font-family:'Geist Mono',monospace;font-size:11px;color:var(--ink-dim);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:20px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col a{color:var(--ink);text-decoration:none;font-size:14px;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--line);font-family:'Geist Mono',monospace;font-size:11px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;max-width:1200px;margin:0 auto}
@media (max-width:900px){.footer-top{grid-template-columns:1fr;gap:40px}footer{padding:48px 20px 28px}.footer-bot{flex-direction:column;gap:12px}}

/* ============ HUB PAGE ============ */
.hub-hero{padding:160px 40px 60px;position:relative;overflow:hidden}
.hub-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.hub-hero h1{font-family:'Geist',sans-serif;font-weight:400;font-size:clamp(48px,8vw,108px);line-height:0.95;letter-spacing:-0.045em;max-width:14ch}
.hub-hero h1 .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--accent-2)}
.hub-hero .lede{margin-top:24px;color:var(--ink-dim);font-size:18px;max-width:54ch;line-height:1.5}
.hub-hero .stat{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-dim)}
.hub-hero .stat .v{color:var(--ink);font-size:36px;letter-spacing:-0.02em;display:block;margin-top:6px;font-family:'Geist',sans-serif}
@media (max-width:800px){.hub-hero{padding:130px 20px 40px}.hub-hero-inner{grid-template-columns:1fr;gap:24px}}

.hub-controls{max-width:1200px;margin:48px auto 0;padding:0 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.hub-filters{display:flex;gap:8px;flex-wrap:wrap}
.hub-filter{padding:9px 18px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink-dim);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;transition:all .35s var(--ease-spring)}
.hub-filter:hover{color:var(--ink);border-color:var(--ink-dim)}
.hub-filter.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hub-search{position:relative;display:flex;align-items:center;min-width:240px}
.hub-search input{width:100%;padding:11px 14px 11px 38px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);color:var(--ink);font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.08em;outline:none;transition:border-color .25s}
.hub-search input::placeholder{color:var(--ink-mute);text-transform:uppercase}
.hub-search input:focus{border-color:var(--accent)}
.hub-search::before{content:"";position:absolute;left:14px;top:50%;width:14px;height:14px;border:1.5px solid var(--ink-mute);border-radius:50%;transform:translateY(-50%)}
.hub-search::after{content:"";position:absolute;left:24px;top:calc(50% + 4px);width:6px;height:1.5px;background:var(--ink-mute);transform:rotate(45deg)}
@media (max-width:800px){.hub-controls{padding:0 20px;flex-direction:column;align-items:stretch}.hub-search{min-width:0}}

/* Featured */
.hub-featured{max-width:1200px;margin:48px auto 80px;padding:0 40px}
.hub-featured-card{display:grid;grid-template-columns:1.2fr 1fr;gap:0;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .4s, transform .4s var(--ease-spring)}
.hub-featured-card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.hub-featured-card .img{aspect-ratio:16/11;overflow:hidden;background:var(--bg)}
.hub-featured-card .img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.hub-featured-card:hover .img img{transform:scale(1.03)}
.hub-featured-card .body{padding:48px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.hub-featured-card .label{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
.hub-featured-card .label::before{content:"";width:12px;height:1px;background:var(--accent)}
.hub-featured-card h2{font-family:'Geist',sans-serif;font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-0.025em;max-width:24ch}
.hub-featured-card .dek{font-family:'Instrument Serif',serif;font-style:italic;color:var(--ink-dim);font-size:18px;line-height:1.4;max-width:40ch}
.hub-featured-card .meta{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.12em;color:var(--ink-mute);text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-top:8px}
.hub-featured-card .meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-mute)}
@media (max-width:900px){.hub-featured-card{grid-template-columns:1fr}.hub-featured-card .body{padding:32px 24px}}

.hub-grid{max-width:1200px;margin:0 auto 100px;padding:0 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:1000px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.hub-grid{grid-template-columns:1fr;padding:0 20px}}

/* Empty state */
.hub-empty{max-width:1200px;margin:0 auto 100px;padding:80px 40px;text-align:center;color:var(--ink-dim);font-family:'Geist',sans-serif;font-size:18px;display:none}
.hub-empty.show{display:block}

/* ============ Signal Visualization (in-content) ============ */
.signal-vis{margin:48px 0;padding:32px;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.sv-header{margin-bottom:28px}
.sv-eyebrow{display:block;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.sv-cols-head{display:grid;grid-template-columns:100px 1fr;gap:16px;padding-left:100px}
.sv-col-label{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute)}
.sv-col-label.active{color:var(--accent)}
.sv-rows{display:flex;flex-direction:column;gap:18px}
.sv-row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:16px}
.sv-name{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-dim)}
.sv-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sv-bar-wrap{display:flex;align-items:center;gap:10px}
.sv-bar{flex:1;height:5px;background:rgba(237,232,222,0.07);border-radius:3px;overflow:hidden;position:relative}
.sv-fill{position:absolute;inset-block:0;left:0;width:0;border-radius:3px;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.sv-bar.passive .sv-fill{background:rgba(237,232,222,0.2)}
.sv-bar.active .sv-fill{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.sv-val{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.06em;white-space:nowrap}
.sv-val.passive{color:var(--ink-mute)}
.sv-val.active{color:var(--accent)}
@media (max-width:640px){.sv-row{grid-template-columns:72px 1fr}.sv-cols-head{padding-left:72px}.sv-pair{grid-template-columns:1fr}.sv-cols-head .active{display:none}}

/* ============ Reveal animations ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}
.mask{overflow:hidden}
.mask > *{display:inline-block;transform:translateY(110%);transition:transform 1.05s var(--ease-spring)}
.mask.in > *{transform:translateY(0)}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-mute)}

/* ============ POST RAIL (sticky reading aid + jump-to-note search) ============ */
.post-rail{
  display:none;
  position:fixed;
  top:120px;
  left:28px;
  width:236px;
  max-height:calc(100vh - 160px);
  z-index:40;
  font-family:'Geist',system-ui,sans-serif;
  pointer-events:none;
}
.post-rail-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:34px;
  padding-left:20px;
  height:100%;
  pointer-events:auto;
}
.post-rail-progress{
  position:absolute;
  left:0; top:2px; bottom:2px;
  width:1px;
  background:var(--line);
  overflow:hidden;
}
.post-rail-progress-fill{
  position:absolute;
  top:0; left:-1px;
  width:3px;
  height:100%;
  background:var(--accent);
  box-shadow:0 0 14px var(--glow);
  transform-origin:top center;
  transform:scaleY(0);
  transition:transform .12s linear;
  border-radius:2px;
}
.post-rail-section{display:flex;flex-direction:column;gap:14px;min-height:0}
.post-rail-toc-wrap{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.post-rail-toc{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(237,232,222,.12) transparent;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.post-rail-toc::-webkit-scrollbar{width:3px}
.post-rail-toc::-webkit-scrollbar-track{background:transparent}
.post-rail-toc::-webkit-scrollbar-thumb{background:rgba(237,232,222,.1);border-radius:2px}
.post-rail-label{
  font-family:'Geist Mono',monospace;
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.post-rail-toc-item{
  display:block;
  padding:6px 8px 6px 12px;
  border-left:1px solid transparent;
  margin-left:-13px;
  font-size:12.5px;
  line-height:1.35;
  color:var(--ink-dim);
  text-decoration:none;
  letter-spacing:-0.005em;
  transition:color .22s ease, border-color .22s ease, padding .22s ease, background .22s ease;
  border-radius:0 6px 6px 0;
}
.post-rail-toc-item.h3{
  padding-left:24px;
  font-size:11.5px;
  color:var(--ink-mute);
}
.post-rail-toc-item:hover{color:var(--ink);background:rgba(237,232,222,.025)}
.post-rail-toc-item.active{
  color:var(--accent-2);
  border-left-color:var(--accent);
  padding-left:16px;
  background:rgba(200,168,92,.04);
}
.post-rail-toc-item.h3.active{padding-left:28px}
.post-rail-foot{margin-top:auto}
.post-rail-search-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 13px;
  background:rgba(237,232,222,.025);
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--ink-dim);
  font-family:inherit;
  font-size:11.5px;
  letter-spacing:-0.005em;
  cursor:pointer;
  transition:all .22s ease;
  width:100%;
  text-align:left;
  font-feature-settings:"ss01","cv11";
}
.post-rail-search-trigger:hover{
  border-color:var(--line-2);
  background:rgba(237,232,222,.05);
  color:var(--ink);
}
.post-rail-search-trigger .kbd{
  font-family:'Geist Mono',monospace;
  font-size:9.5px;
  letter-spacing:.06em;
  padding:3px 7px;
  border:1px solid var(--line-2);
  border-radius:5px;
  background:rgba(0,0,0,.3);
  color:var(--ink-mute);
}
@media (min-width:1380px){.post-rail{display:block}}

/* ============ SEARCH POPOVER ============ */
.post-rail-popover{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(8,8,10,.7);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:120px 24px 24px;
  opacity:0;
  transition:opacity .2s ease;
}
.post-rail-popover.open{opacity:1}
.post-rail-popover-card{
  width:100%;
  max-width:660px;
  background:linear-gradient(180deg,rgba(20,20,24,.97),rgba(10,10,12,.97));
  border:1px solid var(--line-2);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4);
  transform:translateY(-10px) scale(.985);
  transition:transform .25s var(--ease-out);
}
.post-rail-popover.open .post-rail-popover-card{transform:translateY(0) scale(1)}
.post-rail-popover-input{
  display:block;
  width:100%;
  padding:24px 28px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-family:'Instrument Serif',serif;
  font-size:24px;
  letter-spacing:-0.01em;
  outline:none;
}
.post-rail-popover-input::placeholder{color:var(--ink-mute);font-style:italic}
.post-rail-popover-results{
  max-height:52vh;
  overflow-y:auto;
  padding:6px 0;
  scrollbar-width:thin;
  scrollbar-color:rgba(237,232,222,.12) transparent;
}
.post-rail-popover-results::-webkit-scrollbar{width:6px}
.post-rail-popover-results::-webkit-scrollbar-thumb{background:rgba(237,232,222,.1);border-radius:3px}
.post-rail-popover-item{
  display:grid;
  grid-template-columns:96px 1fr auto;
  align-items:baseline;
  gap:18px;
  padding:14px 28px;
  text-decoration:none;
  color:var(--ink);
  border-left:2px solid transparent;
  transition:background .15s ease, border-color .15s ease;
}
.post-rail-popover-item:hover,
.post-rail-popover-item.first{
  background:rgba(237,232,222,.035);
  border-left-color:var(--accent);
}
.post-rail-popover-item .r-meta{
  font-family:'Geist Mono',monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.post-rail-popover-item .r-title{
  font-family:'Geist',sans-serif;
  font-size:14px;
  line-height:1.4;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.post-rail-popover-item .r-date{text-align:right;white-space:nowrap}
.post-rail-popover-empty{
  padding:42px 28px;
  text-align:center;
  font-family:'Instrument Serif',serif;
  font-style:italic;
  color:var(--ink-dim);
  font-size:19px;
  letter-spacing:-0.01em;
}
.post-rail-popover-hint{
  display:flex;
  justify-content:space-between;
  padding:14px 28px;
  border-top:1px solid var(--line);
  font-family:'Geist Mono',monospace;
  font-size:9.5px;
  letter-spacing:.14em;
  color:var(--ink-mute);
  text-transform:uppercase;
}
@media (max-width:640px){
  .post-rail-popover{padding:80px 16px 16px}
  .post-rail-popover-input{font-size:20px;padding:20px 22px}
  .post-rail-popover-item{grid-template-columns:1fr;gap:6px;padding:14px 22px}
  .post-rail-popover-item .r-date{text-align:left}
}

/* ============ AUTHOR LINK (byline anchor on post hero) ============ */
.post-author-row a.name{
  color:inherit;
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .35s var(--ease-out), color .25s ease;
  padding-bottom:2px;
}
.post-author-row a.name:hover{background-size:100% 1px;color:var(--accent-2)}