/* ============================================================
   RUIYANG — Maker's Log (animated edition)
   Warm risograph zine, with motion baked in.
   ============================================================ */

:root {
  --paper:     #F2EEE3;
  --paper-2:   #E8E2D2;
  --paper-3:   #D8D1BD;
  --ink:       #0F0F12;
  --ink-2:     #1B1B20;
  --ink-soft:  #3A3A42;
  --rule:      rgba(15, 15, 18, 0.12);
  --rule-2:    rgba(15, 15, 18, 0.22);
  --muted:     #6B665B;

  --acc:       #E6F23A;
  --acc-deep:  #C9D617;
  --acc-glow:  rgba(230, 242, 58, 0.55);
  --hot:       #FF4A1C;

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", "Helvetica Neue", Helvetica, sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --pad: clamp(20px, 4vw, 56px);
  --max: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none;
}
@media (max-width: 820px) { body { cursor: auto; } }

::selection { background: var(--acc); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: none; }
@media (max-width: 820px) { button { cursor: pointer; } }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }

/* ---------- paper grain ---------- */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  z-index: 9990; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15  0 0 0 0 0.15  0 0 0 0 0.15  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html[data-grain="off"] body::before { display: none; }

/* ---------- progress ---------- */
.prog {
  position: fixed; left: 0; top: 0; height: 2px;
  width: 100%; background: var(--ink);
  z-index: 9991; transform-origin: left;
}

/* ============================================================
   MAGNETIC CURSOR
   ============================================================ */
.cur-dot, .cur-ring, .cur-trail, .cur-label {
  position: fixed; left: 0; top: 0;
  pointer-events: none; z-index: 10001;
  will-change: transform;
}
.cur-dot {
  width: 8px; height: 8px;
  background: var(--ink); border-radius: 50%;
  mix-blend-mode: difference;
}
.cur-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transition: width .25s cubic-bezier(.2,.8,.2,1), height .25s cubic-bezier(.2,.8,.2,1), background .25s;
}
.cur-ring.grow {
  width: 72px; height: 72px;
  background: var(--acc);
  border-color: var(--ink);
  mix-blend-mode: multiply;
}
.cur-trail {
  width: 80px; height: 80px;
  background: radial-gradient(circle, var(--acc-glow), transparent 70%);
  filter: blur(20px); opacity: .55;
  mix-blend-mode: multiply;
}
.cur-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--ink); color: var(--acc);
  padding: 3px 8px; border-radius: 3px;
  opacity: 0; transform: translate(0,0) scale(0.85);
  transition: opacity .2s, transform .2s;
  white-space: nowrap;
}
.cur-label.on { opacity: 1; transform: translate(0,0) scale(1); }
@media (max-width: 820px) { .cur-dot, .cur-ring, .cur-trail, .cur-label { display: none; } }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: sticky; top: 0;
  z-index: 9000;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px var(--pad);
  background: rgba(242,238,227,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; }
.brand-mark {
  width: 26px; height: 26px;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  overflow: hidden;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.brand-name { letter-spacing: 0.12em; font-size: 11.5px; }

.topnav { display: flex; gap: 22px; justify-self: center; }
.topnav a { position: relative; transition: color .2s; }
.topnav a:hover { color: var(--ink); }
.topnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s;
}
.topnav a:hover::after { transform: scaleX(1); }

.topright { display: flex; gap: 12px; align-items: center; justify-self: end; }
.status {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 10px; background: var(--ink); color: var(--paper);
  border-radius: 999px;
  font-size: 10.5px; letter-spacing: 0.1em;
}
.status .led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 0 var(--acc-glow);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(230,242,58,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(230,242,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,242,58,0); }
}

@media (max-width: 860px) {
  .topnav { display: none; }
  .topbar { grid-template-columns: 1fr auto; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(56px, 9vh, 96px) var(--pad) 0;
  overflow: hidden;
}
.hero-spot {
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 30%), var(--acc-glow), transparent 60%);
  filter: blur(10px); opacity: .85;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: background-position .15s;
}
.hero-grid {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: end;
  padding-bottom: clamp(48px, 7vh, 80px);
}
.hero-left { max-width: 760px; }

/* floating shapes */
.floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.floaters .f {
  position: absolute; border-radius: 50%;
  filter: blur(2px);
  mix-blend-mode: multiply;
}
.floaters .f1 {
  width: 220px; height: 220px;
  background: var(--acc);
  top: 12%; right: 28%;
  animation: float1 14s ease-in-out infinite;
  opacity: .25;
}
.floaters .f2 {
  width: 120px; height: 120px;
  background: var(--hot);
  bottom: 18%; left: 8%;
  animation: float2 10s ease-in-out infinite;
  opacity: .35;
}
.floaters .f3 {
  width: 60px; height: 60px;
  background: var(--ink);
  top: 60%; right: 12%;
  animation: float3 8s ease-in-out infinite;
  opacity: .2;
  border-radius: 24% 76% 53% 47% / 50% 30% 70% 50%;
}
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.15); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1) rotate(0); } 50% { transform: translate(-30px, 20px) scale(0.85) rotate(45deg); } }
@keyframes float3 { 0%,100% { transform: rotate(0); } 50% { transform: rotate(180deg) translateX(20px); } }
.f-scribble {
  position: absolute;
  width: 280px; height: auto;
  bottom: 26%; left: 50%;
  color: var(--ink);
  opacity: 0.3;
  stroke-dasharray: 4 6;
  animation: scribble 8s ease-in-out infinite;
}
@keyframes scribble {
  0%,100% { transform: translateX(-10px) rotate(-2deg); }
  50% { transform: translateX(10px) rotate(2deg); }
}

.hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.hero-eyebrow .num {
  background: var(--ink); color: var(--acc);
  padding: 3px 7px; font-weight: 600;
}
.hero-eyebrow .seal {
  margin-left: auto;
  border: 1px solid var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  background: var(--paper);
  animation: sealWobble 6s ease-in-out infinite;
}
@keyframes sealWobble {
  0%,100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.hero-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  color: var(--ink);
}
.hero-h1 .line { display: block; }
.hero-h1 .hl {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.hero-h1 .hl::before {
  content: ""; position: absolute;
  left: -0.1em; right: -0.1em; top: 0.05em; bottom: 0.05em;
  background: var(--acc);
  transform: skew(-3deg);
  z-index: -1;
  animation: highlightIn 0.8s cubic-bezier(.6,0,.2,1) 0.4s both;
  transform-origin: left;
}
@keyframes highlightIn {
  0%   { transform: scaleX(0) skew(-3deg); }
  100% { transform: scaleX(1) skew(-3deg); }
}

/* split text reveal */
.split { display: inline; }
.split-word { display: inline-block; }
.split-space { display: inline-block; width: 0.27em; }
.split-char {
  display: inline-block;
  opacity: 0; transform: translateY(0.6em) rotate(6deg);
  animation: charIn 0.7s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes charIn {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 32px;
}

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 36px;
  padding-top: 16px;
  border-top: 1px dashed var(--rule-2);
}
.hero-meta b { color: var(--ink); font-weight: 500; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 6px;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.mag-btn { will-change: transform; transition: transform .2s ease, box-shadow .2s; }
.btn-primary {
  background: var(--ink); color: var(--paper);
  box-shadow: 4px 4px 0 var(--acc);
}
.btn-primary:hover { box-shadow: 6px 6px 0 var(--acc); }
.btn-ghost {
  border: 1px solid var(--ink); color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* hero card */
.hero-card {
  width: clamp(280px, 28vw, 380px);
  aspect-ratio: 4/5;
  position: relative;
  transform: rotate(2deg);
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
}
.hero-card .card-bg {
  position: absolute; inset: 0;
  background: var(--ink);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(15,15,18,0.25);
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 22px;
  color: var(--paper);
}
.hero-card .ch-eyebrow {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--acc);
  display: flex; justify-content: space-between;
}
.hero-card .ch-title {
  font-family: var(--serif); font-style: italic;
  font-size: 32px; line-height: 1.08;
  margin-top: 10px;
  flex: 1; display: flex; align-items: center;
}
.hero-card .ch-title .hl-y { background: var(--acc); color: var(--ink); padding: 0 4px; font-style: normal; }
.hero-card .ch-stack { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.hero-card .ch-bar {
  height: 6px; background: rgba(242,238,227,0.12);
  border-radius: 3px; overflow: hidden;
}
.hero-card .ch-bar span {
  display: block; height: 100%;
  background: var(--acc);
  transition: width 1.8s cubic-bezier(.2,.8,.2,1) 0.4s;
}
.hero-card .ch-meta {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em;
  margin-top: 12px;
  color: rgba(242,238,227,0.6);
}
.hero-card::after {
  content: "ISSUE #001 · MAY 2026";
  position: absolute;
  bottom: -22px; right: -8px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em;
  background: var(--acc); color: var(--ink);
  padding: 4px 10px;
  transform: rotate(-3deg);
  font-weight: 600;
  animation: stampWobble 4s ease-in-out infinite;
}
@keyframes stampWobble {
  0%,100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-2px); }
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { display: none; }
}

/* marquee */
.m-mar { overflow: hidden; }
.m-mar-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marq 40s linear infinite;
  will-change: transform;
}
@keyframes marq { to { transform: translateX(-50%); } }

/* ticker */
.ticker {
  background: var(--ink); color: var(--paper);
  padding: 14px 0;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ticker .tick { display: inline-flex; align-items: center; gap: 10px; margin-right: 40px; }
.ticker .tick .em { color: var(--acc); }
.ticker .tick .dot { width: 6px; height: 6px; background: var(--acc); border-radius: 50%; }

/* ============================================================
   SECTION CHROME
   ============================================================ */
section.sect {
  position: relative;
  padding: clamp(72px, 11vh, 120px) var(--pad);
  border-bottom: 1px solid var(--rule);
  max-width: var(--max);
  margin: 0 auto;
}

.sect-head {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 28px; align-items: end;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 18px;
}
.sect-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-soft); }
.sect-title { font-family: var(--serif); font-size: clamp(28px, 4vw, 48px); line-height: 1; letter-spacing: -0.025em; }
.sect-title em { font-style: italic; }
.sect-meta { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
@media (max-width: 640px) { .sect-head { grid-template-columns: 1fr; gap: 8px; } }

[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

/* ============================================================
   FLAGSHIP — MEMDORA
   ============================================================ */
.flagship {
  background: var(--ink);
  color: var(--paper);
  max-width: none;
  margin: 0;
  border-bottom: 0;
  position: relative;
  overflow: hidden;
}
.flag-bg-rings {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.flag-bg-rings .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(230,242,58,0.18);
}
.flag-bg-rings .r1 { width: 400px; height: 400px; top: -100px; right: -120px; animation: ringSpin 30s linear infinite; }
.flag-bg-rings .r2 { width: 700px; height: 700px; top: -250px; right: -260px; animation: ringSpin 50s linear infinite reverse; border-style: dashed; }
.flag-bg-rings .r3 { width: 1000px; height: 1000px; top: -380px; right: -400px; animation: ringSpin 80s linear infinite; opacity: .5; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

.flagship-inner {
  max-width: var(--max); margin: 0 auto;
  position: relative; z-index: 1;
}
.flag-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink); background: var(--acc);
  padding: 5px 11px;
  margin-bottom: 28px;
  font-weight: 600;
  animation: tagPulse 3s ease-in-out infinite;
}
@keyframes tagPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(230,242,58,0.6); }
  50%     { box-shadow: 0 0 0 14px rgba(230,242,58,0); }
}

.flag-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px; align-items: center;
}
@media (max-width: 980px) { .flag-grid { grid-template-columns: 1fr; gap: 48px; } }

.flag-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.flag-h .ital { font-style: italic; color: var(--acc); }
.flag-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: rgba(242,238,227,0.72);
  max-width: 50ch;
  margin-bottom: 32px;
}

.flag-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}
.flag-feat {
  border: 1px solid rgba(242,238,227,0.16);
  border-radius: 10px;
  padding: 16px;
  background: rgba(242,238,227,0.03);
  transition: border-color .25s, background .25s, transform .35s ease;
}
.flag-feat:hover { border-color: var(--acc); background: rgba(230,242,58,0.07); transform: translateY(-3px); }
.flag-feat .ff-i {
  width: 32px; height: 32px;
  background: var(--acc); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700;
  border-radius: 6px;
  font-size: 16px;
  margin-bottom: 10px;
  transition: transform .35s;
}
.flag-feat:hover .ff-i { transform: rotate(8deg) scale(1.08); }
.flag-feat .ff-t { font-family: var(--sans); font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--paper); }
.flag-feat .ff-d { font-family: var(--mono); font-size: 11px; color: rgba(242,238,227,0.6); line-height: 1.5; }

.flag-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.flag-cta .btn-primary {
  background: var(--acc); color: var(--ink);
  box-shadow: 4px 4px 0 var(--paper);
}
.flag-cta .btn-primary:hover { box-shadow: 6px 6px 0 var(--paper); }
.flag-cta .btn-ghost { border-color: var(--paper); color: var(--paper); }
.flag-cta .btn-ghost:hover { background: var(--paper); color: var(--ink); }

/* big MEMDORA marquee */
.flag-bigword {
  position: relative; z-index: 1;
  margin: 80px 0 -20px;
  font-family: var(--serif);
  font-size: clamp(80px, 18vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242,238,227,0.18);
  text-stroke: 1.5px rgba(242,238,227,0.18);
  font-style: italic;
  font-weight: 400;
}
.flag-bigword .tick { display: inline; }

/* device mock */
.flag-device {
  position: relative;
  aspect-ratio: 9/16;
  max-width: 320px;
  margin: 0 auto;
  background: #000;
  border-radius: 38px;
  padding: 10px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(242,238,227,0.1);
  animation: deviceFloat 6s ease-in-out infinite;
}
@keyframes deviceFloat {
  0%,100% { transform: translateY(0) rotate(-0.5deg); }
  50%     { transform: translateY(-12px) rotate(0.5deg); }
}
.flag-device .notch {
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 22px;
  background: #000; border-radius: 12px;
  z-index: 2;
}
.flag-device .device-glow {
  position: absolute;
  inset: -30px;
  border-radius: 60px;
  background: radial-gradient(circle, var(--acc-glow), transparent 60%);
  filter: blur(30px);
  z-index: -1;
  animation: deviceGlow 4s ease-in-out infinite;
}
@keyframes deviceGlow {
  0%,100% { opacity: 0.5; }
  50%     { opacity: 0.9; }
}
.flag-screen {
  position: relative;
  width: 100%; height: 100%;
  background: #0F0F12;
  border-radius: 30px;
  overflow: hidden;
  padding: 44px 18px 18px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.screen-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(230,242,58,0.06) 50%, transparent 70%);
  animation: shimmer 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0%,100% { transform: translateX(-100%); opacity: 0; }
  50%     { transform: translateX(100%); opacity: 1; }
}
.mem-hello {
  font-family: var(--serif); font-style: italic;
  color: var(--paper); font-size: 14px;
  opacity: .6;
}
.mem-q {
  font-family: var(--serif);
  color: var(--paper); font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  min-height: 80px;
}
.mem-q .caret {
  color: var(--acc);
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.mem-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mem-card {
  background: rgba(242,238,227,0.06);
  border: 1px solid rgba(242,238,227,0.1);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; gap: 10px; align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.mem-card.in { opacity: 1; transform: translateY(0); }
.mem-card .av {
  width: 22px; height: 22px; border-radius: 50%;
  flex-shrink: 0; background: var(--acc);
}
.mem-card .av.b { background: var(--hot); }
.mem-card .av.c { background: #38BDF8; }
.mem-card .tx { font-size: 11px; color: var(--paper); font-family: var(--mono); line-height: 1.4; opacity: .85; }
.mem-card .tx b { color: var(--acc); font-weight: 500; }
.mem-input {
  margin-top: auto;
  background: rgba(242,238,227,0.08);
  border-radius: 999px;
  padding: 8px 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px;
  color: rgba(242,238,227,0.5);
}
.mem-input .send {
  width: 24px; height: 24px;
  background: var(--acc); color: var(--ink);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}

/* ============================================================
   PRODUCT VAULT
   ============================================================ */
.vault {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  perspective: 1200px;
}
@media (max-width: 760px) { .vault { grid-template-columns: 1fr; } }
.vault-card {
  background: var(--paper);
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 320px;
  position: relative;
  transition: background .25s, transform .35s ease;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}
.vault-card:hover { background: var(--paper-2); }

.vc-bignum {
  position: absolute;
  right: -20px; bottom: -60px;
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: 220px; line-height: 1;
  color: var(--ink);
  opacity: 0.06;
  letter-spacing: -0.04em;
  transition: transform .5s ease, opacity .3s;
  pointer-events: none;
}
.vault-card:hover .vc-bignum { transform: translate(-12px, -8px) rotate(-3deg); opacity: 0.12; }

.vc-glare {
  position: absolute; inset: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(230,242,58,0.2), transparent 60%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.vault-card:hover .vc-glare { opacity: 1; }

.vc-head {
  display: flex; justify-content: space-between; align-items: start;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
}
.vc-num { color: var(--ink); font-weight: 600; }
.vc-glyph {
  width: 56px; height: 56px;
  color: var(--ink);
  transition: transform .4s ease, color .25s;
  position: relative; z-index: 1;
}
.vault-card:hover .vc-glyph { color: var(--hot); transform: scale(1.08) rotate(-4deg); }
.vc-glyph svg { width: 100%; height: 100%; display: block; }
.vc-name {
  font-family: var(--serif);
  font-size: 38px; line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  position: relative; z-index: 1;
  transition: transform .35s ease;
}
.vault-card:hover .vc-name { transform: translateX(4px); }
.vc-blurb {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; line-height: 1.45;
  color: var(--ink-soft);
  position: relative; z-index: 1;
}
.vc-foot {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 6px;
  position: relative; z-index: 1;
}

.chip {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 4px 8px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--paper);
}
.chip.live { background: var(--acc); border-color: var(--acc-deep); color: var(--ink); font-weight: 600; }
.chip.hot  { background: var(--hot); border-color: var(--hot); color: var(--paper); font-weight: 600; }

/* ============================================================
   IDEAS WALL
   ============================================================ */
.ideas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  position: relative;
  min-height: 480px;
}
.idea {
  position: relative;
  padding: 22px 18px 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  box-shadow: 4px 6px 0 rgba(15,15,18,0.06);
  transform: rotate(var(--rot, -0.5deg));
  transition: box-shadow .25s ease;
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
}
.idea.dragging { cursor: grabbing; z-index: 20; box-shadow: 12px 18px 0 rgba(15,15,18,0.14); transition: none; }
.idea:nth-child(3n)   { background: #F5E9C8; }
.idea:nth-child(3n+1) { background: #DDEAD6; }
.idea:nth-child(5n)   { background: #F2D6CB; }
.idea .i-num {
  position: absolute; top: -10px; left: 16px;
  background: var(--ink); color: var(--paper);
  padding: 3px 8px;
  font-family: var(--mono); font-size: 10px;
  font-weight: 600; letter-spacing: 0.1em;
}
.idea .i-cat {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft); margin-bottom: 10px;
}
.idea .i-t {
  font-family: var(--serif);
  font-size: 19px; line-height: 1.2;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.idea .i-b {
  font-family: var(--sans); font-size: 13px;
  line-height: 1.5; color: var(--ink-soft);
}
.idea .i-tape {
  position: absolute; top: -10px; right: 18px;
  width: 50px; height: 16px;
  background: rgba(15,15,18,0.08);
  transform: rotate(2deg);
}
.idea .i-grab {
  position: absolute;
  bottom: 10px; right: 12px;
  font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .25s;
}
.idea:hover .i-grab { opacity: .65; }

/* ============================================================
   FIELD NOTES
   ============================================================ */
.fn-list { display: flex; flex-direction: column; }
.fn-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr auto;
  gap: 24px;
  padding: 24px 8px;
  border-top: 1px solid var(--rule);
  align-items: baseline;
  transition: padding .25s, background .2s;
}
.fn-row:last-child { border-bottom: 1px solid var(--rule); }
.fn-row:hover { padding-left: 24px; background: var(--paper-2); }
.fn-row:hover .fn-t .fn-t-inner { color: var(--hot); }
.fn-row:hover .fn-arr { transform: translate(6px, -6px) rotate(8deg); color: var(--hot); }
.fn-d { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.08em; }
.fn-t {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.25;
  display: inline-block;
}
.fn-t-inner { transition: color .25s; }
.fn-underline {
  position: absolute;
  left: 0; right: 8%;
  bottom: -8px;
  height: 8px;
  color: var(--hot);
  opacity: 0;
  pointer-events: none;
}
.fn-underline path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset .6s cubic-bezier(.6,0,.2,1);
}
.fn-row:hover .fn-underline { opacity: 1; }
.fn-row:hover .fn-underline path { stroke-dashoffset: 0; }
.fn-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.12em; }
.fn-arr {
  font-family: var(--serif); font-size: 28px; color: var(--ink-soft);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), color .25s;
  display: inline-block;
}
@media (max-width: 720px) {
  .fn-row { grid-template-columns: 1fr; gap: 6px; }
  .fn-underline { display: none; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
}
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }
.about-prose {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
}
.about-prose p + p { margin-top: 18px; }
.about-prose em { font-style: italic; }
.about-prose .hl {
  background: linear-gradient(180deg, transparent 60%, var(--acc) 60%);
  padding: 0 2px;
}

.about-card {
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  padding: 22px 22px;
  align-self: start;
  position: relative;
  overflow: hidden;
}
.about-card::after {
  content: ""; position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: var(--acc);
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(20px);
  animation: aboutBlob 8s ease-in-out infinite;
}
@keyframes aboutBlob {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-20px, 20px) scale(1.2); }
}
.about-card h4 {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
  display: flex; justify-content: space-between;
  position: relative; z-index: 1;
}
.about-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px 14px;
  font-family: var(--mono); font-size: 12px;
  position: relative; z-index: 1;
}
.about-card dt { color: var(--ink-soft); }
.about-card dd { margin: 0; color: var(--ink); }
.about-card .credentials {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--rule-2);
  display: flex; flex-wrap: wrap; gap: 6px;
  position: relative; z-index: 1;
}
.about-card .credentials .chip { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  background: var(--ink);
  color: var(--paper);
  max-width: none;
  margin: 0;
  border-bottom: 0;
  text-align: left;
  overflow: hidden;
}
.contact-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px) { .contact-inner { grid-template-columns: 1fr; } }
.contact .pre {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--acc); margin-bottom: 18px;
}
.contact .big {
  font-family: var(--serif);
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.95; letter-spacing: -0.035em;
}
.contact .big em { font-style: italic; color: var(--acc); }
.contact .sub {
  margin-top: 24px;
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: rgba(242,238,227,0.7);
  max-width: 44ch;
}

.contact-list { display: flex; flex-direction: column; }
.cline {
  display: grid; grid-template-columns: 110px 1fr 24px;
  gap: 18px; align-items: baseline;
  padding: 18px 4px;
  border-top: 1px solid rgba(242,238,227,0.12);
  font-family: var(--mono); font-size: 13px;
  transition: padding .25s, background .2s;
}
.cline:last-child { border-bottom: 1px solid rgba(242,238,227,0.12); }
.cline:hover { padding-left: 14px; background: rgba(242,238,227,0.04); }
.cline:hover .cline-v, .cline:hover .cline-arr { color: var(--acc); }
.cline-k { color: rgba(242,238,227,0.5); letter-spacing: 0.14em; text-transform: uppercase; font-size: 10.5px; }
.cline-v { color: var(--paper); transition: color .25s; }
.cline-arr { color: rgba(242,238,227,0.4); justify-self: end; transition: color .25s; }

.contact-bigname {
  margin-top: 80px;
  font-family: var(--serif);
  font-size: clamp(80px, 18vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242,238,227,0.18);
  text-stroke: 1.5px rgba(242,238,227,0.18);
  font-style: italic;
  font-weight: 400;
}

.footer-strip {
  max-width: var(--max); margin: 36px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(242,238,227,0.12);
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(242,238,227,0.5);
}
@media (max-width: 600px) { .footer-strip { flex-direction: column; gap: 8px; } }


/* ============================================================
   PHILOSOPHY (in hero)
   ============================================================ */
.philosophy {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 48px 0 60px;
}
.phi-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.phi-bullet {
  font-family: var(--serif); font-style: italic;
  font-size: 24px; color: var(--ink);
  line-height: 1;
}
.phi-rule { flex: 1; height: 1px; background: var(--ink); opacity: 0.4; }
.phi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink);
}
@media (max-width: 880px) { .phi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .phi-grid { grid-template-columns: 1fr; } }
.phi-card {
  background: var(--paper);
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: background .25s, transform .35s ease;
  opacity: 0; transform: translateY(20px);
}
[data-reveal].is-in .phi-card { opacity: 1; transform: translateY(0); transition: opacity .8s ease, transform .8s ease, background .25s; }
.phi-card:not(:last-child) { border-right: 1px solid var(--ink); }
@media (max-width: 880px) {
  .phi-card:nth-child(2) { border-right: 0; }
  .phi-card:nth-child(1), .phi-card:nth-child(2) { border-bottom: 1px solid var(--ink); }
}
.phi-card::after {
  content: ""; position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: var(--acc);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
.phi-card:hover { background: var(--paper-2); }
.phi-card:hover::after { transform: scaleX(1); }
.phi-num {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  font-weight: 600;
}
.phi-k {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; line-height: 1.15;
  color: var(--ink); letter-spacing: -0.015em;
}
.phi-v {
  font-family: var(--sans); font-size: 13px;
  line-height: 1.5; color: var(--ink-soft);
}

/* ============================================================
   SECTION HEAD VARIANT — dark
   ============================================================ */
.sect-head--dark {
  border-bottom-color: rgba(242,238,227,0.2);
}
.sect-head--dark .sect-num,
.sect-head--dark .sect-meta { color: rgba(242,238,227,0.5); }
.sect-head--dark .sect-title { color: var(--paper); }
.sect-head--dark .sect-title em { color: var(--acc); }

.sect-lede {
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: -28px 0 48px;
  font-style: italic;
}
.sect-lede em { color: var(--ink); font-style: italic; }

/* ============================================================
   STUDY + RESEARCH
   ============================================================ */
.study-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
}
@media (max-width: 920px) { .study-grid { grid-template-columns: 1fr; gap: 48px; } }

.study-h {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.edu-row {
  padding: 22px 0;
  border-bottom: 1px dashed var(--rule-2);
}
.edu-row:last-of-type { border-bottom: 1px solid var(--ink); margin-bottom: 24px; }
.edu-school {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.edu-deg {
  margin-top: 6px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.edu-loc {
  display: inline-block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}
.edu-notes {
  margin-top: 10px;
  font-family: var(--serif); font-style: italic;
  font-size: 16px; line-height: 1.45;
  color: var(--ink-soft);
}

.creds-strip { margin-top: 28px; }
.creds-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.creds-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  background: var(--paper-2);
  transition: transform .25s, border-color .25s;
}
.creds-list li:hover {
  border-color: var(--ink);
  transform: translateX(4px);
}
.creds-k {
  font-family: var(--mono); font-weight: 600;
  font-size: 12px;
  background: var(--ink); color: var(--acc);
  padding: 2px 7px; border-radius: 3px;
  letter-spacing: 0.12em;
  text-align: center;
}
.creds-v {
  font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--ink); line-height: 1.25;
}

.research-h { margin-bottom: 8px; }
.research-lede {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 24px;
}
.research-list {
  display: flex; flex-direction: column;
  gap: 12px;
}
.research-card {
  position: relative;
  padding: 22px 22px 22px 70px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  transition: transform .35s ease, border-color .25s, background .25s;
  opacity: 0; transform: translateY(20px);
}
[data-reveal].is-in .research-card { opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .7s ease, border-color .25s, background .25s; }
.research-card:hover {
  background: var(--paper);
  border-color: var(--ink);
}
.research-num {
  position: absolute;
  left: 16px; top: 22px;
  font-family: var(--mono); font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  background: var(--ink); color: var(--acc);
  padding: 4px 8px;
  border-radius: 3px;
}
.research-t {
  font-family: var(--serif);
  font-size: 22px; line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 6px;
}
.research-d {
  font-family: var(--sans);
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
}

/* ============================================================
   HIRE / CONTACT TWEAKS
   ============================================================ */
.contact-num {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--acc) !important;
}
.hire-modes {
  list-style: none; padding: 0; margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.hire-modes li {
  font-family: var(--serif); font-style: italic;
  font-size: 17px;
  color: rgba(242,238,227,0.85);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.hire-modes li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--acc);
  font-style: normal;
  font-family: var(--mono);
  font-weight: 600;
}
.hire-modes li b {
  background: var(--acc); color: var(--ink);
  padding: 1px 6px; font-style: normal;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  border-radius: 3px;
}


/* ============================================================
   HERO CARD v2 — SPECIMEN
   ============================================================ */
.hero-card.v2 {
  width: clamp(300px, 30vw, 400px);
  aspect-ratio: 7/10;
  position: relative;
  transform: rotate(2deg);
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
  perspective: 1200px;
  will-change: transform;
}
.hero-card.v2 .card-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 20%, #1a1a22 0%, var(--ink) 60%),
    var(--ink);
  border: 1px solid rgba(230,242,58,0.18);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(15,15,18,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 28px 26px 22px;
  color: var(--paper);
}
.specimen-grain {
  position: absolute; inset: 0; pointer-events: none;
  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='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.08; mix-blend-mode: screen;
}
.specimen-corners i {
  position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--acc);
  opacity: 0.7;
}
.specimen-corners i:nth-child(1) { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.specimen-corners i:nth-child(2) { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.specimen-corners i:nth-child(3) { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.specimen-corners i:nth-child(4) { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.specimen-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.sp-stamp {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.22em;
  background: var(--acc); color: var(--ink);
  padding: 3px 8px;
  font-weight: 700;
  border-radius: 2px;
}
.sp-barcode {
  display: inline-flex; gap: 2px;
  align-items: center; height: 22px;
}
.sp-barcode i {
  display: inline-block;
  height: 100%;
  background: var(--paper);
  opacity: 0.85;
}

/* circular seal */
.specimen-seal {
  position: relative;
  width: 170px; height: 170px;
  margin: 8px auto 14px;
  z-index: 1;
}
.specimen-seal::before {
  content: "";
  position: absolute; inset: 8px;
  border: 1px dashed rgba(230,242,58,0.25);
  border-radius: 50%;
  animation: spinSlow 28s linear infinite reverse;
}
.specimen-seal::after {
  content: "";
  position: absolute; inset: -8px;
  border: 1px solid rgba(230,242,58,0.18);
  border-radius: 50%;
}
.circ-text {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: spinSlow 18s linear infinite;
}
.circ-text text {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  fill: var(--acc);
  font-weight: 500;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.seal-mono {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -55%);
  font-family: "Fraunces", serif;
  font-style: italic; font-weight: 400;
  font-size: 88px;
  color: var(--acc);
  line-height: 1;
  text-shadow: 0 0 30px rgba(230,242,58,0.5);
  z-index: 2;
}
.seal-tick {
  position: absolute; left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.2em;
  color: rgba(242,238,227,0.65);
  z-index: 2;
}

.sp-name {
  font-family: var(--serif);
  font-size: 30px; line-height: 1;
  letter-spacing: -0.025em;
  text-align: center;
  color: var(--paper);
  position: relative; z-index: 1;
}
.sp-name em { font-style: italic; color: var(--acc); }
.sp-role {
  margin-top: 6px;
  text-align: center;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,238,227,0.55);
  position: relative; z-index: 1;
}

.sp-now {
  margin: 18px 0 14px;
  padding: 9px 12px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(230,242,58,0.08);
  border: 1px solid rgba(230,242,58,0.25);
  border-radius: 6px;
  position: relative; z-index: 1;
  font-family: var(--mono);
}
.sp-now-dot {
  width: 8px; height: 8px;
  background: var(--acc);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(230,242,58,0.7);
  animation: pulse 1.6s infinite;
  flex-shrink: 0;
}
.sp-now-k {
  font-size: 9.5px; letter-spacing: 0.18em;
  color: var(--acc);
  font-weight: 700;
}
.sp-now-v {
  margin-left: auto;
  font-size: 12px;
  color: var(--paper);
  font-family: var(--serif);
}
.sp-now-v em {
  color: var(--acc); font-style: italic;
}

.sp-stats {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative; z-index: 1;
  margin-bottom: 18px;
}
.sp-stats li {
  text-align: center;
  padding: 10px 6px;
  border-radius: 5px;
  background: rgba(242,238,227,0.05);
  border: 1px solid rgba(242,238,227,0.1);
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.sp-stat-v {
  font-family: var(--serif);
  font-size: 36px; line-height: 1;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.sp-stat-k {
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242,238,227,0.5);
  line-height: 1.25;
}

.sp-foot {
  margin-top: auto;
  position: relative; z-index: 1;
  padding-top: 14px;
}
.sp-perf {
  display: block;
  width: 100%;
  height: 6px;
  background-image: radial-gradient(circle, var(--ink) 2px, transparent 2.5px);
  background-size: 10px 6px;
  background-repeat: repeat-x;
  background-position: left center;
  margin: 0 -26px;
  width: calc(100% + 52px);
  border-top: 1px dashed rgba(242,238,227,0.18);
  border-bottom: 1px dashed rgba(242,238,227,0.18);
  padding: 2px 0;
}
.sp-sig {
  display: block;
  margin: 10px 0 4px;
  color: var(--acc);
  height: 22px;
}
.sp-sig svg { width: 110px; height: 22px; display: block; }
.sp-foot-k {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242,238,227,0.4);
}

/* Keep the old "ISSUE #001" stamp animation off this v2 */
.hero-card.v2::after { display: none; }


/* ============================================================
   HERO CARD v3 — Memdora product preview (clean)
   ============================================================ */
.hero-card.v3 {
  width: clamp(280px, 28vw, 360px);
  aspect-ratio: 4/5;
  position: relative;
  transform: rotate(2deg);
  transition: transform .4s ease;
  transform-style: preserve-3d;
  perspective: 1200px;
  will-change: transform;
}
.hero-card.v3 .card-bg {
  position: absolute; inset: 0;
  background: var(--ink);
  border-radius: 22px;
  box-shadow: 0 40px 80px rgba(15,15,18,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 22px 22px 22px;
  color: var(--paper);
}
.v3-glow {
  position: absolute;
  width: 180px; height: 180px;
  top: -50px; right: -50px;
  background: radial-gradient(circle, rgba(230,242,58,0.45), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  animation: v3glow 6s ease-in-out infinite;
}
@keyframes v3glow {
  0%,100% { transform: translate(0,0) scale(1); opacity: 0.7; }
  50% { transform: translate(-20px, 30px) scale(1.15); opacity: 1; }
}

.v3-head {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 1;
  margin-bottom: 16px;
}
.v3-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  background: rgba(230,242,58,0.14);
  border: 1px solid rgba(230,242,58,0.35);
  color: var(--acc);
}
.v3-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 0 rgba(230,242,58,0.7);
  animation: pulse 1.6s infinite;
}
.v3-ver {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em;
  color: rgba(242,238,227,0.45);
  text-transform: uppercase;
}

.v3-icon {
  position: relative; z-index: 1;
  margin: 6px 0 22px;
  width: 84px; height: 84px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(230,242,58,0.18);
  animation: iconFloat 5s ease-in-out infinite;
}
@keyframes iconFloat {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-4px) rotate(-2deg); }
}
.v3-icon svg { width: 100%; height: 100%; display: block; }

.v3-name {
  position: relative; z-index: 1;
  font-family: var(--serif);
  font-size: 42px; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-bottom: 8px;
}
.v3-pitch {
  position: relative; z-index: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px; line-height: 1.35;
  color: rgba(242,238,227,0.7);
  letter-spacing: -0.005em;
}
.v3-pitch em {
  color: var(--acc);
  font-style: italic;
}

.v3-meter {
  position: relative; z-index: 1;
  margin-top: auto;
  padding: 14px 0;
  border-top: 1px dashed rgba(242,238,227,0.15);
  border-bottom: 1px dashed rgba(242,238,227,0.15);
}
.v3-meter-row {
  display: flex; align-items: center; gap: 12px;
}
.v3-meter-k {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(242,238,227,0.5);
  flex-shrink: 0;
}
.v3-bars {
  display: inline-flex; align-items: center; gap: 3px;
  height: 22px;
  flex: 1;
}
.v3-bars i {
  display: inline-block;
  width: 3px;
  background: var(--acc);
  border-radius: 1.5px;
  animation: v3bar 1.2s ease-in-out infinite;
  height: 30%;
}
@keyframes v3bar {
  0%,100% { height: 25%; opacity: 0.5; }
  50%     { height: 95%; opacity: 1; }
}

.v3-cta {
  position: relative; z-index: 1;
  margin-top: 16px;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--acc); color: var(--ink);
  border-radius: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 6px 0 #0F0F12, 0 16px 30px rgba(230,242,58,0.25);
}
.v3-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #0F0F12, 0 18px 32px rgba(230,242,58,0.35);
}
.v3-cta svg { flex-shrink: 0; }

/* hide the old specimen card styles' ::after stamp on v3 */
.hero-card.v3::after { display: none; }


/* ============================================================
   HERO CARD v4 — HOLOGRAPHIC MAKER'S CARD
   ============================================================ */
.hero-card.v4 {
  width: clamp(290px, 30vw, 380px);
  aspect-ratio: 4/5.4;
  position: relative;
  transform: rotate(2deg);
  transition: transform .4s ease;
  transform-style: preserve-3d;
  perspective: 1400px;
  will-change: transform;
  filter: drop-shadow(0 30px 60px rgba(15,15,18,0.45));
}
.hero-card.v4 .card-bg {
  position: absolute; inset: 0;
  background: #07070a;
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 18px;
  color: var(--paper);
  isolation: isolate;
}
/* holographic conic foil */
.holo-foil {
  position: absolute; inset: -10%;
  z-index: 0;
  opacity: 0.32;
  filter: blur(28px) saturate(1.4);
  mix-blend-mode: screen;
  transition: background .15s ease;
}
.holo-noise {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  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='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: screen;
}
.holo-rays {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg at 30% 0%,
      transparent 0deg, transparent 18deg,
      rgba(255,255,255,0.07) 18deg, rgba(255,255,255,0.07) 19deg);
  mix-blend-mode: overlay;
  opacity: 0.45;
}
.holo-rim {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 0 0 0 2px rgba(0,0,0,0.6),
    inset 0 0 60px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

/* head row */
.v4-head {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.v4-class {
  display: flex; flex-direction: column; gap: 1px;
  background: rgba(0,0,0,0.5);
  padding: 6px 9px 7px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 5px;
  backdrop-filter: blur(8px);
}
.v4-class-k {
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--acc);
  font-weight: 700;
}
.v4-class-v {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--paper);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.v4-hp {
  font-family: var(--serif);
  font-size: 22px; line-height: 1;
  font-style: italic;
  color: var(--acc);
  text-shadow: 0 0 12px rgba(230,242,58,0.4);
}
.v4-hp i { font-style: normal; opacity: 0.4; padding: 0 2px; }

/* big mark */
.v4-mark {
  position: relative; z-index: 3;
  margin: 14px auto 18px;
  width: 150px; height: 150px;
  display: flex; align-items: center; justify-content: center;
}
.v4-r {
  font-family: var(--serif); font-style: italic;
  font-size: 130px; line-height: 1;
  color: #fff;
  background: linear-gradient(160deg, #fff 0%, #E6F23A 40%, #FF7849 70%, #FF4FA3 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(230,242,58,0.55));
  z-index: 4;
}
.v4-ring {
  position: absolute;
  border: 1px solid;
  border-radius: 50%;
  pointer-events: none;
  border-color: rgba(255,255,255,0.18);
}
.v4-ring.r1 { width: 100%; height: 100%; animation: v4ring1 18s linear infinite; border-style: dashed; }
.v4-ring.r2 { width: 130%; height: 130%; animation: v4ring2 24s linear infinite reverse; border-color: rgba(230,242,58,0.22); }
.v4-ring.r3 { width: 76%; height: 76%; border-color: rgba(255,79,163,0.22); animation: v4ring1 14s linear infinite reverse; }
@keyframes v4ring1 { to { transform: rotate(360deg); } }
@keyframes v4ring2 { to { transform: rotate(360deg); } }

.v4-spark {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--acc);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--acc);
}
.v4-spark.s1 { top: 8%;  left: 50%; animation: v4orbit1 6s linear infinite; }
.v4-spark.s2 { top: 50%; left: 8%;  animation: v4orbit2 9s linear infinite; background: #FF4FA3; box-shadow: 0 0 12px #FF4FA3; }
.v4-spark.s3 { bottom: 8%; left: 50%; animation: v4orbit3 7s linear infinite; background: #FF7849; box-shadow: 0 0 12px #FF7849; }
.v4-spark.s4 { top: 50%; right: 8%; animation: v4orbit4 8s linear infinite; background: #38BDF8; box-shadow: 0 0 12px #38BDF8; }
@keyframes v4orbit1 { from { transform: rotate(0)   translateX(72px) rotate(0); } to { transform: rotate(360deg) translateX(72px) rotate(-360deg); } }
@keyframes v4orbit2 { from { transform: rotate(0)   translateX(72px) rotate(0); } to { transform: rotate(-360deg) translateX(72px) rotate(360deg); } }
@keyframes v4orbit3 { from { transform: rotate(0)   translateY(-72px) rotate(0); } to { transform: rotate(360deg) translateY(-72px) rotate(-360deg); } }
@keyframes v4orbit4 { from { transform: rotate(0)   translateY(-72px) rotate(0); } to { transform: rotate(-360deg) translateY(-72px) rotate(360deg); } }

/* name */
.v4-name {
  position: relative; z-index: 3;
  text-align: center;
  margin-bottom: 16px;
}
.v4-name-main {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0.04em;
  color: #fff;
  position: relative;
  text-shadow: 0 0 18px rgba(230,242,58,0.25);
}
.v4-name-main::before, .v4-name-main::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.v4-name-main::before {
  color: #FF4FA3;
  transform: translate(-1.5px, 0);
  animation: glitch 4s steps(1) infinite;
}
.v4-name-main::after {
  color: #38BDF8;
  transform: translate(1.5px, 0);
  animation: glitch 4s steps(1) infinite reverse;
}
@keyframes glitch {
  0%, 90%, 100% { opacity: 0; }
  92%, 94%      { opacity: 0.7; transform: translate(-2px, 1px); }
  93%, 95%      { opacity: 0.7; transform: translate(2px, -1px); }
}
.v4-name-sub {
  display: block;
  margin-top: 4px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

/* signal */
.v4-signal {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(230,242,58,0.3);
  border-radius: 8px;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
}
.v4-signal-k {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.16em; font-weight: 700;
  color: var(--acc);
  flex-shrink: 0;
}
.v4-led {
  width: 7px; height: 7px;
  background: var(--acc); border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(230,242,58,0.7);
  animation: pulse 1.6s infinite;
}
.v4-eq {
  flex: 1;
  display: inline-flex; align-items: center; gap: 2px;
  height: 18px;
}
.v4-eq i {
  display: inline-block;
  flex: 1;
  min-width: 2px;
  background: var(--acc);
  border-radius: 1px;
  animation: v4eq 1.2s ease-in-out infinite;
}
@keyframes v4eq {
  0%,100% { transform: scaleY(0.3); opacity: 0.5; }
  50%     { transform: scaleY(1);   opacity: 1; }
}
.v4-signal-v {
  font-family: var(--mono); font-size: 10px;
  color: var(--paper);
  letter-spacing: 0.08em;
  font-weight: 500;
  flex-shrink: 0;
}

/* stats */
.v4-stats {
  position: relative; z-index: 3;
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.v4-stats li {
  text-align: center;
  padding: 9px 4px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.v4-stat-v {
  font-family: var(--serif);
  font-size: 32px; line-height: 1;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-shadow: 0 0 12px rgba(230,242,58,0.4);
}
.v4-stat-k {
  font-family: var(--mono); font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  line-height: 1.25;
}

.v4-foot {
  position: relative; z-index: 3;
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.18);
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.v4-edition {
  color: var(--acc);
  font-weight: 700;
}
.v4-serial {
  color: rgba(255,255,255,0.45);
}

.hero-card.v4::after { display: none; }


/* ============================================================
   LEDE PILLS — multi-domain emphasis
   ============================================================ */
.lede-pills {
  display: inline-flex; flex-wrap: wrap; gap: 6px;
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-2px);
}
.lede-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--acc);
  transition: transform .25s, background .25s;
}
.lede-pill:hover {
  transform: translateY(-2px) rotate(-2deg);
  background: var(--hot);
  color: var(--paper);
}
.lede-pill:nth-child(2) { background: #1E3A8A; color: #fff; }
.lede-pill:nth-child(3) { background: #7C3AED; color: #fff; }
.lede-pill:nth-child(4) { background: var(--hot); color: var(--paper); }
.lede-pill:nth-child(5) { background: var(--acc); color: var(--ink); }


/* ============================================================
   PROJECTS — dual-row horizontal marquee
   ============================================================ */
.projects-sect {
  max-width: none;
  padding-left: 0; padding-right: 0;
}
.projects-sect .sect-head,
.projects-sect .sect-lede,
.projects-sect .pmar-foot {
  max-width: var(--max);
  margin-left: auto; margin-right: auto;
  padding-left: var(--pad); padding-right: var(--pad);
}
.projects-sect .sect-lede { margin-bottom: 40px; }

.pmar {
  position: relative;
  overflow: hidden;
  padding: 12px 0;
  background:
    linear-gradient(180deg, transparent 0, transparent 50%, transparent 100%),
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(15,15,18,0.03) 6px 12px);
}
.pmar-row {
  overflow: hidden;
  padding: 14px 0;
}
.pmar-track {
  display: inline-flex;
  gap: 18px;
  padding: 0 18px;
  white-space: nowrap;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.pmar-l { animation-name: pmarL; animation-duration: 90s; }
.pmar-r { animation-name: pmarR; animation-duration: 110s; }
@keyframes pmarL { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes pmarR { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
.pmar:hover .pmar-track { animation-play-state: paused; }

.pmar-mask {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 8vw, 120px);
  pointer-events: none;
  z-index: 2;
}
.pmar-mask-l { left: 0;  background: linear-gradient(90deg, var(--paper), transparent); }
.pmar-mask-r { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }

.pmar-foot {
  margin-top: 24px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pmar-foot b {
  color: var(--ink); font-weight: 700;
  background: var(--acc);
  padding: 1px 7px; border-radius: 3px;
}

/* ---------- project card ---------- */
.pcard {
  --dom-bg: #525252;
  --dom-fg: #fff;
  --dom-ink: #171717;
  --rx: 0deg;
  --ry: 0deg;

  position: relative;
  width: 360px;
  flex-shrink: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 12px;
  padding: 22px 22px 18px 28px;
  display: flex; flex-direction: column; gap: 8px;
  white-space: normal;
  box-shadow: 6px 8px 0 rgba(15,15,18,0.06);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .4s ease, box-shadow .3s, background .3s;
  overflow: hidden;
  cursor: pointer;
}
.pcard:hover {
  background: var(--paper-2);
  box-shadow: 10px 14px 0 var(--dom-bg);
  z-index: 3;
}
.pcard-stripe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 8px;
  background: var(--dom-bg);
}
.pcard-stripe::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,0.18) 4px 5px);
}
.pcard-glare {
  position: absolute; inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--dom-bg) 22%, transparent), transparent 60%);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
  z-index: 1;
}
.pcard:hover .pcard-glare { opacity: 1; }

.pcard-bignum {
  position: absolute;
  right: -8px; bottom: -36px;
  font-family: var(--serif); font-style: italic;
  font-size: 180px;
  line-height: 1;
  color: var(--dom-bg);
  opacity: 0.08;
  letter-spacing: -0.04em;
  pointer-events: none;
  transition: opacity .3s, transform .4s ease;
}
.pcard:hover .pcard-bignum {
  opacity: 0.18;
  transform: translate(-8px, -6px) rotate(-2deg);
}

.pcard-head {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 2;
  margin-bottom: 4px;
}
.pcard-dom {
  display: inline-block;
  font-family: var(--mono); font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: var(--dom-bg);
  color: var(--dom-fg);
  border-radius: 3px;
}
.pcard-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pcard-dot {
  width: 6px; height: 6px;
  background: var(--dom-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 1.6s infinite;
}

.pcard-name {
  position: relative; z-index: 2;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 4px;
}
.pcard-blurb {
  position: relative; z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  flex: 1;
  text-wrap: pretty;
}

.pcard-foot-row {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px dashed var(--rule-2);
}
.pcard-tool {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--paper);
}
.pcard:hover .pcard-tool {
  border-color: var(--dom-bg);
  color: var(--dom-bg);
}

@media (max-width: 600px) {
  .pcard { width: 280px; padding: 18px 18px 14px 22px; }
  .pcard-name { font-size: 24px; }
}


/* "+ more" pill — neutral / dotted */
.lede-pill:nth-child(6) {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1.5px dashed var(--ink);
  padding: 1.5px 7.5px;
}


/* ============================================================
   SPOTLIGHT — hovered card jumps to viewport center, enlarged
   ============================================================ */
.has-spot .pmar-track { animation-play-state: paused; }
.has-spot .pcard:not(.pcard-spot) { opacity: 0.32; transition: opacity .35s; }
.has-spot .pcard.is-active { opacity: 0.55; }
/* Make sure the spotlight card itself is never affected by ancestor filters. */
.pcard-spot, .pcard-spot * { filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

.pmar-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 50%,
    rgba(15,15,18,0.34) 0%,
    rgba(15,15,18,0.16) 55%,
    rgba(15,15,18,0.06) 100%);
  z-index: 9;
  pointer-events: none;
  animation: scrimIn .25s ease both;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

.pcard-spot {
  position: fixed;
  left: 50%; top: 50%;
  width: clamp(360px, 44vw, 540px);
  transform: translate(-50%, -50%) scale(0.88);
  opacity: 0;
  z-index: 20;
  padding: 32px 32px 26px 38px;
  border-radius: 16px;
  box-shadow:
    0 30px 60px rgba(15,15,18,0.25),
    0 60px 120px rgba(15,15,18,0.18),
    20px 26px 0 var(--dom-bg);
  pointer-events: auto;
  transition: opacity .35s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
  background: var(--paper);
  cursor: default;
}
.pcard-spot.in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.pcard-spot .pcard-name { font-size: 44px; line-height: 1.02; }
.pcard-spot .pcard-blurb { font-size: 19px; line-height: 1.5; margin-top: 10px; }
.pcard-spot .pcard-stripe { width: 12px; }
.pcard-spot .pcard-bignum {
  font-size: 280px;
  right: -16px; bottom: -56px;
  opacity: 0.12;
}
.pcard-spot .pcard-dom { font-size: 11px; padding: 5px 11px; }
.pcard-spot .pcard-status { font-size: 11px; }
.pcard-spot .pcard-tool { font-size: 10.5px; padding: 4px 9px; }
.pcard-spot-hint {
  position: absolute;
  bottom: -28px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.6;
  white-space: nowrap;
}

/* Tone down original card hover noise so spotlight does the work */
.pcard { transition: opacity .35s, filter .35s, box-shadow .3s, background .3s; }
.pcard:hover { background: var(--paper-2); }
.pcard-glare { display: none; }


/* ============================================================
   COURSEWORK
   ============================================================ */
.edu-gpa {
  display: inline-block;
  margin-left: 4px;
  background: var(--ink);
  color: var(--acc);
  padding: 1px 7px;
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 10.5px;
}

.cw {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 2px solid var(--ink);
  position: relative;
}
.cw::before {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 60px; height: 6px;
  background: var(--acc);
}

.cw-head {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 18px;
  margin-bottom: 32px;
}
.cw-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-filter {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  transition: all .25s ease;
}
.cw-filter:hover {
  background: var(--th-bg, var(--ink));
  color: var(--th-fg, var(--paper));
  transform: translateY(-2px);
}
.cw-filter.on {
  background: var(--th-bg, var(--ink));
  color: var(--th-fg, var(--paper));
}
.cw-filter:first-child {
  --th-bg: var(--ink);
  --th-fg: var(--acc);
}

.cw-schools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.cw-school {
  background: var(--paper-2);
  border: 1px solid var(--ink);
  border-radius: 12px;
  padding: 28px 30px;
  position: relative;
}
.cw-school::before {
  content: "";
  position: absolute;
  top: 18px; right: 18px; bottom: 18px;
  width: 40px;
  background-image: repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 6px);
  opacity: 0.06;
  border-radius: 2px;
  pointer-events: none;
}
.cw-school-h {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px dashed var(--rule-2);
  padding-bottom: 12px;
  margin-bottom: 6px;
}
.cw-school-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cw-school-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--acc);
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.cw-school-theme {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.cw-groups {
  display: flex; flex-direction: column;
  gap: 22px;
}
.cw-group {
  transition: opacity .35s ease, filter .35s ease;
}
.cw-group.dim {
  opacity: 0.18;
  filter: saturate(0.4);
}

.cw-group-h {
  display: flex; align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cw-group-swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
.cw-group-name {
  color: var(--ink);
  font-weight: 600;
}
.cw-group-count {
  margin-left: auto;
  background: var(--ink);
  color: var(--paper);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
}

.cw-pills {
  display: flex; flex-wrap: wrap;
  gap: 7px 6px;
}
.cw-pill {
  --th-bg: var(--ink);
  --th-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: default;
}
.cw-pill:hover {
  transform: translateY(-3px) rotate(-0.5deg);
  box-shadow: 3px 4px 0 var(--th-bg);
}
.cw-code {
  background: var(--th-bg);
  color: var(--th-fg);
  padding: 5px 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 10px;
}
.cw-name {
  padding: 5px 6px 5px 10px;
  color: var(--ink);
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
}
.cw-grade {
  padding: 5px 10px 5px 6px;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* Two-school side-by-side on wide screens */
@media (min-width: 980px) {
  .cw-schools { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 600px) {
  .cw-name { white-space: normal; max-width: 220px; }
}


/* ============================================================
   CREDENTIALS — expandable
   ============================================================ */
.creds-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.creds-item {
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  background: var(--paper-2);
  transition: border-color .25s, background .25s;
  overflow: hidden;
}
.creds-item.has-items:hover { border-color: var(--ink); }
.creds-item.open { border-color: var(--ink); background: var(--paper); }

.creds-row {
  width: 100%;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background .2s;
}
.creds-item.has-items .creds-row:hover {
  background: var(--paper);
}
.creds-row:disabled { cursor: default; }

.creds-k {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  background: var(--ink);
  color: var(--acc);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  text-align: center;
}
.creds-v {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.25;
}
.creds-chev {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-soft);
  width: 22px;
  text-align: center;
  transition: transform .25s, color .25s;
}
.creds-item.open .creds-chev {
  color: var(--ink);
  transform: rotate(180deg);
}

.creds-detail {
  overflow: hidden;
  transition: max-height .5s ease;
}
.creds-detail-inner {
  padding: 4px 16px 18px;
  border-top: 1px dashed var(--rule-2);
  margin-top: 0;
  padding-top: 14px;
}
.creds-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.creds-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.creds-topic {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  cursor: default;
}
.creds-topic:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  box-shadow: 2px 3px 0 rgba(15,15,18,0.12);
}
.creds-topic-lbl {
  padding: 3px 7px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 9px;
  background: var(--ink);
  color: var(--paper);
}
.creds-topic-name {
  padding: 3px 9px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
}

/* Topic accent colors by label */
.creds-topic--l1 .creds-topic-lbl,
.creds-topic--l2 .creds-topic-lbl,
.creds-topic--l3 .creds-topic-lbl {
  background: var(--hot, #FF4A1C); color: var(--paper);
}
.creds-topic--exam .creds-topic-lbl {
  background: #1E40AF; color: var(--paper);
}
.creds-topic--vee .creds-topic-lbl {
  background: #7C3AED; color: var(--paper);
}
.creds-topic--mod .creds-topic-lbl {
  background: #0F7E5F; color: var(--paper);
}
.creds-topic--topic .creds-topic-lbl {
  background: var(--ink); color: var(--acc);
}


/* ============================================================
   FLAGSHIP — Memdora rebuild (real product)
   ============================================================ */

/* big headline with stricken "you forget 90%" highlight */
.flag-strike {
  position: relative;
  display: inline-block;
  padding: 0 0.18em;
  background: linear-gradient(180deg, transparent 55%, var(--acc) 55%, var(--acc) 92%, transparent 92%);
}
.flag-strike .ital {
  font-style: italic;
  color: var(--ink);
}

/* Platform pill (replaces old "★ flagship · live now" stamp) */
.flag-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  background: rgba(15, 122, 95, 0.16);
  border: 1px solid rgba(15, 122, 95, 0.4);
  color: #4ade80;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 28px;
}
.flag-tag-dot {
  width: 7px; height: 7px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 0 0 #4ade80;
  animation: pulse 1.8s infinite;
}

/* Stat strip */
.flag-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 28px 0 36px;
  padding: 16px;
  background: rgba(242, 238, 227, 0.03);
  border: 1px solid rgba(242, 238, 227, 0.08);
  border-radius: 10px;
}
@media (max-width: 640px) { .flag-stats { grid-template-columns: repeat(2, 1fr); } }
.flag-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 4px;
  border-right: 1px dashed rgba(242, 238, 227, 0.1);
}
.flag-stat:last-child { border-right: 0; }
@media (max-width: 640px) {
  .flag-stat { border-right: 0; }
  .flag-stat:nth-child(odd) { border-right: 1px dashed rgba(242, 238, 227, 0.1); }
}
.fs-v {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.fs-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 238, 227, 0.5);
  line-height: 1.3;
}

/* Five-step rail */
.flag-steps { margin: 0 0 28px; }
.flag-steps-rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.flag-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 10px 0;
  position: relative;
}
.fst-bubble {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  background: var(--step-bg, var(--acc));
  color: var(--step-fg, var(--ink));
  box-shadow: 0 0 0 4px var(--step-glow, rgba(230, 242, 58, 0.18));
  position: relative;
  z-index: 2;
  transition: transform .35s ease;
}
.flag-step:hover .fst-bubble { transform: scale(1.12); }
.fst-body {
  padding-top: 4px;
  min-width: 0;
}
.fst-t {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--paper);
  line-height: 1.2;
}
.fst-d {
  margin-top: 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(242, 238, 227, 0.65);
  text-wrap: pretty;
}
.flag-steps-link {
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, rgba(242, 238, 227, 0.18), rgba(242, 238, 227, 0.04));
  margin-left: 22px;
}

/* tone per step */
.flag-step.tone-violet  { --step-bg: #7C3AED; --step-fg: #fff; --step-glow: rgba(124, 58, 237, 0.25); }
.flag-step.tone-teal    { --step-bg: #14B8A6; --step-fg: #0a1a18; --step-glow: rgba(20, 184, 166, 0.25); }
.flag-step.tone-magenta { --step-bg: #DB2777; --step-fg: #fff; --step-glow: rgba(219, 39, 119, 0.25); }
.flag-step.tone-green   { --step-bg: #10B981; --step-fg: #0a1a14; --step-glow: rgba(16, 185, 129, 0.25); }
.flag-step.tone-amber   { --step-bg: #F59E0B; --step-fg: #1a1404; --step-glow: rgba(245, 158, 11, 0.25); }

/* meta row beneath steps */
.flag-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 24px;
  padding: 14px 0;
  border-top: 1px dashed rgba(242, 238, 227, 0.12);
  border-bottom: 1px dashed rgba(242, 238, 227, 0.12);
  flex-wrap: wrap;
}
.flag-pricing {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--acc);
}
.flag-cite {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 238, 227, 0.5);
}

/* ============================================================
   FLASHCARD DEVICE
   ============================================================ */
.flag-device--card {
  background: transparent;
  aspect-ratio: auto;
  padding: 0;
  max-width: 100%;
  width: 100%;
  position: relative;
  border: 0;
  box-shadow: none;
}
.flag-device--card .device-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(circle, var(--acc-glow), transparent 65%);
  filter: blur(40px);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
}

.card-stage {
  position: relative;
  z-index: 1;
  padding: 36px 22px 22px;
}

.card-tab {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 184, 166, 0.18);
  color: #5eead4;
  border: 1px solid rgba(20, 184, 166, 0.4);
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 3;
}

.flashcard {
  position: relative;
  background: #FAF8F1;
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.05);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 320px;
  overflow: hidden;
}
.flashcard::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #F59E0B 0, #F59E0B 100%);
}
.flashcard.flash-in { animation: fcIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fcIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.fc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.fc-cat {
  display: inline-block;
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fc-ret {
  position: relative;
  width: 54px;
  text-align: center;
}
.fc-ret-ring { width: 54px; height: 54px; display: block; }
.fc-ret-num {
  position: absolute;
  top: 18px;
  left: 0; right: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.fc-ret-lbl {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: -2px;
}

.fc-title {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 4px;
}
.fc-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.fc-example {
  margin-top: 6px;
  padding: 14px 16px;
  background: rgba(15,15,18,0.04);
  border-radius: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}

.fc-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed rgba(15,15,18,0.1);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fc-dot {
  width: 6px; height: 6px;
  background: #F59E0B;
  border-radius: 50%;
}

/* dots beneath card showing rotation */
.card-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.card-tab-dot {
  width: 6px; height: 6px;
  background: rgba(242, 238, 227, 0.2);
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: default;
  transition: background .3s, width .3s;
}
.card-tab-dot.on {
  background: var(--acc);
  width: 18px;
  border-radius: 999px;
}

.card-caption {
  margin-top: 12px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 238, 227, 0.45);
}


/* ============================================================
   FLAGSHIP — Memdora · REDESIGN
   ============================================================ */

/* override old strike styles */
.flag-strike, .flag-bg-rings, .flag-tag, .flag-tag-dot { display: none !important; }

.flagship {
  position: relative;
  overflow: hidden;
}
.flagship .flagship-inner {
  position: relative;
  z-index: 2;
}

/* ---------- Decorative background ---------- */
.flag-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.flag-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
.flag-rings {
  position: absolute;
  top: -40px; right: -40px;
  width: 540px; height: 540px;
  opacity: 0.85;
  animation: ringSpin 80s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.flag-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  pointer-events: none;
}
.flag-bloom--a {
  width: 600px; height: 600px;
  right: 5%;
  top: 30%;
  background: radial-gradient(circle, var(--acc), transparent 65%);
}
.flag-bloom--b {
  width: 480px; height: 480px;
  left: -10%;
  bottom: 10%;
  background: radial-gradient(circle, #10B981, transparent 70%);
}

/* ---------- Platform pill ---------- */
.flag-platforms {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  margin-bottom: 56px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #5eead4;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow:
    0 0 24px rgba(16, 185, 129, 0.25),
    inset 0 0 24px rgba(16, 185, 129, 0.05);
}
.fp-dot {
  width: 8px; height: 8px;
  background: #34d399;
  border-radius: 50%;
  box-shadow: 0 0 12px #34d399, 0 0 0 0 #34d399;
  animation: fpPulse 1.8s infinite;
}
@keyframes fpPulse {
  0%, 100% { box-shadow: 0 0 12px #34d399, 0 0 0 0 rgba(52, 211, 153, 0.6); }
  50%      { box-shadow: 0 0 12px #34d399, 0 0 0 10px rgba(52, 211, 153, 0); }
}
.fp-lbl {
  color: rgba(94, 234, 212, 0.7);
  font-weight: 500;
}
.fp-list {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ECFDF5;
  font-weight: 600;
}
.fp-chip { letter-spacing: 0.14em; }
.fp-sep { color: rgba(94, 234, 212, 0.5); }

/* ---------- Layout grid ---------- */
.flag-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}
@media (max-width: 980px) {
  .flag-grid { grid-template-columns: 1fr; gap: 56px; }
  .flag-rings { display: none; }
}

.flag-left { display: flex; flex-direction: column; gap: 36px; }

/* ---------- HEADLINE ---------- */
.flag-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flag-line { display: block; }
.flag-line--1 { color: var(--paper); }
.flag-line--2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2em;
  color: var(--paper);
}
.flag-line--3 { color: var(--paper); font-style: italic; }

/* the 90% marker — clean inline chip */
.flag-mark {
  display: inline-block;
  position: relative;
  background: var(--acc);
  color: var(--ink);
  padding: 0.05em 0.22em 0.12em;
  border-radius: 6px;
  font-style: italic;
  font-weight: 500;
  line-height: 0.9;
  transform: rotate(-1.5deg);
  transform-origin: center;
  margin: 0 0.05em;
  box-shadow:
    0 0 0 1px rgba(230, 242, 58, 0.4),
    0 18px 40px rgba(230, 242, 58, 0.18);
  animation: markPop 0.9s cubic-bezier(.2,.8,.2,1) both 0.4s;
}
.flag-mark::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1.5px dashed rgba(230, 242, 58, 0.4);
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  animation: markRing 0.6s ease both 1.3s;
}
@keyframes markPop {
  0%   { transform: rotate(-1.5deg) scale(0.6); opacity: 0; }
  60%  { transform: rotate(-1.5deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(-1.5deg) scale(1); opacity: 1; }
}
@keyframes markRing {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.flag-mark-num { display: inline-block; }

/* ---------- Pitch ---------- */
.flag-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.55;
  color: rgba(242, 238, 227, 0.72);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ---------- CTA + pricing ---------- */
.flag-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.flag-pricing-inline {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: rgba(242, 238, 227, 0.55);
  margin-left: 6px;
}
.flag-pricing-inline em {
  font-style: normal;
  color: var(--acc);
  font-weight: 500;
  margin-right: 4px;
}

/* ---------- Stats strip ---------- */
.flag-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(242, 238, 227, 0.08);
  border-bottom: 1px solid rgba(242, 238, 227, 0.08);
}
@media (max-width: 640px) { .flag-stats { grid-template-columns: repeat(2, 1fr); } }
.flag-stat {
  padding: 18px 16px;
  border-right: 1px solid rgba(242, 238, 227, 0.06);
  display: flex; flex-direction: column;
  gap: 6px;
  transition: background .25s;
}
.flag-stat:hover { background: rgba(242,238,227,0.02); }
.flag-stat:last-child { border-right: 0; }
@media (max-width: 640px) {
  .flag-stat:nth-child(2) { border-right: 0; }
  .flag-stat:nth-child(1), .flag-stat:nth-child(2) { border-bottom: 1px solid rgba(242, 238, 227, 0.06); }
}
.fs-v {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.fs-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 238, 227, 0.4);
}

/* ---------- DEVICE (flashcard) — right side ---------- */
.flag-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.flag-device--card {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  aspect-ratio: auto;
}
.flag-device--card .device-glow {
  position: absolute;
  inset: -60px;
  background: radial-gradient(circle, rgba(230, 242, 58, 0.18), transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}
.card-stage {
  position: relative;
  z-index: 1;
  padding: 50px 12px 24px;
  perspective: 1400px;
}
.card-tab {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
  border: 1px solid rgba(20, 184, 166, 0.45);
  padding: 6px 16px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(20, 184, 166, 0.2);
}

.flashcard {
  position: relative;
  background: linear-gradient(180deg, #FCFAF3 0%, #F2EEE3 100%);
  border-radius: 22px;
  padding: 36px 32px 28px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 40px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 60px rgba(230, 242, 58, 0.08);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 380px;
  overflow: hidden;
}
.flashcard::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #F59E0B 0%, #FF7849 100%);
}
.flashcard::after {
  content: "";
  position: absolute;
  top: 16px; right: -30px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.08), transparent 70%);
  pointer-events: none;
}
.flashcard.flash-in {
  animation: fcIn .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes fcIn {
  from { opacity: 0; transform: translateY(20px) rotateX(8deg); }
  to   { opacity: 1; transform: none; }
}

.fc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.fc-cat {
  display: inline-block;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08));
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fc-ret {
  position: relative;
  width: 62px;
  text-align: center;
}
.fc-ret-ring { width: 62px; height: 62px; display: block; }
.fc-ret-num {
  position: absolute;
  top: 21px;
  left: 0; right: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fc-ret-lbl {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0;
}

.fc-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 4px;
  text-wrap: balance;
}
.fc-sub {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.fc-example {
  margin-top: 4px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(15,15,18,0.04), rgba(15,15,18,0.02));
  border: 1px dashed rgba(15,15,18,0.08);
  border-radius: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.fc-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed rgba(15,15,18,0.1);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fc-dot {
  width: 7px; height: 7px;
  background: #F59E0B;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* progress dots */
.card-tabs {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
}
.card-tab-dot {
  width: 7px; height: 7px;
  background: rgba(242, 238, 227, 0.2);
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: background .3s, width .3s;
}
.card-tab-dot.on {
  background: var(--acc);
  width: 22px;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(230, 242, 58, 0.5);
}

.card-caption {
  margin-top: 12px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 238, 227, 0.4);
}

/* ---------- HOW IT WORKS — five steps ---------- */
.flag-steps-wrap {
  position: relative;
  margin-top: 24px;
  padding: 56px 0 0;
  border-top: 1px solid rgba(242, 238, 227, 0.08);
}
.flag-steps-h {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 40px;
}
.fsh-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--acc);
  font-weight: 600;
}
.fsh-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--acc), transparent 80%);
}
.fsh-meta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(242, 238, 227, 0.55);
}
@media (max-width: 640px) {
  .flag-steps-h { grid-template-columns: 1fr; gap: 8px; }
  .fsh-rule { display: none; }
}

.flag-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
@media (max-width: 1080px) { .flag-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 540px) { .flag-steps-grid { grid-template-columns: 1fr; } }

.flag-step {
  display: flex;
  flex-direction: column;
  padding: 0 18px;
  position: relative;
}
.flag-step:first-child { padding-left: 0; }
.flag-step:last-child  { padding-right: 0; }

.fst-num {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
}
.fst-bubble {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  background: var(--step-bg, var(--acc));
  color: var(--step-fg, var(--ink));
  box-shadow: 0 0 0 4px var(--step-glow, rgba(230, 242, 58, 0.18)),
              0 0 30px var(--step-glow, rgba(230, 242, 58, 0.4));
  position: relative;
  z-index: 2;
  transition: transform .35s ease;
  flex-shrink: 0;
}
.flag-step:hover .fst-bubble {
  transform: scale(1.15);
}
.fst-link {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--step-bg, var(--acc)) 0%, rgba(242,238,227,0.1) 100%);
  margin-left: 4px;
  opacity: 0.55;
}
@media (max-width: 1080px) {
  .fst-link { display: none; }
}

.fst-body { display: flex; flex-direction: column; gap: 6px; }
.fst-t {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--paper);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.fst-d {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(242, 238, 227, 0.6);
  text-wrap: pretty;
}

/* tone palette */
.flag-step.tone-violet  { --step-bg: #7C3AED; --step-fg: #fff;   --step-glow: rgba(124, 58, 237, 0.3); }
.flag-step.tone-teal    { --step-bg: #14B8A6; --step-fg: #04201c; --step-glow: rgba(20, 184, 166, 0.3); }
.flag-step.tone-magenta { --step-bg: #DB2777; --step-fg: #fff;   --step-glow: rgba(219, 39, 119, 0.3); }
.flag-step.tone-green   { --step-bg: #10B981; --step-fg: #042118; --step-glow: rgba(16, 185, 129, 0.3); }
.flag-step.tone-amber   { --step-bg: #F59E0B; --step-fg: #1a1404; --step-glow: rgba(245, 158, 11, 0.3); }

/* footer note */
.flag-foot {
  margin-top: 40px;
  padding: 16px 18px;
  background: rgba(242, 238, 227, 0.03);
  border: 1px dashed rgba(242, 238, 227, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ff-pill {
  background: var(--acc);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 5px 11px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ff-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(242, 238, 227, 0.7);
  line-height: 1.4;
  flex: 1;
  min-width: 200px;
}


/* ============================================================
   FLASHCARD — dark theme override
   ============================================================ */
.flashcard {
  background: linear-gradient(180deg, #14141B 0%, #0C0C12 100%) !important;
  color: var(--paper) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 40px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.06),
    0 0 60px rgba(230, 242, 58, 0.08) !important;
}
.flashcard::after {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.06), transparent 70%) !important;
}

/* category pill */
.fc-cat {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08)) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}

/* retention ring text */
.fc-ret-num {
  color: var(--paper) !important;
}
.fc-ret-lbl {
  color: rgba(242, 238, 227, 0.5) !important;
}
.fc-ret-ring circle:first-of-type {
  stroke: rgba(242,238,227,0.1) !important;
}

/* title + sub */
.fc-title {
  color: var(--paper) !important;
}
.fc-sub {
  color: rgba(242, 238, 227, 0.55) !important;
}

/* example block */
.fc-example {
  background: linear-gradient(180deg, rgba(242,238,227,0.04), rgba(242,238,227,0.02)) !important;
  border: 1px dashed rgba(242,238,227,0.1) !important;
  color: rgba(242, 238, 227, 0.85) !important;
}

/* footer */
.fc-foot {
  border-top: 1px dashed rgba(242,238,227,0.1) !important;
  color: rgba(242, 238, 227, 0.4) !important;
}
.fc-dot {
  background: #fbbf24 !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6) !important;
}

/* top accent bar — keep warm */
.flashcard::before {
  background: linear-gradient(90deg, #F59E0B 0%, #FF7849 100%) !important;
  height: 4px !important;
}


/* ============================================================
   SPOTLIGHT card — neutralize hover noise (was making it look faded)
   ============================================================ */
.pcard-spot:hover {
  background: var(--paper) !important;
  box-shadow:
    0 30px 60px rgba(15,15,18,0.25),
    0 60px 120px rgba(15,15,18,0.18),
    20px 26px 0 var(--dom-bg) !important;
}
.pcard-spot .pcard-tool {
  color: var(--ink-soft) !important;
  border-color: var(--rule-2) !important;
  background: transparent !important;
}
.pcard-spot:hover .pcard-tool {
  color: var(--ink-soft) !important;
  border-color: var(--rule-2) !important;
}
.pcard-spot .pcard-name,
.pcard-spot:hover .pcard-name { color: var(--ink) !important; }
.pcard-spot .pcard-blurb,
.pcard-spot:hover .pcard-blurb { color: var(--ink) !important; }
.pcard-spot .pcard-bignum,
.pcard-spot:hover .pcard-bignum {
  opacity: 0.12 !important;
  transform: none !important;
}
.pcard-spot .pcard-glare { display: none !important; }


/* ============================================================
   HERO — REDESIGN
   ============================================================ */

/* dotted grid background */
.hero-bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  mask-image: radial-gradient(ellipse at 30% 35%, transparent 5%, black 60%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 35%, transparent 5%, black 60%);
}
.hero-bg-grid svg { width: 100%; height: 100%; display: block; }
.hero { position: relative; }

/* push content above grid */
.hero-grid, .philosophy, .ticker, .hero-eyebrow--v2 {
  position: relative;
  z-index: 2;
}

/* --- EYEBROW v2 --- */
.hero-eyebrow--v2 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 56px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 0;
  padding: 0;
}
.eb-issue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eb-issue-num {
  background: var(--ink);
  color: var(--acc);
  padding: 4px 9px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.eb-issue-lbl {
  color: var(--ink);
  font-weight: 600;
}
.eb-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--ink-soft) 0%, transparent 100%);
  opacity: 0.5;
}
.eb-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.eb-pip {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 #10B981;
  animation: ebPip 1.8s infinite;
}
@keyframes ebPip {
  0%,100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50%     { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
}
.eb-sep { opacity: 0.4; }

/* --- HEADLINE v2 --- */
.hero-h1--v2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(54px, 8.2vw, 124px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 48px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.h-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15em;
}
.h-line--2 { margin: 4px 0; }
.h-line--3 { font-style: italic; }
.h-name {
  position: relative;
  display: inline-block;
  font-style: italic;
}
.h-underline {
  position: absolute;
  left: -2%; right: -2%;
  bottom: -0.12em;
  width: 104%;
  height: 0.22em;
  color: var(--hot, #FF4A1C);
  overflow: visible;
}
.h-period {
  color: var(--acc-deep, var(--ink));
  font-style: normal;
}

/* word reveal: clip + slide + slight blur */
.rword {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  padding: 0 0.02em;
  line-height: inherit;
  /* The inline animation-delay (set in JSX) drives the stagger directly here —
     no inherit chain, so the words always resolve to opacity:1. */
  animation: rwordIn 0.9s cubic-bezier(.2,.8,.2,1) both;
}
.rword-inner {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
}
@keyframes rwordIn {
  0%   { transform: translateY(40%); opacity: 0; filter: blur(5px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

/* WordRotator */
.wrot {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  padding: 0 0.18em 0.06em;
  margin: 0 0.04em;
  cursor: pointer;
  width: var(--wrot-w, auto);
  transition: width 0.5s cubic-bezier(.2,.8,.2,1);
  height: 1em;
  line-height: 1;
  vertical-align: -0.04em;
}
.wrot-mark {
  position: absolute;
  inset: -0.04em -0.04em -0.06em;
  background: linear-gradient(180deg, var(--acc) 0%, var(--acc-deep, #C9D617) 100%);
  border-radius: 8px;
  z-index: 0;
  transform: rotate(-1deg);
  box-shadow:
    0 0 0 1px rgba(230, 242, 58, 0.5),
    0 14px 32px rgba(230, 242, 58, 0.25);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.wrot:hover .wrot-mark { transform: rotate(-2deg) scale(1.03); }

.wrot-stack {
  position: relative;
  z-index: 1;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: baseline;
}
.wrot-word {
  display: block;
  white-space: nowrap;
  color: var(--ink);
  font-style: italic;
  font-weight: 500;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s;
  padding: 0 0.01em;
}
.wrot-word.on { transform: translateY(0); opacity: 1; }
.wrot-word.prev { transform: translateY(-110%); opacity: 0; position: absolute; inset: 0; }
.wrot-word.next { transform: translateY(110%); opacity: 0; position: absolute; inset: 0; }

.wrot-cursor {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 3px;
  height: 0.78em;
  background: var(--ink);
  margin-left: 0.04em;
  vertical-align: -0.05em;
  animation: cBlink 1s steps(2) infinite;
}
@keyframes cBlink { 50% { opacity: 0; } }

/* --- SUB --- */
.hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: 40px;
  text-wrap: pretty;
}
.hero-sub em {
  font-style: italic;
  color: var(--ink);
}
.hero-link {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--ink);
  font-weight: 500;
  background: linear-gradient(180deg, transparent 70%, var(--acc) 70%);
  padding: 0 0.12em;
  margin: 0 0.04em;
  transition: transform .25s;
}
.hero-link:hover {
  transform: translateY(-2px) rotate(-1deg);
  background: linear-gradient(180deg, transparent 60%, var(--acc) 60%);
}
.hero-link .hl-mark {
  position: absolute;
  bottom: -0.25em;
  left: -2%; right: -2%;
  width: 104%;
  height: 0.4em;
  color: var(--hot, #FF4A1C);
  opacity: 0;
  transition: opacity .3s;
}
.hero-link:hover .hl-mark { opacity: 1; }

/* --- META v2 --- */
.hero-meta--v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 40px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 720px) { .hero-meta--v2 { grid-template-columns: 1fr 1fr; } }
.hkv {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 6px;
  align-items: center;
  padding: 14px 16px;
  border-right: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background .25s;
}
.hkv:last-child { border-right: 0; }
@media (max-width: 720px) {
  .hkv:nth-child(2) { border-right: 0; }
  .hkv:nth-child(1), .hkv:nth-child(2) { border-bottom: 1px dashed var(--rule); }
}
.hkv--link:hover { background: var(--paper-2); cursor: pointer; }
.hkv--link:hover .hkv-v { color: var(--hot, #FF4A1C); }
.hkv-k { color: var(--ink-soft); opacity: 0.6; }
.hkv-arrow {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  transition: transform .25s;
}
.hkv--link:hover .hkv-arrow { transform: translateX(3px); color: var(--hot, #FF4A1C); }
.hkv-v {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: -0.005em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .25s;
}
.hkv-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: ebPip 1.8s infinite;
}

/* --- CTA buttons --- */
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Make sure old animations don't override */
.hero-h1--v2 .split,
.hero-h1--v2 .split-word,
.hero-h1--v2 .split-char { animation: none !important; }


/* ============================================================
   COURSEWORK — CLOUD redesign
   ============================================================ */
.cw--cloud .cw-schools { display: none; }
.cw--cloud .cw-head {
  margin-bottom: 28px;
}
.cw--cloud .study-h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.cw-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}
.cw-filter-n {
  display: inline-block;
  background: rgba(15,15,18,0.1);
  color: inherit;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  margin-left: 6px;
  font-weight: 700;
  opacity: 0.6;
}
.cw-filter.on .cw-filter-n {
  background: rgba(255,255,255,0.25);
  color: inherit;
  opacity: 0.9;
}

.cw-cloud-wrap {
  position: relative;
  padding: 32px 0 20px;
}
.cw-cloud-wrap::before,
.cw-cloud-wrap::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
}
.cw-cloud-wrap::before {
  width: 380px; height: 380px;
  top: -40px; left: 10%;
  background: radial-gradient(circle, var(--acc), transparent 65%);
}
.cw-cloud-wrap::after {
  width: 320px; height: 320px;
  bottom: -40px; right: 8%;
  background: radial-gradient(circle, #7C3AED, transparent 70%);
  opacity: 0.18;
}

.cw-cloud {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 7px;
  justify-content: center;
  align-items: baseline;
  padding: 8px 0;
  z-index: 1;
}

.cwc-chip {
  --th-bg: var(--ink);
  --th-fg: #fff;
  --rot: 0deg;
  --scale: 1;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  overflow: hidden;
  cursor: default;
  transform: rotate(var(--rot)) scale(var(--scale));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .4s, filter .4s, box-shadow .25s, border-color .25s;
  position: relative;
  white-space: nowrap;
}
.cwc-chip:hover {
  transform: rotate(0deg) scale(1.06) translateY(-3px);
  z-index: 4;
  border-color: var(--th-bg);
  box-shadow: 0 8px 22px rgba(15,15,18,0.18), 4px 5px 0 var(--th-bg);
}
.cwc-chip.dim {
  opacity: 0.22;
  filter: saturate(0.4);
}
.cwc-chip.lit {
  opacity: 1;
}

.cwc-school {
  background: var(--th-bg);
  color: var(--th-fg);
  padding: 4px 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: 9.5px;
  display: inline-flex;
  align-items: center;
}
.cwc-name {
  padding: 4px 12px 4px 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 500;
}

/* decorative dual caption beneath cloud */
.cw-cloud-caption {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.cwc-cap {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px dashed var(--rule-2);
  border-radius: 999px;
  background: var(--paper);
}
.cwc-cap-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.cwc-cap--ut .cwc-cap-dot  { background: var(--acc); }
.cwc-cap--ntu .cwc-cap-dot { background: var(--hot); }

/* ============================================================
   HERO SUB v2 — multi-line manifesto
   ============================================================ */
.hero-sub--v2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: 40px;
  text-wrap: pretty;
}

.hsub-line {
  display: block;
}

.hsub-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: linear-gradient(180deg, transparent 60%, var(--acc) 60%);
  padding: 0 6px;
  display: inline-block;
}

.hsub-line--lede {
  margin-bottom: 6px;
}

.hsub-line:not(.hsub-line--lede):not(.hsub-line--main) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: baseline;
  font-style: normal;
  font-size: clamp(16px, 1.5vw, 20px);
  margin-bottom: 6px;
}
.hsub-line em {
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}
.hsub-sep {
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--acc-deep, var(--ink-soft));
  font-weight: 700;
  font-style: normal;
}

.hsub-line--main {
  font-style: italic;
  color: var(--ink-soft);
}
.hsub-line--main em {
  color: var(--ink);
}

.hsub-paren {
  display: inline;
  color: var(--ink);
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.85em;
  letter-spacing: -0.005em;
  background: linear-gradient(180deg, transparent 75%, rgba(230, 242, 58, 0.4) 75%);
  padding: 0 4px;
  margin: 0 2px;
}
.hsub-paren-l, .hsub-paren-r {
  color: var(--hot, #FF4A1C);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.2em;
}

/* drawn scribble underline variant */
.hero-link--scribble {
  position: relative;
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  color: var(--ink);
  background: none;
  padding: 0;
  margin: 0 2px;
}
.hero-link--scribble .hl-scribble {
  position: absolute;
  left: -4%; right: -4%;
  bottom: -0.32em;
  width: 108%;
  height: 0.4em;
  color: var(--hot, #FF4A1C);
  opacity: 0.85;
}
.hero-link--scribble:hover { color: var(--hot, #FF4A1C); }


/* ============================================================
   HERO SUB v3 — simple, elegant
   ============================================================ */
.hero-sub--v3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.95vw, 28px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 40px;
  text-wrap: pretty;
}
.hero-sub--v3 em {
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}
.hero-mark {
  display: inline-block;
  font-style: normal;
  font-weight: 600;
  font-family: var(--sans);
  font-size: 0.85em;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--acc);
  padding: 0.05em 0.32em 0.12em;
  border-radius: 6px;
  margin: 0 0.06em;
  transform: rotate(-1deg);
  box-shadow:
    0 0 0 1px rgba(230, 242, 58, 0.4),
    0 8px 18px rgba(230, 242, 58, 0.2);
  transition: transform .3s;
}
.hero-mark:hover { transform: rotate(-2deg) scale(1.04); }


/* ============================================================
   HERO SUB v4 — editorial pull-quote
   ============================================================ */
.hero-sub--v4 {
  position: relative;
  max-width: 62ch;
  margin: 0 0 44px;
  padding-left: 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hsv-quote-mark {
  position: absolute;
  left: 0;
  top: -28px;
  font-family: var(--serif);
  font-size: 132px;
  line-height: 1;
  color: var(--acc);
  font-style: italic;
  opacity: 0.85;
  user-select: none;
  pointer-events: none;
  text-shadow: 4px 4px 0 var(--ink);
}
.hsv-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  font-weight: 400;
  letter-spacing: -0.018em;
}
.hsv-pause {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.65em;
  color: var(--ink-soft);
  opacity: 0.6;
  vertical-align: 0.18em;
  margin: 0 0.04em;
}

.hsv-pull {
  position: relative;
  display: inline-block;
  color: var(--hot, #FF4A1C);
  font-weight: 500;
  white-space: normal;
}
.hsv-pull-line {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.22em;
  width: 104%;
  height: 0.32em;
  color: var(--hot, #FF4A1C);
  opacity: 0.9;
}
.hero-sub--v4.is-in .hsv-pull-line path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: hsvDraw 1.1s 1.3s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes hsvDraw { to { stroke-dashoffset: 0; } }

.hsv-line {
  font-family: var(--serif);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  font-style: italic;
  text-wrap: pretty;
  padding-top: 16px;
  border-top: 1px dashed var(--rule-2);
}

.hsv-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 12px 5px;
  border-radius: 999px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: -0.005em;
  margin: 0 0.06em;
  text-decoration: none;
  vertical-align: 0.04em;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s;
  box-shadow: 0 6px 18px rgba(15,15,18,0.22), 0 0 0 1px rgba(15,15,18,0.4);
}
.hsv-brand:hover {
  background: var(--acc);
  color: var(--ink);
  transform: translateY(-2px) rotate(-1deg);
}
.hsv-brand-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 0 0 0 var(--acc);
  animation: hsvDot 1.6s infinite;
  flex-shrink: 0;
}
.hsv-brand:hover .hsv-brand-dot {
  background: var(--ink);
  box-shadow: 0 0 0 0 var(--ink);
}
@keyframes hsvDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 242, 58, 0.65); }
  50%      { box-shadow: 0 0 0 7px rgba(230, 242, 58, 0); }
}
.hsv-brand-arrow {
  font-family: var(--mono);
  font-size: 0.85em;
  transition: transform .25s;
}
.hsv-brand:hover .hsv-brand-arrow {
  transform: translateX(3px);
}


/* ============================================================
   COURSEWORK — unified skills cloud (UT · NTU · CFA · ASA)
   ============================================================ */

/* re-style the badge stamp with per-source colors */
.cwc-school {
  background: var(--src-bg, var(--th-bg)) !important;
  color: var(--src-fg, var(--th-fg)) !important;
  letter-spacing: 0.16em !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

/* chip border picks up source-color tint on hover */
.cwc-chip:hover {
  border-color: var(--src-bg, var(--th-bg)) !important;
  box-shadow: 0 8px 22px rgba(15,15,18,0.18), 4px 5px 0 var(--src-bg, var(--th-bg)) !important;
}

/* category swatch line under each chip */
.cwc-chip::after {
  content: "";
  position: absolute;
  left: 36px; right: 12px;
  bottom: 1.5px;
  height: 2px;
  background: var(--th-bg);
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.cwc-chip:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* updated caption row — now 4 credentials */
.cw-cloud-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.cwc-cap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px dashed var(--cap-c, var(--rule-2));
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: transform .25s, background .25s;
}
.cwc-cap:hover {
  transform: translateY(-2px);
  background: var(--paper-2);
}
.cwc-cap b {
  display: inline-block;
  background: var(--cap-c);
  color: #fff;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  font-weight: 800;
}
.cwc-cap-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cap-c);
  box-shadow: 0 0 8px var(--cap-c);
}


/* ============================================================
   HERO HEADLINE — descender safety & tighter highlight
   ============================================================ */
.hero-h1--v2 {
  line-height: 1.08 !important;
  font-feature-settings: "ss01", "ss02";
}
.hero-h1--v2 .h-line {
  padding-bottom: 0.04em;
}
.hero-h1--v2 .h-line--2 { margin: 8px 0 12px !important; }

/* tighter, less overflowing highlight on the rotator */
.wrot-mark {
  inset: 0.04em -0.02em 0.02em !important;
  border-radius: 6px !important;
  transform: rotate(-1deg) !important;
}
.wrot {
  padding: 0 0.16em 0.04em !important;
}
.wrot-stack {
  height: 1.04em !important;
}
.wrot-word {
  line-height: 1.04 !important;
}
/* keep blinking cursor contained inside the rotator row only */
.wrot-cursor {
  display: none !important;
}

/* Newsreader has shorter descenders than Fraunces — adjust h-name underline so
   it doesn't overlap the period */
.h-underline {
  bottom: -0.04em !important;
  height: 0.18em !important;
}


/* ============================================================
   SKILLS CLOUD — second big cloud below coursework
   ============================================================ */
.sk {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 2px solid var(--ink);
  position: relative;
}
.sk::before {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 80px; height: 6px;
  background: linear-gradient(90deg, #0EA5E9, #7C3AED, #FF4A1C);
}

.sk-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 18px;
  margin-bottom: 28px;
}
.sk-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
  margin-left: 14px;
}
.sk-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: 100%;
}

.sk-cloud-wrap {
  position: relative;
  padding: 32px 0 20px;
}
.sk-cloud-wrap::before,
.sk-cloud-wrap::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.3;
}
.sk-cloud-wrap::before {
  width: 360px; height: 360px;
  top: -20px; right: 12%;
  background: radial-gradient(circle, #0EA5E9, transparent 65%);
}
.sk-cloud-wrap::after {
  width: 380px; height: 380px;
  bottom: -20px; left: 10%;
  background: radial-gradient(circle, #FF4A1C, transparent 70%);
  opacity: 0.18;
}

.sk-cloud {
  position: relative;
  display: flex; flex-wrap: wrap;
  gap: 7px 6px;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
  z-index: 1;
}

.skc-chip {
  --th-bg: var(--ink);
  --th-fg: #fff;
  --rot: 0deg;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--th-bg);
  color: var(--ink);
  overflow: hidden;
  cursor: default;
  transform: rotate(var(--rot));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .4s, filter .4s, box-shadow .25s, border-color .25s, background .25s;
  position: relative;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--sans);
  font-weight: 500;
}
.skc-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--th-bg);
  opacity: 0;
  transition: opacity .25s;
  border-radius: 999px;
}
.skc-chip:hover {
  transform: rotate(0deg) scale(1.08) translateY(-3px);
  z-index: 4;
  box-shadow: 0 10px 22px rgba(15,15,18,0.18), 4px 5px 0 var(--th-bg);
}
.skc-chip:hover::before { opacity: 0.06; }
.skc-chip.dim {
  opacity: 0.18;
  filter: saturate(0.3);
}
.skc-chip.lit { opacity: 1; }

.skc-name {
  padding: 0 6px 0 12px;
  position: relative;
  z-index: 1;
}
.skc-y {
  background: var(--th-bg);
  color: var(--th-fg);
  padding: 0 8px;
  margin-left: 4px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
  display: inline-flex; align-items: center;
}

/* Size variants */
.skc-xs { font-size: 11px;   border-width: 1px; }
.skc-xs .skc-name { padding: 4px 5px 4px 9px; font-size: 11px; }
.skc-xs .skc-y    { padding: 4px 6px; font-size: 9px; }

.skc-sm { font-size: 12.5px; }
.skc-sm .skc-name { padding: 5px 6px 5px 10px; font-size: 12.5px; }
.skc-sm .skc-y    { padding: 5px 7px; font-size: 10px; }

.skc-md { font-size: 14px; }
.skc-md .skc-name { padding: 6px 7px 6px 12px; font-size: 14px; }
.skc-md .skc-y    { padding: 6px 8px; font-size: 10.5px; }

.skc-lg { font-size: 16px; }
.skc-lg .skc-name { padding: 7px 8px 7px 14px; font-size: 16px; }
.skc-lg .skc-y    { padding: 7px 10px; font-size: 11px; }

.skc-xl { font-size: 18px; font-weight: 600; }
.skc-xl .skc-name { padding: 9px 9px 9px 16px; font-size: 18px; }
.skc-xl .skc-y    { padding: 9px 11px; font-size: 12px; }

.sk-foot {
  margin-top: 28px;
  padding: 12px 16px;
  background: var(--paper-2);
  border: 1px dashed var(--rule-2);
  border-radius: 8px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
}
.sk-foot-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0EA5E9, #7C3AED);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.sk-foot b { color: var(--ink); font-style: normal; font-family: var(--sans); }
.sk-foot em { color: var(--ink); }


/* ============================================================
   SKILLS CLOUD — beautification pass
   ============================================================ */

/* multi-color animated accent bar */
.sk::before {
  height: 4px !important;
  width: 100% !important;
  left: 0;
  background: linear-gradient(90deg,
    #0EA5E9 0%, #14B8A6 14%, #7C3AED 28%, #DB2777 42%,
    #FF4A1C 56%, #F59E0B 70%, #E6F23A 84%, #0F7E5F 100%) !important;
  background-size: 200% 100%;
  animation: skBar 18s linear infinite;
  opacity: 0.7;
}
@keyframes skBar { to { background-position: -200% 0; } }

/* enriched bloom layer + extra accents */
.sk-cloud-wrap {
  padding: 48px 0 32px !important;
}
.sk-cloud-wrap::before {
  width: 520px !important; height: 520px !important;
  background: radial-gradient(circle, #0EA5E9, transparent 65%) !important;
  opacity: 0.22 !important;
}
.sk-cloud-wrap::after {
  width: 460px !important; height: 460px !important;
  background: radial-gradient(circle, #FF4A1C 0%, #7C3AED 50%, transparent 75%) !important;
  opacity: 0.16 !important;
}

/* third decorative bloom (soft yellow/green) */
.sk-cloud-wrap {
  position: relative;
}
.sk-cloud-wrap > .sk-cloud {
  position: relative;
  z-index: 2;
}
.sk-cloud::before {
  content: "";
  position: absolute;
  top: 40%; left: 40%;
  transform: translate(-50%, -50%);
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(230, 242, 58, 0.5), transparent 60%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

/* SVG constellation grid behind chips (faint dot pattern) */
.sk-cloud-wrap > .sk-constellation {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(14, 165, 233, 0.18) 1.5px, transparent 2px),
    radial-gradient(circle at 75% 70%, rgba(124, 58, 237, 0.18) 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.18) 1.5px, transparent 2px);
  background-size: 80px 80px, 110px 110px, 140px 140px;
  background-position: 0 0, 40px 20px, 20px 60px;
}

/* CHIPS — deeper, more dramatic */
.skc-chip {
  background: linear-gradient(180deg, #FBF9F0 0%, #F2EEE3 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 1px 2px rgba(15,15,18,0.04),
    0 2px 6px rgba(15,15,18,0.06) !important;
  backdrop-filter: blur(6px);
}
.skc-chip:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F4E8 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 12px 28px rgba(15,15,18,0.22),
    4px 6px 0 var(--th-bg) !important;
  z-index: 5 !important;
}

/* years pill — gradient with subtle gloss */
.skc-y {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--th-bg) 92%, white 8%) 0%,
    color-mix(in oklab, var(--th-bg) 88%, black 12%) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  position: relative;
  overflow: hidden;
}
.skc-y::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-25deg);
  transition: left .6s cubic-bezier(.2,.8,.2,1);
}
.skc-chip:hover .skc-y::after {
  left: 200%;
}

/* XL chips — pop them */
.skc-xl {
  background: linear-gradient(180deg,
    var(--th-bg) 0%,
    color-mix(in oklab, var(--th-bg) 70%, black 30%) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 4px 16px color-mix(in oklab, var(--th-bg) 60%, transparent),
    0 8px 30px rgba(15,15,18,0.22) !important;
}
.skc-xl .skc-name { color: #fff !important; font-weight: 700 !important; letter-spacing: -0.005em; }
.skc-xl .skc-y {
  background: rgba(0,0,0,0.28) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.skc-xl:hover {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--th-bg) 95%, white 5%) 0%,
    var(--th-bg) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 12px 36px color-mix(in oklab, var(--th-bg) 80%, transparent),
    0 0 60px color-mix(in oklab, var(--th-bg) 50%, transparent) !important;
}

/* LG chips — outlined with a colored tint background */
.skc-lg {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--th-bg) 8%, white 92%) 0%,
    color-mix(in oklab, var(--th-bg) 4%, var(--paper) 96%) 100%) !important;
  border-color: color-mix(in oklab, var(--th-bg) 70%, transparent) !important;
}
.skc-lg .skc-name { font-weight: 600 !important; }

/* SM / XS — sit quietly in the background */
.skc-xs, .skc-sm {
  border-color: color-mix(in oklab, var(--th-bg) 35%, transparent) !important;
}
.skc-xs .skc-y, .skc-sm .skc-y {
  background: color-mix(in oklab, var(--th-bg) 80%, white 20%) !important;
}

/* Sparkle dot that appears in top-right of XL chips */
.skc-xl::after {
  content: "";
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  background: var(--th-bg);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--paper), 0 0 12px var(--th-bg);
  animation: skSparkle 2.4s ease-in-out infinite;
  z-index: 3;
}
@keyframes skSparkle {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

/* slight stagger reveal */
.skc-chip {
  opacity: 0;
  transform: translateY(8px) rotate(var(--rot));
  animation: skIn 0.55s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--delay, 0ms));
}
.sk[data-reveal].is-in .skc-chip {
  --delay: inherit;
}
@keyframes skIn {
  to { opacity: 1; transform: rotate(var(--rot)); }
}
.skc-chip.dim {
  opacity: 0.16 !important;
  transform: rotate(var(--rot)) scale(0.92);
  filter: saturate(0.2);
}

/* Pretty filter pills - bigger active state with color */
.sk .cw-filter {
  font-weight: 600 !important;
  padding: 7px 14px !important;
  font-size: 11px !important;
}
.sk .cw-filter.on {
  background: linear-gradient(180deg,
    var(--th-bg, var(--ink)) 0%,
    color-mix(in oklab, var(--th-bg, var(--ink)) 80%, black 20%) 100%) !important;
  color: var(--th-fg, var(--paper)) !important;
  box-shadow: 0 4px 14px color-mix(in oklab, var(--th-bg, var(--ink)) 50%, transparent);
  transform: scale(1.05);
}

/* sk-foot improved */
.sk-foot {
  background: linear-gradient(180deg,
    rgba(14, 165, 233, 0.04) 0%,
    rgba(124, 58, 237, 0.04) 100%) !important;
  border: 1px dashed color-mix(in oklab, #7C3AED 30%, transparent) !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
}
.sk-foot-dot {
  width: 10px !important; height: 10px !important;
  background: conic-gradient(from 0deg, #0EA5E9, #7C3AED, #FF4A1C, #E6F23A, #0F7E5F, #0EA5E9) !important;
  animation: skDot 6s linear infinite;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18), 0 0 12px rgba(124, 58, 237, 0.4) !important;
}
@keyframes skDot { to { transform: rotate(360deg); } }


/* ============================================================
   SKILLS CLOUD — restraint pass
   The chips were screaming. Hierarchy via size + space only.
   Color is for category, not for shouting.
   ============================================================ */

/* All chips: ONE visual language — paper background, thin border,
   tiny years pill. Differences are SIZE and WEIGHT only. */
.skc-chip {
  background: var(--paper) !important;
  border: 1px solid var(--rule-2) !important;
  box-shadow: none !important;
  backdrop-filter: none;
}
.skc-chip:hover {
  background: var(--paper) !important;
  border-color: var(--th-bg) !important;
  box-shadow: 0 2px 8px rgba(15, 15, 18, 0.06), 2px 3px 0 var(--th-bg) !important;
  transform: translateY(-2px) rotate(0deg) scale(1.01) !important;
}

/* years pill — subtle tinted, no gradient, no shimmer */
.skc-y {
  background: color-mix(in oklab, var(--th-bg) 12%, var(--paper) 88%) !important;
  color: color-mix(in oklab, var(--th-bg) 75%, black 25%) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.skc-y::after { display: none !important; }

/* XL — just bigger and bolder. NO solid color background, NO sparkle. */
.skc-xl {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--th-bg) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.skc-xl .skc-name { color: var(--ink) !important; font-weight: 600 !important; }
.skc-xl .skc-y {
  background: color-mix(in oklab, var(--th-bg) 14%, var(--paper) 86%) !important;
  color: color-mix(in oklab, var(--th-bg) 78%, black 22%) !important;
  box-shadow: none !important;
}
.skc-xl:hover {
  border-color: var(--th-bg) !important;
  box-shadow: 0 2px 8px rgba(15,15,18,0.08), 2px 3px 0 var(--th-bg) !important;
}
.skc-xl::after { display: none !important; }

/* LG — same paper, slightly stronger border accent */
.skc-lg {
  background: var(--paper) !important;
  border: 1px solid color-mix(in oklab, var(--th-bg) 55%, transparent) !important;
}

/* SM / XS — very subtle */
.skc-xs, .skc-sm {
  border-color: color-mix(in oklab, var(--th-bg) 30%, transparent) !important;
}

/* Quiet the rainbow accent bar */
.sk::before {
  height: 2px !important;
  opacity: 0.4 !important;
  animation: none !important;
  background: linear-gradient(90deg, #0EA5E9, #7C3AED, #FF4A1C, #0F7E5F) !important;
}

/* Tone down the blooms — they were overpowering */
.sk-cloud-wrap::before {
  width: 360px !important; height: 360px !important;
  opacity: 0.1 !important;
}
.sk-cloud-wrap::after {
  width: 320px !important; height: 320px !important;
  opacity: 0.08 !important;
}
.sk-cloud::before { display: none !important; }

/* Remove the constellation dot grid — was adding noise */
.sk-constellation { display: none !important; }

/* Less dramatic dim state */
.skc-chip.dim {
  opacity: 0.28 !important;
  filter: none !important;
  transform: rotate(var(--rot)) !important;
}

/* Filter pills: cleaner active state */
.sk .cw-filter.on {
  background: var(--ink) !important;
  color: var(--acc) !important;
  box-shadow: none !important;
  transform: none !important;
}
.sk .cw-filter.on .cw-filter-n {
  background: rgba(255,255,255,0.15) !important;
  color: var(--acc) !important;
}

/* Footer dot: simpler */
.sk-foot-dot {
  background: var(--ink) !important;
  animation: none !important;
  box-shadow: 0 0 0 3px var(--paper-2) !important;
}
.sk-foot {
  background: var(--paper-2) !important;
  border: 1px dashed var(--rule-2) !important;
}


/* ============================================================
   MOBILE — comprehensive responsive pass
   Breakpoints: 920 (tablet) · 720 (phone) · 480 (small phone)
   ============================================================ */

@media (max-width: 920px) {
  :root {
    --pad: clamp(16px, 5vw, 28px);
  }
  /* Reduce vertical breathing on sections */
  section.sect { padding: 64px var(--pad); }

  /* Hide cursor everywhere on touch / small */
  .cur-dot, .cur-ring, .cur-trail, .cur-label { display: none !important; }
  body { cursor: auto !important; }
  button, a { cursor: pointer !important; }

  /* Topbar — collapse to brand + status */
  .topbar { padding: 12px var(--pad); }
  .topnav { display: none !important; }
  .topright .status { font-size: 9.5px; padding: 5px 8px; }
  .topright .status span:nth-child(3) { display: none; } /* drop the second text */

  /* HERO */
  .hero { padding: 64px var(--pad) 36px; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 36px; }
  .hero-card, .v3-card, .v4-card { display: none !important; }
  .hero-eyebrow--v2 {
    grid-template-columns: auto auto !important;
    gap: 12px !important;
    margin-bottom: 32px;
  }
  .eb-rule { display: none; }
  .hero-h1--v2 {
    font-size: clamp(40px, 12vw, 64px) !important;
    line-height: 1.05 !important;
    margin-bottom: 28px !important;
  }
  .hero-sub--v3, .hero-sub--v4 {
    font-size: 17px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
  }
  .hero-meta--v2 { grid-template-columns: 1fr 1fr !important; }
  .hkv { padding: 11px 12px; font-size: 10px; }
  .hkv-v { font-size: 12px; }
  .hero-cta .btn { font-size: 11px; padding: 10px 14px; }

  /* Philosophy strip — 2 cols on tablet, 1 col on phone */
  .phi-grid { grid-template-columns: 1fr 1fr !important; }

  /* Memdora flagship */
  .flag-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .flag-right { min-height: auto !important; }
  .flag-platforms {
    padding: 8px 12px !important;
    font-size: 9.5px !important;
    gap: 8px !important;
    flex-wrap: wrap;
    margin-bottom: 28px !important;
  }
  .fp-list { gap: 4px; flex-wrap: wrap; }
  .flag-h {
    font-size: clamp(34px, 10vw, 56px) !important;
    line-height: 1.02 !important;
  }
  .flag-stats { grid-template-columns: 1fr 1fr !important; }
  .flag-stat { padding: 12px 10px; }
  .fs-v { font-size: 24px !important; }
  .flag-cta {
    flex-direction: column; align-items: stretch;
    gap: 10px;
  }
  .flag-cta .btn { width: 100%; justify-content: center; }
  .flag-pricing-inline { margin-left: 0; text-align: center; }
  .flag-steps-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .flag-rings { display: none !important; }
  .flag-curve { opacity: 0.3 !important; }
  .flag-bigword { font-size: 80px !important; }

  /* Flashcard device */
  .flag-device--card { max-width: 100% !important; }
  .card-stage { padding: 44px 4px 18px !important; }
  .flashcard { min-height: 320px !important; padding: 24px 22px 22px !important; }
  .fc-title { font-size: 20px !important; }
  .fc-example { padding: 12px 14px !important; font-size: 14px !important; }
  .fc-ret-ring { width: 48px !important; height: 48px !important; }
  .fc-ret-num { top: 16px !important; font-size: 13px !important; }

  /* Projects marquee */
  .projects-sect .sect-head { grid-template-columns: 1fr !important; gap: 8px; }
  .pcard { width: 280px !important; padding: 18px 18px 14px 22px !important; }
  .pcard-name { font-size: 22px !important; }
  .pcard-bignum { font-size: 140px !important; }
  .pmar-mask { width: 32px !important; }
  .pmar-l { animation-duration: 60s !important; }
  .pmar-r { animation-duration: 75s !important; }
  /* Disable spotlight on touch (no hover) */
  .has-spot .pcard:not(.pcard-spot) { opacity: 1 !important; }
  .pcard-spot, .pmar-scrim { display: none !important; }

  /* Study */
  .study-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .research-card { padding-left: 60px !important; }
  .creds-row { grid-template-columns: 70px 1fr auto; padding: 9px 12px; gap: 10px; }
  .creds-v { font-size: 14px; }
  .creds-k { font-size: 11px; padding: 2px 6px; }

  /* Coursework cloud */
  .cw-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cw-filters { gap: 5px; }
  .cw-filter { font-size: 9.5px; padding: 5px 9px; letter-spacing: 0.1em; }
  .cwc-chip { font-size: 11px; transform: rotate(0deg) scale(1) !important; }
  .cwc-school { font-size: 8.5px !important; padding: 3px 6px !important; letter-spacing: 0.12em !important; }
  .cwc-name { font-size: 11px; padding: 3px 9px 3px 8px; }
  .cw-cloud { gap: 5px 4px; }

  /* Skills cloud */
  .sk-head { flex-direction: column; align-items: flex-start; }
  .sk-cloud { gap: 5px 4px; }
  .skc-chip { transform: rotate(0deg) !important; }
  .skc-xl { font-size: 15px !important; }
  .skc-xl .skc-name { font-size: 15px !important; padding: 7px 7px 7px 12px !important; }
  .skc-xl .skc-y { font-size: 11px !important; padding: 7px 9px !important; }
  .skc-lg { font-size: 14px !important; }
  .skc-lg .skc-name { font-size: 14px !important; padding: 6px 6px 6px 11px !important; }
  .skc-md { font-size: 12.5px !important; }
  .skc-md .skc-name { font-size: 12.5px !important; padding: 5px 6px 5px 10px !important; }
  .sk-cloud-wrap::before, .sk-cloud-wrap::after { display: none !important; }

  /* Ideas */
  .ideas { grid-template-columns: 1fr !important; gap: 14px !important; }
  .idea { transform: none !important; }
  .idea:hover { transform: translateY(-2px) !important; }
  .i-t { font-size: 17px !important; }

  /* Field Notes */
  .fn-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 18px 4px !important; }
  .fn-row:hover { padding-left: 4px !important; }
  .fn-arr { display: none !important; }
  .fn-meta { font-size: 10px; }

  /* About */
  .about-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .about-prose { font-size: 17px !important; }
  .about-card dl { grid-template-columns: 80px 1fr; font-size: 11px; }

  /* Contact / Hire */
  .contact-inner { grid-template-columns: 1fr !important; gap: 32px; }
  .contact .big { font-size: clamp(36px, 10vw, 56px) !important; }
  .contact .sub { font-size: 16px; }
  .cline { grid-template-columns: 80px 1fr 20px; gap: 12px; padding: 14px 4px; }
  .cline-k { font-size: 9.5px; }
  .cline-v { font-size: 12px; }
  .hire-modes li { font-size: 15px; padding-left: 18px; }
  .contact-bigname { font-size: 60px !important; }

  /* Footer */
  .footer-strip { flex-direction: column; gap: 8px; font-size: 9.5px; text-align: center; padding-top: 24px; }

  /* Section head — collapse meta below */
  .sect-head { grid-template-columns: 1fr !important; gap: 6px; }
  .sect-head--dark { padding-bottom: 14px !important; }
  .sect-num { font-size: 10px; }
  .sect-title { font-size: clamp(28px, 8vw, 38px) !important; }
  .sect-meta { font-size: 10px; }
  .sect-lede { font-size: 16px !important; margin: -10px 0 28px; }

  /* Tweaks panel — shrink so it doesn't dominate */
  .twk-panel {
    width: calc(100vw - 24px) !important;
    max-width: 280px;
    right: 12px !important; bottom: 12px !important;
  }
}

@media (max-width: 720px) {
  /* Tighter phone layout */
  section.sect { padding: 56px var(--pad); }

  /* Topbar status — show only the pip and shortened text */
  .topright .status { font-size: 0; padding: 0; background: none; box-shadow: none; }
  .topright .status .led {
    width: 10px; height: 10px;
    display: inline-block;
  }
  .brand-name { font-size: 10.5px !important; }

  /* Hero */
  .hero { padding: 56px var(--pad) 32px; }
  .hero-h1--v2 { font-size: clamp(36px, 11vw, 52px) !important; }
  .hero-meta--v2 { grid-template-columns: 1fr !important; }
  .hkv { border-right: 0 !important; border-bottom: 1px dashed var(--rule); }
  .hkv:last-child { border-bottom: 0 !important; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  /* Philosophy single col */
  .phi-grid { grid-template-columns: 1fr !important; }
  .phi-card { border-right: 0 !important; }
  .phi-card:not(:last-child) { border-right: 0 !important; border-bottom: 1px solid var(--ink); }

  /* Memdora */
  .flag-h { font-size: clamp(30px, 9vw, 44px) !important; }
  .flag-mark, .flag-strike { font-size: inherit; }
  .flag-stats { grid-template-columns: 1fr 1fr; }

  /* Word rotator and big headlines */
  .wrot-mark { transform: rotate(-1deg) !important; }

  /* Marquee cards */
  .pcard { width: 240px !important; min-height: 200px; }
  .pcard-name { font-size: 19px !important; }
  .pcard-blurb { font-size: 13px !important; }
  .pcard-bignum { font-size: 110px !important; right: -4px; bottom: -24px; }

  /* Ideas — narrower cards */
  .i-t { font-size: 16px !important; }
  .i-b { font-size: 12px !important; }

  /* Hero card forcibly off */
  .hero-card { display: none !important; }
}

@media (max-width: 480px) {
  /* Smallest phones */
  :root { --pad: 16px; }
  section.sect { padding: 48px 16px; }

  .topbar { padding: 10px 16px; }
  .brand-mark { width: 22px !important; height: 22px !important; }
  .brand-name { font-size: 9.5px !important; }

  .hero { padding: 40px 16px 24px; }
  .hero-h1--v2 { font-size: clamp(32px, 11vw, 44px) !important; }
  .hero-sub--v3, .hero-sub--v4 { font-size: 16px !important; }

  /* Section heads tighter */
  .sect-head { margin-bottom: 32px; padding-bottom: 12px; }
  .sect-title { font-size: clamp(24px, 8vw, 32px) !important; }

  /* Memdora */
  .flag-h { font-size: clamp(26px, 10vw, 36px) !important; }
  .flag-sub { font-size: 15px !important; }
  .flag-platforms .fp-lbl { display: none; }

  /* Cloud chips — smaller still */
  .cwc-chip { font-size: 10.5px !important; }
  .cwc-name { font-size: 10.5px !important; padding: 3px 7px 3px 7px !important; }
  .cwc-school { font-size: 8px !important; padding: 2px 5px !important; }
  .skc-chip { font-size: 11px; }
  .skc-xl, .skc-lg { font-size: 13px !important; }
  .skc-xl .skc-name, .skc-lg .skc-name { font-size: 13px !important; }

  /* Hide all marquee tickers' big animations */
  .ticker { padding: 8px 0; font-size: 10px; }

  /* Tweaks panel — bottom strip */
  .twk-panel {
    width: calc(100vw - 16px) !important;
    right: 8px !important; bottom: 8px !important;
    max-height: 70vh;
  }

  /* Contact */
  .contact .big { font-size: clamp(28px, 9vw, 40px) !important; }
  .cline { grid-template-columns: 64px 1fr 16px; }

  /* Footer strip — extra compact */
  .footer-strip { font-size: 9px; }
}

/* Disable mouse-only effects on touch devices */
@media (hover: none) {
  .pcard:hover, .vault-card:hover, .skc-chip:hover, .cwc-chip:hover,
  .hsv-brand:hover, .hero-link:hover, .hero-mark:hover, .flag-step:hover {
    transform: none !important;
  }
  /* Disable spotlight projection (no hover state) */
  .has-spot .pcard:not(.pcard-spot) { opacity: 1 !important; }
}

/* Safari/iOS misc fixes */
@supports (-webkit-touch-callout: none) {
  body { -webkit-text-size-adjust: 100%; }
  .flag-curve, .flag-rings { will-change: auto; }
}


/* ============================================================
   SKILLS CLOUD — naughty interactions
   ============================================================ */

/* Drag cursor on chips */
.skc-chip {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.skc-chip:active { cursor: grabbing; }
.skc-dragging {
  cursor: grabbing !important;
  z-index: 30 !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F4E8 100%) !important;
  border-color: var(--th-bg) !important;
  box-shadow: 0 24px 40px rgba(15,15,18,0.25), 6px 8px 0 var(--th-bg) !important;
}
.skc-snapback {
  transition: transform 0.7s cubic-bezier(.34,1.56,.64,1) !important;
}

/* Click bounce */
@keyframes skClickBounce {
  0%   { transform: rotate(var(--rot)) scale(1); }
  15%  { transform: rotate(0deg) scale(1.18) translateY(-6px); }
  30%  { transform: rotate(calc(var(--rot) * -1)) scale(0.94) translateY(2px); }
  50%  { transform: rotate(0deg) scale(1.08) translateY(-3px); }
  75%  { transform: rotate(var(--rot)) scale(0.98); }
  100% { transform: rotate(var(--rot)) scale(1); }
}
.skc-chip.skc-click {
  animation: skClickBounce 0.55s cubic-bezier(.2,.8,.2,1);
}

/* ── PRANK CHIPS — animal takeover ── */
.skc-prank {
  z-index: 8 !important;
  background: linear-gradient(180deg, #FFF9DB 0%, #FFECB3 100%) !important;
  border-color: #F59E0B !important;
  box-shadow:
    0 4px 14px rgba(245, 158, 11, 0.25),
    0 0 0 2px rgba(245, 158, 11, 0.18) !important;
}
.skc-prank .skc-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.skc-prank-e {
  font-size: 1.4em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(15,15,18,0.12));
  animation: prankWobble 0.6s ease-in-out infinite alternate;
}
@keyframes prankWobble {
  from { transform: rotate(-6deg) translateY(0); }
  to   { transform: rotate(6deg) translateY(-2px); }
}
.skc-prank-say {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95em;
}
.skc-prank .skc-y {
  background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%) !important;
  color: #fff !important;
  text-transform: lowercase !important;
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ── MOTION VARIANTS ── */
@keyframes prSwim {
  0%   { translate: 0 0; rotate: 0deg; }
  20%  { translate: 30px -10px; rotate: 8deg; }
  40%  { translate: 55px 6px;   rotate: -6deg; }
  60%  { translate: 30px -8px;  rotate: 4deg; }
  80%  { translate: -10px 4px;  rotate: -2deg; }
  100% { translate: 0 0;        rotate: 0deg; }
}
.skc-prank--swim { animation: prSwim 3.5s cubic-bezier(.45,.05,.55,.95) both; }

@keyframes prFlutter {
  0%   { translate: 0 0; rotate: -8deg; }
  20%  { translate: 12px -22px; rotate: 14deg; }
  35%  { translate: -8px -12px; rotate: -10deg; }
  50%  { translate: 18px -28px; rotate: 16deg; }
  65%  { translate: -4px -14px; rotate: -8deg; }
  80%  { translate: 8px -20px;  rotate: 10deg; }
  100% { translate: 0 0;        rotate: -8deg; }
}
.skc-prank--flutter { animation: prFlutter 3.5s ease-in-out both; }

@keyframes prBuzz {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  10% { translate: 2px -1px; rotate: 1.5deg; }
  20% { translate: -2px 1px; rotate: -1.5deg; }
  30% { translate: 1px 2px;  rotate: 1deg; }
  40% { translate: -1px -2px; rotate: -1deg; }
  50% { translate: 2px 1px;   rotate: 1.5deg; }
  60% { translate: -2px -1px; rotate: -1.5deg; }
  70% { translate: 1px -2px;  rotate: 0.5deg; }
  80% { translate: -1px 2px;  rotate: -0.5deg; }
  90% { translate: 2px 0;     rotate: 1deg; }
}
.skc-prank--buzz { animation: prBuzz 0.35s linear infinite; }

@keyframes prDrift {
  0%, 100% { translate: 0 0;  rotate: 0deg; }
  25%  { translate: -16px -6px; rotate: -8deg; }
  50%  { translate: 14px 8px;   rotate: 6deg; }
  75%  { translate: -8px 4px;   rotate: -4deg; }
}
.skc-prank--drift { animation: prDrift 3.5s ease-in-out both; }

@keyframes prStretch {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  20% { transform: scaleX(1.3) scaleY(0.85) rotate(0deg); }
  35% { transform: scaleX(1.45) scaleY(0.8) translateX(8px) rotate(2deg); }
  55% { transform: scaleX(0.85) scaleY(1.15) rotate(-2deg); }
  75% { transform: scaleX(1.2) scaleY(0.9); }
}
.skc-prank--stretch { animation: prStretch 3s cubic-bezier(.4,.0,.2,1) both; }

@keyframes prPounce {
  0%   { translate: 0 0;        rotate: 0deg;   scale: 1; }
  20%  { translate: 0 6px;      rotate: -3deg;  scale: 0.92; }
  40%  { translate: 24px -32px; rotate: 8deg;   scale: 1.1; }
  60%  { translate: 48px 0;     rotate: 2deg;   scale: 1; }
  80%  { translate: 24px -8px;  rotate: -4deg;  scale: 1.02; }
  100% { translate: 0 0;        rotate: 0deg;   scale: 1; }
}
.skc-prank--pounce { animation: prPounce 3s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes prRoll {
  0%   { translate: 0 0;   rotate: 0deg; }
  50%  { translate: 30px 0; rotate: 360deg; }
  100% { translate: 0 0;   rotate: 720deg; }
}
.skc-prank--roll { animation: prRoll 3.5s ease-in-out both; }

@keyframes prSlide {
  0%   { translate: 0 0; }
  50%  { translate: 18px 0; }
  100% { translate: 0 0; }
}
.skc-prank--slide { animation: prSlide 3.5s ease-in-out both; }

@keyframes prScuttle {
  0%, 100% { translate: 0 0;   rotate: 0deg; }
  20% { translate: -14px 0;    rotate: -4deg; }
  40% { translate: 18px 0;     rotate: 4deg; }
  60% { translate: -10px -3px; rotate: -3deg; }
  80% { translate: 14px 0;     rotate: 3deg; }
}
.skc-prank--scuttle { animation: prScuttle 1.5s ease-in-out infinite; }

@keyframes prHide {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.4) rotate(20deg); opacity: 0.6; }
  65%  { transform: scale(0.4) rotate(-20deg); opacity: 0.6; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.skc-prank--hide { animation: prHide 3.5s cubic-bezier(.7,.0,.3,1) both; }

@keyframes prHop {
  0%, 30%, 60%, 100% { translate: 0 0; }
  15%  { translate: 12px -32px; }
  45%  { translate: -8px -28px; }
  75%  { translate: 16px -24px; }
}
.skc-prank--hop { animation: prHop 3.2s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes prSwoop {
  0%   { translate: 0 0;        rotate: 0deg; }
  25%  { translate: -30px -20px; rotate: -8deg; }
  50%  { translate: 30px -28px;  rotate: 8deg; }
  75%  { translate: 18px 4px;    rotate: 4deg; }
  100% { translate: 0 0;        rotate: 0deg; }
}
.skc-prank--swoop { animation: prSwoop 3.5s ease-in-out both; }

/* Slightly amp the foot copy when interactive */
.sk-foot { font-size: 13.5px !important; }
.sk-foot em { color: var(--ink); font-style: italic; }

/* Mobile: animals still play, drag works via touch */
@media (max-width: 720px) {
  .skc-prank-e { font-size: 1.2em; }
  .skc-prank-say { font-size: 0.9em; }
}


/* ============================================================
   FLASHCARD — punchier category pill on dark theme
   ============================================================ */
.fc-cat {
  background: linear-gradient(180deg, #FCD34D 0%, #F59E0B 100%) !important;
  color: #1a1404 !important;
  border: 1px solid #FBBF24 !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.3),
    0 4px 14px rgba(245, 158, 11, 0.45),
    0 0 24px rgba(251, 191, 36, 0.3) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.18);
}

/* Make the retention number brighter */
.fc-ret-num { font-size: 16px !important; font-weight: 800 !important; color: var(--paper) !important; }
.fc-ret-lbl { color: rgba(242, 238, 227, 0.75) !important; font-weight: 600 !important; }


/* ============================================================
   SKILLS CLOUD — ALIVE pass
   Cursor proximity push + simultaneous pranks + idle breathing
   ============================================================ */

/* Base chip transform now includes a "push" offset (set by JS),
   the rotation jitter, and is smoothed by a snappy spring transition. */
.skc-chip {
  --px: 0px;
  --py: 0px;
  transform: translate(var(--px), var(--py)) rotate(var(--rot));
  transition:
    transform 0.45s cubic-bezier(.34, 1.56, .64, 1),
    background .25s,
    border-color .25s,
    box-shadow .25s,
    opacity .35s,
    filter .35s;
}

/* When pushed away, the chip subtly tilts in the push direction too */
.skc-chip:hover {
  transform: translate(var(--px), var(--py)) rotate(0deg) scale(1.06) translateY(-3px) !important;
}

/* Idle breathing — barely-there scale pulse, varied phase by index */
@keyframes skBreathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.03); }
}
.skc-chip {
  animation: skBreathe 6s ease-in-out infinite;
  animation-delay: calc(var(--breathe-delay, 0s));
}
.sk-cloud .skc-chip:nth-child(7n)   { --breathe-delay: -0.4s; }
.sk-cloud .skc-chip:nth-child(7n+1) { --breathe-delay: -1.2s; }
.sk-cloud .skc-chip:nth-child(7n+2) { --breathe-delay: -2.1s; }
.sk-cloud .skc-chip:nth-child(7n+3) { --breathe-delay: -2.9s; }
.sk-cloud .skc-chip:nth-child(7n+4) { --breathe-delay: -3.5s; }
.sk-cloud .skc-chip:nth-child(7n+5) { --breathe-delay: -4.4s; }
.sk-cloud .skc-chip:nth-child(7n+6) { --breathe-delay: -5.2s; }

/* When pranked, the chip pops above its neighbors and trails a soft glow */
.skc-prank {
  z-index: 12 !important;
  filter: drop-shadow(0 6px 18px rgba(245, 158, 11, 0.4)) !important;
}
.skc-prank::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* Cloud cursor is the standard pointer (drag is encouraged) */
.sk-cloud { cursor: default; }

/* Friendly little "alive" hint that pulses near the foot copy */
.sk-foot-dot {
  animation: skLive 2.5s ease-in-out infinite !important;
}
@keyframes skLive {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(15,15,18,0.06); }
}


/* ============================================================
   FLASHCARD — lighter background so it's obvious on dark section
   ============================================================ */
.flashcard {
  background: linear-gradient(180deg, #FCFAF3 0%, #F2EEE3 100%) !important;
  color: var(--ink) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 40px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 80px rgba(230, 242, 58, 0.12) !important;
}
.flashcard::after {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.08), transparent 70%) !important;
}

.fc-cat {
  background: linear-gradient(180deg, #FCD34D 0%, #F59E0B 100%) !important;
  color: #1a1404 !important;
  border-color: #D97706 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
  text-shadow: none;
}

/* retention */
.fc-ret-num { color: var(--ink) !important; }
.fc-ret-lbl { color: var(--ink-soft) !important; }
.fc-ret-ring circle:first-of-type { stroke: rgba(15,15,18,0.1) !important; }

/* title + sub on cream */
.fc-title { color: var(--ink) !important; }
.fc-sub   { color: var(--ink-soft) !important; }

/* example block */
.fc-example {
  background: linear-gradient(180deg, rgba(15,15,18,0.04), rgba(15,15,18,0.02)) !important;
  border: 1px dashed rgba(15,15,18,0.1) !important;
  color: var(--ink) !important;
}

/* footer */
.fc-foot {
  border-top: 1px dashed rgba(15,15,18,0.12) !important;
  color: var(--ink-soft) !important;
}
.fc-dot {
  background: #F59E0B !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
}

/* keep the warm top accent bar */
.flashcard::before {
  background: linear-gradient(90deg, #F59E0B 0%, #FF7849 100%) !important;
  height: 4px !important;
}


/* ============================================================
   DRAG fix — no flashing during drag
   ============================================================ */
.skc-dragging {
  animation: none !important;
  filter: none !important;
  transition: none !important;
  cursor: grabbing !important;
}
.skc-dragging::before,
.skc-dragging::after { animation: none !important; }


/* ============================================================
   SKILLS CLOUD — bulletproof interactivity
   The ::before/::after pseudos were absorbing pointer events.
   ============================================================ */
.skc-chip {
  position: relative;
  cursor: grab;
  touch-action: none;
}
.skc-chip::before,
.skc-chip::after { pointer-events: none !important; }

/* Inner spans shouldn't trap clicks either */
.skc-name, .skc-y, .skc-prank-e, .skc-prank-say { pointer-events: none; }

/* Strong hover affordance — user instantly sees it's interactive */
.skc-chip:not(.skc-dragging):not(.skc-prank):hover {
  transform: translate(var(--px), var(--py)) rotate(0deg) scale(1.1) translateY(-4px) !important;
  border-color: var(--th-bg) !important;
  box-shadow:
    0 8px 24px rgba(15,15,18,0.18),
    4px 6px 0 var(--th-bg),
    0 0 0 1px var(--th-bg) !important;
  z-index: 6 !important;
}
.skc-chip:active {
  cursor: grabbing !important;
  transform: translate(var(--px), var(--py)) rotate(0deg) scale(1.04) !important;
}

/* "DRAG ME" hint that fades out after first interaction */
.sk-cloud-wrap {
  position: relative;
}
.sk-drag-hint {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: var(--ink);
  color: var(--acc);
  border-radius: 999px;
  z-index: 3;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: hintFloat 3s ease-in-out infinite;
}
@keyframes hintFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}
.sk-drag-hint::before {
  content: "↕";
  font-size: 12px;
}
.sk-cloud.touched ~ .sk-drag-hint {
  opacity: 0;
  transition: opacity .4s;
}


/* ============================================================
   STUDY — pointer to the cloud below
   ============================================================ */
.edu-credentials-note {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--paper-2);
  border: 1px dashed var(--rule-2);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: start;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.edu-credentials-note em {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-style: italic;
  margin-bottom: 6px;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.edu-credentials-note b {
  display: inline-block;
  background: var(--ink);
  color: var(--acc);
  padding: 1px 7px;
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 700;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  margin: 0 2px;
  vertical-align: 1px;
}
.ecn-arrow {
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--acc);
  border-radius: 50%;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
  animation: ecnBob 2.4s ease-in-out infinite;
}
@keyframes ecnBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}


/* ============================================================
   BIG BANG REVEAL — chips explode from center on scroll-in
   Applied to both clouds (.cw-cloud and .sk-cloud)
   ============================================================ */

/* Containers need positioning context */
.cw-cloud-wrap, .sk-cloud-wrap { position: relative; }
.cw-cloud, .sk-cloud {
  position: relative;
  perspective: 1200px;
}

/* Singularity flash — bright dot in the middle right before chips emerge */
.cw-cloud-wrap::before,
.sk-cloud-wrap::before {
  /* keep the bloom but layer a singularity over it */
}
.cw-cloud-wrap > .bb-core,
.sk-cloud-wrap > .bb-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow:
    0 0 0 0 var(--acc),
    0 0 80px 20px var(--acc),
    0 0 240px 60px rgba(230,242,58,0.45);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.cw[data-reveal].is-in .cw-cloud-wrap > .bb-core,
.sk[data-reveal].is-in .sk-cloud-wrap > .bb-core {
  animation: bbCore 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes bbCore {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  10%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(40); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(80); opacity: 0; }
}

/* === Chip explosion ===
   Each chip starts at the cloud center, scaled to 0, rotated wildly,
   then springs out to its natural flexbox position with a bounce. */
.cw-cloud .cwc-chip,
.sk-cloud .skc-chip {
  /* idle state once landed = the per-chip --rot we already set */
}

/* Before reveal — collapsed at center */
.cw:not(.is-in) .cwc-chip,
.sk:not(.is-in) .skc-chip {
  opacity: 0;
  transform: translate(var(--bb-cx, 0px), var(--bb-cy, 0px)) scale(0) rotate(var(--bb-spin, 180deg));
}

/* After is-in fires — chips bounce out to position
   Stagger is set via inline transitionDelay already; we use the same delay for animation. */
.cw.is-in .cwc-chip,
.sk.is-in .skc-chip {
  animation: bbChip 0.95s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.cw.is-in .cwc-chip { animation-delay: var(--bb-delay, 0ms); }
.sk.is-in .skc-chip { animation-delay: var(--bb-delay, 0ms); }

@keyframes bbChip {
  0% {
    opacity: 0;
    transform: translate(var(--bb-cx, 0px), var(--bb-cy, 0px)) scale(0) rotate(var(--bb-spin, 180deg));
    filter: blur(8px);
  }
  20% {
    opacity: 1;
    filter: blur(0);
  }
  70% {
    transform: translate(0, 0) scale(1.12) rotate(calc(var(--rot) - 4deg));
  }
  85% {
    transform: translate(0, 0) scale(0.96) rotate(calc(var(--rot) + 2deg));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(var(--rot));
    filter: blur(0);
  }
}

/* Shockwave ring that pulses out from the singularity */
.cw-cloud-wrap > .bb-ring,
.sk-cloud-wrap > .bb-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--acc);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}
.cw[data-reveal].is-in .cw-cloud-wrap > .bb-ring,
.sk[data-reveal].is-in .sk-cloud-wrap > .bb-ring {
  animation: bbRing 1.6s 0.1s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes bbRing {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; border-width: 3px; }
  20%  { opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(60); opacity: 0; border-width: 0.5px; }
}
.cw[data-reveal].is-in .cw-cloud-wrap > .bb-ring.bb-ring--2,
.sk[data-reveal].is-in .sk-cloud-wrap > .bb-ring.bb-ring--2 {
  animation-delay: 0.32s;
  border-color: var(--hot, #FF4A1C);
}
.cw[data-reveal].is-in .cw-cloud-wrap > .bb-ring.bb-ring--3,
.sk[data-reveal].is-in .sk-cloud-wrap > .bb-ring.bb-ring--3 {
  animation-delay: 0.55s;
  border-color: #7C3AED;
}


/* ============================================================
   BIG BANG — subtle pass
   ============================================================ */

/* Quieter singularity core */
@keyframes bbCore {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20%  { transform: translate(-50%, -50%) scale(1); opacity: 0.55; }
  60%  { transform: translate(-50%, -50%) scale(10); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}
.cw-cloud-wrap > .bb-core,
.sk-cloud-wrap > .bb-core {
  box-shadow:
    0 0 40px 6px var(--acc),
    0 0 120px 24px rgba(230,242,58,0.18) !important;
}

/* Smaller, gentler shockwaves */
@keyframes bbRing {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0; border-width: 2px; }
  25%  { opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(18); opacity: 0; border-width: 0.5px; }
}
.cw-cloud-wrap > .bb-ring,
.sk-cloud-wrap > .bb-ring {
  border-width: 1.5px !important;
}

/* Chip explosion: less rotation, smaller overshoot, smoother curve */
@keyframes bbChip {
  0% {
    opacity: 0;
    transform: translate(var(--bb-cx, 0px), var(--bb-cy, 0px)) scale(0.3) rotate(calc(var(--rot) - 25deg));
    filter: blur(3px);
  }
  30% {
    opacity: 1;
    filter: blur(0);
  }
  75% {
    transform: translate(0, 0) scale(1.04) rotate(calc(var(--rot) + 1deg));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(var(--rot));
    filter: blur(0);
  }
}
.cw.is-in .cwc-chip,
.sk.is-in .skc-chip {
  animation: bbChip 0.75s cubic-bezier(.22, 1, .36, 1) backwards !important;
}


/* ============================================================
   BIG BANG — chips only, no circles/flashes
   ============================================================ */
/* Hide all the ring & core flash chrome — the chips ARE the bang */
.bb-core, .bb-ring { display: none !important; }

/* Chip explosion — now the only visible effect */
@keyframes bbChip {
  0% {
    opacity: 0;
    transform:
      translate(var(--bb-cx, 0px), var(--bb-cy, 0px))
      scale(0.05)
      rotate(calc(var(--rot) - 30deg));
    filter: blur(2px);
  }
  35% {
    opacity: 1;
    filter: blur(0);
  }
  80% {
    transform: translate(0, 0) scale(1.06) rotate(calc(var(--rot) + 2deg));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(var(--rot));
  }
}
.cw.is-in .cwc-chip,
.sk.is-in .skc-chip {
  animation: bbChip 0.85s cubic-bezier(.22, 1, .36, 1) backwards !important;
}


/* ============================================================
   BIG BANG — true singularity → orbital expansion
   Chips start collapsed at the cloud's center, spin out to their
   final positions like atoms exploding outward.
   ============================================================ */

/* Split animation shorthand so per-chip animation-delay (set inline by JS)
   takes effect for the distance-based stagger. */
.cw.is-in .cwc-chip,
.sk.is-in .skc-chip {
  animation-name: bbChip;
  animation-duration: 1.1s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-fill-mode: backwards;
  animation: bbChip 1.1s cubic-bezier(.22, 1, .36, 1) backwards;
}

/* Before is-in: chips collapse to center via the same vars JS sets */
.cw:not(.is-in) .cwc-chip,
.sk:not(.is-in) .skc-chip {
  opacity: 0;
  transform:
    translate(var(--bb-cx, 0px), var(--bb-cy, 0px))
    scale(0)
    rotate(var(--bb-spin, 540deg)) !important;
}

@keyframes bbChip {
  0% {
    opacity: 0;
    transform:
      translate(var(--bb-cx, 0px), var(--bb-cy, 0px))
      scale(0)
      rotate(var(--bb-spin, 540deg));
    filter: blur(3px);
  }
  15% {
    opacity: 0.4;
    filter: blur(2px);
  }
  55% {
    transform: translate(0, 0) scale(1.06) rotate(calc(var(--rot) - 4deg));
    filter: blur(0);
    opacity: 1;
  }
  80% {
    transform: translate(0, 0) scale(0.98) rotate(calc(var(--rot) + 1deg));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(var(--rot));
    filter: blur(0);
  }
}


/* ============================================================
   WORD ROTATOR — fix descender clipping
   ============================================================ */
.wrot {
  height: 1.2em !important;
  line-height: 1.2 !important;
  vertical-align: -0.16em !important;
  padding: 0 0.16em 0.12em !important;
}
.wrot-stack {
  height: 1.2em !important;
  line-height: 1.2 !important;
  overflow: visible !important;
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.wrot-word {
  line-height: 1.2 !important;
  padding-bottom: 0.04em !important;
}
.wrot-word.prev,
.wrot-word.next {
  position: absolute !important;
  left: 0;
  right: 0;
  inset: auto !important;
  top: 0 !important;
}
/* Mark sized to the visible word, not the box */
.wrot-mark {
  inset: 0.05em -0.04em 0.06em !important;
}


/* ============================================================
   RIGHT NOW — date-stamped freshness line
   ============================================================ */
.now-line {
  border: 1px dashed rgba(15,15,18,0.18);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
  background: rgba(230, 242, 58, 0.08);
  position: relative;
  overflow: hidden;
}
.now-line::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #0F7E5F 0%, #E6F23A 100%);
}
.now-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin-bottom: 14px;
  font-weight: 600;
}
.now-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #0F7E5F;
  box-shadow: 0 0 0 3px rgba(15,126,95,0.18);
  animation: nowPulse 1.8s ease-in-out infinite;
}
@keyframes nowPulse {
  50% { box-shadow: 0 0 0 7px rgba(15,126,95,0.04); }
}
.now-stamp {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  opacity: 0.7;
  font-weight: 500;
}
.now-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.now-items li {
  display: grid;
  grid-template-columns: 110px 16px 1fr;
  align-items: baseline;
  font-size: 15px;
  font-family: var(--serif);
}
.now-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.now-arrow { color: var(--ink-soft); opacity: 0.5; font-family: var(--mono); font-size: 13px; }
.now-v {
  color: var(--ink);
  font-style: italic;
  font-size: 16px;
  line-height: 1.35;
  text-wrap: pretty;
}

@media (max-width: 600px) {
  .now-items li { grid-template-columns: 1fr; gap: 1px; }
  .now-arrow { display: none; }
}

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
.cmdk-scrim {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 15, 18, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  animation: cmdkFade 0.18s ease-out;
}
@keyframes cmdkFade { from { opacity: 0; } to { opacity: 1; } }

.cmdk-panel {
  width: min(640px, 92vw);
  background: #FAF6E7;
  border: 1px solid rgba(15,15,18,0.12);
  border-radius: 14px;
  box-shadow:
    0 30px 80px rgba(15,15,18,0.35),
    0 0 0 4px rgba(230, 242, 58, 0.15);
  overflow: hidden;
  animation: cmdkPop 0.22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes cmdkPop {
  from { transform: translateY(-8px) scale(0.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.cmdk-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(15,15,18,0.08);
}
.cmdk-prompt {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-soft);
  opacity: 0.6;
}
.cmdk-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--ink);
  font-weight: 500;
}
.cmdk-input::placeholder {
  color: var(--ink-soft);
  opacity: 0.5;
  font-weight: 400;
}
.cmdk-esc {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 3px 8px;
  border: 1px solid rgba(15,15,18,0.18);
  border-radius: 5px;
  color: var(--ink);
  opacity: 0.55;
  letter-spacing: 0.08em;
}

.cmdk-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 56vh;
  overflow-y: auto;
}
.cmdk-list::-webkit-scrollbar { width: 6px; }
.cmdk-list::-webkit-scrollbar-thumb { background: rgba(15,15,18,0.15); border-radius: 3px; }

.cmdk-empty {
  padding: 24px;
  text-align: center;
  opacity: 0.5;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}
.cmdk-item.on {
  background: rgba(230, 242, 58, 0.35);
  box-shadow: 0 0 0 1px rgba(230, 242, 58, 0.45);
}

.cmdk-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(15,15,18,0.08);
  color: var(--ink);
  min-width: 42px;
  text-align: center;
  font-weight: 700;
  flex-shrink: 0;
}
.cmdk-k--go   { background: rgba(15, 126, 95, 0.18);  color: #0F7E5F; }
.cmdk-k--do   { background: rgba(255, 74, 28, 0.18);  color: #B23A12; }
.cmdk-k--proj { background: rgba(124, 58, 237, 0.18); color: #5C29B8; }

.cmdk-t {
  flex: 1;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.cmdk-hint {
  font-family: var(--mono);
  font-size: 10.5px;
  opacity: 0.5;
  letter-spacing: 0.06em;
}

.cmdk-foot {
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid rgba(15,15,18,0.08);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.55;
  background: rgba(15,15,18,0.03);
}

/* ============================================================
   KONAMI DEBUG OVERLAY
   ============================================================ */
.kona {
  position: fixed;
  top: 80px; right: 20px;
  z-index: 9998;
  width: 320px;
  background: #0F0F12;
  color: #E6F23A;
  border: 1px solid rgba(230, 242, 58, 0.4);
  border-radius: 8px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(230, 242, 58, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.04);
  font-family: var(--mono);
  font-size: 11.5px;
  overflow: hidden;
  animation: konaSlide 0.45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes konaSlide {
  from { transform: translateX(20px) scale(0.92); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.kona-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(230, 242, 58, 0.18);
  background: rgba(230, 242, 58, 0.04);
}
.kona-dot {
  width: 8px; height: 8px;
  background: #E6F23A;
  border-radius: 50%;
  box-shadow: 0 0 8px #E6F23A;
  animation: konaBlink 1.2s steps(2) infinite;
}
@keyframes konaBlink { 50% { opacity: 0.3; } }
.kona-title {
  flex: 1;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: #FAFAFA;
  font-weight: 600;
}
.kona-close {
  font-family: var(--mono);
  font-size: 11px;
  color: #E6F23A;
  background: transparent;
  border: 1px solid rgba(230, 242, 58, 0.4);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.kona-close:hover {
  background: rgba(230, 242, 58, 0.15);
}

.kona-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px dashed rgba(230, 242, 58, 0.12);
}
.kona-stat {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px dashed rgba(230, 242, 58, 0.12);
}
.kona-stat:last-child { border-right: 0; }
.kona-stat span {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(230, 242, 58, 0.5);
}
.kona-stat b {
  font-size: 18px;
  font-weight: 600;
  color: #E6F23A;
  font-variant-numeric: tabular-nums;
}
.kona-stat b i {
  font-size: 10px;
  font-style: normal;
  opacity: 0.55;
  margin-left: 2px;
}

.kona-section {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kona-h {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: rgba(230, 242, 58, 0.55);
  margin-bottom: 4px;
}
.kona-commit {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: rgba(250, 250, 250, 0.85);
  padding: 4px 0;
  border-bottom: 1px dotted rgba(230, 242, 58, 0.06);
}
.kona-commit:last-child { border-bottom: 0; }
.kona-c-msg {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kona-c-age {
  color: rgba(230, 242, 58, 0.55);
  font-size: 10px;
  flex-shrink: 0;
}

.kona-foot {
  padding: 9px 14px;
  border-top: 1px solid rgba(230, 242, 58, 0.18);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 250, 0.55);
  background: rgba(230, 242, 58, 0.03);
}
.kona-foot kbd {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(230, 242, 58, 0.12);
  border: 1px solid rgba(230, 242, 58, 0.25);
  border-radius: 3px;
  font-size: 10px;
  color: #E6F23A;
  margin: 0 1px;
}

@media (max-width: 600px) {
  .kona { display: none; }
}


/* ============================================================
   FIELD NOTES — Maker's Log Index
   ============================================================ */
.fn-sect { padding-bottom: 80px; }

.fn-head {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fn-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-transform: uppercase;
  flex-wrap: wrap;
}
.fn-issue {
  background: var(--ink); color: var(--acc);
  padding: 4px 10px; border-radius: 4px;
  font-weight: 700;
}
.fn-sep {
  height: 1px; flex: 1; min-width: 30px;
  background: linear-gradient(90deg, var(--rule-2), transparent);
}
.fn-meta { letter-spacing: 0.06em; }
.fn-meta b { color: var(--ink); font-weight: 600; }

.fn-title {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 72px);
  line-height: 0.98; letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
}
.fn-title .ital { font-style: italic; color: var(--hot); }

.fn-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.fn-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  transition: all .25s;
  cursor: pointer;
}
.fn-tag:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.fn-tag.on {
  background: var(--ink);
  color: var(--acc);
  border-color: var(--ink);
}
.fn-tag-n {
  display: inline-block;
  padding: 0 6px; border-radius: 999px;
  background: rgba(15,15,18,0.1);
  color: inherit;
  font-size: 9.5px;
  opacity: 0.7;
  font-weight: 700;
}
.fn-tag.on .fn-tag-n { background: rgba(255,255,255,0.18); }

/* ---------- LAYOUT ---------- */
.fn-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) {
  .fn-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- FEATURED ---------- */
.fn-featured {
  position: relative;
  padding: 24px 28px 26px;
  border: 1px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow: 6px 8px 0 var(--ink), 0 0 0 4px rgba(230, 242, 58, 0.18);
  margin-bottom: 36px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.fn-featured:hover {
  transform: translate(-2px, -3px);
  box-shadow: 10px 13px 0 var(--ink), 0 0 0 5px rgba(230, 242, 58, 0.28);
}
.fn-featured-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--hot);
  font-weight: 700;
}
.fn-star {
  font-size: 14px;
  background: var(--hot);
  color: var(--paper);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.fn-featured-body {
  display: block;
  text-decoration: none;
  color: inherit;
}
.fn-featured-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.fn-featured-t {
  font-family: var(--serif);
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.fn-featured-pull {
  position: relative;
  margin: 0 0 22px;
  padding: 14px 18px 14px 30px;
  background: rgba(230, 242, 58, 0.22);
  border-left: 3px solid var(--ink);
  border-radius: 0 8px 8px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
.fn-q {
  position: absolute;
  left: 12px; top: 0;
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
  font-style: italic;
}
.fn-featured-foot {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.fn-cta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
}
.fn-featured:hover .fn-cta {
  color: var(--hot);
  border-color: var(--hot);
}
.fn-read-min {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* ---------- CATEGORY PILLS ---------- */
.fn-cat-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  white-space: nowrap;
}
.fn-cat-build-log    { background: #0F7E5F; color: #fff; }
.fn-cat-essay        { background: #1E40AF; color: #fff; }
.fn-cat-code         { background: #7C3AED; color: #fff; }
.fn-cat-field-notes  { background: #F59E0B; color: #1a1404; }
.fn-cat-DeFi         { background: #DB2777; color: #fff; }

/* ---------- EARLIER LIST ---------- */
.fn-earlier-h {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}
.fn-earlier-rule { flex: 1; height: 1px; background: var(--rule); }

.fn-list-v2 {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.fn-list-v2 li {
  border-bottom: 1px dashed var(--rule-2);
}
.fn-list-v2 li:last-child { border-bottom: 0; }

.fn-row-v2 {
  display: grid;
  grid-template-columns: 64px auto 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 18px 4px;
  color: inherit;
  text-decoration: none;
  transition: padding .25s, background .2s;
}
.fn-row-v2:hover {
  padding-left: 14px;
  background: rgba(230, 242, 58, 0.08);
}
.fn-row-v2:hover .fn-r-t { color: var(--hot); }
.fn-row-v2:hover .fn-r-arr { transform: translateX(4px); color: var(--hot); }

.fn-r-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.fn-r-body {
  min-width: 0;
}
.fn-r-t {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.015em;
  transition: color .25s;
}
.fn-r-x {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.fn-r-min {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.fn-r-arr {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink-soft);
  transition: transform .25s, color .25s;
}

@media (max-width: 720px) {
  .fn-row-v2 {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }
  .fn-r-date { grid-column: 1; }
  .fn-cat-pill { grid-column: 2; justify-self: end; }
  .fn-r-body { grid-column: 1 / -1; }
  .fn-readbar { grid-column: 1; }
  .fn-r-min { grid-column: 2; }
  .fn-r-arr { display: none; }
}

/* ---------- READING-TIME BAR ---------- */
.fn-readbar {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.fn-readbar-cell {
  width: 4px;
  height: 12px;
  border-radius: 1px;
  background: var(--rule-2);
  transition: background .25s;
}
.fn-readbar-cell.on {
  background: var(--ink);
}
.fn-row-v2:hover .fn-readbar-cell.on { background: var(--hot); }
.fn-featured-foot .fn-readbar-cell.on { background: var(--ink); }

/* ---------- ARCHIVE ---------- */
.fn-archive {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.fn-archive-h {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.fn-archive-rule {
  height: 1px;
  width: 24px;
  background: var(--ink);
}
.fn-archive-y b {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ---------- SIDEBAR ---------- */
.fn-side {
  display: flex; flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 90px;
}
@media (max-width: 880px) {
  .fn-side { position: static; }
}
.fn-side-block {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.fn-side-block:last-child { border-bottom: 0; padding-bottom: 0; }

.fn-side-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 700;
}
.fn-side-h::after {
  content: "";
  flex: 1; height: 1px;
  background: var(--ink);
  opacity: 0.4;
}

.fn-reading { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fn-reading li {
  padding: 10px 12px;
  background: var(--paper-2);
  border-left: 2px solid var(--ink);
  border-radius: 0 6px 6px 0;
}
.fn-book-t {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: 500;
}
.fn-book-a {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.fn-book-s {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: 6px;
  text-transform: uppercase;
  opacity: 0.7;
}

.fn-drafts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fn-drafts li {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding-left: 14px;
  position: relative;
  text-wrap: pretty;
}
.fn-drafts li span {
  position: absolute;
  left: 0; top: 0;
  color: var(--hot);
  font-style: normal;
  font-weight: 700;
}

.fn-subscribe { display: flex; flex-direction: column; gap: 8px; }
.fn-sub-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border: 1px dashed var(--rule-2);
  border-radius: 8px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  transition: all .25s;
}
.fn-sub-row:hover {
  border-color: var(--ink);
  background: rgba(230, 242, 58, 0.15);
  transform: translateY(-1px);
}
.fn-sub-icon {
  width: 28px; height: 28px;
  background: var(--ink);
  color: var(--acc);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.fn-sub-t { flex: 1; font-weight: 500; }
.fn-sub-arr {
  font-size: 14px;
  color: var(--ink-soft);
  transition: transform .25s;
}
.fn-sub-row:hover .fn-sub-arr { transform: translateX(3px); color: var(--ink); }


/* ============================================================
   BRAND NAME — letter wave + hover shimmer
   ============================================================ */
.brand-name--anim {
  display: inline-flex;
  letter-spacing: 0.12em;
}
.brand-name--anim .bn-ch {
  display: inline-block;
  animation: bnWave 4s ease-in-out infinite;
  transition: color .2s, transform .2s;
}
.brand-name--anim:hover .bn-ch {
  animation: bnPop 0.5s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes bnWave {
  0%, 100% { transform: translateY(0); color: inherit; }
  50%      { transform: translateY(-3px); color: var(--hot, #FF4A1C); }
}
@keyframes bnPop {
  0%   { transform: translateY(0)   scale(1); color: inherit; }
  50%  { transform: translateY(-5px) scale(1.18); color: var(--hot, #FF4A1C); }
  100% { transform: translateY(0)   scale(1); color: inherit; }
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }


/* Top 5% badge inline with school name */
.edu-school {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.edu-school .edu-gpa {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--acc);
  border-radius: 3px;
  vertical-align: 0.18em;
  margin: 0;
}


/* ============================================================
   COURSEWORK CHIPS — creative idle motion
   ============================================================ */

/* gentle perpetual drift, varied phase by nth-child */
@keyframes cwcDrift1 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 2px -1.5px; }
}
@keyframes cwcDrift2 {
  0%, 100% { translate: 0 0; }
  50%      { translate: -2px 1.5px; }
}
@keyframes cwcDrift3 {
  0%, 100% { translate: 0 0; }
  50%      { translate: 1.5px 2px; }
}
.cw-cloud.is-active .cwc-chip,
.cw.is-in .cwc-chip {
  animation:
    cwcDrift1 6s ease-in-out infinite,
    bbChip 1.1s cubic-bezier(.22, 1, .36, 1) backwards;
}
.cw.is-in .cwc-chip:nth-child(3n+1)   { animation: cwcDrift2 7s ease-in-out infinite, bbChip 1.1s cubic-bezier(.22,1,.36,1) backwards; }
.cw.is-in .cwc-chip:nth-child(3n+2)   { animation: cwcDrift3 8s ease-in-out infinite, bbChip 1.1s cubic-bezier(.22,1,.36,1) backwards; }

/* once big-bang ends (after ~1.5s) drift should keep going, but the
   animation shorthand resets on ::before… let's use a separate transform
   layer via a wrapper-effect instead: animate the chip's container property.
   Trick: drift the inner span, leaving outer transform free. */
.cwc-chip .cwc-name {
  display: inline-block;
}

/* hover: school badge SPINS, chip swells with soft glow that fades outward */
.cwc-chip {
  isolation: isolate;
}
.cwc-chip:hover {
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s,
    border-color .35s;
}
.cwc-chip:hover .cwc-school {
  animation: cwcBadgeSpin .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes cwcBadgeSpin {
  0%   { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}

/* radiating echo when chip is hovered */
.cwc-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--src-bg, var(--th-bg));
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.cwc-chip:hover::after {
  animation: cwcEcho .9s ease-out forwards;
}
@keyframes cwcEcho {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0;  }
}

/* "lighthouse" — every ~14s a single chip pulses brighter for 1.4s.
   Done via stagger using nth-child to randomize which chips animate. */
@keyframes cwcLighthouse {
  0%, 92%, 100% { box-shadow: 0 0 0 0 transparent; filter: brightness(1); }
  94%           { box-shadow: 0 0 0 6px color-mix(in oklab, var(--src-bg) 35%, transparent), 0 0 20px var(--src-bg);
                  filter: brightness(1.12); }
  98%           { box-shadow: 0 0 0 0 transparent; }
}
.cw.is-in .cwc-chip:not(:hover) {
  /* override drift to combine drift + lighthouse — different chips, different rhythms */
}
.cw-cloud .cwc-chip:nth-child(11n+2)  { animation-name: cwcDrift1, bbChip, cwcLighthouse; animation-duration: 6s, 1.1s, 14s; animation-iteration-count: infinite, 1, infinite; animation-timing-function: ease-in-out, cubic-bezier(.22,1,.36,1), ease; animation-fill-mode: none, backwards, both; animation-delay: 0s, 0s, 3s; }
.cw-cloud .cwc-chip:nth-child(11n+5)  { animation-name: cwcDrift2, bbChip, cwcLighthouse; animation-duration: 7s, 1.1s, 14s; animation-iteration-count: infinite, 1, infinite; animation-timing-function: ease-in-out, cubic-bezier(.22,1,.36,1), ease; animation-fill-mode: none, backwards, both; animation-delay: 0s, 0s, 5s; }
.cw-cloud .cwc-chip:nth-child(11n+8)  { animation-name: cwcDrift3, bbChip, cwcLighthouse; animation-duration: 8s, 1.1s, 14s; animation-iteration-count: infinite, 1, infinite; animation-timing-function: ease-in-out, cubic-bezier(.22,1,.36,1), ease; animation-fill-mode: none, backwards, both; animation-delay: 0s, 0s, 9s; }

/* click ripple — when chip is tapped, an outward ring */
.cwc-chip:active {
  transform: scale(0.96) !important;
  transition: transform .12s !important;
}

/* small sparkles on hover */
.cwc-chip:hover .cwc-name::before {
  content: "✦";
  display: inline-block;
  margin-right: 4px;
  color: var(--src-bg, var(--th-bg));
  font-size: 0.7em;
  animation: cwcSparkle .8s ease-in-out infinite;
}
@keyframes cwcSparkle {
  0%, 100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(180deg); }
}


/* ============================================================
   COURSEWORK CHIPS — kill the shaking, keep the charm
   ============================================================ */
/* Disable all the drift and lighthouse animations */
.cw-cloud .cwc-chip,
.cw.is-in .cwc-chip,
.cw.is-in .cwc-chip:nth-child(3n+1),
.cw.is-in .cwc-chip:nth-child(3n+2),
.cw-cloud .cwc-chip:nth-child(11n+2),
.cw-cloud .cwc-chip:nth-child(11n+5),
.cw-cloud .cwc-chip:nth-child(11n+8) {
  animation: bbChip 1.1s cubic-bezier(.22, 1, .36, 1) backwards !important;
}

/* Keep the nice hover effects: badge flip, echo, sparkle.
   Just no perpetual motion. */


/* ============================================================
   COURSEWORK CHIPS — remove all new animations, plain hover only
   ============================================================ */
/* Kill badge spin, echo ring, and inline sparkle */
.cwc-chip:hover .cwc-school { animation: none !important; transform: none !important; }
.cwc-chip::after { display: none !important; }
.cwc-chip:hover::after { animation: none !important; }
.cwc-chip:hover .cwc-name::before { content: none !important; display: none !important; }
.cwc-chip:active { transform: rotate(var(--rot)) !important; }


/* ============================================================
   CREDENTIALS — redesigned as a quiet grid card
   ============================================================ */
.creds-block {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  position: relative;
}
.creds-block::before {
  content: "";
  position: absolute;
  left: 0; top: 22px; bottom: 22px;
  width: 3px;
  background: linear-gradient(180deg, #1E3A8A 0%, #6B1E2B 25%, #FF9900 50%, #326CE5 75%, var(--acc) 100%);
  border-radius: 0 3px 3px 0;
}

.creds-block-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cbh-num {
  background: var(--ink);
  color: var(--acc);
  padding: 3px 8px;
  border-radius: 3px;
  font-weight: 700;
}
.cbh-t { color: var(--ink); font-weight: 700; letter-spacing: 0.18em; }
.cbh-rule { flex: 1; height: 1px; background: var(--rule-2); }
.cbh-sub {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.creds-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .creds-grid { grid-template-columns: 1fr; }
}

.creds-cell {
  --cred-c: var(--ink);
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
}
.cred-link {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.cred-ext {
  font-family: var(--mono); font-size: 12px;
  color: var(--cred-c);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
}
.creds-cell:hover {
  transform: translateY(-2px);
  border-color: var(--cred-c);
  box-shadow: 0 4px 14px rgba(15,15,18,0.08), 3px 4px 0 var(--cred-c);
}
.creds-cell:hover .cred-ext { opacity: 1; transform: translateX(0); }

.cred-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--cred-c);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 6px 0;
  border-radius: 4px;
  width: 44px;
  text-align: center;
}

.cred-body { min-width: 0; }
.cred-t {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.cred-d {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-top: 2px;
}

.cred-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  background: rgba(230, 242, 58, 0.4);
  color: var(--ink);
  border-radius: 3px;
  font-weight: 700;
  white-space: nowrap;
}

.creds-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule-2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.creds-foot-arrow {
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--acc);
  border-radius: 50%;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  animation: ecnBob 2.4s ease-in-out infinite;
}


/* ============================================================
   ACCESSIBILITY — respect reduced-motion (heavy animation site)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Guarantee everything that animates-in lands visible */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .rword-inner, .rword { opacity: 1 !important; transform: none !important; filter: none !important; }
  .cwc-chip, .skc-chip { opacity: 1 !important; transform: rotate(var(--rot, 0deg)) !important; }
  .ticker-track, .pmar-track, .flag-bigword .m-mar-track, .contact-bigname .m-mar-track {
    animation: none !important;
  }
}


/* ============================================================
   BRIER — second product band (within #products, dark section)
   ============================================================ */
.brier {
  position: relative;
  z-index: 2;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(242,238,227,0.12);
}
.brier-inner { padding: 0; }
.brier-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) { .brier-grid { grid-template-columns: 1fr; gap: 40px; } }

.brier-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 13px; margin-bottom: 22px;
  background: rgba(15,126,95,0.12);
  border: 1px solid rgba(15,126,95,0.4);
  color: #5eead4;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 999px;
}
.brier-tag-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 10px #34d399;
  animation: fpPulse 1.8s infinite;
}
.brier-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--paper); margin-bottom: 20px;
}
.brier-h .ital { font-style: italic; color: var(--acc); }
.brier-h em { font-style: italic; color: #5eead4; }
.brier-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  color: rgba(242,238,227,0.72); max-width: 52ch; margin-bottom: 28px;
}
.brier-points {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: flex; flex-direction: column; gap: 10px;
}
.brier-points li {
  font-family: var(--sans); font-size: 15px;
  color: rgba(242,238,227,0.8);
  display: flex; align-items: baseline; gap: 12px;
}
.bp-k {
  flex-shrink: 0; width: 64px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: var(--acc);
  padding: 3px 8px; border-radius: 4px; text-align: center;
  font-weight: 600;
}
.brier-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brier-note {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; color: rgba(242,238,227,0.5);
}

/* calibration card */
.brier-right { display: flex; justify-content: center; }
.brier-card {
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, #FCFAF3 0%, #F2EEE3 100%);
  border-radius: 18px;
  padding: 22px 24px 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  position: relative;
}
.brier-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #3B82F6, #60A5FA);
  border-radius: 18px 18px 0 0;
}
.bc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.bc-title {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft);
}
.bc-score {
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
}
.bc-score b { color: #3B82F6; font-size: 15px; }
.bc-plot { width: 100%; height: auto; display: block; }
.bc-curve { animation: bcDraw 1.4s 0.4s cubic-bezier(.2,.8,.2,1) forwards; }
.brier.is-in .bc-curve { stroke-dashoffset: 0; }
@keyframes bcDraw { to { stroke-dashoffset: 0; } }
.bc-dot { opacity: 0; animation: bcDot 0.4s ease forwards; }
@keyframes bcDot { to { opacity: 1; } }
.bc-axes {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.6; margin-top: -6px;
}
.bc-foot {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed rgba(15,15,18,0.12);
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.bc-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3B82F6; box-shadow: 0 0 8px rgba(59,130,246,0.5);
}

@media (max-width: 980px) {
  .brier-card { max-width: 100%; }
}


/* second product mark in hero — blue tint to match Brier */
.hero-mark--alt {
  background: #3B82F6 !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.4), 0 8px 18px rgba(59,130,246,0.2) !important;
}


/* ============================================================
   BRIER — expanded to peer with Memdora
   ============================================================ */
.brier-platforms {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; margin-bottom: 40px;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.35);
  color: #93c5fd;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 999px;
}
.brier-platforms .bp-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #60a5fa; box-shadow: 0 0 12px #60a5fa;
  animation: fpPulse 1.8s infinite;
}
.brier-platforms .bp-lbl { color: #bfdbfe; font-weight: 500; }

/* stat strip — mirror Memdora's */
.brier-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(242,238,227,0.08);
  border-bottom: 1px solid rgba(242,238,227,0.08);
  margin-top: 32px;
}
@media (max-width: 640px) { .brier-stats { grid-template-columns: repeat(2, 1fr); } }
.brier-stat {
  padding: 18px 16px;
  border-right: 1px solid rgba(242,238,227,0.06);
  display: flex; flex-direction: column; gap: 6px;
}
.brier-stat:last-child { border-right: 0; }
.bs-v {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px); line-height: 1;
  letter-spacing: -0.025em; color: #60a5fa;
  font-variant-numeric: tabular-nums;
}
.bs-k {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(242,238,227,0.4);
}

/* core-loop steps grid */
.brier-steps-wrap {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid rgba(242,238,227,0.08);
}
.brier-steps-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; margin-bottom: 40px;
}
@media (max-width: 1080px) { .brier-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 540px) { .brier-steps-grid { grid-template-columns: 1fr; } }

.brier-bigword { margin-top: 8px; }
.brier-bigword .tick, .brier-bigword span { color: rgba(59,130,246,0.10); }


/* ============================================================
   BRIER VIZ — carousel of infographics
   ============================================================ */
.bc-stage {
  position: relative;
  min-height: 200px;
}
.bc-anim { animation: bcFade .5s ease both; }
@keyframes bcFade {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* status pills in the header */
.bc-pill {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; font-weight: 700;
}
.bc-pill--ok    { background: rgba(16,185,129,0.16); color: #0F7E5F; border: 1px solid rgba(16,185,129,0.4); }
.bc-pill--blind { background: rgba(15,15,18,0.85); color: #E6F23A; border: 1px solid rgba(230,242,58,0.4); }

/* expectancy grow/pop */
.bc-grow { transform-origin: left center; animation: bcGrow .7s .2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bcGrow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.bc-pop { animation: bcPop .4s .7s ease both; }
@keyframes bcPop { from { opacity: 0; } to { opacity: 1; } }

/* candlesticks */
.bc-candle { opacity: 0; animation: bcCandle .35s ease forwards; }
@keyframes bcCandle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bc-fog { animation: bcFog .6s .7s ease both; transform-origin: right center; }
@keyframes bcFog { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: scaleX(1); } }

/* carousel dots */
.bc-dots {
  display: flex; gap: 6px; justify-content: center;
  margin-top: 12px;
}
.bc-dotnav {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(15,15,18,0.2);
  transition: width .3s, background .3s;
}
.bc-dotnav.on { width: 18px; border-radius: 999px; background: #3B82F6; }


/* education school as link */
a.edu-school { text-decoration: none; color: inherit; display: inline-flex; align-items: baseline; gap: 10px; transition: color .2s; }
a.edu-school:hover { color: var(--hot, #FF4A1C); }
.edu-ext { font-family: var(--mono); font-size: 0.5em; opacity: 0; transform: translate(-4px,-2px); transition: opacity .2s, transform .2s; }
a.edu-school:hover .edu-ext { opacity: 1; transform: translate(0,-2px); }


/* ============================================================
   FIELD NOTE READER — fancy fullscreen article overlay
   ============================================================ */
.fnr-scrim {
  position: fixed; inset: 0; z-index: 11000;
  background: rgba(15,15,18,0.55);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 4vh, 48px) 16px;
  animation: fnrFade .3s ease;
}
@keyframes fnrFade { from { opacity: 0; } to { opacity: 1; } }

.fnr {
  position: relative;
  width: min(760px, 100%);
  max-height: 100%;
  background: var(--paper);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.5), 0 0 0 1px rgba(15,15,18,0.1);
  animation: fnrPop .45s cubic-bezier(.2,.9,.3,1.1);
  display: flex; flex-direction: column;
}
@keyframes fnrPop { from { transform: translateY(24px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.fnr-prog {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--hot, #FF4A1C));
  transform-origin: left; transform: scaleX(0);
  z-index: 5;
}
.fnr-close {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  padding: 7px 11px; border-radius: 8px;
  background: rgba(15,15,18,0.06); color: var(--ink-soft);
  border: 1px solid var(--rule-2);
  transition: background .2s, color .2s;
}
.fnr-close:hover { background: var(--ink); color: var(--paper); }

.fnr-scroll {
  overflow-y: auto;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 88px) 48px;
  scroll-behavior: smooth;
}

.fnr-head { margin-bottom: 36px; }
.fnr-kicker {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-soft); margin-bottom: 20px;
}
.fnr-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 5vw, 54px); line-height: 1.05;
  letter-spacing: -0.03em; color: var(--ink);
  text-wrap: balance;
}
.fnr-byline {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px;
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  border-top: 1px solid var(--rule-2); padding-top: 18px;
}
.fnr-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--acc);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 15px;
}
.fnr-issue { margin-left: auto; opacity: 0.55; letter-spacing: 0.14em; }

.fnr-body { font-family: var(--serif); }
.fnr-p {
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.7;
  color: var(--ink); margin: 0 0 22px;
  text-wrap: pretty;
}
.fnr-body > .fnr-p:first-child::first-letter {
  font-size: 3.4em; line-height: 0.8; float: left;
  padding: 6px 12px 0 0; color: var(--hot, #FF4A1C);
  font-weight: 500;
}
.fnr-h {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -0.01em;
  color: var(--ink); margin: 38px 0 14px;
  display: flex; align-items: center; gap: 12px;
}
.fnr-h::before {
  content: ""; width: 22px; height: 2px; background: var(--acc); flex-shrink: 0;
}
.fnr-quote {
  margin: 32px 0; padding: 4px 0 4px 28px;
  border-left: 3px solid var(--acc);
  font-style: italic; font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4; color: var(--ink); position: relative;
}
.fnr-quote-mark { color: var(--acc); font-size: 1.5em; margin-right: 4px; }
.fnr-code {
  margin: 26px 0; padding: 20px 22px;
  background: var(--ink); color: #E6ECEF;
  border-radius: 12px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  box-shadow: 0 16px 40px rgba(15,15,18,0.2);
}
.fnr-code code { white-space: pre; }

.fnr-foot {
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--rule-2);
}
.fnr-sign {
  font-family: var(--serif); font-style: italic; font-size: 28px;
  color: var(--ink-soft); margin-bottom: 24px;
}
.fnr-next {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: auto 1fr auto; gap: 6px 14px;
  align-items: center;
  padding: 20px 24px; border-radius: 14px;
  background: var(--ink); color: var(--paper);
  transition: transform .25s, box-shadow .25s;
}
.fnr-next:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(15,15,18,0.3); }
.fnr-next-k {
  grid-column: 1; grid-row: 1;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--acc);
}
.fnr-next-t {
  grid-column: 1 / 3; grid-row: 2;
  font-family: var(--serif); font-size: 22px; line-height: 1.2;
}
.fnr-next-arr {
  grid-column: 3; grid-row: 1 / 3; align-self: center;
  font-size: 26px; color: var(--acc);
  transition: transform .25s;
}
.fnr-next:hover .fnr-next-arr { transform: translateX(5px); }

@media (max-width: 600px) {
  .fnr-scroll { padding: 36px 20px 36px; }
  .fnr-body > .fnr-p:first-child::first-letter { font-size: 2.6em; }
}


/* ============================================================
   FIX: Memdora "how it works" steps overflow on mobile
   ============================================================ */
@media (max-width: 760px) {
  .flagship { overflow-x: hidden; }
  .flag-steps-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .flag-step {
    padding: 0 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
  }
  .flag-step .fst-num { margin-bottom: 0; }
  .flag-step .fst-body { min-width: 0; }
  .fst-t, .fst-d { overflow-wrap: anywhere; }
  .fst-d { max-width: 100%; }
  /* keep the brier core-loop grid contained too */
  .brier-steps-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .brier-steps-grid .flag-step { padding: 0 !important; }
  .brier { overflow-x: hidden; }
}