@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=JetBrains+Mono:wght@300;400;500;700&display=swap');

:root{
  --paper: #F3EEE3;
  --paper-dim: #E9E1D0;
  --paper-hi: #F9F4E9;
  --ink: #0E1A2E;
  --ink-soft: #2C3A52;
  --ink-hairline: #14243E;
  --graphite: #7C7467;
  --amber: #D97706;
  --amber-hi: #F59E0B;
  --amber-glow: rgba(217,118,6,0.20);
  --amber-wash: rgba(217,118,6,0.06);
  --rule: #C9BFAB;
  --rule-dim: #D9CFBB;

  --serif: "Fraunces", "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --ease-seat: cubic-bezier(.2,.85,.2,1);
  --ease-ink:  cubic-bezier(.35,.8,.35,1);
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Base paper — pencil grid + lamp warmth + gradient */
body{
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(14,26,46,0.035) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(14,26,46,0.02) 31px 32px),
    radial-gradient(1200px 700px at 28% -6%, rgba(217,118,6,0.09), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper-dim));
  background-attachment: fixed;
}

/* Grain */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.10  0 0 0 0 0.18  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity:.45;
}

.page{ position:relative; z-index:2; min-height:100vh; }

a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ----- type primitives ----- */
.catalog{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--graphite);
}
.tag{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--graphite);
}
.tag.amber{ color: var(--amber); }
.arrow{
  display:inline-block;
  font-family: var(--mono);
  color: var(--amber);
  transform: translateY(-1px);
  font-weight: 500;
}
h1.display{
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "wght" 600, "SOFT" 30, "WONK" 0;
  font-size: clamp(56px, 10vw, 168px);
  line-height: .92;
  letter-spacing: -0.03em;
  color: var(--ink);
}
/* Architectural emphasis — roman light weight + wider tracking inside the same family.
   Replaces italic-serif (the Claude Design pattern) with weight-driven contrast. */
h1.display em{
  font-style: normal;
  font-variation-settings: "opsz" 144, "wght" 300, "SOFT" 30, "WONK" 0;
  letter-spacing: 0.005em;
  color: var(--amber);
}
.marginalia{
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 9, "wght" 400, "SOFT" 100, "WONK" 1;
  color: var(--graphite);
  font-size: 14px;
  line-height: 1.4;
  max-width: 230px;
}
.marginalia::before{
  content:""; display:inline-block; width: 22px; height:1px;
  background: var(--graphite); vertical-align: middle;
  margin-right: 10px; transform: translateY(-1px);
}
.ink-rule{ height:0; border-top: 1px solid var(--ink); width: 80px; }

/* ----- persistent chrome ----- */
nav.topnav{
  position: fixed;
  top: 24px; right: 32px; z-index: 10;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display:flex; gap:22px; align-items: center;
}
nav.topnav a{ position:relative; padding-bottom:2px; }
nav.topnav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: var(--amber);
  transform: scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease-ink);
}
nav.topnav a:hover::after,
nav.topnav a[aria-current="page"]::after{ transform: scaleX(1); }
nav.topnav a[aria-current="page"]{ color: var(--ink); }
nav.topnav .sep{ color: var(--rule); }

.stamp{
  position:fixed;
  top: 24px; left: 32px; z-index: 10;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  display:flex; gap:10px; align-items:center;
}
.stamp::before{
  content:""; width:8px; height:8px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--amber-glow);
}

/* Blueprint number — top right under nav, updates per route */
.bpno{
  position: fixed;
  top: 54px; right: 32px;
  z-index: 9;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--graphite);
  text-transform: uppercase;
}

/* Discreet social strip — bottom left, never competes */
.social{
  position: fixed;
  bottom: 24px; left: 32px;
  z-index: 8;
  display: flex; gap: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--graphite);
  align-items: center;
}
.social .dot{
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--graphite);
  opacity: .6;
}
.social a{ transition: color .2s var(--ease-ink); position: relative; }
.social a:hover{ color: var(--amber); }

/* Session stamp — bottom right */
.session{
  position: fixed;
  bottom: 24px; right: 32px;
  z-index: 8;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--graphite);
  display:flex; gap:10px; align-items:center;
}
.session::before{
  content:"";
  width:5px; height:5px; background: var(--amber); border-radius:50%;
  box-shadow: 0 0 0 3px var(--amber-glow);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform: scale(1); }
  50%{ opacity:.5; transform: scale(.85); }
}

/* ----- transformation signature ----- */
.sig{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink);
  display: inline-flex; gap: 10px; align-items: center;
}
.sig .in, .sig .out{
  background: transparent;
  padding: 5px 9px;
  border: 1px solid var(--ink);
  border-radius: 1px;
}
.sig .out{
  background: var(--ink);
  color: var(--paper);
}

/* ----- premium CTA (cartridge seat) ----- */
.cta-seat{
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 28, "wght" 500, "SOFT" 10;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 16px 22px 16px 22px;
  border: 1px solid var(--ink);
  background: transparent;
  transition: color .25s var(--ease-ink), background .25s var(--ease-ink), transform .35s var(--ease-seat);
  cursor: pointer;
  overflow: hidden;
}
.cta-seat::before{
  content:"";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .35s var(--ease-seat);
  z-index: 0;
}
.cta-seat::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(245,158,11,0.35) 50%, transparent 100%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-ink);
  z-index: 1;
  mix-blend-mode: screen;
}
.cta-seat > *{ position: relative; z-index: 2; }
.cta-seat:hover{ color: var(--paper-hi); }
.cta-seat:hover::before{ transform: translateY(0); }
.cta-seat:hover::after{ transform: translateX(120%); }
.cta-seat .enter-kbd{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  padding: 3px 7px;
  border: 1px solid currentColor;
  opacity: .65;
  text-transform: uppercase;
}

/* Secondary CTA — link style */
.cta-link{
  display: inline-flex; gap: 10px; align-items: baseline;
  font-family: var(--serif);
  font-variation-settings: "opsz" 28, "wght" 500;
  font-size: 18px;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.cta-link::after{
  content:"";
  position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background: var(--amber);
  transition: width .4s var(--ease-ink);
}
.cta-link:hover{ color: var(--amber); }
.cta-link:hover::after{ width: 100%; }

/* ----- tile (home hub) ----- */
.tile{
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 26px 24px;
  background: rgba(249,244,233,0.65);
  border: 1px solid var(--rule);
  min-height: 210px;
  cursor: pointer;
  transition: transform .4s var(--ease-seat), border-color .25s, box-shadow .4s var(--ease-ink);
  box-shadow:
    1px 1px 0 rgba(14,26,46,.03),
    0 10px 24px -18px rgba(14,26,46,.25);
  overflow: hidden;
  isolation: isolate;
}
/* Interference scanline on hover */
.tile::before{
  content:"";
  position: absolute; inset: -2px;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent calc(var(--scan, 0%) - 1px),
    rgba(217,118,6,0.35) var(--scan, 0%),
    transparent calc(var(--scan, 0%) + 1px),
    transparent 100%);
  opacity: 0;
  transition: opacity .3s var(--ease-ink);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}
.tile:hover::before{
  opacity: 1;
  animation: scan 1.1s var(--ease-ink) forwards;
}
@keyframes scan{
  0%   { --scan: -5%; }
  100% { --scan: 110%; }
}
@property --scan { syntax: "<percentage>"; initial-value: 0%; inherits: false; }

/* tile seat press */
.tile::after{
  content:"";
  position: absolute; inset: 0;
  border: 1px solid var(--ink);
  opacity: 0;
  transition: opacity .25s var(--ease-ink);
  pointer-events: none;
  z-index: 2;
}
.tile:hover{
  transform: translateY(-3px);
  box-shadow:
    1px 2px 0 rgba(14,26,46,.05),
    0 22px 36px -20px rgba(14,26,46,.35);
}
.tile:hover::after{ opacity: 1; }

.tile .t-no{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.tile .t-no .go{
  color: var(--amber);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--ease-ink), transform .3s var(--ease-ink);
}
.tile:hover .t-no .go{ opacity: 1; transform: translateX(0); }

.tile h3{
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 30, "WONK" 1;
  font-size: 38px;
  line-height: .95;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.tile h3 em{ font-style: normal; color: var(--amber); font-variation-settings: "opsz" 72, "wght" 300, "SOFT" 30, "WONK" 0; letter-spacing: 0.005em; }
.tile .t-line{
  font-family: var(--serif);
  font-variation-settings: "opsz" 14, "wght" 380, "SOFT" 60;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: auto;
  padding-top: 14px;
}
.tile .t-line em{
  font-style: normal;
  color: var(--amber);
  font-variation-settings: "opsz" 14, "wght" 300, "SOFT" 30, "WONK" 0;
  letter-spacing: 0.005em;
}
.tile.external .t-line em{ color: var(--amber-hi); }
.tile .t-chip{
  position: absolute; top: 22px; right: 22px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--graphite);
  border: 1px solid var(--rule);
  padding: 3px 7px;
  background: var(--paper);
}

/* Tile — external (Productonics) variant */
.tile.external{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.tile.external h3{ color: var(--paper-hi); }
.tile.external h3 em{ color: var(--amber-hi); }
.tile.external .t-line{ color: var(--rule); }
.tile.external .t-no{ color: var(--rule); }
.tile.external .t-chip{
  background: var(--ink);
  border-color: var(--ink-soft);
  color: var(--amber-hi);
}
.tile.external::after{ border-color: var(--amber); }

/* ----- modal ----- */
.modal-backdrop{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14,26,46,0.50);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  padding: 32px;
  animation: bdin .3s var(--ease-ink);
}
.modal-backdrop[data-open="true"]{ display: flex; }
@keyframes bdin{ from{ opacity: 0; } to{ opacity: 1; } }

.modal{
  width: min(520px, 100%);
  background: var(--paper-hi);
  border: 1px solid var(--ink);
  padding: 32px 36px 34px;
  position: relative;
  box-shadow:
    0 60px 80px -40px rgba(14,26,46,0.55),
    0 0 0 6px rgba(217,118,6,0.08);
  animation: modalin .45s var(--ease-seat);
}
@keyframes modalin{
  from{ opacity: 0; transform: translateY(14px) scale(.98); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}
.modal h2{
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 30, "WONK" 1;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.modal h2 em{ font-style: normal; color: var(--amber); font-variation-settings: "opsz" 72, "wght" 300, "SOFT" 30, "WONK" 0; letter-spacing: 0.005em; }
.modal p.lede{
  font-family: var(--serif);
  font-variation-settings: "opsz" 18, "wght" 380, "SOFT" 60;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 22px;
}
.modal label{
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 14px 0 6px;
}
.modal input,
.modal textarea{
  width: 100%;
  font: inherit;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 8px 2px;
  transition: border-color .25s var(--ease-ink);
  outline: none;
  resize: vertical;
}
.modal input:focus,
.modal textarea:focus{ border-bottom-color: var(--amber); }
.modal textarea{ min-height: 84px; }
.modal .row{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.modal .actions{
  margin-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
}
.modal .mclose{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--graphite);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule);
}
.modal .mclose:hover{ color: var(--ink); border-bottom-color: var(--ink); }
.modal .cno{
  position: absolute; top: 32px; right: 36px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--graphite);
}

/* ----- utility ----- */
.fade-up{
  opacity: 0; transform: translateY(8px);
  animation: rise .7s var(--ease-ink) forwards;
}
@keyframes rise{ to{ opacity: 1; transform: translateY(0); } }
.d-1{ animation-delay: .05s; }
.d-2{ animation-delay: .18s; }
.d-3{ animation-delay: .32s; }
.d-4{ animation-delay: .48s; }
.d-5{ animation-delay: .62s; }

/* hairline loading rule */
.hairline{
  height: 1px; background: var(--ink);
  transform-origin: left;
  animation: draw .9s var(--ease-ink) forwards;
  transform: scaleX(0);
}
@keyframes draw{ to{ transform: scaleX(1); } }

/* focus outlines (no default blue) */
:focus-visible{
  outline: 1px dashed var(--amber);
  outline-offset: 3px;
}

/* ----- council band ----- */
.council-band{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  padding: 22px 26px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(249,244,233,0.8), rgba(243,238,227,0.4));
  position: relative;
  overflow: hidden;
}
.council-band::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(400px 80px at 20% 50%, var(--amber-wash), transparent 70%);
  pointer-events: none;
}
.council-band > *{ position: relative; z-index: 1; }
.council-band .cb-head{
  display: flex; flex-direction: column; gap: 4px;
  padding-right: 28px;
  border-right: 1px solid var(--rule);
  min-width: 220px;
}
.council-band .cb-head .cat{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--amber);
}
.council-band .cb-head .ttl{
  font-family: var(--serif);
  font-variation-settings: "opsz" 36, "wght" 500, "SOFT" 30, "WONK" 1;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.council-band .cb-head .ttl em{
  font-style: normal; color: var(--amber);
  font-variation-settings: "opsz" 36, "wght" 300, "SOFT" 30, "WONK" 0;
  letter-spacing: 0.005em;
}
.council-band .cb-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 24px;
  align-items: center;
}
.council-band .lens-chip{
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--graphite);
}
.council-band .lens-chip .nm{
  font-family: var(--serif);
  font-variation-settings: "opsz" 24, "wght" 500, "SOFT" 30;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
  display: flex; gap: 6px; align-items: center;
}
.council-band .lens-chip .nm::before{
  content:"";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--amber-glow);
  animation: pulse 2.4s ease-in-out infinite;
}
.council-band .lens-chip:nth-child(1) .nm::before{ animation-delay: 0s; }
.council-band .lens-chip:nth-child(2) .nm::before{ animation-delay: .6s; }
.council-band .lens-chip:nth-child(3) .nm::before{ animation-delay: 1.2s; }
.council-band .lens-chip:nth-child(4) .nm::before{ animation-delay: 1.8s; }
.council-band .cb-link{
  justify-self: end;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color .2s var(--ease-ink), border-color .2s;
}
.council-band .cb-link:hover{ color: var(--amber); border-bottom-color: var(--amber); }

/* ----- artifact thumbnails (projects) ----- */
.artifact{
  width: 100%; aspect-ratio: 3 / 2;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
  margin-bottom: 18px;
}
.artifact::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(14,26,46,0.04) 15px 16px),
    radial-gradient(200px 120px at 80% 20%, var(--amber-wash), transparent 70%);
  pointer-events: none;
}
.artifact .a-label{
  position: absolute; bottom: 10px; left: 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--paper);
  padding: 3px 6px;
  border: 1px solid var(--rule);
}
.artifact svg{ width: 100%; height: 100%; display: block; }

/* ----- constellation (playbook) ----- */
.constellation{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  overflow: hidden;
  cursor: crosshair;
}
.constellation svg{
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.constellation .node{
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: transform .35s var(--ease-seat), border-color .2s, box-shadow .3s var(--ease-ink), background .2s;
  z-index: 2;
  letter-spacing: .02em;
  white-space: nowrap;
}
.constellation .node::before{
  content:"/"; color: var(--amber); margin-right: 2px;
}
.constellation .node[data-tier="paid"]{
  background: var(--ink);
  color: var(--paper-hi);
  border-color: var(--ink);
}
.constellation .node[data-tier="paid"]::before{ color: var(--amber-hi); }
.constellation .node:hover{
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 10px 20px -10px rgba(14,26,46,0.4), 0 0 0 3px var(--amber-glow);
  z-index: 4;
}
.constellation .node[data-active="true"]{
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}
.constellation .node[data-active="true"]::before{ color: var(--ink); }
.constellation .line{
  stroke: var(--rule); stroke-width: 1; fill: none;
  transition: stroke .3s var(--ease-ink);
}
.constellation .line.active{ stroke: var(--amber); stroke-width: 1.5; }

.constellation-legend{
  position: absolute; bottom: 18px; right: 20px;
  display: flex; gap: 16px; align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--paper);
  padding: 8px 12px;
  border: 1px solid var(--rule);
  z-index: 3;
}
.constellation-legend .key{ display: inline-flex; gap: 8px; align-items: center; }
.constellation-legend .sw{
  width: 12px; height: 12px; border: 1px solid var(--ink); background: var(--paper);
}
.constellation-legend .sw.paid{ background: var(--ink); }

.node-card{
  position: absolute;
  top: 20px; left: 20px;
  width: 280px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--ink);
  z-index: 5;
  box-shadow: 0 16px 28px -20px rgba(14,26,46,.45);
  animation: rise .3s var(--ease-ink);
}
.node-card h4{
  font-family: var(--serif);
  font-variation-settings: "opsz" 28, "wght" 500, "SOFT" 30;
  font-size: 22px;
  margin-bottom: 4px;
  letter-spacing: -0.015em;
}
.node-card h4 em{ font-style: normal; color: var(--amber); font-variation-settings: "opsz" 28, "wght" 300, "SOFT" 30, "WONK" 0; letter-spacing: 0.005em; }
.node-card .tier{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 12px;
}
.node-card .tier.paid{ color: var(--amber); }
.node-card p{
  font-family: var(--serif);
  font-variation-settings: "opsz" 16, "wght" 400, "SOFT" 60;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.node-card .go{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  display: inline-flex; gap: 8px; align-items: center;
}
.node-card .go:hover{ color: var(--amber); border-bottom-color: var(--amber); }

/* ==========================================================
   RESPONSIVE — tablet (≤960px)
   ========================================================== */
@media (max-width: 960px){
  nav.topnav{
    top: 18px; right: 20px;
    gap: 14px;
    font-size: 10px;
  }
  nav.topnav .sep{ display: none; }
  .stamp{ top: 18px; left: 20px; font-size: 10px; }
  .bpno{ display: none; }
  .social{
    bottom: 64px; left: 20px;
    font-size: 9.5px; gap: 10px;
  }
  .session{
    bottom: 18px; left: 20px; right: 20px;
    font-size: 9.5px;
    justify-content: center;
  }
  .session::before{ display: none; }

  /* council band stacks */
  .council-band{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }
  .council-band .cb-head{
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-right: 0;
    padding-bottom: 14px;
    min-width: 0;
  }
  .council-band .cb-grid{
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
  }
  .council-band .cb-link{
    grid-column: 1 / -1;
    justify-self: start;
    padding-top: 8px;
  }

  /* constellation: hide on tablet, list view takes over */
  .constellation{ display: none; }
  .constellation-legend{ display: none; }

  /* tiles: 2 cols stays, less padding */
  .tile{ padding: 22px 20px; min-height: 180px; }
  .tile h3{ font-size: 34px; }
  .tile .t-line{ font-size: 14px; }
  .tile .t-chip{ top: 18px; right: 18px; font-size: 9px; }
}

/* ==========================================================
   RESPONSIVE — mobile (≤640px)
   ========================================================== */
@media (max-width: 640px){
  /* global chrome compacts */
  nav.topnav{
    top: 16px; right: 16px;
    gap: 12px;
    font-size: 9.5px;
    letter-spacing: .1em;
  }
  .stamp{
    top: 16px; left: 16px;
    font-size: 9.5px;
    letter-spacing: .14em;
  }
  .stamp::before{ width: 6px; height: 6px; }
  .social{
    bottom: 52px; left: 16px; right: 16px;
    font-size: 9px;
    gap: 8px;
    flex-wrap: wrap;
    letter-spacing: .16em;
  }
  .session{
    bottom: 14px; left: 16px; right: 16px;
    font-size: 9px;
    letter-spacing: .14em;
  }

  h1.display,
  .display{ font-size: clamp(40px, 12vw, 68px) !important; line-height: .92; }

  /* reduce page padding */
  body{ overflow-x: hidden; }

  /* tiles: stack to 1 col */
  .tile{ min-height: 140px; padding: 20px 18px; }
  .tile h3{ font-size: 30px; }
  .tile .t-line{ font-size: 13.5px; padding-top: 10px; }
  .tile .t-no{ margin-bottom: 12px; font-size: 9px; }
  .tile .t-chip{
    top: 16px; right: 16px;
    font-size: 8.5px;
    padding: 2px 6px;
  }

  /* council band: single column */
  .council-band{
    padding: 18px 16px;
  }
  .council-band .cb-head .ttl{ font-size: 22px; }
  .council-band .cb-grid{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .council-band .lens-chip{ font-size: 9px; }
  .council-band .lens-chip .nm{ font-size: 15px; }

  /* transformation sig stacks */
  .sig{
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
  }
  .sig .arrow{ transform: rotate(90deg); margin: 0; }

  /* CTA seat shrinks */
  .cta-seat{ font-size: 16px; padding: 14px 18px; gap: 10px; }
  .cta-seat .enter-kbd{ display: none; }
  .cta-link{ font-size: 15px; }

  /* modal on mobile */
  .modal{ padding: 24px 20px; }
  .modal h2{ font-size: 28px; }
  .modal .row{ grid-template-columns: 1fr; gap: 14px; }
  .modal .cno{ top: 18px; right: 20px; font-size: 9px; }

  /* constellation: hidden anyway, but detail card centers if shown */
  .node-card{ width: calc(100% - 48px); left: 24px; top: 24px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* reduced transparency */
@media (prefers-reduced-transparency: reduce){
  body::before{ display: none; }
  body{ background-image: linear-gradient(180deg, var(--paper), var(--paper-dim)); }
}