/* ════════════════════════════════════════════════════════════
   MYCELIUM FOR OBSIDIAN — shared system
   Wicked Evolutions · The Organic System · Stratum 05 (Roots)
   Bodoni Moda display + JetBrains Mono · cream paper, woad/indigo accent
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --disp:'Bodoni Moda','Didot',Georgia,serif; /* @kind font */
  --mono:'JetBrains Mono',ui-monospace,monospace; /* @kind font */

  /* page (cream paper) */
  --pagebg:#eee9de;
  --pageink:#2a2620;
  --pagemid:rgba(42,38,32,0.74);
  --pagefaint:rgba(42,38,32,0.5);
  --pagehair:rgba(42,38,32,0.15);

  /* stratum 05 · mycelium (woad / indigo) */
  --paper:#e9ebf2;
  --wash:#cfd6e8;
  --rule:#b4bcd8;
  --mid:#5a6a98;
  --deep:#34436f;
  --ink:#28324f;

  /* second accent · earth ochre (complement to woad) */
  --accent:#8a6a22;
  --accent-soft:#efe6d2;
  --accent-rule:#d7c79a;

  /* section grounds */
  --tint-a:#dde2ef;   /* cool woad wash */
  --tint-b:#ece0c8;   /* warm ochre wash */
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--pagebg); color:var(--pageink); font-family:var(--mono);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
/* paper grain */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ max-width:1480px; margin:0 auto; padding:0 clamp(24px,5.5vw,96px); }
.wrap.narrow{ max-width:1120px; }
a{ color:inherit; }

.label{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; }
.label.faint{ color:var(--pagefaint); }
.label.mid{ color:var(--pagemid); }

/* ─── topbar / nav ─── */
.topbar{
  position:sticky; top:0; z-index:80; display:flex; align-items:center; gap:clamp(12px,2.2vw,28px); flex-wrap:wrap;
  padding:13px clamp(18px,4vw,56px); background:rgba(238,233,222,0.84); color:var(--pageink);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--pagehair);
}
.topbar .dot{ width:6px; height:6px; border-radius:50%; background:var(--deep); display:inline-block; margin-right:9px; vertical-align:middle; }
.topbar .brand{ display:flex; align-items:center; white-space:nowrap; }
.topbar .grow{ flex:1; }
.topbar nav{ display:flex; gap:clamp(10px,1.6vw,22px); flex-wrap:wrap; min-width:0; }
.topbar nav a{ text-decoration:none; color:var(--pagemid); transition:color .2s; }
.topbar nav a:hover{ color:var(--pageink); }
.topbar nav a.active{ color:var(--pageink); }
.topbar nav a.active::before{ content:"·\00a0"; color:var(--deep); }
.topbar .ship{ color:var(--pagefaint); white-space:nowrap; }
@media (max-width:1120px){ .topbar .ship{ display:none; } }
@media (max-width:760px){ .topbar .grow{ flex-basis:0; } }

/* ─── watercolour haze (shared filter id #wc lives inline in each page) ─── */
.haze{ position:absolute; inset:-10%; z-index:0; pointer-events:none; filter:url(#wc) blur(40px); opacity:0.4; }
.haze span{ position:absolute; border-radius:50%; mix-blend-mode:multiply; }
.haze .a{ left:-4%; top:2%; width:42vw; height:42vw; background:radial-gradient(circle at 45% 45%,var(--mid) 0%,transparent 66%); }
.haze .b{ right:-2%; bottom:-6%; width:38vw; height:38vw; background:radial-gradient(circle at 50% 50%,var(--deep) 0%,transparent 64%); }

/* ─── HERO ─── */
.hero{ position:relative; padding:clamp(58px,12vh,128px) 0 clamp(40px,7vh,80px); overflow:hidden; }
.hero .geo{ position:absolute; right:-6%; top:50%; transform:translateY(-50%); width:min(58vw,640px); opacity:0.42; pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at center,#000 38%,transparent 74%); mask-image:radial-gradient(circle at center,#000 38%,transparent 74%); }
.hero .inner{ position:relative; z-index:2; max-width:1120px; }
.kick{ display:flex; gap:clamp(12px,2.4vw,26px); align-items:baseline; flex-wrap:wrap; margin-bottom:clamp(24px,4.5vh,46px); color:var(--pagemid); }
.kick .b{ color:var(--pageink); }
.kick .accent{ color:var(--deep); }
h1.display{ font-family:var(--disp); font-weight:500; font-size:clamp(44px,9.2vw,150px); line-height:0.9; letter-spacing:-0.02em; }
h1.display em{ font-style:italic; font-weight:400; color:var(--deep); }
.hero .sub{ margin-top:clamp(24px,4vh,40px); max-width:62ch; font-family:var(--mono); font-size:clamp(14.5px,1.1vw,16.5px); line-height:1.9; color:var(--pagemid); }
.hero .sub b{ color:var(--pageink); font-weight:500; }
.hero .footline{ margin-top:clamp(34px,6vh,68px); padding-top:18px; border-top:1px solid var(--pagehair); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--pagemid); }

/* ─── buttons ─── */
.btns{ display:flex; gap:14px; flex-wrap:wrap; margin-top:clamp(30px,5vh,50px); }
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  text-decoration:none; padding:14px 20px; border:1px solid var(--deep); border-radius:2px; transition:background .2s,color .2s; white-space:nowrap; }
.btn.solid{ background:var(--deep); color:#eef1f7; }
.btn.solid:hover{ background:var(--ink); }
.btn.ghost{ color:var(--deep); }
.btn.ghost:hover{ background:var(--deep); color:#eef1f7; }
.btn .arr{ font-size:14px; }

/* ─── generic section ─── */
section.std{ padding:clamp(64px,10vh,128px) 0; border-top:1px solid var(--pagehair); position:relative; }
.sec-head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,5vw,56px); align-items:start; margin-bottom:clamp(40px,6.5vh,84px); }
.sec-head .ix{ font-family:var(--mono); font-size:12px; letter-spacing:0.16em; color:var(--accent); padding-top:10px; white-space:nowrap; }
.sec-head h2{ font-family:var(--disp); font-weight:500; font-size:clamp(28px,4.4vw,58px); line-height:0.98; letter-spacing:-0.02em; }
.sec-head h2 em{ font-style:italic; font-weight:400; color:var(--deep); }
.sec-head .note{ font-family:var(--mono); font-size:14px; line-height:1.78; color:var(--pagemid); max-width:48ch; margin-top:clamp(16px,2.4vh,26px); }
.sec-head .note b{ color:var(--pageink); font-weight:500; }

/* ─── problem statement ─── */
.statement{ font-family:var(--disp); font-weight:500; font-size:clamp(24px,3.6vw,46px); line-height:1.18; letter-spacing:-0.01em; max-width:24ch; }
.statement em{ font-style:italic; font-weight:400; color:var(--deep); }
.statement.full{ max-width:30ch; }

/* ─── card grid (what it does) ─── */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--pagehair); border-left:1px solid var(--pagehair); }
.card{ padding:clamp(26px,3vw,40px); border-bottom:1px solid var(--pagehair); border-right:1px solid var(--pagehair); position:relative; }
.card .tool{ font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--deep); background:var(--wash); border:1px solid var(--rule); border-radius:2px; padding:5px 10px; display:inline-block; }
.card .n{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--pagefaint); position:absolute; top:clamp(26px,3vw,40px); right:clamp(26px,3vw,40px); }
.card h3{ font-family:var(--disp); font-weight:500; font-size:clamp(22px,2.6vw,32px); line-height:1.02; letter-spacing:-0.01em; margin:18px 0 12px; }
.card p{ font-family:var(--mono); font-size:14px; line-height:1.78; color:var(--pagemid); max-width:42ch; }
.card p b{ color:var(--pageink); font-weight:500; }
@media (max-width:820px){ .cards{ grid-template-columns:1fr; } }

/* ─── spec strip ─── */
.spec{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--pagehair); }
.spec .s{ padding:clamp(22px,3vw,36px) clamp(16px,2vw,28px); border-right:1px solid var(--pagehair); }
.spec .s:last-child{ border-right:none; }
.spec .s .v{ font-family:var(--disp); font-weight:500; font-size:clamp(30px,4vw,56px); line-height:0.9; letter-spacing:-0.02em; color:var(--deep); }
.spec .s .k{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--pagemid); margin-top:12px; line-height:1.6; }
.spec .s.g .v{ color:var(--accent); }
@media (max-width:820px){ .spec{ grid-template-columns:repeat(2,1fr); } .spec .s:nth-child(2){ border-right:none; } .spec .s:nth-child(1),.spec .s:nth-child(2){ border-bottom:1px solid var(--pagehair); } }

/* ─── code blocks ─── */
.code{ background:var(--ink); color:#cfd6e8; border-radius:3px; overflow:hidden; font-family:var(--mono); position:relative; }
.code .bar{ display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-bottom:1px solid rgba(207,214,232,0.16); }
.code .bar .t{ font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:#8a96bd; }
.code .bar .copyhint{ font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#6172a0; }
.code pre{ margin:0; padding:18px 16px; font-size:13.5px; line-height:1.8; overflow-x:auto; white-space:pre; }
.code pre .c{ color:#7f8bb3; }      /* comment / dim */
.code pre .k{ color:#9db4e6; }      /* key / keyword */
.code pre .s{ color:#b8c9a6; }      /* string */
.code pre .a{ color:#e6d9b8; }      /* accent / value */
.code .prompt{ color:#6172a0; user-select:none; }

/* ─── stratum band (indigo full-bleed) ─── */
.band{ position:relative; overflow:hidden; background:var(--ink); color:#dde3f1; border-top:1px solid var(--ink); }
.band .net{ position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:min(60vw,680px); opacity:0.34; pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at center,#000 36%,transparent 74%); mask-image:radial-gradient(circle at center,#000 36%,transparent 74%); }
.band .inner{ position:relative; z-index:2; padding-top:clamp(64px,12vh,150px); padding-bottom:clamp(64px,12vh,150px); }
.band .no{ font-family:var(--mono); font-size:11px; letter-spacing:0.2em; color:#8a96bd; text-transform:uppercase; }
.band h2{ font-family:var(--disp); font-weight:500; font-size:clamp(34px,6.6vw,108px); line-height:0.92; letter-spacing:-0.02em; margin-top:clamp(16px,2.4vh,28px); }
.band h2 em{ font-style:italic; font-weight:400; color:#9db4e6; }
.band p{ margin-top:clamp(22px,3.6vh,38px); max-width:56ch; font-family:var(--mono); font-size:14.5px; line-height:1.85; color:#c4cdea; }
.band p b{ color:#eef1f7; font-weight:500; }
.band .foot{ margin-top:clamp(40px,7vh,84px); padding-top:18px; border-top:1px solid rgba(221,227,241,0.2); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:#8a96bd; }

/* ─── two pillars ─── */
.pillars{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--pagehair); }
.pillar{ padding:clamp(26px,3.2vw,44px); }
.pillar:first-child{ border-right:1px solid var(--pagehair); }
.pillar .tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.pillar h3{ font-family:var(--disp); font-weight:500; font-size:clamp(26px,3.2vw,42px); line-height:1; letter-spacing:-0.01em; margin:14px 0 6px; }
.pillar .q{ font-family:var(--disp); font-style:italic; font-size:clamp(16px,1.7vw,21px); color:var(--pagemid); line-height:1.3; }
.pillar dl{ margin-top:22px; display:grid; grid-template-columns:auto 1fr; gap:9px 18px; }
.pillar dt{ font-family:var(--mono); font-size:11px; letter-spacing:0.13em; text-transform:uppercase; color:var(--pagefaint); padding-top:3px; }
.pillar dd{ font-family:var(--mono); font-size:13.5px; line-height:1.66; color:var(--pageink); }
.pillar .state{ margin-top:24px; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:7px 12px; border-radius:2px; display:inline-block; }
.pillar .state.on{ background:var(--deep); color:#eef1f7; }
.pillar .state.opt{ border:1px solid var(--rule); color:var(--deep); }
@media (max-width:820px){ .pillars{ grid-template-columns:1fr; } .pillar:first-child{ border-right:none; border-bottom:1px solid var(--pagehair); } }

/* ─── layers table ─── */
.ltable{ border-top:1px solid var(--pagehair); }
.lrow{ display:grid; grid-template-columns:minmax(150px,1fr) 2fr; gap:clamp(16px,4vw,48px); padding:clamp(18px,2.4vh,28px) 0; border-bottom:1px solid var(--pagehair); align-items:baseline; }
.lrow .lname{ font-family:var(--disp); font-weight:500; font-size:clamp(19px,2.2vw,28px); letter-spacing:-0.01em; }
.lrow .lname .meta{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-top:7px; }
.lrow .ldesc{ font-family:var(--mono); font-size:14px; line-height:1.74; color:var(--pagemid); }
.lrow .ldesc b{ color:var(--pageink); font-weight:500; }
@media (max-width:680px){ .lrow{ grid-template-columns:1fr; gap:10px; } }

/* ─── flow (resolver-first) ─── */
.flow{ display:flex; flex-direction:column; gap:0; border:1px solid var(--pagehair); }
.frow{ display:grid; grid-template-columns:auto minmax(140px,200px) 1fr; gap:clamp(14px,3vw,34px); align-items:center; padding:clamp(18px,2.4vh,26px) clamp(20px,3vw,32px); border-bottom:1px solid var(--pagehair); }
.frow:last-child{ border-bottom:none; }
.frow .step{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; color:var(--pagefaint); }
.frow .fn{ font-family:var(--mono); font-size:14.5px; font-weight:700; color:var(--deep); }
.frow .when{ font-family:var(--mono); font-size:13.5px; line-height:1.66; color:var(--pagemid); }
.frow .when b{ color:var(--pageink); font-weight:500; }
@media (max-width:680px){ .frow{ grid-template-columns:1fr; gap:8px; } }

/* ─── steps (install) ─── */
.steps{ counter-reset:step; }
.step-item{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,48px); padding:clamp(28px,4vh,48px) 0; border-top:1px solid var(--pagehair); }
.step-item:first-child{ border-top:none; }
.step-item .num{ counter-increment:step; font-family:var(--disp); font-weight:500; font-size:clamp(32px,4vw,56px); line-height:0.8; color:var(--rule); }
.step-item .num::before{ content:counter(step,decimal-leading-zero); }
.step-item .body h3{ font-family:var(--disp); font-weight:500; font-size:clamp(22px,2.6vw,32px); letter-spacing:-0.01em; margin-bottom:12px; }
.step-item .body p{ font-family:var(--mono); font-size:14.5px; line-height:1.8; color:var(--pagemid); max-width:58ch; margin-bottom:18px; }
.step-item .body p b{ color:var(--pageink); font-weight:500; }
.step-item .body code.inl{ font-family:var(--mono); font-size:13px; background:var(--wash); border:1px solid var(--rule); border-radius:2px; padding:2px 6px; color:var(--pageink); }

/* ─── category list ─── */
.cats{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--pagehair); border-left:1px solid var(--pagehair); }
.cat{ padding:clamp(18px,2.4vw,28px); border-bottom:1px solid var(--pagehair); border-right:1px solid var(--pagehair); display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.cat .cn{ font-family:var(--mono); font-size:14.5px; letter-spacing:0.02em; color:var(--pageink); }
.cat .cc{ font-family:var(--mono); font-size:12px; color:var(--accent); white-space:nowrap; }
@media (max-width:680px){ .cats{ grid-template-columns:1fr; } }

/* ─── invitation / open ─── */
.invite{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--pagehair); }
.invite .col{ padding:clamp(26px,3.2vw,42px); }
.invite .col:first-child{ border-right:1px solid var(--pagehair); }
.invite .col .ph{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); }
.invite .col h3{ font-family:var(--disp); font-weight:500; font-size:clamp(22px,2.6vw,30px); letter-spacing:-0.01em; margin:12px 0 10px; }
.invite .col p{ font-family:var(--mono); font-size:14px; line-height:1.74; color:var(--pagemid); max-width:44ch; }
.invite .col p b{ color:var(--pageink); font-weight:500; }
@media (max-width:820px){ .invite{ grid-template-columns:1fr; } .invite .col:first-child{ border-right:none; border-bottom:1px solid var(--pagehair); } }

/* ─── footer ─── */
.foot{ border-top:1px solid var(--pagehair); padding:clamp(40px,7vh,80px) 0 clamp(36px,5vh,56px); }
.foot .grid{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-end; }
.foot .lockup{ font-family:var(--disp); font-weight:500; font-size:clamp(26px,3.4vw,44px); line-height:0.92; letter-spacing:-0.01em; max-width:18ch; }
.foot .lockup em{ font-style:italic; font-weight:400; color:var(--deep); }
.foot .links{ display:flex; flex-direction:column; gap:9px; text-align:right; }
.foot .links a{ font-family:var(--mono); font-size:13px; letter-spacing:0.06em; text-decoration:none; color:var(--pagemid); transition:color .2s; }
.foot .links a:hover{ color:var(--deep); }
.foot .base{ margin-top:clamp(34px,5vh,56px); padding-top:18px; border-top:1px solid var(--pagehair); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; color:var(--pagefaint); }
@media (max-width:680px){ .foot .links{ text-align:left; } }

/* utility */
.u-mt0{ margin-top:0; }
.lede{ font-family:var(--mono); font-size:clamp(14.5px,1.1vw,16.5px); line-height:1.88; color:var(--pagemid); max-width:62ch; }
.lede b{ color:var(--pageink); font-weight:500; }

/* ─── section grounds (alternating color) ─── */
section.std.tint-a{ background:var(--tint-a); }
section.std.tint-b{ background:var(--tint-b); }

/* ─── gold (ochre) button variants — second accent ─── */
.btn.gold{ border-color:var(--accent); color:var(--accent); }
.btn.gold:hover{ background:var(--accent); color:var(--accent-soft); }
.btn.gold.solid{ background:var(--accent); color:var(--accent-soft); }
.btn.gold.solid:hover{ background:#6f5519; }

/* ════════════════════════════════════════════════════════════
   DIAGRAMS / FLOW VISUALS — built in-system (editable, themeable)
   ════════════════════════════════════════════════════════════ */
.diagram{ border:1px solid var(--pagehair); background:var(--paper); padding:clamp(22px,3.2vw,46px); }
.dgm-cap{ font-family:var(--mono); font-size:13px; letter-spacing:0.02em; color:var(--pagemid); margin-top:22px; line-height:1.7; text-align:center; }
.dgm-cap b{ color:var(--pageink); font-weight:500; }

/* flow-map (diagram 1): vaults → surface → AI */
.flowmap{ display:flex; align-items:stretch; gap:clamp(8px,1.6vw,18px); }
.fm-vaults{ flex:1 1 auto; min-width:0; border:1px solid var(--pagehair); background:var(--tint-b); border-radius:2px; padding:14px; }
.fm-vaults .h{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--pagemid); margin-bottom:11px; }
.fm-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.fm-tile{ font-family:var(--mono); font-size:12.5px; background:var(--pagebg); border:1px solid var(--pagehair); border-radius:2px; padding:10px 11px; color:var(--pageink); }
.fm-arrow{ flex:0 0 auto; align-self:center; font-size:22px; line-height:1; color:var(--accent); }
.fm-arrow .v{ display:none; }
.fm-node{ flex:0 0 auto; align-self:center; min-width:160px; max-width:220px; border:1px solid var(--deep); background:var(--paper); border-radius:2px; padding:20px 16px; text-align:center; }
.fm-node .nm{ font-family:var(--disp); font-weight:500; font-size:26px; line-height:1; color:var(--deep); }
.fm-node .ds{ font-family:var(--mono); font-size:11.5px; color:var(--pagemid); margin-top:9px; line-height:1.6; }
.fm-node.ai{ border-color:var(--accent); }
.fm-node.ai .nm{ color:var(--accent); }
@media(max-width:860px){
  .flowmap{ flex-direction:column; align-items:stretch; }
  .fm-node{ max-width:none; }
  .fm-arrow .h{ display:none; } .fm-arrow .v{ display:inline; }
}

/* funnel (diagram 3): decreasing centered bars */
.funnel{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.fn-bar{ display:flex; align-items:center; justify-content:center; gap:14px; background:var(--wash); border:1px solid var(--rule); border-radius:2px; padding:15px 18px; text-align:center; }
.fn-bar .big{ font-family:var(--disp); font-weight:500; font-size:clamp(20px,2.4vw,30px); line-height:1; color:var(--deep); white-space:nowrap; }
.fn-bar .lbl{ font-family:var(--mono); font-size:13px; color:var(--pagemid); }
.fn-bar.last{ border-color:var(--accent); background:var(--accent-soft); }
.fn-bar.last .big{ color:var(--accent); }
.fn-w1{ width:100%; } .fn-w2{ width:84%; } .fn-w3{ width:66%; } .fn-w4{ width:48%; } .fn-w5{ width:32%; }
.fn-arrow{ color:var(--accent); font-size:15px; line-height:1; }
@media(max-width:680px){ .fn-w1,.fn-w2,.fn-w3,.fn-w4,.fn-w5{ width:100%; } .fn-bar{ flex-direction:column; gap:6px; } }

/* ─── chips ─── */
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.02em; border:1px solid var(--rule); border-radius:2px; padding:4px 9px; color:var(--pagemid); background:var(--paper); white-space:nowrap; }
.chip.ok{ background:var(--wash); border-color:var(--rule); color:var(--deep); }
.chip.app{ background:var(--accent-soft); border-color:var(--accent-rule); color:var(--accent); }
.chip.opt{ background:transparent; border-style:dashed; color:var(--pagemid); }

/* ─── ways-in lanes ─── */
.lanes{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--pagehair); border-left:1px solid var(--pagehair); }
.lane{ padding:clamp(24px,3vw,38px); border-bottom:1px solid var(--pagehair); border-right:1px solid var(--pagehair); display:flex; flex-direction:column; }
.lane .ln{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em; color:var(--accent); }
.lane h3{ font-family:var(--disp); font-weight:500; font-size:clamp(22px,2.5vw,30px); line-height:1.04; letter-spacing:-0.01em; margin:12px 0 10px; }
.lane p{ font-family:var(--mono); font-size:13.5px; line-height:1.74; color:var(--pagemid); margin-bottom:18px; }
.lane p b{ color:var(--pageink); font-weight:500; }
.lane .chips{ margin-top:auto; }
@media(max-width:680px){ .lanes{ grid-template-columns:1fr; } }

/* ─── tiers (architecture two-tier) ─── */
.tiers{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--pagehair); }
.tier{ padding:clamp(26px,3.2vw,44px); }
.tier:first-child{ border-right:1px solid var(--pagehair); }
.tier .tlabel{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; }
.tier.fs .tlabel{ color:var(--deep); }
.tier.cli .tlabel{ color:var(--accent); }
.tier .tnum{ font-family:var(--disp); font-weight:500; font-size:clamp(40px,5vw,72px); line-height:0.85; letter-spacing:-0.02em; margin:14px 0 4px; }
.tier.fs .tnum{ color:var(--deep); }
.tier.cli .tnum{ color:var(--accent); }
.tier .tsub{ font-family:var(--disp); font-style:italic; font-size:clamp(17px,1.8vw,22px); color:var(--pagemid); line-height:1.25; }
.tier ul{ list-style:none; margin:20px 0 0; display:grid; gap:9px; }
.tier li{ font-family:var(--mono); font-size:13px; line-height:1.5; color:var(--pageink); padding-left:18px; position:relative; }
.tier li::before{ content:"\2014"; position:absolute; left:0; color:var(--pagefaint); }
.tier .avail{ margin-top:22px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:7px 12px; border-radius:2px; display:inline-block; }
.tier.fs .avail{ background:var(--deep); color:#eef1f7; }
.tier.cli .avail{ border:1px solid var(--accent-rule); color:var(--accent); }
@media(max-width:820px){ .tiers{ grid-template-columns:1fr; } .tier:first-child{ border-right:none; border-bottom:1px solid var(--pagehair); } }

/* ─── operator / eval power-hatch card (dark inset) ─── */
.opcard{ background:var(--ink); color:#dde3f1; border-radius:2px; padding:clamp(26px,3.4vw,46px); position:relative; overflow:hidden; }
.opcard .ph{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#caa658; }
.opcard h3{ font-family:var(--disp); font-weight:500; font-size:clamp(26px,3.4vw,46px); line-height:0.98; letter-spacing:-0.01em; margin:14px 0 14px; }
.opcard h3 .mono{ font-family:var(--mono); font-size:0.6em; font-weight:400; color:#e3c987; letter-spacing:0; }
.opcard p{ font-family:var(--mono); font-size:14px; line-height:1.8; color:#aeb9dc; max-width:62ch; }
.opcard p b{ color:#eef1f7; font-weight:500; }
.opcard .ogrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:24px; }
.opcard .oi{ border:1px solid rgba(157,180,230,0.2); border-radius:2px; padding:14px 16px; }
.opcard .oi strong{ display:block; font-family:var(--mono); font-size:13px; color:#e7eaf4; margin-bottom:5px; font-weight:500; }
.opcard .oi span{ font-family:var(--mono); font-size:12.5px; color:#9aa6cd; line-height:1.55; }
.opcard .resp{ margin-top:22px; border:1px solid var(--accent-rule); border-radius:2px; padding:15px 18px; font-family:var(--mono); font-size:13px; line-height:1.7; color:#e3c987; }
.opcard .resp b{ color:#f0dca8; font-weight:500; }
@media(max-width:680px){ .opcard .ogrid{ grid-template-columns:1fr; } }

/* ─── vault pills ─── */
.vaultpills{ display:flex; flex-wrap:wrap; gap:8px; }
.vp{ font-family:var(--mono); font-size:12px; color:var(--pagemid); background:var(--paper); border:1px solid var(--rule); border-radius:2px; padding:6px 10px; }

/* ─── coming next ─── */
.coming{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px dashed var(--rule); border-left:1px dashed var(--rule); }
.future{ padding:clamp(22px,2.8vw,34px); border-bottom:1px dashed var(--rule); border-right:1px dashed var(--rule); }
.future .ph{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); }
.future h3{ font-family:var(--disp); font-weight:500; font-size:clamp(20px,2.2vw,27px); line-height:1.04; letter-spacing:-0.01em; margin:12px 0 9px; }
.future p{ font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--pagemid); }
@media(max-width:820px){ .coming{ grid-template-columns:1fr; } }

/* ─── capability grid (3-up) ─── */
.capgrid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--pagehair); border-left:1px solid var(--pagehair); }
.cap{ padding:clamp(24px,2.8vw,36px); border-bottom:1px solid var(--pagehair); border-right:1px solid var(--pagehair); }
.cap .k{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); }
.cap h3{ font-family:var(--disp); font-weight:500; font-size:clamp(21px,2.3vw,28px); line-height:1.04; letter-spacing:-0.01em; margin:11px 0 9px; }
.cap p{ font-family:var(--mono); font-size:13.5px; line-height:1.72; color:var(--pagemid); }
.cap p b{ color:var(--pageink); font-weight:500; }
@media(max-width:820px){ .capgrid{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════
   TOOL BROWSER (toolset page)
   ════════════════════════════════════════════════════════════ */
.tb{ border:1px solid var(--pagehair); background:var(--paper); }
.tb-top{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:16px; border-bottom:1px solid var(--pagehair); background:var(--tint-a); }
.tb-search{ flex:1 1 280px; min-width:0; font-family:var(--mono); font-size:13.5px; background:var(--pagebg); color:var(--pageink); border:1px solid var(--rule); border-radius:2px; padding:12px 13px; }
.tb-search::placeholder{ color:var(--pagefaint); }
.tb-toggles{ display:flex; gap:8px; flex-wrap:wrap; }
.tb-toggle{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; background:var(--pagebg); border:1px solid var(--rule); border-radius:2px; padding:10px 12px; cursor:pointer; color:var(--pagemid); transition:background .15s,color .15s; }
.tb-toggle:hover{ color:var(--pageink); }
.tb-toggle.active{ background:var(--deep); border-color:var(--deep); color:#eef1f7; }
.tb-layout{ display:grid; grid-template-columns:248px 1fr; min-height:520px; }
.tb-cats{ border-right:1px solid var(--pagehair); padding:10px; display:flex; flex-direction:column; gap:4px; overflow:auto; }
.cat-btn{ font-family:inherit; text-align:left; background:none; border:1px solid transparent; border-radius:2px; padding:11px 12px; cursor:pointer; color:var(--pagemid); transition:background .15s,color .15s; }
.cat-btn:hover{ background:var(--wash); color:var(--pageink); }
.cat-btn.active{ background:var(--deep); color:#eef1f7; }
.cat-btn strong{ display:block; font-family:var(--mono); font-size:13px; font-weight:500; color:inherit; }
.cat-btn span{ font-family:var(--mono); font-size:10.5px; color:inherit; opacity:0.7; }
.tb-panel{ padding:clamp(18px,2.4vw,28px); }
.tb-phead{ display:flex; gap:16px; align-items:flex-start; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; }
.tb-phead h3{ font-family:var(--disp); font-weight:500; font-size:clamp(24px,2.8vw,34px); line-height:1; letter-spacing:-0.01em; margin-bottom:7px; }
.tb-phead p{ font-family:var(--mono); font-size:13px; line-height:1.65; color:var(--pagemid); max-width:64ch; }
.tb-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.tb-tool{ border:1px solid var(--pagehair); border-radius:2px; padding:13px 14px; background:var(--pagebg); }
.tb-tool .tn{ font-family:var(--mono); font-size:13px; font-weight:500; color:var(--deep); margin-bottom:5px; word-break:break-word; }
.tb-tool.cli .tn{ color:var(--accent); }
.tb-tool .td{ font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--pagemid); }
.tb-empty{ padding:40px; text-align:center; font-family:var(--mono); font-size:13px; color:var(--pagemid); grid-column:1 / -1; }
@media(max-width:820px){ .tb-layout{ grid-template-columns:1fr; } .tb-cats{ border-right:none; border-bottom:1px solid var(--pagehair); display:grid; grid-template-columns:repeat(2,1fr); } .tb-grid{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════
   THEME · WOAD (dark) — deep navy ground, periwinkle accents
   Toggled via html[data-theme="woad"]. Same hue family as Paper.
   ════════════════════════════════════════════════════════════ */
html[data-theme="woad"]{
  --pagebg:#171d2e;
  --pageink:#e7eaf4;
  --pagemid:rgba(231,234,244,0.62);
  --pagefaint:rgba(231,234,244,0.34);
  --pagehair:rgba(231,234,244,0.13);

  --paper:#212a42;
  --wash:rgba(157,180,230,0.13);
  --rule:rgba(157,180,230,0.32);
  --mid:#8f9cc6;
  --deep:#9db4e6;        /* emphasis → periwinkle */
  --ink:#0f1420;         /* structural inset → deeper than page */

  /* second accent · ochre lifts to warm gold on dark */
  --accent:#d8b85e;
  --accent-soft:#1a1408;
  --accent-rule:rgba(216,184,94,0.4);

  /* section grounds (dark) */
  --tint-a:#1e2842;
  --tint-b:#241c2f;
}
/* paper grain reads as light dust on dark */
html[data-theme="woad"] body::after{ mix-blend-mode:screen; opacity:0.045; }
/* topbar glass on dark */
html[data-theme="woad"] .topbar{ background:rgba(23,29,46,0.84); }
/* watercolour haze: screen-blend periwinkle on dark */
html[data-theme="woad"] .haze{ opacity:0.5; }
html[data-theme="woad"] .haze span{ mix-blend-mode:screen; }
html[data-theme="woad"] .haze .a{ background:radial-gradient(circle at 45% 45%,#4a5e96 0%,transparent 66%); }
html[data-theme="woad"] .haze .b{ background:radial-gradient(circle at 50% 50%,#3a4a78 0%,transparent 64%); }
/* geometry line-art: lift the dark-indigo strokes to periwinkle */
html[data-theme="woad"] .hero .geo,
html[data-theme="woad"] .band .net{ filter:brightness(2.1) saturate(0.65); opacity:0.5; }
/* solid button: periwinkle ground needs dark ink text */
html[data-theme="woad"] .btn.solid{ color:#121a2c; }
html[data-theme="woad"] .btn.solid:hover{ color:#e7eaf4; }
/* state pill on dark */
html[data-theme="woad"] .pillar .state.on{ color:#121a2c; }
/* code panels stay deliberately dark — pin them so --ink remap can't lighten */
html[data-theme="woad"] .code{ background:#0f1420; border:1px solid rgba(157,180,230,0.14); }
/* band stays a deep inset, distinct from page */
html[data-theme="woad"] .band{ background:#0f1420; border-top-color:rgba(157,180,230,0.16); }
/* new components on dark: periwinkle grounds need dark ink text */
html[data-theme="woad"] .tier.fs .avail,
html[data-theme="woad"] .tb-toggle.active,
html[data-theme="woad"] .cat-btn.active{ color:#121a2c; }
/* operator card: pin to deepest inset so it reads distinct from page */
html[data-theme="woad"] .opcard{ background:#0f1420; }
html[data-theme="woad"] .opcard p{ color:#aeb9dc; }
/* dashed coming-next borders a touch brighter on dark */
html[data-theme="woad"] .coming{ border-color:rgba(157,180,230,0.28); }
html[data-theme="woad"] .future{ border-color:rgba(157,180,230,0.28); }

/* ─── theme toggle ─── */
.themetog{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  background:none; border:1px solid var(--pagehair); border-radius:2px; color:var(--pagemid); cursor:pointer;
  padding:6px 11px; display:inline-flex; align-items:center; gap:8px; transition:color .2s,border-color .2s; white-space:nowrap; }
.themetog:hover{ color:var(--pageink); border-color:var(--rule); }
.themetog .glyph{ width:11px; height:11px; border-radius:50%; border:1px solid currentColor;
  background:linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); }
@media (max-width:560px){ .themetog .txt{ display:none; } }