/* ═══════════════════════════════════════════════════════════════
   BODHAKA — "Quantum" design system
   Re-skinned to match quantum.bodhaka.org: clean light-blue canvas,
   white rounded cards, soft shadows, Roboto + Roboto Mono.
   Class & variable names are kept identical to the previous theme so
   every page inherits the new look without any markup changes.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&family=Roboto+Mono:wght@400;500;700&display=swap');

:root{
  /* surfaces */
  --bg:#DBE7F3;
  --paper:#ffffff;
  --paper-dim:#eaf1f9;
  --cream:#f4f2ed;
  /* ink + text */
  --ink:#0c0c0e;
  --ink-2:#24242a;
  --soft:#4a5268;
  --muted:#6a6a72;
  --faint:#9c9ca4;
  --line:rgba(12,12,18,.10);
  --dot:rgba(18,18,26,.2);
  /* dark band */
  --board:#15233a;
  --board-deep:#0c1322;
  --chalk:#eef3f9;
  --chalk-dim:#aeb9c9;
  --chalk-gold:#e1cf9f;
  /* accents — primary green, blue, gold (from quantum.bodhaka.org) */
  --amber:#2bbd7e;        /* primary action */
  --amber-deep:#1b8f4e;   /* labels / dark green */
  --inkblue:#3a5bd0;      /* blue accent */
  --gold:#c8a04e;
  --margin-red:#c0392b;
  --rule-blue:rgba(58,91,208,.10);
  /* shape + depth */
  --r-lg:18px;
  --r-md:12px;
  --pill:100px;
  --shadow-sm:0 1px 2px rgba(20,20,30,.04), 0 6px 16px rgba(20,20,30,.06);
  --shadow:0 2px 6px rgba(20,20,30,.05), 0 16px 40px rgba(20,20,30,.10);
  --font:'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono:'Roboto Mono', ui-monospace, Consolas, monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px circle at 80% -5%, #fff 0%, transparent 55%),
    linear-gradient(180deg, #eaf1f8 0%, var(--bg) 55%, #cfe0ef 100%);
  background-attachment:fixed; background-repeat:no-repeat;
}
img{max-width:100%;}

/* ── quantum animated dual-tone dot grid (fixed backdrop) ──
   ::before = faint full grid that slowly pans;
   ::after  = a denser, darker dot-cloud masked into a soft blob that drifts.
   Both sit behind page content; opaque sections (.sec-dim, .board, cards) cover them. */
body::before, body::after{content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none;}
body::before{
  background-image:radial-gradient(circle, rgba(18,18,26,.06) 1px, transparent 1.4px);
  background-size:22px 22px;
  animation:dots 40s linear infinite;
}
body::after{
  background-image:radial-gradient(circle, var(--dot, rgba(18,18,26,.2)) 1.5px, transparent 1.7px);
  background-size:15px 15px;
  -webkit-mask-image:radial-gradient(circle at 80% 6%, #000 0%, transparent 58%);
  mask-image:radial-gradient(circle at 80% 6%, #000 0%, transparent 58%);
  animation:b1 26s ease-in-out infinite alternate;
}
@keyframes dots{ 0%{background-position:0 0;} 100%{background-position:22px 22px;} }
@keyframes b1{
  0%{transform:translate(0,0) scale(1); opacity:.85;}
  100%{transform:translate(-4vmax,4vmax) scale(1.08); opacity:1;}
}
@media (prefers-reduced-motion: reduce){ body::before, body::after{animation:none;} }

/* ── large-screen scaling ── */
@media (min-width:1600px){ body{zoom:1.08;} }
@media (min-width:1920px){ body{zoom:1.18;} }
@media (min-width:2400px){ body{zoom:1.4;} }

/* ── the dot-grid now lives in the global animated backdrop (body::before/::after),
   so .ruled sections simply stay transparent and let it show through ── */
.ruled{background:transparent;}

.container{max-width:1180px; margin:0 auto; padding:0 5vw;}
.container-narrow{max-width:880px; margin:0 auto; padding:0 5vw;}

/* ── type ── */
h1,h2,h3,h4,.anton{font-family:var(--font); font-weight:900; letter-spacing:-.01em; line-height:1.1; text-transform:none;}
.hand{font-family:var(--font); font-weight:500;}
.ui{font-family:var(--font);}
.hl{background:linear-gradient(transparent 54%, rgba(43,189,126,.32) 54%, rgba(43,189,126,.32) 92%, transparent 92%);}
.hl-blue{background:linear-gradient(transparent 54%, rgba(58,91,208,.24) 54%, rgba(58,91,208,.24) 92%, transparent 92%);}
.tm{font-size:.42em; font-style:normal; letter-spacing:0; position:relative; top:-1.15em; vertical-align:baseline; display:inline-block; margin-left:1px; font-weight:500;}
.kicker{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--amber-deep); letter-spacing:.12em; text-transform:uppercase;}
.kicker::before{content:"◆ "; color:var(--inkblue);}
.small-hand{font-family:var(--font); font-size:14.5px; color:var(--soft);}
.standfirst{margin-top:24px; font-size:clamp(16px,1.5vw,19.5px); line-height:1.65; max-width:52ch; color:var(--soft);}
.note{position:absolute; font-family:var(--mono); font-size:13.5px; color:var(--inkblue); line-height:1.4; max-width:180px;}

/* ── figures: clean rounded card ── */
.fig{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden;}
.fig img{width:100%; display:block;}
.fig .tab{
  position:absolute; top:14px; left:14px; z-index:6;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  background:var(--ink); color:#fff; padding:6px 12px; border-radius:var(--pill);
}
.fig figcaption{font-family:var(--font); font-size:14px; color:var(--soft); padding:14px 16px; border-top:1px solid var(--line); background:var(--paper);}
.fig.shadow-soft{box-shadow:var(--shadow-sm);}

/* cellotape strips are not part of the quantum look — neutralised
   (markup keeps <span class="plaster"> so nothing else needs editing) */
.plaster{display:none !important;}

/* ── buttons ── */
.btn{
  display:inline-block; text-decoration:none; font-family:var(--font); font-weight:700; font-size:15px;
  letter-spacing:.01em; text-transform:none; padding:13px 26px; border-radius:var(--pill);
  border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; cursor:pointer;
}
.btn-amber{background:var(--amber); color:#fff; box-shadow:var(--shadow-sm);}
.btn-amber:hover{transform:translateY(-2px); box-shadow:var(--shadow); background:#25a96f;}
.btn-line{background:var(--paper); color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm);}
.btn-line:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:rgba(12,12,18,.18);}
.btn-chalk{background:var(--chalk); color:var(--board-deep); border-color:transparent; box-shadow:var(--shadow-sm);}
.btn-chalk:hover{transform:translateY(-2px); box-shadow:var(--shadow);}

/* ── nav ── */
nav.v2{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:13px 4vw;
}
nav.v2 .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
nav.v2 .brand img{width:34px;height:34px;}
nav.v2 .brand .nm{font-family:var(--font); font-weight:900; font-size:20px; letter-spacing:-.01em;}
nav.v2 .brand small{display:block; font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--muted); letter-spacing:.02em;}
nav.v2 ul{display:flex; gap:22px; list-style:none; font-family:var(--font); font-size:14px; font-weight:500; align-items:center;}
nav.v2 ul a{color:var(--ink-2); text-decoration:none; white-space:nowrap;}
nav.v2 ul a:hover{color:var(--amber-deep);}
nav.v2 .btn{font-family:var(--font); font-weight:700; font-size:13.5px; letter-spacing:.01em; padding:10px 22px; border:1px solid transparent; box-shadow:var(--shadow-sm); white-space:nowrap; text-transform:none;}
nav.v2 .btn:hover{color:#fff;}
@media (max-width:1240px){ nav.v2 ul{gap:16px; font-size:13px;} }
.flag-new{
  font-family:var(--mono); font-size:10.5px; font-weight:500; color:#fff; background:var(--amber);
  padding:2px 8px; border-radius:var(--pill); margin-left:5px; vertical-align:2px; letter-spacing:.04em;
}
nav.v2 .nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
nav.v2 .nav-toggle span{display:block; width:24px; height:2.5px; border-radius:3px; background:var(--ink); margin:5px 0;}
@media (max-width:980px){
  nav.v2 ul{
    display:none; position:absolute; top:100%; left:0; right:0; background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line); flex-direction:column; padding:18px 6vw; gap:16px; align-items:flex-start;
  }
  nav.v2 ul.open{display:flex;}
  nav.v2 .nav-toggle{display:block;}
}

/* ── dark band (was chalkboard) ── */
.board{
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(43,189,126,.10), transparent 60%),
    linear-gradient(180deg, var(--board) 0%, var(--board-deep) 100%);
  color:var(--chalk); padding:84px 0 92px;
  border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
}
.board .kicker{color:#7fe7c4;}
.board .kicker::before{color:var(--gold);}
.board h2{color:#fff;}
.board .chalk-em{color:var(--gold);}
.board p{color:var(--chalk-dim);}
.board .frame{border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg); padding:clamp(24px,4vw,54px); position:relative; background:rgba(255,255,255,.02);}
.chalk-dash{height:4px; border-radius:3px; background:linear-gradient(90deg, var(--amber), var(--inkblue));}

/* ── sections ── */
.sec{padding:80px 0 88px;}
.sec-dim{background:var(--paper-dim); border-top:1px solid var(--line);}
.sec h2{font-size:clamp(28px,3.8vw,46px); line-height:1.08;}

/* ── document / legal prose ── */
.doc-hero{padding:76px 0 50px;}
.doc-hero h1{font-size:clamp(36px,4.8vw,62px); line-height:1.06; margin-top:14px; max-width:24ch;}
.doc-hero .doc-meta{margin-top:18px; font-family:var(--mono); font-size:13.5px; color:var(--muted);}
.doc{padding:30px 0 90px;}
.doc article{max-width:820px;}
.doc h2{font-size:clamp(22px,2.6vw,30px); margin:54px 0 0; padding-top:18px; border-top:1px solid var(--line);}
.doc h3{font-size:clamp(17px,2vw,21px); margin:34px 0 0; color:var(--ink);}
.doc h4{font-family:var(--font); font-weight:700; text-transform:none; letter-spacing:0; font-size:16px; margin:26px 0 0;}
.doc p{margin-top:16px; font-size:16px; line-height:1.75; color:var(--soft);}
.doc li{margin-top:10px; font-size:15.5px; line-height:1.7; color:var(--soft);}
.doc ul, .doc ol{margin-top:14px; padding-left:26px;}
.doc strong{color:var(--ink);}
.doc a{color:var(--inkblue);}
.doc table{width:100%; border-collapse:collapse; margin-top:20px; font-size:14.5px; font-family:var(--font);}
.doc th{font-weight:700; text-align:left; background:var(--ink); color:#fff; padding:10px 12px;}
.doc td{padding:10px 12px; border:1px solid var(--line); color:var(--soft); vertical-align:top; line-height:1.6;}
.doc .callout{
  margin-top:24px; padding:18px 24px; border-left:4px solid var(--amber); background:var(--paper);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  font-size:15.5px; line-height:1.7; color:var(--soft);
}
.toc{
  margin-top:34px; padding:22px 26px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); max-width:820px;
}
.toc .toc-title{font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-deep);}
.toc ol{margin-top:12px; padding-left:24px; columns:2; column-gap:40px;}
.toc li{margin-top:7px; font-size:14.5px; font-family:var(--font);}
.toc a{color:var(--inkblue); text-decoration:none;}
.toc a:hover{text-decoration:underline;}
@media (max-width:700px){ .toc ol{columns:1;} }

/* ── cards ── */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 22px 26px; position:relative; box-shadow:var(--shadow-sm);}
.card.lift{box-shadow:var(--shadow);}
.card h3{font-size:19px; font-weight:700;}
.card p{margin-top:10px; font-size:14.5px; line-height:1.65; color:var(--soft);}
.idx-dot{
  position:absolute; top:-18px; left:18px; width:38px; height:38px; border-radius:50%;
  background:var(--inkblue); color:#fff; font-family:var(--font); font-weight:900; font-size:16px;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}

/* ── reveal on scroll ── */
.rv{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1; transform:none; transition:none;} }

/* ── footer ── */
footer.v2{
  background:var(--board-deep); color:var(--chalk-dim); padding:46px 0 40px;
  font-family:var(--font); font-size:13.5px; border-top:3px solid var(--amber);
}
footer.v2 .cols{display:flex; justify-content:space-between; flex-wrap:wrap; gap:26px;}
footer.v2 a{color:var(--chalk); text-decoration:none;}
footer.v2 a:hover{color:#7fe7c4;}
footer.v2 .hand{color:#7fe7c4; font-size:15px; font-weight:500;}
footer.v2 h5{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--chalk); margin-bottom:10px;}
footer.v2 ul{list-style:none;}
footer.v2 li{margin-top:7px;}
footer.v2 .legal{margin-top:30px; padding-top:18px; border-top:1px solid rgba(238,243,249,.14); font-size:12px; color:#8da0b4; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}