/* ==========================================================================
   SPLIT LABS : 2D editorial design system
   Paper, ink, one accent. Hand-drawn SVG illustration, mono annotations.
   Sections: 1 tokens . 2 base . 3 chrome (header, index, footer) . 4 homepage plates
             5 index rows & emblems . 6 inner pages . 7 forms . 8 illustration system . 9 motion . 10 responsive
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  /* ---- semantic tokens (single source of truth) ---- */
  --bg:#f4ecdd;--surface:#ece2cf;--surface-2:#e0d4bb;--surface-3:#d3c5a8;
  --text:#1d1b17;--text-2:#4a4538;--text-3:#6f6858;--border:rgba(29,27,23,.2);--border-strong:rgba(29,27,23,.55);
  --accent:#c2401a;--accent-text:#a6381a;--on-accent:#fff8ee;
  --brass:#b0883c;--brass-text:#7a5a1c;
  --danger:#a8281f;--danger-bg:rgba(168,40,31,.08);--ok:#2f6b3a;--focus:#1d1b17;
  --sel-bg:#c2401a;--sel-text:#fff8ee;
  /* illustration marker colours: restrained, derived from the same family */
  --mr:#e8552b;--my:#f0b84a;--mb:#8fb0d4;--mg:#e9d9b3;--mp:#f2b49a;--dq:rgba(29,27,23,.34);--hl:#fffaf0;
  /* legacy aliases kept so existing rules and generated SVG keep working */
  --paper:var(--bg);--paper2:var(--surface);--paper3:var(--surface-2);--ink:var(--text);--ink2:var(--text-2);--mute:var(--text-3);--accent-ink:var(--accent-text);--accent2:var(--brass);--rule:var(--border);
  --serif:'Fraunces','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:'Instrument Sans','Inter','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'DejaVu Sans Mono',monospace;
  --ease:cubic-bezier(.2,.7,.2,1);--max:1320px;--gut:clamp(18px,4vw,56px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .09 0 0 0 0 .05 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
html[data-theme=dark]{
  --bg:#121110;--surface:#1c1a18;--surface-2:#262321;--surface-3:#34302d;
  --text:#f7f1e6;--text-2:#cbc1b0;--text-3:#9c9283;--border:rgba(247,241,230,.14);--border-strong:rgba(247,241,230,.42);
  --accent:#ff6a3a;--accent-text:#ff8d62;--on-accent:#1d0d06;
  --brass:#ecc57c;--brass-text:#f0d08f;
  --danger:#ff9d90;--danger-bg:rgba(255,157,144,.1);--ok:#8fcf9a;--focus:#f7f1e6;
  --sel-bg:#ff6a3a;--sel-text:#1d0d06;
  --mr:#ff6a3a;--my:#f2c066;--mb:#6f93bd;--mg:#e6d3a8;--mp:#f4a98c;--dq:rgba(247,241,230,.34);--hl:#f7f1e6;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .85 0 0 0 0 .75 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");color-scheme:dark}
/* .inv : a section set one level up in the surface scale (dark theme) or reversed to charcoal (light theme) */
.inv{--bg:#1d1b17;--surface:#272521;--surface-2:#34312b;--surface-3:#423e36;--text:#f4ecdd;--text-2:#c4bba8;--text-3:#978e7c;--border:rgba(244,236,221,.18);--border-strong:rgba(244,236,221,.5);--accent-text:#f3875f;--brass-text:#d6b87c;--focus:#f4ecdd;
  --paper:var(--bg);--paper2:var(--surface);--paper3:var(--surface-2);--ink:var(--text);--ink2:var(--text-2);--mute:var(--text-3);--accent-ink:var(--accent-text);--rule:var(--border);background-color:var(--bg);color:var(--text)}
html[data-theme=dark] .inv{--bg:#1c1a18;--surface:#262321;--surface-2:#312d2a;--surface-3:#3d3835}

/* ---------- 2. base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper) var(--grain);color:var(--ink);font:400 clamp(16px,1.15vw,18px)/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0 0 1em}
img,svg{max-width:100%}
a{color:var(--accent-ink);text-underline-offset:.2em;text-decoration-thickness:1.5px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--on-accent)}
.mono{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:0 0 .6em}
.small{font-size:14.5px;color:var(--ink2)}
.vh{position:absolute;left:-9999px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:12px;top:-80px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 18px;font:500 14px var(--mono)}.skip:focus-visible{top:12px;color:var(--paper)}
.lede{font:400 clamp(19px,1.7vw,25px)/1.45 var(--serif);color:var(--ink);max-width:40ch;letter-spacing:-.005em}

/* the self-drawing underline used on every navigational link */
.u{position:relative;text-decoration:none;color:inherit}
.u::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='6'%3E%3Cpath d='M0 3q6-4 12 0t12 0' fill='none' stroke='%23e0472b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50%/24px 6px;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.u:hover::after,.u:focus-visible::after,.u[aria-current]::after{transform:scaleX(1)}
.lnk{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--accent-ink);border-bottom:1.5px solid currentColor;padding-bottom:1px}.lnk:hover{color:var(--ink)}
.ar{width:26px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .4s var(--ease)}
a:hover>.ar,a:hover .ar,.btn:hover .ar{transform:translateX(5px)}

/* buttons: ink slab with an accent shadow printed slightly off-register */
.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 22px 13px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);font:600 15px/1.1 var(--sans);text-decoration:none;box-shadow:4px 4px 0 var(--accent);transition:transform .25s var(--ease),box-shadow .25s var(--ease);cursor:pointer;border-radius:2px}
.btn:hover{color:var(--paper);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--accent)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none}.btn.ghost:hover{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--accent)}
.btn[disabled]{opacity:.55;cursor:wait}
.cta-row{display:flex;gap:16px 22px;flex-wrap:wrap;align-items:center;margin:1.6em 0 0}
.pill{display:inline-flex;align-items:center;font:600 13.5px/1 var(--sans);padding:10px 16px 9px;border:2px solid var(--ink);color:var(--ink);text-decoration:none;white-space:nowrap;border-radius:2px;transition:background .25s,color .25s}.pill:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* status stamps */
.bd{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px 5px;border:1.5px solid var(--ink);color:var(--ink);transform:rotate(-1.6deg);border-radius:2px;white-space:nowrap}
.bd.dev{border-style:dashed}.bd.fut{border-style:dotted;color:var(--ink2);border-color:var(--ink2)}.bd.conf{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ---------- 3. chrome ---------- */
.hd{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1.5px solid var(--ink)}
.hd::before{content:'';position:absolute;inset:0;background:var(--grain);pointer-events:none}
.hd-in{position:relative;display:flex;align-items:center;gap:clamp(12px,2vw,28px);width:min(var(--max),100% - 2*var(--gut));margin:0 auto;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);line-height:1;white-space:nowrap}
.brand-mark{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;flex:none}
.brand-tab{stroke:var(--accent);transition:transform .6s cubic-bezier(.34,1.8,.5,1)}.brand:hover .brand-tab{transform:translate(8px,-8px)}
.brand b{font:600 15px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;transition:letter-spacing .5s var(--ease)}.brand:hover b{letter-spacing:.24em}
.pn{margin-left:auto;display:none}
.pn ul{display:flex;gap:clamp(14px,1.9vw,28px);list-style:none;margin:0;padding:0}
.pn a{font:500 13px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:8px 0;display:inline-block;color:var(--ink)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.pn+.hd-r{margin-left:0}
.hd-r .pill{display:none}
.idxbtn{display:inline-flex;align-items:center;gap:10px;font:600 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:10px 12px 9px 14px;cursor:pointer;border-radius:2px}
.idxbtn:hover{background:var(--ink);color:var(--paper)}
.bars{display:grid;gap:4px;width:20px}.bars i{display:block;height:2px;background:currentColor;transition:transform .35s var(--ease),opacity .2s;transform-origin:center}
.bars i:nth-child(2){width:70%;justify-self:end}
.idxbtn[aria-expanded=true] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}.idxbtn[aria-expanded=true] .bars i:nth-child(2){opacity:0}.idxbtn[aria-expanded=true] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.iconbtn{display:grid;place-items:center;width:42px;height:42px;background:transparent;border:2px solid transparent;color:var(--ink);cursor:pointer;border-radius:2px}.iconbtn:hover{border-color:var(--ink)}
.ti-sun{display:none}html[data-theme=dark] .ti-sun{display:block}html[data-theme=dark] .ti-moon{display:none}

/* the index: a full-page table of contents */
.idx{position:fixed;inset:0;z-index:90;background:var(--paper) var(--grain);overflow:auto;overscroll-behavior:contain}
.idx[hidden]{display:none}
.idx-in{width:min(1240px,100% - 2*var(--gut));margin:0 auto;padding:20px 0 56px}
.idx-top{display:flex;justify-content:space-between;align-items:center;min-height:50px;border-bottom:1.5px solid var(--ink);margin-bottom:10px}.idx-top .mono{margin:0}
.idx-x{font:600 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;background:none;border:2px solid var(--ink);color:var(--ink);padding:9px 14px;cursor:pointer;border-radius:2px}.idx-x:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.idx-list{list-style:none;margin:0;padding:0}
.idx-item{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px 0 18px;border-bottom:1.5px solid var(--ink);break-inside:avoid}
.idx-item .n{font:500 13px var(--mono);color:var(--accent-ink);padding-top:12px}
.idx-t{display:inline-flex;align-items:center;gap:clamp(12px,2vw,22px);font:400 clamp(32px,5.4vw,64px)/1 var(--serif);letter-spacing:-.025em;text-decoration:none;color:var(--ink)}
.idx-t .gy{width:clamp(34px,4.4vw,54px);height:auto;flex:none;transition:transform .5s var(--ease)}
.idx-t:hover,.idx-t:focus-visible{color:var(--accent-ink)}.idx-t:hover .gy{transform:rotate(-12deg) scale(1.12)}
.idx-m p{margin:6px 0 0;color:var(--ink2);font-size:15px}
.idx-sub{display:flex;flex-wrap:wrap;gap:4px 16px;list-style:none;margin:10px 0 0;padding:0}.idx-sub a{font:500 12.5px var(--mono);letter-spacing:.03em;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--rule)}.idx-sub a:hover{border-color:var(--accent);color:var(--accent-ink)}
.idx-foot{margin:28px 0 0}
.idx:not([hidden]) .idx-item{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0)*60ms)}
body.idx-open{overflow:hidden}
@media (min-width:1000px){.idx-list{columns:2;column-gap:64px}.idx-item:first-child{border-top:0}}

.ft{position:relative;background:var(--paper2);border-top:1.5px solid var(--ink);margin-top:0}
.ft-art{width:min(var(--max),100%);margin:0 auto;padding:28px var(--gut) 0;transform:translateY(1px)}.ft-art .il{height:clamp(60px,9vw,120px);width:100%;overflow:visible}
.ft-in{width:min(var(--max),100% - 2*var(--gut));margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(28px,5vw,72px);padding:clamp(30px,4vw,56px) 0 36px;border-top:1.5px solid var(--ink)}
.ft-h{font:400 clamp(28px,3.2vw,44px)/1.02 var(--serif);letter-spacing:-.02em;margin:22px 0 14px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.ft a{color:var(--ink);text-decoration:none;font-weight:500}
.ft nav .mono{margin-bottom:14px}
.ft-end{width:min(var(--max),100% - 2*var(--gut));margin:0 auto;padding:16px 0 28px;border-top:1px solid var(--rule)}

/* ---------- 4. homepage: nine plates, like the pages of an illustrated publication ---------- */
.hero{position:relative;display:grid;overflow:hidden}
.hero-copy{position:relative;z-index:2;grid-area:1/1;align-self:start;width:min(var(--max),100% - 2*var(--gut));margin:0 auto;padding:clamp(28px,6vh,72px) 0 0;pointer-events:none}
.hero-copy a{pointer-events:auto}
.kick{margin:0 0 clamp(16px,3vh,28px)}
.hero h1{font:400 clamp(44px,7.2vw,118px)/.94 var(--serif);letter-spacing:-.035em;text-wrap:balance}
@media (min-width:640px){.hero h1{white-space:nowrap}}
.hero h1 em{font-style:italic;font-weight:400;position:relative;display:inline-block;color:var(--accent-ink)}
.uline{position:absolute;left:0;right:0;bottom:-.06em;width:100%;height:.2em;overflow:visible}.uline path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sub{font:400 clamp(18px,1.9vw,27px)/1.35 var(--serif);max-width:25ch;margin:clamp(18px,3vh,32px) 0 0;color:var(--ink)}
.hero-art{grid-area:1/1;align-self:end;width:100%;max-width:1680px;margin:0 auto;position:relative;z-index:1;min-height:0}
.hero-il{display:block;width:100%;height:auto}
.hero-hint{position:absolute;z-index:3;right:var(--gut);top:clamp(24px,5vh,64px);margin:0;writing-mode:vertical-rl;display:none}
@media (min-width:900px){.hero{min-height:calc(100svh - 68px)}.hero-hint{display:block}}
@media (max-width:899px){.hero{display:block}.hero-copy{pointer-events:auto;padding-bottom:6px}.hero-art{margin-top:-4%;}}
@media (min-width:900px) and (max-width:1199px){.hero-art{transform:translateY(8%)}}

.pl{position:relative;background-color:var(--paper);padding:clamp(70px,9vw,128px) 0 clamp(64px,8vw,112px);--edge:var(--paper)}
.pl::before{content:'';position:absolute;left:0;right:0;top:0;height:16px;transform:translateY(-99%);background:inherit;background-image:none;background-color:var(--edge);-webkit-mask:var(--tear) left bottom/640px 16px repeat-x;mask:var(--tear) left bottom/640px 16px repeat-x;--tear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='16' viewBox='0 0 640 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V8L17 6L35 4L48 5L65 4L91 7L103 5L121 11L134 7L147 11L159 5L174 4L195 11L207 7L219 6L235 11L249 5L270 9L290 6L303 7L320 5L340 5L361 4L382 7L401 11L425 10L444 12L461 9L476 6L499 7L512 9L532 12L558 10L581 12L597 5L610 11L624 10L638 12L640 8V16z'/%3E%3C/svg%3E")}
.pl-clinic,.pl-keep,.pl-eco{background-color:var(--paper2);--edge:var(--paper2)}
.pl.inv{--edge:var(--bg)}
.pl-head{display:flex;justify-content:space-between;gap:16px;width:min(var(--max),100% - 2*var(--gut));margin:0 auto clamp(32px,5vw,64px);padding-bottom:12px;border-bottom:1.5px solid var(--ink)}
.pl-head span{margin:0;font:500 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.pl-head span:nth-child(2){color:var(--ink)}
.pl-in{width:min(var(--max),100% - 2*var(--gut));margin:0 auto}
.pl-t{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.pl-t h2{font:400 clamp(36px,5.8vw,92px)/.98 var(--serif);letter-spacing:-.03em}
.pl-t .lede{margin:0;font-size:clamp(17px,1.5vw,22px);max-width:34ch}
.note-i{margin-top:28px;max-width:60ch;padding-left:14px;border-left:3px solid var(--accent)}
.badge-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:22px}.badge-row .small{max-width:62ch}
.more{margin:clamp(24px,4vw,44px) 0 0}

/* 02 system */
.sys-wrap{position:relative;margin:0 auto}.sys-wrap .il{width:100%;height:auto}
.sys-wrap .sys-v{display:none;max-width:420px;margin:0 auto}
.sys .hs,.keep-il .hs{cursor:pointer;outline:none}
.sys .hs:focus-visible{outline:none}.sys .hs:focus-visible rect[fill=transparent]{stroke:var(--accent);stroke-width:3;stroke-dasharray:6 6}
.sys .hs:hover .k,.sys .hs.on .k,.sys .hs:focus-visible .k,.sys .hs:hover .k2,.sys .hs.on .k2{stroke:var(--accent-ink)}
.sys .hs:hover .m,.sys .hs.on .m{fill:var(--accent-ink)}
.sys-notes{margin-top:clamp(28px,4vw,56px)}
.sys-steps,.sys-base{display:grid;gap:clamp(18px,3vw,40px);list-style:none;margin:0;padding:0}
.sys-steps{grid-template-columns:repeat(4,1fr)}.sys-base{grid-template-columns:repeat(3,1fr);margin-top:clamp(28px,4vw,48px)}
.sys-steps li,.sys-base li{border-top:2px solid var(--ink);padding-top:14px;transition:border-color .3s}
.sys-steps h3,.sys-base h3{font-size:clamp(22px,2vw,30px);margin-bottom:8px;transition:color .3s}
.sys-steps p,.sys-base p{font-size:15.5px;color:var(--ink2);margin-bottom:.8em}
.sys-notes li.on{border-color:var(--accent)}.sys-notes li.on h3{color:var(--accent-ink)}
.sys-steps{counter-reset:s}.sys-steps li{counter-increment:s}.sys-steps h3::before{content:counter(s,decimal-leading-zero);display:block;font:500 12px var(--mono);color:var(--accent-ink);margin-bottom:8px}

/* 03 clinic */
.clinic{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:start}
.probs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px) clamp(8px,1.4vw,22px);list-style:none;margin:0;padding:0}
.probs li:nth-child(4n+2){transform:translateY(22px)}.probs li:nth-child(4n+4){transform:translateY(14px)}
.prob{display:block;padding:8px 4px 12px;border-bottom:2px solid var(--ink);color:var(--ink);text-decoration:none;position:relative;transition:border-color .3s}
.prob .il{width:100%;transition:transform .5s var(--ease)}
.prob:hover .il,.prob:focus-visible .il{transform:rotate(-3deg) translateY(-5px)}
.prob .pt{display:block;font:500 clamp(16px,1.55vw,22px)/1.1 var(--serif);margin-top:8px}
.prob.on{border-color:var(--accent)}.prob.on .pt{color:var(--accent-ink)}.prob.on .il{transform:translateY(-6px) scale(1.04)}
.slip{position:sticky;top:96px;background:var(--paper);padding:30px 30px 26px;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--accent);transform:rotate(.5deg);min-height:340px}
.slip::before{content:'';position:absolute;inset:7px;border:1px dashed var(--ink2);pointer-events:none}
.slip-h{font:400 clamp(22px,2.2vw,32px)/1.12 var(--serif);letter-spacing:-.015em;margin:0 0 18px}
.slip-a{margin:0 0 16px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}.slip-a .mono{margin:0}
.slip-p:not([hidden]){animation:rise .5s var(--ease)}
.slip .tk{margin-bottom:12px}

/* 04 foundry */
.journey{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,2vw,30px);list-style:none;margin:0;padding:0}
.journey li{position:relative}
.journey .jn{position:absolute;left:0;top:0;margin:0;color:var(--accent-ink)}
.journey .il{width:100%;height:auto;margin-top:8px;transition:transform .5s var(--ease)}
.journey li:hover .il{transform:translateY(-6px) rotate(-1.5deg)}
.journey h3{font-size:clamp(22px,2.2vw,32px);margin:6px 0 8px;border-top:2px solid var(--ink);padding-top:12px}
.journey p{font-size:15px;color:var(--ink2);max-width:26ch}
.journey li:nth-child(2) .il{margin-top:0}.journey li:nth-child(3) .il{margin-top:-8px}.journey li:nth-child(4) .il{margin-top:-14px}.journey li:nth-child(5) .il{margin-top:-20px}
.jline{display:block;width:100%;height:30px;margin:clamp(12px,2vw,28px) 0 clamp(20px,3vw,40px);overflow:visible}.jline path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.fnd-links,.keep-list,.soc-list,.eco-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}

/* 05 programmes */
.prog-g h3.mono{margin:clamp(8px,2vw,24px) 0 clamp(16px,2vw,28px);padding-bottom:10px;border-bottom:1.5px solid var(--ink)}
.emb-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,48px);list-style:none;margin:0 0 clamp(36px,5vw,64px);padding:0}
.emb-row li:nth-child(4n+2){transform:translateY(clamp(8px,2vw,28px))}.emb-row li:nth-child(4n+3){transform:translateY(clamp(2px,.8vw,10px))}.emb-row li:nth-child(4n+4){transform:translateY(clamp(12px,3vw,40px))}
.emb{display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:var(--ink);text-decoration:none}
.emb .il{width:100%;max-width:240px;height:auto;transition:transform .5s var(--ease)}
.emb:hover .il,.emb:focus-visible .il{transform:rotate(-3deg) translateY(-6px) scale(1.04)}
.emb:hover .il .ka,.emb:focus-visible .il .ka{stroke-width:4}
.emb .en{font:500 clamp(21px,2.1vw,30px)/1.05 var(--serif);margin-top:6px;letter-spacing:-.02em}
.emb .ed{margin:0}

/* index rows: the shared pattern for every list of destinations */
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.row{display:grid;grid-template-columns:auto minmax(64px,112px) minmax(0,1fr) auto;gap:clamp(12px,2.4vw,34px);align-items:center;padding:clamp(14px,2vw,24px) 0;border-bottom:1.5px solid var(--ink);color:var(--ink);text-decoration:none;position:relative;transition:background .3s,padding .4s var(--ease)}
.row.slim{grid-template-columns:auto minmax(0,1fr) auto}
.row:hover,.row:focus-visible{background:var(--paper2);padding-left:14px;padding-right:10px}
.pl-clinic .row:hover,.pl-keep .row:hover,.pl-eco .row:hover{background:var(--paper3)}
.row .n{margin:0;color:var(--accent-ink);min-width:2.2em}
.row .rg{display:block}.row .rg .il{width:100%;height:auto;max-height:112px;transition:transform .5s var(--ease)}.row:hover .rg .il{transform:rotate(-4deg) scale(1.05)}
.row .rt{display:grid;gap:5px;justify-items:start}
.row .rt b{font:500 clamp(22px,2.6vw,38px)/1.05 var(--serif);letter-spacing:-.02em}
.row .rt>span:not(.bd):not(.tag){color:var(--ink2);font-size:clamp(15px,1.2vw,17px);max-width:58ch}
.row .tag{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);border-bottom:1.5px dashed var(--accent)}
.go{display:grid;place-items:center;width:46px;height:46px;border:1.5px solid var(--ink);border-radius:50%;flex:none;transition:background .3s,border-color .3s,color .3s}
.row:hover .go,.entries a:hover .go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.keep-list li.on .row,.soc-list li.on .row,.eco-list li.on .row{background:var(--paper2)}
.keep-list li.on .go,.soc-list li.on .go,.eco-list li.on .go{background:var(--accent);border-color:var(--accent)}

/* 06 keep */
.keep-wrap{margin:0 0 clamp(26px,4vw,48px);border:1.5px solid var(--ink);background:var(--paper)}.keep-wrap .il{width:100%;height:auto}
.keep-il .hs:hover .k,.keep-il .hs:focus-visible .k{stroke:var(--accent-ink)}
.keep-il .hot circle{transition:fill .3s}.keep-il .hs:hover~.hot circle,.keep-il .hot:hover circle{fill:var(--accent)}
.keep-il .hs:focus-visible{outline:3px solid var(--accent)}
.stages{margin-top:clamp(40px,6vw,80px)}.stages h3.mono{margin-bottom:18px;padding-bottom:10px;border-bottom:1.5px solid var(--ink)}
.stages-art .il{width:100%;height:auto}
.stages-cap{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,2vw,28px);list-style:none;margin:8px 0 0;padding:0;counter-reset:z}
.stages-cap li{font-size:15px;line-height:1.35;border-top:2px solid var(--ink);padding-top:10px}.stages-cap .mono{display:block;color:var(--accent-ink);margin-bottom:6px}

/* 07 society */
.soc-wrap{margin:0 0 clamp(24px,4vw,44px)}.soc-wrap .il{width:100%;height:auto}
.soc-il .edge{transition:stroke .3s,opacity .3s,stroke-width .3s}.soc-il .edge.x{stroke-dasharray:3 7}
.soc-il .edge.hot{stroke:var(--accent);opacity:1;stroke-width:2.4}
.soc-il .node{cursor:pointer}.soc-il .node .pp{transition:transform .35s var(--ease)}.soc-il .node.hot .pp,.soc-il .node:hover .pp{transform:translateY(-6px)}
.soc-il .hubl{cursor:pointer;outline:none}.soc-il .hubl:hover .k,.soc-il .hubl:focus-visible .k{stroke:var(--accent-ink)}
.soc-il .hubl:focus-visible rect{stroke:var(--accent);stroke-width:3;stroke-dasharray:6 6}

/* 08 ecosystem */
.eco-wrap{margin:0 0 clamp(24px,4vw,44px)}.eco-wrap .il{width:100%;height:auto}
.eco-il .terr{cursor:pointer;outline:none}.eco-il .terr .fs{transition:fill .35s}.eco-il .terr:hover .fs,.eco-il .terr:focus-visible .fs,.eco-il .terr.on .fs{fill:var(--paper3)}
.eco-il .terr:hover .k,.eco-il .terr:focus-visible .k,.eco-il .terr.on .k{stroke:var(--accent-ink)}
.eco-il .terr:focus-visible .k2{stroke:var(--accent-ink)}
.eco-il .lat{transition:opacity .3s,stroke .3s}.eco-il.act .lat{opacity:1;stroke:var(--accent)}
.eco-il .flow{animation:flow 2.4s linear infinite}
.eco-il .num{fill:var(--ink);stroke:none;font-size:20px}
/* 09 closing */
.pl-close .pl-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:center}
.close-art{margin:0;transform:rotate(-1.4deg)}
.close-t h2{font:400 clamp(40px,7vw,112px)/.95 var(--serif);letter-spacing:-.035em;margin-bottom:.4em}
.close-t .lede{max-width:28ch}

/* ---------- 6. inner pages ---------- */
.ph{position:relative;border-bottom:1.5px solid var(--ink);background:color-mix(in srgb,var(--accent) 12%,var(--paper2)) var(--grain)}
.ph-in{width:min(var(--max),100% - 2*var(--gut));margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(24px,4vw,56px) 0 clamp(28px,4vw,52px)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0 0 clamp(18px,3vw,36px);padding:0;font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.crumbs li+li::before{content:'/';margin-right:8px;color:var(--ink2)}.crumbs a{color:var(--ink2);text-decoration:none;border-bottom:1.5px solid var(--rule)}.crumbs a:hover{color:var(--accent-ink);border-color:var(--accent)}.crumbs [aria-current]{color:var(--ink)}
.folio{color:var(--accent-ink);margin-bottom:12px}
.ph h1{font:400 clamp(42px,7.4vw,112px)/.95 var(--serif);letter-spacing:-.03em;margin:0 0 .3em;hyphens:auto;overflow-wrap:break-word}
.ph .lede{margin:0 0 .6em}
.ph-art{margin:0;transform:rotate(1.2deg);filter:drop-shadow(8px 8px 0 var(--accent))}.ph-art .il{width:100%;height:auto;background:var(--paper)}
.tabs{width:min(var(--max),100% - 2*var(--gut));margin:0 auto;border-top:1.5px solid var(--ink)}
.tabs ul{display:flex;gap:6px clamp(14px,2.4vw,30px);list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:thin}
.tabs a{display:inline-block;padding:14px 0 12px;font:500 12.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
/* each section gets its own paper */
body.sec-get-help .ph{background:var(--paper2) linear-gradient(var(--rule) 1px,transparent 1px) 0 0/100% 34px}
body.sec-programmes .ph{background-color:var(--paper)}
body.sec-programmes .ph::after{content:'';position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(90deg,var(--ink) 0 22px,transparent 22px 44px)}
body.sec-foundry .ph{background-color:var(--surface-2)}

body.sec-keep .ph{background:var(--paper2) linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(var(--rule) 1px,transparent 1px) 0 0/48px 48px}
body.sec-society .ph{background:var(--paper2) radial-gradient(var(--ink2) 1.2px,transparent 1.3px) 0 0/26px 26px}
body.sec-partner .ph{background-color:var(--paper3)}
body.sec-institution .ph{background-color:var(--paper)}

.wrap{width:min(var(--max),100% - 2*var(--gut));margin:0 auto;padding:clamp(28px,4vw,56px) 0 clamp(56px,8vw,112px)}
.content{counter-reset:b}
.blk{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(14px,4vw,64px);padding:clamp(26px,4vw,52px) 0;border-top:2px solid var(--ink)}
.blk.wide{grid-template-columns:minmax(0,1fr)}
.blk h2{font:400 clamp(26px,2.8vw,40px)/1.05 var(--serif);letter-spacing:-.02em;align-self:start;position:sticky;top:92px}
.blk h2::before{counter-increment:b;content:counter(b,decimal-leading-zero);display:block;font:500 12px var(--mono);letter-spacing:.08em;color:var(--accent-ink);margin-bottom:10px}
.blk.wide h2{position:static;margin-bottom:clamp(14px,2vw,28px)}
.blk h2.vh{position:absolute}.blk h2.vh::before{display:none}
.bdy p{max-width:62ch;font-size:clamp(17px,1.35vw,20px);line-height:1.62}
.bdy>*:last-child{margin-bottom:0}
.tk{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:10px;max-width:64ch}
.tk li{position:relative;padding-left:28px;font-size:clamp(16.5px,1.3vw,19px);line-height:1.5}
.tk li::before{content:'';position:absolute;left:0;top:.5em;width:16px;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 6q4-5 9-2 2 1 5 1M10 1l5 4-5 4' fill='none' stroke='%23e0472b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat}
.note{position:relative;display:grid;gap:4px;margin:0 0 clamp(20px,3vw,36px);padding:16px 20px 14px 24px;background:var(--paper);border:1.5px solid var(--ink);border-left:6px solid var(--accent);max-width:80ch}
.note .mono{margin:0;color:var(--accent-ink)}.note p{margin:0;font-size:16px}
.note.n-future{border-left-style:dashed}.note.n-draft{border-left-color:var(--ink2)}.note.n-info{border-left-color:var(--ink)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;align-items:baseline;margin:0 0 clamp(20px,3vw,36px);padding:18px 22px;max-width:480px;background:var(--paper);border:1.5px dashed var(--ink);transform:rotate(-.5deg)}
.facts dt{margin:0}.facts dd{margin:0;font-weight:500}
.entries{list-style:none;margin:20px 0 0;padding:0;border-top:2px solid var(--ink)}
.entries a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;border-bottom:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font:400 clamp(20px,2.3vw,30px)/1.15 var(--serif);letter-spacing:-.015em;transition:padding .4s var(--ease),background .3s}
.entries a:hover{background:var(--paper2);padding-left:14px;padding-right:10px;color:var(--ink)}
.stones{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:8px}
.stones li{display:flex;gap:16px;align-items:baseline;margin-left:calc(var(--i)*clamp(6px,2.4vw,34px));padding:12px 0 10px;border-bottom:1.5px dotted var(--ink2);font-size:clamp(16.5px,1.3vw,19px)}.stones .mono{margin:0;color:var(--accent-ink)}
.blk-cta{margin:clamp(20px,3vw,36px) 0 0;padding-top:clamp(20px,3vw,36px);border-top:2px solid var(--ink)}
.route{list-style:none;margin:0;padding:0}
.route li{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);gap:18px;align-items:center;padding:12px 0;min-height:76px}
.route li::before{content:'';position:absolute;left:28px;top:-2px;bottom:-2px;border-left:2px dashed var(--ink2)}.route li:first-child::before{top:50%}.route li:last-child::before{bottom:50%}
.route .rn{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;margin:0;border:2px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);font-weight:600;font-size:14px}
.route li:last-child .rn{background:var(--accent);border-color:var(--ink);color:var(--on-accent);font-size:18px}
.route p{margin:0;font-size:clamp(17px,1.4vw,21px);max-width:48ch}
.prin{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.prin li{padding:22px 0 24px;border-top:1.5px solid var(--ink);position:relative}
.prin .pn{display:block;font:italic 400 clamp(46px,5vw,72px)/1 var(--serif);color:transparent;-webkit-text-stroke:1.5px var(--accent);margin-bottom:6px}
.prin h3{font-size:clamp(22px,2.1vw,30px);margin-bottom:8px}.prin p{margin:0;color:var(--ink2);max-width:40ch;font-size:16.5px}
.stairs{list-style:none;margin:0;padding:0}
.stairs li{margin-left:calc(var(--i)*clamp(10px,3.4vw,54px));padding:14px 20px 14px 18px;background:var(--paper2);border-left:3px solid var(--ink);border-bottom:3px solid var(--ink);margin-bottom:-3px;max-width:calc(100% - var(--i)*clamp(10px,3.4vw,54px))}
.stairs .mono{margin:0 0 2px;color:var(--accent-ink)}.stairs p{margin:0;font-size:clamp(16.5px,1.3vw,19px)}
.rooms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(118px,auto);border:4px solid var(--ink);background:var(--paper)}
.rooms li{position:relative;padding:16px 18px;border:1.5px solid var(--ink);display:grid;align-content:start;gap:4px}
.rooms b{font:500 clamp(18px,1.7vw,24px)/1.1 var(--serif)}.rooms span{font-size:14.5px;color:var(--ink2)}
.rooms li::after{content:'';position:absolute;bottom:-3px;left:24px;width:30px;height:5px;background:var(--paper)}
.rooms .r0{grid-column:span 3;grid-row:span 2;background:var(--paper2)}.rooms .r1{grid-column:span 3}.rooms .r2{grid-column:span 3}.rooms .r3{grid-column:span 2}.rooms .r4{grid-column:span 2}.rooms .r5{grid-column:span 2;background:repeating-linear-gradient(45deg,transparent 0 9px,var(--rule) 9px 10px)}
.cap{margin:12px 0 0}
.idxl{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(24px,4vw,64px)}
.idxl li{break-inside:avoid;display:flex;gap:14px;align-items:baseline;padding:12px 0 10px;border-bottom:1.5px dotted var(--ink2);font:400 clamp(18px,1.6vw,23px)/1.25 var(--serif)}.idxl .n{margin:0;color:var(--accent-ink);flex:none}
.nots{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,2vw,22px)}
.nots li{font:400 clamp(24px,3vw,40px)/1.12 var(--serif);letter-spacing:-.02em}
.nots s{position:relative;text-decoration:none;color:var(--ink2)}
.nots s::after{content:'';position:absolute;left:-6px;right:-6px;top:52%;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Cpath d='M0 5C8 1 14 7 22 3S34 5 40 2' fill='none' stroke='%23e0472b' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50%/40px 8px;transform-origin:left;transition:transform .9s .15s var(--ease)}
.js .nots li:not(.in) s::after{transform:scaleX(0)}
.chk{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:64ch}
.chk li{position:relative;padding-left:40px;font-size:clamp(17px,1.35vw,20px)}
.chk li::before{content:'';position:absolute;left:2px;top:.22em;width:22px;height:22px;border:2px solid var(--ink);border-radius:3px 6px 4px 5px;transform:rotate(-3deg)}
.fig{margin:0 0 clamp(24px,4vw,44px)}.fig img,.fig .il{display:block;width:100%;height:auto;border:1.5px solid var(--ink);box-shadow:8px 8px 0 var(--accent);background:var(--paper)}
.fig figcaption{margin:18px 0 0}
.faq{display:grid;border-top:2px solid var(--ink);max-width:900px}
.faq details{border-bottom:1.5px solid var(--ink)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;cursor:pointer;padding:20px 0;font:400 clamp(20px,2.2vw,30px)/1.15 var(--serif);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.pm{position:relative;width:26px;height:26px;flex:none;border:1.5px solid currentColor;border-radius:50%}.pm::before,.pm::after{content:'';position:absolute;left:6px;right:6px;top:11px;height:2px;background:currentColor;transition:transform .35s var(--ease)}.pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq details p{margin:0 0 22px;max-width:62ch;font-size:clamp(17px,1.35vw,19.5px);animation:rise .5s var(--ease)}
.next{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;width:min(var(--max),100% - 2*var(--gut));margin:0 auto clamp(40px,6vw,72px);padding:clamp(24px,4vw,44px) 0 0;border-top:2px solid var(--ink)}
.next h2{font:400 clamp(30px,4.4vw,60px)/1 var(--serif);letter-spacing:-.03em}.next .mono{color:var(--accent-ink)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15.5px}
caption{text-align:left;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);padding-bottom:12px}
th,td{text-align:left;padding:14px 16px 12px 0;border-bottom:1.5px solid var(--ink);vertical-align:baseline}
thead th{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);border-bottom:2px solid var(--ink)}
tbody th{font:500 clamp(18px,1.6vw,22px) var(--serif)}tbody th a{color:var(--ink)}tbody th a:hover{color:var(--accent-ink)}
.div{display:flex;align-items:center;gap:14px;margin:clamp(20px,3vw,40px) 0}.div .wv{flex:1;height:10px}.div .gy{width:34px;height:34px;flex:none}
.wv .k2{fill:none;stroke:var(--ink);stroke-width:1.4}

/* ---------- 7. forms ---------- */
.fm{max-width:780px;padding:clamp(22px,3.6vw,44px);background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--accent);margin:0 0 clamp(24px,3vw,40px)}
.fh{font:400 clamp(26px,3vw,40px)/1.05 var(--serif);margin:0 0 24px}
.field{margin:0 0 24px}.field[hidden]{display:none}
.field label{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.field .opt{color:var(--ink2);text-transform:none;letter-spacing:0}
.hint{margin:-2px 0 8px!important;font-size:14px;color:var(--ink2)}
input[type=text],input[type=email],input[type=url],select,textarea{width:100%;font:400 17px/1.45 var(--sans);color:var(--ink);background:var(--paper2);border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:12px 12px 10px;transition:background .2s,border-color .2s}
textarea{border:1.5px solid var(--ink);border-bottom-width:2px;resize:vertical;min-height:130px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 2l7 6 7-6' fill='none' stroke='%231c1b18' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
html[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 2l7 6 7-6' fill='none' stroke='%23f1e8d6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
input:focus,select:focus,textarea:focus{outline:3px solid var(--accent);outline-offset:2px;background:var(--paper)}
[aria-invalid=true]{border-color:var(--danger)!important;background:var(--danger-bg)}
.ferr{min-height:0;margin:6px 0 0!important;font-size:14px;color:var(--danger);font-weight:500}.ferr:empty{display:none}

.cb{display:flex;gap:14px;align-items:flex-start;cursor:pointer;text-transform:none!important;letter-spacing:0!important;font:400 16px/1.5 var(--sans)!important}
.cb input{appearance:none;width:24px;height:24px;margin:1px 0 0;border:2px solid var(--ink);background:var(--paper2);flex:none;display:grid;place-items:center;border-radius:3px 6px 4px 5px;cursor:pointer}
.cb input:checked{background:var(--accent)}.cb input:checked::after{content:'';width:12px;height:6px;border-left:3px solid var(--on-accent);border-bottom:3px solid var(--on-accent);transform:rotate(-48deg) translate(1px,-1px)}
.cb span{color:var(--ink)}
.esum{margin:0 0 24px;padding:16px 20px;border:1.5px solid var(--danger);border-left-width:6px;background:var(--danger-bg);color:var(--ink)}.esum:focus{outline:3px solid var(--accent)}.esum ul{margin:8px 0 0;padding-left:20px}.esum a{color:var(--ink);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px}.fstat{margin:0!important;font-size:14.5px}.fail{color:var(--danger);font-weight:500}
.fm>.small{margin:18px 0 0}
.rec{position:relative;margin:8px 0 28px;padding:22px 24px;background:var(--paper2);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--accent)}.rec::before{content:'';position:absolute;inset:6px;border:1px dashed var(--ink2);pointer-events:none}
.rec h3{font-size:clamp(22px,2.2vw,30px);margin:0 0 8px}.rec .k{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 8px}.rec ul{margin:10px 0;padding-left:20px}
.ok{padding:28px;background:var(--paper2);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--accent)}.ok h3{font-size:34px;margin:0 0 8px}.ok:focus{outline:3px solid var(--accent)}
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:560px;padding:20px 22px;background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--accent)}.consent p{margin:0 0 14px}.consent .btn+.btn{margin-left:10px;background:transparent;color:var(--ink);box-shadow:none}

/* ---------- 8. illustration system ----------
   Every drawing is built from the same classes. Colour lives here, never in the SVG, so light/dark and inverted sections just work.
   k  ink line      k2 fine line   k3 heavy line   ml  margin line (grey)   ka  accent line   kp  paper line
   fa accent fill   fb beige fill  fs paper-2      fp  paper fill           fg  grey fill      fi  ink fill   fh  hatched fill
   m  mono annotation   route / flow / lat / edge   :  accent paths that connect things */
.il{display:block;overflow:visible;color:var(--ink)}
.hero-il,.keep-il,.sys,.soc-il,.eco-il,.plate-il{overflow:hidden}
.il .k,.il .k2,.il .ml,.il .ka,.il .kp{fill:none;stroke:var(--ink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.il .k2{stroke-width:1.3}.il .k3{stroke-width:2.8}.il .ml{stroke-width:1;stroke:var(--ink2)}.il .ka{stroke:var(--accent)}.il .kp{stroke:var(--paper)}
.il .dash2{stroke-dasharray:3 6}
.il .fa{fill:var(--accent)}.il .fp{fill:var(--paper)}.il .fb{fill:var(--paper3)}.il .fs{fill:var(--paper2)}.il .fg{fill:var(--mute)}.il .fi{fill:var(--ink)}
.il .fh{fill:url(#hatch);color:var(--ink)}
.il path.k.fp,.il path.k2.fp{fill:var(--paper)}.il path.k2.fs{fill:var(--paper2)}.il path.fs.k2{fill:var(--paper2)}.il path.k.fi{fill:var(--ink)}
.il circle.k,.il circle.k2{fill:var(--paper)}.il circle.fa.k2,.il circle.fa{fill:var(--accent)}
.il circle.fi{fill:var(--ink);stroke:none}
.il .m{font:500 12px var(--mono);fill:var(--ink2);letter-spacing:.04em;stroke:none}
.il .m.b{fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.il .num{stroke:none;paint-order:normal}
.il .route{fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.il .flow{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-dasharray:2 9;stroke-linecap:round}
.il .lat{fill:none;stroke:var(--ink2);stroke-width:1;stroke-dasharray:3 7;opacity:.55}
.il .edge{fill:none;stroke:var(--ink2);stroke-width:1.2;opacity:.5}
.il .hit{pointer-events:all}
.il a{color:inherit}
.hero-il .mind{cursor:default}.hero-il .mind .pp{transition:transform .4s var(--ease)}.hero-il .mind:hover .pp{transform:translateY(-8px)}
.hero-il .rt .route{transition:stroke-width .3s}.hero-il .rt.on .route{stroke-width:5.5}
.gy{width:40px;height:40px}
.gl{width:100%;height:auto}

/* ---------- 9. motion: always meaningful, always optional ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes flow{to{stroke-dashoffset:-22}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(26px)}}
@keyframes fly{from{transform:translate(-20px,6px)}to{transform:translate(40px,-10px)}}
.il .bob{animation:bob 3.4s ease-in-out infinite;animation-delay:var(--b,0s)}
.il .drift{animation:drift 22s ease-in-out infinite alternate}
.il .fly{animation:fly 14s ease-in-out infinite alternate}
.js [data-rv]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.js [data-rv].in{opacity:1;transform:none}
.js .journey[data-rv],.js .probs>li[data-rv],.js .emb-row>li[data-rv]{transition-delay:calc(var(--i,0)*70ms)}
.js .probs li:nth-child(4n+2)[data-rv].in{transform:translateY(22px)}.js .probs li:nth-child(4n+4)[data-rv].in{transform:translateY(14px)}
.js .emb-row li:nth-child(4n+2)[data-rv].in{transform:translateY(clamp(8px,2vw,28px))}.js .emb-row li:nth-child(4n+3)[data-rv].in{transform:translateY(clamp(2px,.8vw,10px))}.js .emb-row li:nth-child(4n+4)[data-rv].in{transform:translateY(clamp(12px,3vw,40px))}
/* hand-drawn lines draw themselves when their drawing scrolls into view */
.js .draw,.js .uline path{stroke-dasharray:1;stroke-dashoffset:1}
.js .draw.dash2{stroke-dasharray:3 6;stroke-dashoffset:0;opacity:0;transition:opacity 1s}
.js .in .draw,.js .draw.in,.js .hero .draw{animation:draw 1.5s var(--ease) forwards;animation-delay:calc(var(--d,0)*.22s + .2s)}
.js .in .draw.dash2{opacity:1;animation:none}
.js .in .uline path,.js .hero .uline path{animation:draw 1.1s .6s var(--ease) forwards}.js .uline path.d2{animation-delay:.9s}
.js .hero [data-rv]{transform:none}

/* safety net: if the script never loads, show everything */
.no-rv [data-rv]{opacity:1!important;transform:none!important}.no-rv .draw,.no-rv .uline path{stroke-dashoffset:0!important}.no-rv .draw.dash2{opacity:1!important}
.keep-il .hs.on .k,.keep-il .hs.on .k2{stroke:var(--accent-ink)}.keep-il .hot.on circle{fill:var(--accent)}

/* ---------- 10. responsive ---------- */
@media (min-width:1100px){.pn{display:block}.hd-r .pill{display:inline-flex}}
@media (max-width:1099px){.hd-in{justify-content:space-between}.hd-r{margin-left:auto}}
@media (max-width:1000px){
  .sys-steps{grid-template-columns:repeat(2,1fr)}.sys-base{grid-template-columns:1fr 1fr 1fr}
  .clinic{grid-template-columns:1fr}.slip{position:relative;top:0;transform:none}
  .journey{grid-template-columns:repeat(3,1fr)}
  .stages-cap{grid-template-columns:repeat(3,1fr)}
  .pl-close .pl-in{grid-template-columns:1fr}.close-art{max-width:460px}
  .ph-in{grid-template-columns:1fr}.ph-art{max-width:520px}
}
@media (max-width:760px){
  .pl-t{grid-template-columns:1fr}
  .sys-wrap .sys-h{display:none}.sys-wrap .sys-v{display:block}
  .sys-base{grid-template-columns:1fr}.sys-steps{grid-template-columns:1fr}
  .probs{grid-template-columns:repeat(2,1fr)}.probs li:nth-child(n){transform:none!important}
  .journey{grid-template-columns:1fr;gap:0}
  .journey li{display:grid;grid-template-columns:112px 1fr;column-gap:16px;align-items:center;padding:14px 0 14px;border-top:1.5px solid var(--rule);position:relative}
  .journey li::before{content:'';position:absolute;left:56px;top:-10px;height:10px;border-left:2px dashed var(--accent)}.journey li:first-child::before{display:none}
  .journey .jn{position:static;grid-column:2;grid-row:1}.journey .il{grid-column:1;grid-row:1/4;margin:0!important}.journey h3{grid-column:2;border:0;padding:0;margin:0}.journey p{grid-column:2;margin:4px 0 0}
  .jline{display:none}
  .emb-row{grid-template-columns:repeat(2,1fr)}.emb-row li:nth-child(n){transform:none!important}
  .keep-il .dsk,.soc-il .dsk,.eco-il .dsk{display:none}.eco-il .num{font-size:30px}
  .stages-cap{grid-template-columns:1fr 1fr}.stages-art{overflow:hidden}
  .row{grid-template-columns:auto minmax(0,1fr) auto;row-gap:8px}.row .rg{grid-column:2;grid-row:1;max-width:100px}.row .n{grid-row:1}.row .rt{grid-column:2;grid-row:2}.row .go{grid-column:3;grid-row:1/3;width:40px;height:40px}
  .row.slim .rt{grid-row:1;grid-column:2}.row.slim .go{grid-row:1}
  .blk{grid-template-columns:1fr}.blk h2{position:static}
  .prin{grid-template-columns:1fr}.idxl{columns:1}
  .rooms{grid-template-columns:1fr 1fr}.rooms .r0,.rooms .r1,.rooms .r2,.rooms .r3,.rooms .r4,.rooms .r5{grid-column:span 2;grid-row:auto}
  .ft-in{grid-template-columns:1fr 1fr}.ft-b{grid-column:1/-1}
  .hd-in{min-height:60px}.brand b{font-size:13px}.idxbtn{padding:9px 10px 8px 12px}
  .slip{padding:24px 22px}
  .route li{grid-template-columns:48px minmax(0,1fr)}.route .rn{width:48px;height:48px}.route li::before{left:23px}
}
@media (max-width:420px){.btn{padding:13px 16px 12px}.cta-row{gap:14px}.hd-r{gap:4px}.iconbtn{width:38px}.brand-mark{width:26px;height:26px}.idxbtn span:first-child{display:none}.idxbtn{padding:11px}}

/* respect reduced motion: everything is drawn, nothing moves */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-rv]{opacity:1!important;transform:none!important}
  .js .draw,.js .uline path{stroke-dashoffset:0!important}.js .draw.dash2{opacity:1!important}
  .js .nots li:not(.in) s::after{transform:none}
}
@media print{.hd,.idx,.ft-art,.skip{display:none!important}body{background:#fff}}

/* ==========================================================================
   11. Colour: a controlled set of muted accents, one per area of SPLIT
   Every drawing and link already reads --accent / --accent-ink, so setting them on a
   section recolours its illustrations, shadows, links and badges at once.
   ========================================================================== */
/* inner pages take the colour of their area */

.emb .il .fb{fill:color-mix(in srgb,var(--accent) 24%,var(--paper))}
.emb:hover .il .k{stroke:var(--accent-ink)}

/* ---------- system diagram: reveal tip ---------- */
.sys-tip{position:absolute;left:2%;top:15%;width:min(34%,380px);padding:14px 16px 13px;background:var(--paper);border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--accent);display:flex;flex-direction:column;gap:4px;transform:rotate(-.6deg)}
.sys-tip .mono{margin:0;color:var(--ink2)}.sys-tip b{font:400 22px/1.1 var(--serif);color:var(--accent-ink)}.sys-tip span:not(.mono){font-size:15px;line-height:1.45}
@media (max-width:760px){.sys-tip{position:static;width:auto;margin:14px 0 0}}

/* ---------- 12. clean illustration colour: a second accent per area, tinted fills ---------- */

.il .fg{fill:var(--accent2)}
.il .fb{fill:color-mix(in srgb,var(--accent) 30%,var(--paper))}
.il .k,.il .k2,.il .k3{stroke-width:2.4}.il .k2{stroke-width:1.6}.il .k3{stroke-width:3}
.il .fc-ochre{fill:color-mix(in srgb,var(--my) 55%,var(--paper))}.il .fc-sage{fill:color-mix(in srgb,var(--mg) 60%,var(--paper))}.il .fc-blue{fill:color-mix(in srgb,var(--mb) 45%,var(--paper))}.il .fc-terra{fill:color-mix(in srgb,var(--mr) 40%,var(--paper))}
.il .fc-plum{fill:color-mix(in srgb,var(--mp) 55%,var(--paper))}.il .fc-teal{fill:color-mix(in srgb,var(--mb) 30%,var(--paper))}


/* ==========================================================================
   11. Doodles: the pen, the markers, the lettering. assets/js/doodle.js inks them.
   ========================================================================== */


.dk{--dc:var(--ink);fill:none;stroke:var(--dc);stroke-linecap:round;stroke-linejoin:round}
.dk.ok{fill:var(--dc);stroke:none}
.dk.kq{--dc:var(--dq)}.dk.ka{--dc:var(--accent)}.dk.kp{--dc:var(--paper)}
.dp{fill:var(--paper)}
.dop{fill:var(--ink)}
.dop.dh{fill:var(--hl);stroke:var(--ink);stroke-width:1.6}
.dw{fill:var(--hl);stroke:var(--ink);stroke-width:1.5}
.dpu{fill:var(--text)}
.dop.dgl{fill:none;stroke:var(--ink);stroke-width:1.7}
.dop.dtg{fill:var(--accent)}
.dop.dcol.mrf{fill:var(--mr)}.dop.dcol.myf{fill:var(--my)}.dop.dcol.mbf{fill:var(--mb)}.dop.dcol.mgf{fill:var(--mg)}.dop.dcol.mpf{fill:var(--mp)}
.dm{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.dm.my{stroke:var(--my)}.dm.mb{stroke:var(--mb)}.dm.mp{stroke:var(--mp)}.dm.mg{stroke:var(--mg)}.dm.mr{stroke:var(--mr)}
.hw{font-family:'Gaegu',cursive;font-weight:700;fill:var(--ink);letter-spacing:-.01em}
.hw.ha{fill:var(--accent-ink)}.hw.hd{fill:var(--text)}
.dfl>g:not(:first-child){display:none}
html.dj svg.il:not(.dr) .dk{visibility:hidden}
html.dj .il .dm:not(.on){stroke-dashoffset:1;visibility:hidden}
.dm.on{transition:stroke-dashoffset .55s linear}
html.dj .il .dop:not(.on),html.dj .il .dey:not(.on){visibility:hidden}
html.dj .il .hw:not(.on){clip-path:inset(-20% 100% -20% -2%)}
.hw.on{clip-path:inset(-20% -2% -20% -2%);transition:clip-path .7s steps(16)}

/* 12. doodle layout */
.wk{position:absolute;left:0;bottom:-1.5px;width:46px;height:46px;pointer-events:none;will-change:transform;z-index:2}
.wk .il{width:46px;height:46px;overflow:visible}.wk .wf{display:none}.wk .wf:first-child{display:inline}
.hero-hint,.jline{display:none}
.close-art{transform:none}


@keyframes jig{0%,100%{transform:none}33%{transform:rotate(-1.1deg) translateY(-3px)}66%{transform:rotate(.9deg) translateY(-1px)}}
.prob:hover .il{transform:none;animation:jig .5s steps(3) 1}

.sys .hs:hover .dk,.sys .hs.on .dk,.sys .hs:focus-visible .dk,.keep-il .hs:hover .dk,.keep-il .hs.on .dk,.keep-il .hs:focus-visible .dk,.soc-il .hubl:hover .dk,.soc-il .hubl:focus-visible .dk,.eco-il .terr:hover .dk,.eco-il .terr.on .dk,.eco-il .terr:focus-visible .dk{--dc:var(--accent-ink)}
.soc-il .hw,.eco-il .hw,.keep-il .hw{paint-order:stroke;stroke:var(--paper);stroke-width:6px;stroke-linejoin:round}
.soc-il .edge{stroke-width:1.6;stroke-linecap:round;opacity:.5}.soc-il .edge.x{stroke-dasharray:2 7}
.eco-il .num{font-size:34px;fill:var(--accent-ink)}

@media (max-width:700px){.hero-il{width:178%;margin-left:-72%}}
@media (prefers-reduced-motion:reduce){.prob:hover .il{animation:none}.wk{display:none}}

/* 13. doodle fixes */
.wk,.wk .il{width:28px;height:28px}.wk{z-index:0}.hd-in{position:relative;z-index:1}

/* 14. phone hero and dark links */
@media (max-width:700px){.hero-il{max-width:none}}
@media (max-width:700px){.hero-il .nph{visibility:hidden}}


/* ==========================================================================
   15. Refinement layer (v4): surfaces, disclosure components, interaction states.
   One accent (burnt orange), one secondary (brass). No per-section colour.
   ========================================================================== */
.pl-a{--card:var(--surface);--edge:var(--bg);background-color:var(--bg)}
.pl-b{--card:var(--bg);--edge:var(--surface);background-color:var(--surface)}
html[data-theme=dark] .pl-b{--card:var(--surface-2)}
.pl-a .pl-in,.pl-b .pl-in{position:relative}
.pl.pl-close{--card:var(--surface-2)}
[hidden]{display:none!important}
.lede-s{font:400 clamp(19px,1.6vw,24px)/1.4 var(--serif);max-width:46ch;margin:0 0 1em;color:var(--text)}

/* borders: structural lines are quieter than ink */
.pl-head,.idx-item,.ft,.ft-in{border-color:var(--border-strong)}
.pl-t{margin-bottom:clamp(24px,3.4vw,44px)}
.pl-t .lede{color:var(--text-2)}

/* --- trigger (shared) --- */
.rv-t,.prob{cursor:pointer;-webkit-tap-highlight-color:transparent}
.rv-t{appearance:none;font:inherit;color:var(--text);text-align:left;background:var(--card);border:1.5px solid var(--border-strong);border-radius:3px;padding:0;margin:0;width:100%;
  transition:transform .25s var(--ease),border-color .2s,background-color .2s,box-shadow .25s var(--ease)}
.rv-t:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 0 -3px var(--accent)}
.rv-t:active{transform:translateY(0);box-shadow:none}
.rv-t:focus-visible,.prob:focus-visible,.chip:focus-visible,.rv-x:focus-visible,.split-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.rv-t[disabled],.rv-t[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.rv-t.on{background:var(--sel-bg);color:var(--sel-text);border-color:var(--sel-bg);transform:none;box-shadow:none}
.rv-t.on .mono,.rv-t.on .nd-s{color:inherit}
.rv-t[data-linked]:not(.on){border-style:dashed;border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}
.nd-i{position:relative;flex:none;width:18px;height:18px;margin-left:auto}
.nd-i::before,.nd-i::after{content:'';position:absolute;left:1px;right:1px;top:8px;height:2px;background:currentColor;transition:transform .3s var(--ease)}
.nd-i::after{transform:rotate(90deg)}
.rv-t.on .nd-i::after,.rv-t[aria-expanded=true] .nd-i::after{transform:rotate(0)}

/* --- panel (shared) --- */
.rv-stage{margin-top:clamp(16px,2vw,26px)}
.rv-idle{margin:0;padding:18px 0 4px;color:var(--text-2);font:italic 400 clamp(17px,1.5vw,20px)/1.4 var(--serif);border-top:1.5px dashed var(--border-strong)}
.rv-p{position:relative;background:var(--card);border:1.5px solid var(--border-strong);border-top:4px solid var(--accent);padding:clamp(20px,3vw,40px);padding-right:clamp(56px,6vw,72px);outline:none;border-radius:3px}
.rv-p:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.rv-p h3{font-size:clamp(28px,3.6vw,48px);margin:2px 0 12px}
.rv-p .mono{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rv-p.slim h3{font-size:clamp(24px,2.8vw,36px)}
.rv-x{position:absolute;right:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--text-2);cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}
.rv-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.rv-x:hover{background:var(--surface-3);color:var(--text)}
@media (prefers-reduced-motion:no-preference){.rv-on .rv-p:not([hidden]){animation:rvIn .35s var(--ease) both}@keyframes rvIn{from{opacity:0;transform:translateY(8px)}}}

.fx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px;margin:0 0 6px;padding:18px 0 0;border-top:1px solid var(--border)}
.fx>div{min-width:0}.fx dt{margin:0 0 6px}.fx dd{margin:0;font-size:16px;line-height:1.55;color:var(--text)}
.fx .tk{margin:0}
@media (max-width:700px){.fx{grid-template-columns:1fr}}
.chip{appearance:none;font:600 13.5px/1 var(--sans);color:var(--text);background:transparent;border:1.5px solid var(--border-strong);border-radius:999px;padding:9px 14px 8px;margin:0 6px 6px 0;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--accent);color:var(--accent-text)}.chip:active{background:var(--surface-3)}

/* --- the six-part map and the builder's path --- */
.map-n,.path-n{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.4vw,18px)}
.map-n{grid-template-columns:repeat(3,minmax(0,1fr))}
.path-n{grid-template-columns:repeat(3,minmax(0,1fr))}
.map-n .rv-t{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:clamp(16px,2vw,26px);min-height:clamp(120px,12vw,168px);position:relative}
.map-n .rv-t b{font:400 clamp(24px,2.4vw,34px)/1.05 var(--serif);letter-spacing:-.015em}
.map-n .nd-s{font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.map-n .rv-t .mono{margin:0}
.map-n .nd-i,.path-n .nd-i{position:absolute;right:16px;top:16px}
.path-n .rv-t{display:flex;gap:14px;align-items:baseline;padding:16px 18px;min-height:64px}
.path-n .rv-t b{font:400 clamp(19px,1.7vw,24px)/1.2 var(--serif)}.path-n .rv-t .mono{margin:0}
@media (max-width:899px){.map-n,.path-n{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.map-n,.path-n{grid-template-columns:1fr}.map-n .rv-t{min-height:0}}

/* --- Split Interface --- */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;margin:0 0 clamp(36px,5vw,72px);padding:0 0 clamp(28px,4vw,56px);border-bottom:1px solid var(--border)}
.split-btn{appearance:none;display:block;width:100%;padding:0;margin:0;background:none;border:0;cursor:pointer;color:var(--text);border-radius:4px}
.split-art{display:block;width:100%;height:auto;overflow:visible}
.split-art .sp-f{fill:var(--surface-2)}.split-art .sp-f2{fill:var(--surface-3)}
.split-art .sp-k,.split-art .sp-k2{fill:none;stroke:var(--text);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.split-art .sp-k2{stroke-width:1.8;stroke:var(--text-2)}
.split-art .sp-d{fill:var(--accent)}.split-art .sp-d2{fill:var(--brass)}
.split-art .sp-seam{stroke:var(--accent);stroke-width:2;stroke-dasharray:3 8;stroke-linecap:round}
.split-art .sp-l{transform:translateX(-84px)}.split-art .sp-r{transform:translateX(84px)}
.split.joined .sp-l,.split.joined .sp-r{transform:none}.split.joined .sp-seam{opacity:0}
@media (prefers-reduced-motion:no-preference){.split-art .sp-l,.split-art .sp-r{transition:transform .8s var(--ease)}.split-art .sp-seam{transition:opacity .4s}.split-btn:hover .sp-l{transform:translateX(-72px)}.split-btn:hover .sp-r{transform:translateX(72px)}.split.joined .split-btn:hover .sp-l,.split.joined .split-btn:hover .sp-r{transform:none}}
.split-h{font:400 clamp(34px,4.6vw,66px)/1 var(--serif);letter-spacing:-.025em;margin:0 0 .4em}
.split-h .s-on,.split-hint .s-on{display:none}.split.joined .s-on{display:inline}.split.joined .s-off{display:none}
.split.joined .split-h .s-on{color:var(--accent-text)}
.split-hint{margin:1.4em 0 0}
@media (max-width:760px){.split{grid-template-columns:1fr}}

/* --- journey --- */
.jny{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,16px);counter-reset:j}
.jny li{position:relative}
.jny li:not(:last-child)::after{content:'';position:absolute;top:50%;right:calc(-1*clamp(8px,1.2vw,16px));width:clamp(8px,1.2vw,16px);height:2px;background:var(--border-strong);z-index:1;pointer-events:none}
.jny .rv-t{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;min-height:104px}
.jny .rv-t b{font:400 clamp(21px,2vw,28px)/1.1 var(--serif)}.jny .rv-t .mono{margin:0}
.base-h{margin:clamp(22px,3vw,34px) 0 10px}
.jbase{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.jbase .rv-t{width:auto;display:inline-flex;align-items:center;padding:11px 18px;border-radius:999px}
.jbase .rv-t b{font:600 15px/1 var(--sans)}
@media (max-width:760px){.jny{grid-template-columns:1fr}.jny li:not(:last-child)::after{display:none}.jny .rv-t{flex-direction:row;align-items:baseline;min-height:60px;padding:14px 16px}}

/* --- accordion lists (Foundry, Programmes, Keep, Society, Partnerships) --- */
.acc{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--border-strong)}
.acc>li{border-bottom:1px solid var(--border)}
.acc-h{margin:0;font:inherit;letter-spacing:0}
.acc .rv-t{display:flex;align-items:center;gap:clamp(12px,2vw,24px);padding:clamp(14px,1.8vw,22px) 4px;border:0;border-radius:0;background:transparent;min-height:64px;box-shadow:none;transform:none}
.acc .rv-t:hover{background:var(--card);box-shadow:inset 4px 0 0 var(--accent);padding-left:16px}
.acc .rv-t.on{background:var(--card);color:var(--text);box-shadow:inset 4px 0 0 var(--accent);padding-left:16px}
.acc .rv-t:focus-visible{outline-offset:-3px}
.acc .at{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.acc .at b{font:400 clamp(21px,2.2vw,30px)/1.15 var(--serif);letter-spacing:-.01em}
.acc .at .mono{margin:0}
.acc .rv-t .bd{flex:none}
.acc-em{flex:none;width:clamp(48px,5vw,68px)}.acc-em svg{display:block;width:100%;height:auto}
.acc-p{background:var(--card);border:0;border-left:4px solid var(--accent);border-radius:0;padding:clamp(18px,2.4vw,32px);padding-right:clamp(18px,2.4vw,32px);margin:0 0 14px}
.acc-p .lede-s{font-size:clamp(18px,1.5vw,21px)}
.acc-p .stages-art{margin:0 0 14px}
.acc.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);align-items:start;border-top:0}
.acc.two>li{border-top:1px solid var(--border)}
@media (max-width:900px){.acc.two{grid-template-columns:1fr}}
.prog-g>.mono{margin:clamp(24px,3vw,40px) 0 10px}.prog-g>.mono:first-child{margin-top:0}
.pl .note-i{margin-top:clamp(20px,2.6vw,34px)}
.pl .badge-row{margin-bottom:18px}

/* clinic on the shared pattern */
.clinic .prob[aria-expanded=true],.prob.on{outline:0;border-color:var(--sel-bg);box-shadow:0 0 0 3px var(--accent)}
.slip.rv-stage{margin-top:0}
.slip .rv-idle{border-top:0}
.slip-p.rv-p{border-top-width:4px}

/* forms, buttons and illustrations adapt to the tokens */
input,select,textarea{color:var(--text);background-color:var(--card,var(--surface));border-color:var(--border-strong)}
input::placeholder,textarea::placeholder{color:var(--text-3);opacity:1}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
input:disabled,select:disabled,textarea:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:4px 4px 0 var(--brass)}
.btn:hover{color:var(--on-accent);box-shadow:7px 7px 0 var(--brass)}
.btn:active{box-shadow:1px 1px 0 var(--brass)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn.ghost:hover{background:var(--text);color:var(--bg);border-color:var(--text);box-shadow:none}
.btn.ghost{box-shadow:none}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.acc>li{min-width:0}
@media (max-width:480px){.acc .rv-t{flex-wrap:wrap}.acc .at{flex:1 1 120px}.acc .rv-t .bd{order:3}}

/* inner pages: secondary blocks fold away (native <details>: keyboard and no-JS safe) */
.fold{border-top:1px solid var(--border)}
.fold summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;padding:18px 4px;min-height:60px}
.fold summary::-webkit-details-marker{display:none}
.fold summary h2{margin:0;flex:1}
.fold summary:hover{box-shadow:inset 4px 0 0 var(--accent);padding-left:16px;background:var(--surface)}
.fold summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.fold[open] summary .nd-i::after{transform:rotate(0)}
.fold[open]>.bdy{padding-bottom:20px}
.blk.fold{display:block;padding:0;border-top:1.5px solid var(--border-strong)}
.blk.fold summary{padding:clamp(16px,2vw,24px) 4px}
.blk.fold summary h2{position:static;align-self:center}
.blk.fold>.bdy{max-width:70ch;padding:0 4px 24px clamp(4px,3vw,40px)}
.blk{border-top-color:var(--border-strong)}
/* colour pass: forms and map get life from the two brand colours */
.split-art .sp-f{fill:color-mix(in srgb,var(--accent) 55%,var(--bg))}
.split-art .sp-f2{fill:color-mix(in srgb,var(--brass) 60%,var(--bg))}
.split-art .sp-d{fill:var(--on-accent)}.split-art .sp-d2{fill:var(--bg)}
.split-art .sp-k2{stroke:var(--text)}
.map-n .rv-t,.path-n .rv-t,.jny .rv-t{border-top:3px solid var(--accent)}
.map-n li:nth-child(even) .rv-t,.jny li:nth-child(even) .rv-t{border-top-color:var(--brass)}
.rv-t.on{border-top-color:var(--sel-bg)!important}
.rv-t:hover{background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.rv-t.on:hover{background:var(--sel-bg)}
.hero h1 em{color:var(--accent-text)}
/* mobile density: two-up grids, compact cards, bigger tap targets kept */
@media (max-width:899px){
  .map-n .rv-t{min-height:112px;padding:14px 14px 14px}
  .map-n .rv-t b{font-size:clamp(20px,5.6vw,26px)}
  .map-n .nd-i,.path-n .nd-i{right:10px;top:10px}
  .path-n .rv-t{flex-direction:column;gap:6px;align-items:flex-start;min-height:92px;padding:12px 14px}
  .path-n .rv-t b{font-size:clamp(17px,4.8vw,21px)}
}
@media (max-width:420px){
  .map-n,.path-n{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-n .nd-s{display:none}
  .map-n .rv-t{min-height:96px}
  .rv-p{padding:20px 18px;padding-right:18px;padding-top:56px}
  .rv-x{top:6px;right:6px}
  .split-art{max-width:340px;margin:0 auto}
  .hero h1{font-size:clamp(46px,13.2vw,60px)}
}
.split-art .sp-f{fill:var(--accent)}.split-art .sp-f2{fill:var(--brass)}
.split-art .sp-k,.split-art .sp-k2{stroke:var(--text)}
.split-art .sp-d{fill:var(--bg)}.split-art .sp-d2{fill:var(--bg)}
.folio{color:var(--text)}

/* v6: calm homepage. Fewer, shorter blocks; whitespace does the work. */
.pl{padding:clamp(48px,7vw,96px) 0}
.pl-t{display:block;margin-bottom:clamp(20px,3vw,36px)}
.pl-t h2{font-size:clamp(32px,4.4vw,58px);max-width:16ch}
#explore .pl-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:clamp(24px,5vw,80px);align-items:center}
#explore .pl-t{margin:0}
#explore .split{margin:0;padding:0;border:0;grid-template-columns:1fr}
#explore .split-cap{display:none}
#explore .split-art{max-width:360px;margin-left:auto}
#explore .map{grid-column:1/-1;margin-top:clamp(24px,4vw,48px)}
.split-h{display:none}
.split.joined .split-cap{display:block}
@media (max-width:760px){#explore .pl-in{display:block}#explore .split-art{max-width:260px;margin:0 auto 24px}#explore .pl-t{margin-bottom:12px}}
.map-n .rv-t{min-height:0}
.map-n .nd-s{display:none}
.probs{gap:clamp(8px,1.4vw,18px)}
.clinic .prob .il{max-height:84px;width:auto}
@media (max-width:760px){.clinic .prob .il{max-height:64px}}
.rv-idle{border-top:0;padding-top:12px}
.jny .rv-t{min-height:0}
.pl-close .close-t .lede{display:none}
.slip,.clinic .slip{min-height:0!important;height:auto}.slip-p.rv-idle{padding:18px 20px}