/* ============================================================
   mIRGGI — a field guide to talking online
   "On Air" direction · slate-navy / signal-teal / amber
   ============================================================ */

:root{
  --ink:#101c26;          /* page background, deep slate-navy */
  --ink-2:#16232f;        /* raised panel */
  --card:#182734;         /* card surface */
  --surface:rgba(255,255,255,.045);
  --line:#284050;         /* hairline */
  --line-soft:#1f313f;
  --teal:#3FD0A6;         /* signal teal-green */
  --teal-dim:#2f9b98;
  --amber:#E0A54B;        /* warm amber accent */
  --text:#EAF1F5;
  --muted:#9fb2bf;
  --muted-2:#748a98;
  --accent:var(--teal);   /* per-section override */
  --head:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1240px;
  --measure:70ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--body);font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 560px at 12% -6%, rgba(63,208,166,.09), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(224,165,75,.06), transparent 55%);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:#7fe3c6}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.1;letter-spacing:-.01em;margin:0}
p{margin:0 0 1.1em;text-wrap:pretty}
code,kbd,samp{font-family:var(--mono)}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.wrap-narrow{width:min(880px,100% - 48px);margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.accent{color:var(--accent)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.18s}
.btn-primary{background:var(--teal);color:#08131a}
.btn-primary:hover{background:#5fdcb6;color:#08131a}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.12);color:var(--text)}
.btn svg{width:16px;height:16px}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(16,28,38,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--teal-dim));
  display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:20px;color:#08131a}
.brand-name{font-family:var(--head);font-weight:700;font-size:22px;color:#F3F9FB;line-height:1}
.brand-tag{font-size:11.5px;color:var(--muted-2);display:flex;align-items:center;gap:5px}
.brand-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.nav{display:flex;align-items:center;gap:4px}
.nav a{font-size:14.5px;font-weight:500;color:#c3d2dc;padding:9px 13px;border-radius:999px}
.nav a:hover,.nav a[aria-current]{background:rgba(63,208,166,.14);color:var(--teal)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;padding:8px;color:var(--text);cursor:pointer}
.nav-toggle svg{width:22px;height:22px}

/* ---------- Hero ---------- */
.hero{padding:56px 0 48px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(38px,4.6vw,64px);font-weight:800;color:#F6FBFC}
.hero .lead{font-size:20px;color:var(--muted);max-width:34ch;margin:20px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-figure{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0c1720;position:relative}
.hero-figure img{width:100%;height:clamp(300px,38vw,460px);object-fit:cover;filter:saturate(.9) contrast(1.02)}
.hero-figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 14px;font-size:13.5px;color:#cdd9e0;
  background:linear-gradient(transparent,rgba(6,14,20,.86))}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(63,208,166,.14);color:var(--teal);
  font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:pulse 2.4s infinite}
/* hero signature: live chat window */
.hero-chat{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0d1922;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.hero-chat .chat-top{padding:16px 20px}
.hero-chat .chat-body{padding:22px;gap:12px;min-height:340px;justify-content:flex-start}
.hero-chat .bub{font-size:15.5px;max-width:78%}
html.js .hero-chat .bub,html.js .hero-chat .typing{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
html.js .hero-chat .bub.show,html.js .hero-chat .typing.show{opacity:1;transform:none}

/* ---------- Section framing ---------- */
.band{padding:52px 0}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;flex-wrap:wrap}
.band-head h2{font-size:clamp(26px,3vw,34px);color:#F3F9FB}
.band-head p{margin:8px 0 0;color:var(--muted);max-width:52ch}
.band-line{border:0;border-top:1px solid var(--line-soft);margin:0}

/* ---------- Cards (even height) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card-grid.two{grid-template-columns:repeat(2,1fr)}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:.18s;height:100%}
.card:hover{border-color:var(--accent);transform:translateY(-3px)}
.card-media{aspect-ratio:16/10;overflow:hidden;background:#0c1720}
.card-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);transition:.4s}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.tag{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  padding:4px 9px;border-radius:6px;margin-bottom:12px}
.card h3{font-size:20px;line-height:1.2;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.card .dek{font-size:14.5px;color:var(--muted);margin:10px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin-top:auto;padding-top:16px;font-size:13px;color:var(--muted-2);font-family:var(--mono)}
.card.wide{grid-column:span 2}

/* horizontal list card */
.hcard{display:grid;grid-template-columns:150px 1fr;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:.18s}
.hcard:hover{border-color:var(--accent)}
.hcard .m{background:#0c1720;overflow:hidden}
.hcard .m img{width:100%;height:100%;object-fit:cover;min-height:120px}
.hcard .b{padding:16px 18px;display:flex;flex-direction:column}
.hcard h3{font-size:17px;line-height:1.22;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcard .dek{font-size:13.5px;color:var(--muted);margin:7px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hcard .meta{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:12px;color:var(--muted-2)}

/* ---------- Signature: messaging timeline ---------- */
.mtl{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px;margin-top:14px}
.mtl::before{content:"";position:absolute;top:8px;left:10px;right:10px;height:2px;
  background:linear-gradient(90deg,var(--teal),var(--amber));opacity:.55}
.mtl-row{position:relative;padding:34px 0 0;transition:.6s}
html.js .mtl-row{opacity:0;transform:translateY(16px)}
html.js .mtl-row.in{opacity:1;transform:none}
.mtl-row::before{content:"";position:absolute;top:1px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--ink);border:3px solid var(--teal);box-shadow:0 0 0 4px var(--ink)}
.mtl-row:last-child::before{border-color:var(--amber)}
.mtl-when{font-family:var(--mono);font-weight:600;color:var(--teal);font-size:14px}
.mtl-row:last-child .mtl-when{color:var(--amber)}
.mtl-what{font-family:var(--head);font-weight:700;font-size:18px;margin-top:3px;color:var(--text)}
.mtl-note{color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.45}

/* ---------- Tribute + protocol + chat trio ---------- */
.trio{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.tribute{background:linear-gradient(135deg,rgba(63,208,166,.12),rgba(224,165,75,.06));
  border:1px solid var(--teal);border-radius:18px;padding:28px 30px}
.tribute .kick{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:14px}
.tribute h3{font-size:26px;color:#F6FBFC}
.tribute p{margin:12px 0 0;color:#cfdce3;font-size:16px}
.tribute-fig{margin:0 0 18px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0c1720}
.tribute-fig img{width:100%;height:200px;object-fit:cover}
.chatbox{background:#0b141b;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.chat-top{display:flex;align-items:center;gap:10px;padding:14px 18px;background:rgba(63,208,166,.08);border-bottom:1px solid var(--line-soft)}
.chat-top .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-dim))}
.chat-top .nm{font-weight:600;font-size:14px}
.chat-top .on{font-size:11px;color:var(--teal)}
.chat-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.bub{max-width:82%;font-size:14.5px;line-height:1.4;padding:10px 14px;border-radius:16px}
.bub.them{align-self:flex-start;background:#1c2b38;color:#dbe6ec;border-bottom-left-radius:5px}
.bub.me{align-self:flex-end;background:var(--teal);color:#08131a;font-weight:500;border-bottom-right-radius:5px}
.typing{align-self:flex-start;display:flex;gap:5px;background:#1c2b38;padding:12px 15px;border-radius:16px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted-2);animation:bounce 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}

/* ---------- Protocol at a glance ---------- */
.proto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.proto{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column}
.proto h4{font-family:var(--mono);font-size:18px;color:var(--teal)}
.proto .trait{font-size:13px;color:var(--amber);font-family:var(--mono);margin:8px 0 12px}
.proto p{font-size:14px;color:var(--muted);margin:0}

/* ---------- Browse sections ---------- */
.sect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sect{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px;transition:.18s}
.sect:hover{border-color:var(--accent);transform:translateY(-3px)}
.sect .no{font-family:var(--mono);font-size:12px;color:var(--muted-2)}
.sect h3{font-size:21px;margin:10px 0 8px;color:var(--text)}
.sect p{margin:0;color:var(--muted);font-size:14.5px}
.sect .cnt{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--accent)}

/* ---------- Sponsor strip ---------- */
.supporters{border-top:1px solid var(--line-soft);background:rgba(8,15,20,.5)}
.supporters .head{text-align:center;margin-bottom:26px}
.supporters .head .eyebrow{color:var(--amber)}
.supporters .head h2{font-size:26px;margin:8px 0 6px;color:#F3F9FB}
.supporters .head p{color:var(--muted);margin:0;font-size:15px}
.sponsor-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.sponsor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:#0b141b;border:1px solid var(--line-soft);border-radius:12px;padding:18px 14px;min-height:92px;transition:.18s}
.sponsor:hover{border-color:var(--line)}
.sponsor img{width:100%;max-width:150px;height:38px;object-fit:contain;opacity:.85}
.sponsor-blurb{font-size:12px;color:var(--muted-2);text-align:center;line-height:1.35}
.sponsor-blurb:empty{display:none}

/* ---------- Footer ---------- */
.site-foot{border-top:1px solid var(--line-soft);padding:44px 0 40px;margin-top:8px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-brand .brand-name{font-size:22px}
.foot-brand p{color:var(--muted);font-size:14.5px;margin:12px 0 0;max-width:34ch}
.foot-col h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.foot-col a{display:block;color:#c3d2dc;font-size:14.5px;padding:5px 0}
.foot-col a:hover{color:var(--teal)}
.foot-base{border-top:1px solid var(--line-soft);margin-top:32px;padding-top:22px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--muted-2)}

/* ============================================================
   ARTICLE PAGES
   ============================================================ */
.post{padding:0 0 40px}
.post-hero{padding:44px 0 30px}
.post-hero .crumb{font-family:var(--mono);font-size:12.5px;color:var(--muted-2);margin-bottom:18px}
.post-hero .crumb a{color:var(--muted)}
.post-tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:5px 11px;border-radius:6px}
.post-hero h1{font-size:clamp(32px,4.4vw,56px);font-weight:800;color:#F6FBFC;margin:18px 0 0;max-width:20ch}
.post-hero .lead{font-size:21px;color:var(--muted);margin:18px 0 0;max-width:60ch}
.post-hero .byline{margin-top:20px;font-family:var(--mono);font-size:13.5px;color:var(--muted-2)}
.post-hero .byline b{color:var(--text);font-weight:500}
.post-figure{margin:30px 0 0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0c1720}
.post-figure img{width:100%;max-height:560px;object-fit:cover;filter:saturate(.92) contrast(1.02)}
.post-figure figcaption{padding:12px 20px;font-size:13.5px;color:var(--muted);background:var(--ink-2);border-top:1px solid var(--line-soft)}

.article-body{width:min(760px,100% - 48px);margin-inline:auto;padding-inline:0;font-size:19.5px;line-height:1.75;margin-top:40px}
.article-body>p,.article-body>ul,.article-body>ol.list{color:#d8e2e8}
.article-body h2{font-size:29px;color:#F3F9FB;margin:1.7em 0 .55em;display:flex;gap:14px;align-items:baseline}
.article-body h2 .sec-no{font-family:var(--mono);font-size:16px;color:var(--accent);font-weight:600}
.article-body h3{font-size:22px;color:#F3F9FB;margin:1.4em 0 .5em}
.article-body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--teal) 45%,transparent)}
.article-body a:hover{text-decoration-color:var(--teal)}
.article-body strong{color:#F1F7FA;font-weight:600}
.article-body>ul{padding-left:1.2em}.article-body>ul li{margin:.35em 0}
.article-body>ul li::marker{color:var(--accent)}
.article-body .lead{font-size:22px;line-height:1.6;color:#e6eef2}
.dropcap::first-letter{float:left;font-family:var(--head);font-weight:800;font-size:4.1em;line-height:.78;
  padding:6px 12px 0 0;color:var(--teal)}
.article-body>p code,.article-body li code{background:#0c1720;border:1px solid var(--line-soft);padding:1px 6px;border-radius:5px;font-size:.86em;color:#bfe9db}
pre{background:#0b141b;border:1px solid var(--line);border-radius:12px;padding:18px 20px;overflow-x:auto;
  font-family:var(--mono);font-size:14.5px;line-height:1.6;color:#cbe6dd;margin:1.4em 0}

/* ---------- Palette components ---------- */
.lead{font-size:20px}
.pullquote{margin:2em 0;border:0;padding:0;text-align:center}
.pullquote p{font-family:var(--head);font-weight:600;font-size:clamp(24px,3vw,32px);line-height:1.28;color:#F3F9FB;
  max-width:24ch;margin:0 auto;position:relative}
.pullquote p::before{content:"";display:block;width:46px;height:3px;background:var(--accent);margin:0 auto 20px;border-radius:2px}
.blockquote{margin:1.6em 0;padding:6px 0 6px 24px;border-left:3px solid var(--accent)}
.blockquote p{font-style:italic;font-size:20px;color:#e2ecf1;margin:0 0 .4em}
.blockquote cite{font-style:normal;font-family:var(--mono);font-size:13.5px;color:var(--muted)}
.callout{margin:1.8em 0;background:rgba(63,208,166,.08);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius:14px;padding:20px 22px}
.callout p{margin:0;font-size:17px;color:#e0ebf0}
.callout::before{content:"Key takeaway";display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-weight:600}
.note{margin:1.6em 0;font-size:15.5px;color:var(--muted);border-left:2px solid var(--line);padding-left:16px}
.note::before{content:"Note — ";color:var(--amber);font-weight:600}

.versus,.datatable{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:15.5px}
.versus caption,.datatable caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.versus th,.versus td,.datatable th,.datatable td{border:1px solid var(--line-soft);padding:12px 14px;text-align:left;vertical-align:top}
.versus thead th,.datatable thead th{background:var(--ink-2);color:var(--text);font-family:var(--head);font-size:15px}
.versus tbody th{background:rgba(255,255,255,.02);font-weight:600;color:var(--text);font-family:var(--body)}
.datatable tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.versus td:not(:first-child){color:var(--muted)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.8em 0}
.statblock{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.stat-num{display:block;font-family:var(--head);font-weight:800;font-size:34px;color:var(--teal);line-height:1}
.stat-label{display:block;font-size:14px;color:var(--muted);margin-top:8px}

ol.timeline{list-style:none;margin:1.8em 0;padding:0;position:relative}
ol.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
ol.timeline li{position:relative;padding:0 0 18px 34px}
ol.timeline li::before{content:"";position:absolute;left:2px;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--ink);border:3px solid var(--accent)}
.t-when{display:block;font-family:var(--mono);font-weight:600;color:var(--accent);font-size:14px}
.t-what{display:block;color:#d8e2e8;font-size:16px;margin-top:2px}

.chart{margin:1.8em 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-size:13.5px;color:var(--muted);margin-top:10px;font-family:var(--mono)}
.chart .bar-track{fill:rgba(255,255,255,.05)}
.chart .bar-val{fill:var(--accent)}
.chart .bar-label{fill:var(--muted);font-size:13px;font-family:var(--body)}
.chart .bar-num{fill:var(--text);font-size:13px;font-family:var(--mono)}
.chart .axis{stroke:var(--line-soft)}
.chart .line-path{fill:none;stroke:var(--teal);stroke-width:2.5}
.chart .line-dot{fill:var(--teal)}
.chart .line-lbl{fill:var(--muted);font-size:12px;font-family:var(--mono)}
.chart .donut-track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:16}
.chart .donut-seg{fill:none;stroke-width:16}

.article-figure{margin:2em 0}
.article-figure img{width:100%;border-radius:14px;border:1px solid var(--line)}
.article-figure figcaption{font-size:13.5px;color:var(--muted);margin-top:10px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:2em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.gallery figcaption{font-size:12.5px;color:var(--muted-2);margin-top:6px}

.map-figure{margin:2em 0}
.map-slot{aspect-ratio:16/9;border:1px dashed var(--line);border-radius:14px;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px);display:grid;place-items:center}
.map-slot::after{content:none;font-family:var(--mono);font-size:12.5px;color:var(--muted-2)}
.map-figure figcaption{font-size:13.5px;color:var(--muted);margin-top:10px}

.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:2em 0}
.profile-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.profile-card .p-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:12px}
.profile-card.no-photo::before{content:"";display:block;width:44px;height:44px;border-radius:12px;margin-bottom:12px;
  background:linear-gradient(135deg,var(--accent),transparent)}
.profile-card h3{font-size:18px;color:var(--text)}
.profile-card .p-role{font-family:var(--mono);font-size:12.5px;color:var(--accent);margin:4px 0 10px}
.profile-card p{font-size:14.5px;color:var(--muted);margin:0}
.profile-card .p-links{margin-top:10px}
.org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:2em 0}
.org-card{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.org-card:hover{border-color:var(--accent)}
.org-logo{width:34px;height:34px;border-radius:8px;object-fit:cover;margin-bottom:8px}
.org-card.no-logo .org-logo{background:var(--ink-2);display:grid}
.org-name{font-weight:600;color:var(--text);font-size:15px}
.org-host{font-family:var(--mono);font-size:12px;color:var(--muted-2)}
.entity-ref{font-weight:600;white-space:nowrap}
.further-grid,.related-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 0;padding:0;list-style:none}
.further-grid a,.related-links a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;color:var(--text);font-family:var(--head);font-weight:600;font-size:16px;line-height:1.25;transition:.18s}
.further-grid a:hover,.related-links a:hover{border-color:var(--accent);color:var(--teal)}
.related{border-top:1px solid var(--line-soft);margin-top:44px;padding-top:32px}
.related h2{font-size:24px;margin-bottom:6px}
.related .eyebrow{margin-bottom:2px}

/* ---------- Category / index pages ---------- */
.cat-hero{padding:52px 0 10px}
.cat-hero .no{font-family:var(--mono);font-size:13px;color:var(--muted-2);letter-spacing:.14em}
.cat-hero h1{font-size:clamp(34px,4.4vw,54px);color:#F6FBFC;margin:14px 0 0}
.cat-hero p{font-size:20px;color:var(--muted);max-width:56ch;margin:16px 0 0}
.cat-list{list-style:none;margin:0;padding:0}
@media (max-width:640px){.cat-list{grid-template-columns:1fr !important}}

/* ---------- Simple content pages ---------- */
.page{padding:52px 0 60px}
.page h1{font-size:clamp(32px,4vw,50px);color:#F6FBFC;margin-bottom:8px}
.page .lead{color:var(--muted);font-size:20px;max-width:60ch;margin-bottom:8px}
.page-body{width:min(720px,100% - 48px);margin-inline:auto;font-size:18.5px;line-height:1.75;color:#d8e2e8}
.page-body h2{font-size:26px;color:#F3F9FB;margin:1.6em 0 .5em}
.page-body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:1.6em 0}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;gap:14px;align-items:flex-start}
.contact-card svg{width:24px;height:24px;color:var(--teal);flex:none}
.contact-card h3{font-size:17px;margin-bottom:4px}
.contact-card p{margin:0;font-size:14.5px;color:var(--muted)}

/* ---------- 404 ---------- */
.nf{min-height:64vh;display:grid;place-items:center;text-align:center;padding:60px 0}
.nf .code{font-family:var(--mono);font-size:clamp(70px,14vw,150px);font-weight:600;color:var(--teal);line-height:1}
.nf .cursor{display:inline-block;width:.5em;height:.92em;background:var(--teal);margin-left:.06em;transform:translateY(.08em);animation:blink 1.1s steps(1) infinite}
.nf h1{font-size:28px;margin:14px 0 10px;color:#F3F9FB}
.nf p{color:var(--muted);margin:0 0 22px}

/* ---------- Styleguide ---------- */
.sg-head{padding:48px 0 20px;border-bottom:1px solid var(--line-soft)}
.sg-sec{padding:36px 0;border-bottom:1px solid var(--line-soft)}
.sg-sec>.wrap>h2{font-size:24px;color:#F3F9FB;margin-bottom:4px}
.sg-sec>.wrap>p.k{font-family:var(--mono);font-size:12.5px;color:var(--muted-2);margin-bottom:20px}
.sg-label{font-family:var(--mono);font-size:12px;color:var(--amber);margin:22px 0 8px;letter-spacing:.08em}
.swatches{display:flex;flex-wrap:wrap;gap:14px}
.swatch{width:120px}
.swatch .chip{height:60px;border-radius:10px;border:1px solid var(--line-soft)}
.swatch span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:6px}

/* ---------- Reveal ---------- */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent;pointer-events:none}
.reading-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--amber));
  box-shadow:0 0 10px rgba(63,208,166,.5);transition:width .08s linear}
.reveal{transition:.7s}
html.js .reveal{opacity:0;transform:translateY(20px)}
html.js .reveal.in{opacity:1;transform:none}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,208,166,.5)}70%{box-shadow:0 0 0 10px rgba(63,208,166,0)}100%{box-shadow:0 0 0 0 rgba(63,208,166,0)}}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-figure img{height:300px}
  .card-grid,.card-grid.two{grid-template-columns:repeat(2,1fr)}
  .card.wide{grid-column:span 2}
  .trio{grid-template-columns:1fr}
  .proto-grid{grid-template-columns:repeat(2,1fr)}
  .sect-grid{grid-template-columns:repeat(2,1fr)}
  .sponsor-strip{grid-template-columns:repeat(4,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .further-grid,.related-links,.gallery,.org-grid{grid-template-columns:repeat(2,1fr)}
  .mtl{grid-template-columns:1fr;gap:0}
  .mtl::before{top:6px;bottom:6px;left:7px;right:auto;width:2px;height:auto;background:linear-gradient(var(--teal),var(--amber))}
  .mtl-row{padding:0 0 22px 40px}
  .mtl-row::before{top:3px;left:0}
  .mtl-what{font-size:19px}
  .mtl-note{font-size:15px;max-width:60ch}
}
@media (max-width:640px){
  body{font-size:17px}
  .wrap,.wrap-narrow{width:min(100%,100% - 32px)}
  .nav{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-2);border-bottom:1px solid var(--line);padding:8px}
  .nav.open{display:flex}
  .nav a{padding:13px 14px;border-radius:10px}
  .nav-toggle{display:inline-flex}
  .card-grid,.card-grid.two{grid-template-columns:1fr}
  .card.wide{grid-column:span 1}
  .hcard{grid-template-columns:110px 1fr}
  .proto-grid{grid-template-columns:1fr}
  .sect-grid{grid-template-columns:1fr}
  .sponsor-strip{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .profile-grid,.further-grid,.related-links,.gallery,.org-grid{grid-template-columns:1fr}
  .article-body{width:min(100%,100% - 32px);font-size:18px}
  .article-body h2{font-size:24px}
  .post-hero .lead,.hero .lead{font-size:18px}
  .contact-grid{grid-template-columns:1fr}
  .mtl-row{padding-left:52px}
  .band{padding:40px 0}
  .foot-base{flex-direction:column}
}
@media (max-width:380px){
  .sponsor-strip{grid-template-columns:1fr}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-strip .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsor-strip .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-strip-4up: operator asked for four per row, not six. Design already steps to 4 at 980px, so
   only the widest step changes; the 640px and 380px steps below stay Design's. */
@media (min-width:981px){
  .sponsor-strip{grid-template-columns:repeat(4,1fr)}
}

/* op-mark-fill: with four tiles per row instead of six the tile is 301px, and the mark's
   max-width:150px left it sitting 15px from the left edge with 136px of space on the right — it
   is not centred in the tile, it is simply pinned at its own width. Releasing the cap lets the
   plate be the tile's width, which is how every other band in the estate frames it, and centring
   becomes moot. object-fit:contain still keeps a 1:1 and a 14:1 wordmark inside the same box. */
.sponsor-strip .sponsor.sponsor img{max-width:none!important}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 1034px of tier across
   12 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-strip .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:48px!important;min-height:0!important;overflow:hidden!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-strip 6 rows at 768). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-strip .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--head); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0px;}
h3:where(.rt-h4){font-family: var(--head); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0px;}
h2.rt-h3c{font-family: var(--head); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0px;}
h2:where(.rt-h3p966c8f){font-family: var(--head); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0px;}
.hcard h2:where(.rt-h3){font-size: 17px; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.hcard h2.rt-h3c{font-size: 17px; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.proto h3:where(.rt-h4){font-family: var(--mono); font-size: 18px; color: var(--teal);}
.foot-col h3:where(.rt-h4){font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px;}
.article-body h2:where(.rt-h3){font-size: 22px; color: rgb(243, 249, 251); margin: 1.4em 0px 0.5em;}
.contact-card h2:where(.rt-h3){font-size: 17px; margin-bottom: 4px;}
.contact-card h2:where(.rt-h3p966c8f){font-size: 17px; margin-bottom: 4px;}
h2.rt-h3.rt-h3{margin-top:0px;border-top-color:rgb(216, 226, 232);border-bottom-color:rgb(216, 226, 232);text-decoration-color:rgb(216, 226, 232);color:rgb(216, 226, 232)}
h2.rt-h3.rt-h3{display:block;margin-top:30.8px;border-top-color:rgb(243, 249, 251);border-bottom-color:rgb(243, 249, 251);text-decoration-color:rgb(243, 249, 251);color:rgb(243, 249, 251);column-gap:normal;row-gap:normal}
h2.rt-h3p966c8f.rt-h3p966c8f{margin-top:0px;border-top-color:rgb(216, 226, 232);border-bottom-color:rgb(216, 226, 232);text-decoration-color:rgb(216, 226, 232);color:rgb(216, 226, 232)}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.card-media > img,
  a.hcard > div.m > img,
  div.page-body > figure.article-figure > img,
  div.post-hero.wrap > figure.post-figure > img,
  div.tribute > figure.tribute-fig > img){height:auto}
/* op-img-dims:end */