/* ============================================================
   Design system — Clay × Revolut.
   Warm-white base + electric-indigo accent, geometric grotesque
   type (Plus Jakarta Sans / Inter), pill shapes, soft floating
   cards, gradient accents. Shared across home, /thesis and /blog.
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* palette (light) */
  --black:#141019;        /* ink / text */
  --white:#FBFAF8;        /* page background (warm white) */
  --blue:#5B3DF5;         /* primary accent — electric indigo */
  --accent2:#FF6B4A;      /* warm secondary (Clay coral) */
  --grey:#6E6C7A;         /* muted text */
  --light:#EAE7E1;        /* hairline / borders */
  --card:#FFFFFF;         /* elevated surface */
  --fail:#E5484D;
  --lime:#C8FF4D;
  /* gradient */
  --grad:linear-gradient(120deg,#5B3DF5 0%,#8B5CF6 46%,#FF6B4A 100%);
  --grad-soft:linear-gradient(120deg,rgba(91,61,245,.14),rgba(255,107,74,.12));
  /* type */
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',sans-serif;
  /* radius */
  --r-sm:14px; --r:22px; --r-lg:30px; --r-pill:999px;
  /* shadow */
  --shadow-sm:0 2px 10px rgba(20,16,25,.05);
  --shadow:0 10px 34px rgba(20,16,25,.08);
  --shadow-lg:0 26px 70px rgba(20,16,25,.14);
  --glow:0 10px 30px rgba(91,61,245,.32);
}
[data-theme="dark"]{
  --black:#F4F2EE;
  --white:#0B0B10;
  --blue:#8570FF;
  --accent2:#FF7E5F;
  --grey:#9B99A8;
  --light:#26262E;
  --card:#15151B;
  --grad:linear-gradient(120deg,#8570FF 0%,#A88BFF 46%,#FF8664 100%);
  --grad-soft:linear-gradient(120deg,rgba(133,112,255,.20),rgba(255,126,95,.16));
  --shadow-sm:0 2px 12px rgba(0,0,0,.5);
  --shadow:0 12px 40px rgba(0,0,0,.55);
  --shadow-lg:0 30px 80px rgba(0,0,0,.65);
  --glow:0 12px 34px rgba(133,112,255,.4);
}

html{scroll-behavior:smooth}
body{
  background:var(--white);color:var(--black);
  font-family:var(--font);font-weight:400;font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;transition:background .35s,color .35s;
}
::selection{background:rgba(91,61,245,.18)}
.accent{color:var(--blue)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- Theme toggle ---------- */
.theme-toggle{width:38px;height:38px;border:1px solid var(--light);border-radius:50%;background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:border-color .2s,transform .2s,box-shadow .2s;flex-shrink:0}
.theme-toggle:hover{border-color:var(--blue);transform:scale(1.08);box-shadow:var(--shadow-sm)}

/* ---------- Nav (floating pill, Clay-style) ---------- */
nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;max-width:calc(100% - 32px);padding:8px 8px 8px 22px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border:1px solid var(--light);border-radius:var(--r-pill);box-shadow:var(--shadow-sm);transition:box-shadow .3s,background .3s,border-color .3s}
nav.scrolled{box-shadow:var(--shadow)}
[data-theme="dark"] nav{background:rgba(21,21,27,.72)}
.nav-links{display:flex;gap:6px;list-style:none;align-items:center}
.nav-links a{font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--grey);text-decoration:none;transition:color .2s,background .2s;padding:8px 14px;border-radius:var(--r-pill)}
.nav-links a:hover{color:var(--black);background:var(--grad-soft)}
.nav-links a.active{color:var(--black);background:var(--grad-soft)}
.nav-links li:last-child{margin-left:4px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;padding:14px 26px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s,background .25s,box-shadow .25s,border-color .2s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--black);color:var(--white)}
.btn-primary:hover{background:var(--blue);color:#fff;box-shadow:var(--glow);transform:translateY(-2px)}
.btn-grad{background:var(--grad);color:#fff;background-size:140% 140%}
.btn-grad:hover{box-shadow:var(--glow);transform:translateY(-2px)}
.btn-ghost{background:var(--card);color:var(--black);border-color:var(--light)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}

/* ---------- Shared section primitives ---------- */
.divider{height:1px;background:var(--light);margin:0 clamp(20px,5vw,64px)}
.section-wrap{padding:clamp(64px,9vw,120px) clamp(20px,5vw,64px)}
.section-header{display:flex;align-items:baseline;gap:16px;margin-bottom:56px;flex-wrap:wrap}
.section-title{font-family:var(--font-display);font-size:clamp(30px,4.6vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.section-count{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.section-label{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);padding-top:6px}

/* Eyebrow pill (Clay-style small tag) */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--grad-soft);border:1px solid var(--light);padding:7px 15px;border-radius:var(--r-pill);margin-bottom:30px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--light);margin:0 clamp(20px,5vw,64px);padding:28px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
footer span{font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.05em;color:var(--grey)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--grad);animation:pulse 2.5s ease-in-out infinite;flex-shrink:0}

@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ============================================================
   Long-read page shell (Thesis)
   ============================================================ */
.page-hero{padding:clamp(130px,16vw,190px) clamp(20px,5vw,64px) clamp(48px,7vw,84px);max-width:1040px;margin:0 auto}
.page-title{font-family:var(--font-display);font-size:clamp(52px,9vw,120px);font-weight:800;letter-spacing:-.045em;line-height:.94;margin-bottom:30px}
.page-sub{font-size:clamp(18px,2.2vw,23px);font-weight:400;line-height:1.5;letter-spacing:-.01em;max-width:720px;color:var(--grey)}
.page-sub strong{color:var(--black);font-weight:600}
.page-sub em{font-style:italic}

.wrap{max-width:1040px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.prose{max-width:760px}

/* Governing principle callout — floating card */
.principle{max-width:1040px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.principle-inner{position:relative;border:1px solid var(--light);border-radius:var(--r-lg);background:var(--card);padding:clamp(30px,5vw,52px);box-shadow:var(--shadow);overflow:hidden}
.principle-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}
.principle-title{font-family:var(--font-display);font-size:clamp(23px,2.8vw,32px);font-weight:700;line-height:1.22;letter-spacing:-.03em;margin-bottom:22px}
.principle-body{font-size:17px;line-height:1.65;color:var(--grey);margin-bottom:22px}
.principle-body strong{font-weight:600;color:var(--black)}
.principle-note{font-size:13px;letter-spacing:.01em;color:var(--grey);line-height:1.6;border-top:1px solid var(--light);padding-top:20px}

/* Gates */
.gates{max-width:1040px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.gate{border-top:1px solid var(--light);padding:clamp(40px,6vw,64px) 0;display:grid;grid-template-columns:96px 1fr;gap:30px;align-items:start}
.gate:first-child{border-top:none}
.gate-num{font-family:var(--font-display);font-size:clamp(40px,5vw,68px);font-weight:800;line-height:.9;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;opacity:.9}
.gate-title{font-family:var(--font-display);font-size:clamp(23px,2.9vw,33px);font-weight:700;letter-spacing:-.03em;line-height:1.12;margin-bottom:16px}
.gate-title em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.gate-summary{font-size:17px;line-height:1.6;color:var(--grey);max-width:720px;margin-bottom:26px}
.plain{background:var(--card);border:1px solid var(--light);border-radius:var(--r);padding:24px 26px;margin-bottom:22px;max-width:760px;box-shadow:var(--shadow-sm)}
.plain-label{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.plain-body{font-size:15px;line-height:1.7;color:var(--black)}
.gate-test{max-width:760px;margin-bottom:26px}
.gate-test-label{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.gate-test-body{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.4;letter-spacing:-.02em}
.gate-chips{display:flex;flex-wrap:wrap;gap:14px}
.chip{font-size:14px;line-height:1.5;padding:14px 18px;border-radius:var(--r-sm);border:1px solid var(--light);max-width:360px;background:var(--card)}
.chip-label{display:block;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.chip.pass{border-color:rgba(91,61,245,.4)}
.chip.pass .chip-label{color:var(--blue)}
.chip.die{border-color:rgba(229,72,77,.4)}
.chip.die .chip-label{color:var(--fail)}

/* Scorecard */
.scorecard{max-width:660px;margin:0 auto;border:1px solid var(--light);border-radius:var(--r-lg);background:var(--card);padding:clamp(24px,4vw,38px);box-shadow:var(--shadow-lg)}
.sc-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.sc-head h3{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.02em}
.sc-count{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
.sc-bar{height:6px;border-radius:99px;background:var(--light);overflow:hidden;margin:18px 0 26px}
.sc-bar-fill{height:100%;width:0;background:var(--grad);border-radius:99px;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.sc-rows{display:flex;flex-direction:column;gap:2px}
.sc-row{display:flex;align-items:flex-start;gap:15px;padding:15px 14px;border-radius:var(--r-sm);cursor:pointer;transition:background .15s;user-select:none}
.sc-row:hover{background:var(--grad-soft)}
.sc-box{width:22px;height:22px;border:1.5px solid var(--grey);border-radius:7px;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:transparent;transition:background .18s,border-color .18s,color .18s}
.sc-row.on .sc-box{background:var(--blue);border-color:var(--blue);color:#fff}
.sc-label{font-size:15px;line-height:1.45;color:var(--black)}
.sc-verdict{margin-top:26px;padding-top:22px;border-top:1px solid var(--light);text-align:center}
.sc-verdict-label{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.sc-verdict-text{font-family:var(--font-display);font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.03em;transition:color .2s}
.sc-verdict-text.neutral{color:var(--grey)}
.sc-verdict-text.fail{color:var(--fail)}
.sc-verdict-text.mid{color:var(--black)}
.sc-verdict-text.win{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Long-read essay blocks */
.longread{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.lr-item{margin-bottom:clamp(48px,7vw,72px)}
.lr-num{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.lr-title{font-family:var(--font-display);font-size:clamp(24px,2.8vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.16;margin-bottom:22px}
.lr-body{font-size:17px;line-height:1.72;color:var(--black)}
.lr-body p{margin-bottom:16px}
.lr-body p:last-child{margin-bottom:0}
.lr-body strong{font-weight:600}
.lr-quote{font-family:var(--font-display);font-size:clamp(20px,2.5vw,25px);font-weight:500;line-height:1.42;letter-spacing:-.02em;border-left:3px solid transparent;border-image:var(--grad) 1;padding-left:26px;margin:0 0 22px;color:var(--black)}

/* Phase 2 scaffold — subtle dashed */
.scaffold{max-width:1040px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.scaffold-inner{border:1.5px dashed var(--light);border-radius:var(--r-lg);padding:clamp(28px,4.5vw,44px);background:var(--grad-soft);color:var(--grey)}
.scaffold-label{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:20px}
.scaffold-inner p{font-size:15px;line-height:1.7;margin-bottom:12px}
.scaffold-inner p:last-child{margin-bottom:0}
.scaffold-inner strong{font-weight:600;color:var(--black)}

/* Thesis page footer */
.page-footer{border-top:1px solid var(--light);margin:0 clamp(20px,5vw,64px);padding:34px 0 52px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.page-footer span{font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--grey)}

/* ============================================================
   Blog index
   ============================================================ */
.blog-list{max-width:1120px;margin:0 auto;padding:0 clamp(13px,2.1vw,22px) clamp(64px,9vw,110px)}
.post-grid{display:grid;grid-template-columns:1fr;gap:20px}
.post-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--light);border-radius:var(--r-lg);background:var(--card);padding:clamp(26px,3.5vw,38px);transition:transform .25s,box-shadow .25s,border-color .25s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.post-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.post-date,.post-read{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.post-badge{font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--grad-soft);border:1px solid var(--light);padding:3px 10px;border-radius:var(--r-pill)}
.post-title{font-family:var(--font-display);font-size:clamp(23px,3vw,31px);font-weight:700;letter-spacing:-.03em;line-height:1.14;margin-bottom:14px;transition:color .2s}
.post-card:hover .post-title{color:var(--blue)}
.post-excerpt{font-size:16px;line-height:1.6;color:var(--grey);max-width:640px}
.post-arrow{display:inline-block;margin-top:18px;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--blue)}

/* Empty state */
.empty{max-width:1120px;margin:0 auto;padding:0 clamp(13px,2.1vw,22px) 120px}
.empty-inner{border:1.5px dashed var(--light);border-radius:var(--r-lg);padding:clamp(56px,8vw,90px) 32px;text-align:center;background:var(--grad-soft)}
.empty-emoji{font-size:34px;margin-bottom:22px}
.empty-title{font-family:var(--font-display);font-size:clamp(26px,3.4vw,34px);font-weight:700;letter-spacing:-.03em;margin-bottom:12px}
.empty-sub{font-size:15px;color:var(--grey);line-height:1.6}

/* ============================================================
   Blog post (article)
   ============================================================ */
.article{max-width:900px;margin:0 auto;padding:clamp(120px,15vw,170px) clamp(13px,2.1vw,22px) 40px}
body.blog-page .page-hero{max-width:1120px;padding-left:clamp(13px,2.1vw,22px);padding-right:clamp(13px,2.1vw,22px)}
.article-back{display:inline-block;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--grey);text-decoration:none;margin-bottom:36px;transition:color .2s}
.article-back:hover{color:var(--blue)}
.article-meta{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.article-title{font-family:var(--font-display);font-size:clamp(34px,5.5vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1.02;margin-bottom:24px}
.article-lede{font-size:clamp(18px,2.2vw,22px);font-weight:400;line-height:1.5;color:var(--grey);letter-spacing:-.01em;margin-bottom:8px}
.article-body{font-size:17px;line-height:1.8;color:var(--black);padding-bottom:80px}
.article-body h2{font-family:var(--font-display);font-size:clamp(25px,3vw,33px);font-weight:700;letter-spacing:-.03em;line-height:1.16;margin:56px 0 20px}
.article-body h3{font-family:var(--font-display);font-size:clamp(20px,2.2vw,24px);font-weight:600;letter-spacing:-.02em;margin:40px 0 16px}
.article-body p{margin-bottom:22px}
.article-body a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(91,61,245,.35);transition:border-color .2s}
.article-body a:hover{border-color:var(--blue)}
.article-body strong{font-weight:600}
.article-body em{font-style:italic}
.article-body ul,.article-body ol{margin:0 0 22px 24px}
.article-body li{margin-bottom:8px}
.article-body blockquote{border-left:3px solid transparent;border-image:var(--grad) 1;padding-left:26px;margin:32px 0;font-family:var(--font-display);font-size:clamp(20px,2.5vw,25px);font-weight:500;line-height:1.42;letter-spacing:-.02em;color:var(--black)}
.article-body blockquote p{margin-bottom:0}
.article-body hr{border:none;border-top:1px solid var(--light);margin:48px 0}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--card);border:1px solid var(--light);border-radius:6px;padding:1px 6px}
.article-body pre{background:var(--card);border:1px solid var(--light);border-radius:var(--r-sm);padding:20px;overflow-x:auto;margin:0 0 22px}
.article-body pre code{background:none;border:none;padding:0}
.draft-banner{border:1px solid var(--light);background:var(--grad-soft);border-radius:var(--r-sm);padding:15px 20px;font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--blue);margin-bottom:40px}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:768px){
  body{font-size:16px}
  nav{top:12px;padding:7px 7px 7px 16px}
  .nav-links{gap:2px}
  .nav-links a{padding:8px 10px;font-size:12px}
  .nav-anchor{display:none}
  .gate{grid-template-columns:1fr;gap:10px}
  .gate-num{font-size:40px}
}
@media(max-width:480px){
  .nav-links a{padding:7px 8px;font-size:11px}
  .chip{max-width:100%}
  .page-footer{flex-direction:column;align-items:flex-start;gap:10px}
}