/* InfoTown — shared site styles
   One visual language: white paper, thin dark-blue linework, restrained pastel accents.
   Single light theme by design (InfoTown is always drawn on white paper). */

:root{
  color-scheme: light;
  --paper:#ffffff;
  --ink:#1b3478;
  --line:#2f55a4;
  --muted:#56658a;
  --faint:#dfe6f4;
  --wash:#f5f8fd;
  --lav:#ece7f8;
  --butter:#fdf3d4;
  --mint:#e2f2e6;
  --peach:#fde6d8;
  --sky:#e1ecfa;
  --main:#2f6fd6;
  --alley:#d65a2c;
  --display:"Lexend", "Segoe UI", system-ui, sans-serif;
  --body:"Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --code:"JetBrains Mono", ui-monospace, Consolas, monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55}
img,svg{max-width:100%}
a{color:var(--line)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;color:var(--ink)}
p{margin:0;text-wrap:pretty}
li,dd,td{text-wrap:pretty}
:focus-visible{outline:3px solid var(--main);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:6px;z-index:10}
.skip:focus{left:12px}
.eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---------- Site chrome ---------- */
.site-header{border-bottom:1.5px solid var(--faint);background:var(--paper)}
.site-header .in{max-width:1100px;margin:0 auto;padding-inline:20px;padding-block:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.01em}
.brand svg{width:30px;height:30px}
.site-nav{display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;padding:6px 12px;border-radius:999px}
.site-nav a:hover{background:var(--wash)}
.site-nav a[aria-current="page"]{background:var(--ink);color:#fff}
.site-footer{border-top:1.5px solid var(--faint);margin-top:40px}
.site-footer .in{max-width:1100px;margin:0 auto;padding-inline:20px;padding-block:22px 34px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:14px}

.wrap{max-width:1100px;margin:0 auto;padding-inline:20px;padding-block:28px 40px}
section{margin-top:56px}
.sechead{display:grid;gap:6px;margin-bottom:18px}
.sechead h2{font-size:clamp(24px,3.4vw,32px)}
.sechead p{color:var(--muted);max-width:76ch}
code{font-family:var(--code);font-size:.92em;background:var(--wash);padding:1px 5px;border-radius:4px;white-space:nowrap}

/* ---------- Lesson header ---------- */
.top{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.banner{background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(15px,1.8vw,19px);letter-spacing:.08em;text-transform:uppercase;padding:20px 22px 34px;text-align:center;line-height:1.25;clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);min-width:150px}
.banner small{display:block;font-weight:400;font-size:clamp(12px,1.3vw,14px);letter-spacing:.06em;opacity:.9;margin-top:8px}
.titleblock{flex:1;min-width:0;display:grid;gap:8px}
.titleblock h1{font-size:clamp(34px,6vw,58px);line-height:1.02;letter-spacing:-.01em}
.question{font-size:20px;color:var(--line)}
.recap{margin-top:22px;padding:14px 18px;border:1.5px dashed var(--faint);border-radius:8px;color:var(--muted);font-size:16.5px}

/* ---------- Scene ---------- */
.scenebox{border:1.5px solid var(--ink);border-radius:10px;padding:14px;background:var(--paper)}
.scenewrap{overflow-x:auto}
.scene{display:block;width:100%;min-width:640px;height:auto}
.scene .layer{transition:opacity .4s ease}
.scene [data-hl]{cursor:pointer}
.scene .hl rect,.scene .hl polygon,.scene .hl path{stroke:var(--main);stroke-width:3.5}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.controls span{font-family:var(--display);font-size:13px;color:var(--muted);margin-right:4px}
.controls button{font:600 14px var(--display);color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px;cursor:pointer}
.controls button[aria-pressed="true"]{background:var(--ink);color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:12px;font-size:15px}
.legend div{display:flex;align-items:center;gap:10px}
.swatch{width:44px;height:0;border-top:5px solid var(--main);border-radius:3px}
.swatch.alley{border-top:4px dashed var(--alley)}

/* ---------- Explainer (clickable parts) ---------- */
.labelcard{border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--paper)}
.lstrip{background:var(--ink);color:#fff;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.labelbody{padding:18px 16px 16px;display:grid;gap:14px}
.code{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-family:var(--code);font-size:clamp(17px,3vw,28px);font-weight:700}
.code .dash{color:var(--muted);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.fld{font:inherit;color:var(--ink);background:var(--wash);border:1.5px solid var(--faint);border-radius:6px;padding:4px 8px;cursor:pointer;line-height:1.2}
.chips .fld{font-family:var(--display);font-size:15px;font-weight:600;padding:7px 12px;border-radius:999px}
.fld:hover{border-color:var(--line)}
.fld[aria-pressed="true"]{background:var(--butter);border-color:var(--ink)}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:15px}
.meta .k{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.meta .fld{font-family:var(--display);font-size:16px;font-weight:600}
.explain{border-top:1.5px solid var(--faint);padding:16px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}
.explain .tq{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:700;line-height:1.15}
.explain .plain{margin-top:6px;font-size:17px}
.explain dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15.5px;align-content:start}
.explain dt{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.explain dd{margin:0}
.hint{font-size:14px;color:var(--muted);margin-top:10px}

/* ---------- Comic ---------- */
.strip3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.panel{border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:var(--paper)}
.panel svg{display:block;width:100%;height:auto;background:var(--wash);border-bottom:1.5px solid var(--ink)}
.panel .cap{padding:12px 14px 14px;display:grid;gap:6px;flex:1;align-content:start}
.tag{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.say{font-family:var(--display);font-size:15px;line-height:1.35;color:var(--ink)}
.say::before{content:"\201C"}.say::after{content:"\201D"}
.cap p.n{font-size:15px;color:var(--muted)}
.striphead{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-family:var(--display);font-weight:600;font-size:17px}
.striphead i{display:inline-block;width:34px;border-top:4px dashed var(--alley)}
.striphead i.m{border-top:5px solid var(--main)}
.striphead.alley{color:var(--alley)}
.striphead.main{color:var(--main);margin-top:30px}
.panel.p-alley{border-color:var(--alley)}
.panel.p-alley svg{border-bottom-color:var(--alley)}
.verdict{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.verdict div{padding:14px 16px;border-radius:8px;font-size:16px}
.verdict .a{background:var(--peach)}
.verdict .m{background:var(--wash);border:1.5px solid var(--faint)}
.verdict b{font-family:var(--display);display:block;margin-bottom:2px}

/* ---------- Test ---------- */
.test{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.q{border:2px solid var(--ink);border-radius:12px;padding:20px;display:grid;gap:10px;align-content:start}
.q h3{font-size:clamp(22px,2.8vw,30px);line-height:1.1}
.q .rows{display:grid;gap:8px;font-size:15.5px}
.q .rows b{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:block}
.q .r-m b{color:var(--main)} .q .r-a b{color:var(--alley)}

/* ---------- Real town ---------- */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.why div{border:1.5px solid var(--faint);border-radius:8px;padding:14px;display:grid;gap:4px;align-content:start}
.why b{font-family:var(--display);font-size:16px}
.why p{font-size:15px;color:var(--muted)}
.planner{margin-top:14px;padding:16px 18px;background:var(--lav);border-radius:8px}
.planner b{font-family:var(--display)}
.bringback{margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:16px 18px;border:1.5px dashed var(--alley);border-radius:8px}
.bringback h3{font-size:18px}
.bringback ol{margin:6px 0 0;padding-left:20px;display:grid;gap:2px}

/* ---------- Term & reveal ---------- */
.term{font-family:var(--display);font-size:clamp(22px,3vw,30px);line-height:1.3;max-width:36ch;font-weight:400}
.term strong{font-weight:700}
.reveal{margin-top:28px;border-radius:14px;background:var(--butter);padding:clamp(22px,4vw,40px);display:grid;gap:14px;border:2px solid var(--ink)}
.reveal .eyebrow{color:var(--ink)}
.reveal h2{font-size:clamp(30px,5.4vw,56px);line-height:1.05}
.reveal .big{font-family:var(--display);font-size:clamp(20px,2.8vw,26px);line-height:1.3;color:var(--line);font-weight:600;max-width:42ch}
.reveal .risk{color:var(--alley)}
.reveal p.small{max-width:68ch}

/* ---------- Translation card ---------- */
.cardwrap{overflow-x:auto;border:1.5px solid var(--ink);border-radius:10px}
.cardwrap table{border-collapse:collapse;width:100%;min-width:780px;font-size:15.5px}
.cardwrap th,.cardwrap td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--faint)}
.cardwrap th{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--wash)}
.cardwrap tr:last-child td{border-bottom:0}
.cardwrap td:first-child{font-family:var(--display);font-weight:600}
td.tm{color:var(--main)} td.ta{color:var(--alley)}

/* ---------- Take-away & lesson nav ---------- */
.takeaway{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:20px 22px;background:var(--wash);border-radius:12px}
.takeaway p{font-family:var(--display);font-size:clamp(18px,2.4vw,22px);line-height:1.4}
.lessonnav.top{margin-top:18px;border-top:0;border-bottom:1.5px solid var(--faint);padding-top:0;padding-bottom:12px}
.lessonnav{margin-top:44px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1.5px solid var(--faint);padding-top:16px;font-family:var(--display);font-size:14px;color:var(--muted)}
.lessonnav a,.lessonnav span{color:inherit;text-decoration:none}
.lessonnav b{color:var(--ink);font-weight:600}
.lessonnav a:hover b{text-decoration:underline}

/* ---------- Academy index ---------- */
.parts{display:grid;gap:34px;margin-top:36px}
.part h2{font-size:clamp(22px,3vw,28px);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.part h2 .eyebrow{font-size:12px}
.part > p{color:var(--muted);margin-top:4px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.lcard{border:1.5px solid var(--ink);border-radius:10px;padding:16px;display:grid;gap:8px;align-content:start;text-decoration:none;color:var(--ink);background:var(--paper);position:relative}
a.lcard:hover{background:var(--wash)}
.lcard .num{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lcard h3{font-size:22px}
.lcard .lq{color:var(--line)}
.lcard .rv{font-family:var(--display);font-size:14px;background:var(--butter);border-radius:6px;padding:6px 10px;justify-self:start}
.lcard.soon{border-style:dashed;border-color:var(--faint);color:var(--muted)}
.lcard.soon h3{color:var(--muted)}
.lcard.soon .rv{background:var(--wash)}
.pill{position:absolute;top:14px;right:14px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1.5px solid var(--faint);color:var(--muted)}
.lead{font-size:clamp(18px,2.2vw,21px);max-width:62ch;color:var(--ink)}
.learn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.learn div{border-radius:10px;padding:18px;display:grid;gap:6px;align-content:start}
.learn div:nth-child(1){background:var(--lav)} .learn div:nth-child(2){background:var(--butter)} .learn div:nth-child(3){background:var(--mint)}
.learn .eyebrow{color:var(--ink)}
.learn h3{font-size:20px}
.learn p{font-size:16px}
.aligns{margin-top:14px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:16px 18px;border:1.5px solid var(--ink);border-radius:10px}
.aligns p{font-size:16.5px}
.aligns .ex{font-family:var(--display);font-size:15px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.aligns .ex span{background:var(--wash);border-radius:6px;padding:4px 10px}
.aligns .ex b{background:var(--butter);border-radius:6px;padding:4px 10px;font-weight:600}
.morelink{display:inline-block;margin-top:14px;font:600 16px var(--display);color:var(--ink)}

/* ---------- Town Square ---------- */
.hero{display:grid;gap:14px;margin-top:8px}
.hero h1{font-size:clamp(38px,7vw,72px);line-height:1;letter-spacing:-.015em}
.dest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dcard{border:1.5px solid var(--ink);border-radius:10px;padding:18px;display:grid;gap:6px;align-content:start;text-decoration:none;color:var(--ink);position:relative}
a.dcard:hover{background:var(--wash)}
.dcard h3{font-size:21px}
.dcard .dq{color:var(--line);font-family:var(--display);font-size:15px}
.dcard p{color:var(--muted);font-size:15.5px}
.dcard.soon{border-style:dashed;border-color:var(--faint)}
.dcard svg{width:44px;height:44px}

/* ---------- Manifesto ---------- */
.manifesto{max-width:46rem;margin:0 auto;display:grid;gap:1.4rem;font-family:var(--display);font-size:clamp(20px,2.6vw,25px);line-height:1.45;font-weight:400}
.manifesto h1{font-size:clamp(36px,6vw,60px);line-height:1.05;margin-bottom:.6rem}
.manifesto .group{display:grid;gap:.2rem;padding-left:18px;border-left:3px solid var(--butter)}
.manifesto .group.blue{border-left-color:var(--sky)}
.manifesto .end{font-weight:700;font-size:clamp(26px,3.6vw,34px)}
.manifesto .soft{color:var(--muted)}

@media (max-width:860px){
  .strip3,.cards,.dest{grid-template-columns:repeat(2,minmax(0,1fr))}
  .learn{grid-template-columns:1fr}
  .why{grid-template-columns:repeat(2,minmax(0,1fr))}
  .explain{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .strip3,.why,.verdict,.cards,.dest{grid-template-columns:1fr}
  .bringback,.takeaway,.aligns{grid-template-columns:1fr}
  .banner{min-width:120px;padding:16px 16px 28px}
}
@media (prefers-reduced-motion: reduce){
  .scene .layer{transition:none}
}

/* ---------- Information World ---------- */
.world .scene{min-width:720px}
.worldfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.wlegend{margin-top:0}
.wsw{width:40px;height:0;border-top:3px dashed var(--main)}
.zoom{font:600 16px var(--display);background:var(--ink);color:#fff;text-decoration:none;padding:10px 18px;border-radius:999px;white-space:nowrap}
.zoom:hover{background:var(--line)}
#t-you{cursor:pointer}
#t-you .halo{animation:halo 2.6s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.25}50%{opacity:1}}
.ladder{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;counter-reset:z}
.ladder li{position:relative;border:1.5px solid var(--faint);border-radius:8px;padding:10px 12px;display:grid;gap:2px}
.ladder li b{font-family:var(--display);font-size:15px}
.ladder li span{font-size:13.5px;color:var(--muted)}
.ladder li:nth-child(2){border-color:var(--ink);background:var(--butter)}
@media (max-width:860px){.ladder{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){#t-you .halo{animation:none;opacity:.8}}

/* ---------- Concept-first lessons (v2) ---------- */
section{margin-top:40px}
.concept .cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px;align-items:stretch}
.idea{border:1.5px solid var(--ink);border-radius:14px;padding:22px;display:grid;gap:10px;align-content:center}
.idea .term{font-size:clamp(20px,2.3vw,25px)}
.concept .reveal{margin-top:0;padding:clamp(18px,2.6vw,28px);gap:10px}
.concept .reveal h2{font-size:clamp(26px,3.4vw,40px)}
.concept .reveal .big{font-size:clamp(17px,1.9vw,20px)}
.concept .reveal p.small{font-size:15px;color:var(--muted)}
.agrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:stretch}
.storycard{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:16px;align-items:center;border:1.5px solid var(--alley);border-radius:12px;padding:14px;text-decoration:none;color:var(--ink);background:var(--paper)}
.storycard:hover{background:#fffaf6}
.storycard svg{width:100%;height:auto;background:var(--wash);border-radius:6px;display:block}
.storycard h3{font-size:20px;margin:4px 0}
.storycard p{font-size:15px;color:var(--muted)}
.storycard .go,.lcard .go{display:inline-block;margin-top:8px;font:600 15px var(--display);color:var(--alley)}
.agrid .takeaway{grid-template-columns:auto 1fr;align-content:center}
.agrid .takeaway p{font-size:clamp(16px,1.8vw,19px)}
.banner.story{background:var(--alley)}
.banner.phrase{background:#2e8b57}
.pb .sechead h2 a{color:inherit;text-decoration:none}
.pb .sechead h2 a:hover{text-decoration:underline}
.pbrv{font-family:var(--display);color:var(--ink)!important;background:var(--butter);justify-self:start;padding:4px 10px;border-radius:6px}
.learnintro{margin-top:44px}
.startrow{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-start}
.alllessons{flex:1;min-width:260px}
.alllessons summary{cursor:pointer;font:600 16px var(--display);color:var(--ink);padding:10px 0}
.lessonlist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px;border-top:1.5px solid var(--faint)}
.lessonlist li{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1.3fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--faint);align-items:baseline}
.lessonlist .n{font-family:var(--display);font-weight:700;color:var(--muted)}
.lessonlist a,.lessonlist .t{font-family:var(--display);font-weight:600;color:var(--ink)}
.lessonlist .r{font-size:14.5px;color:var(--muted)}
.lessonlist li.soon .t{color:var(--muted);font-weight:400}
@media (max-width:860px){
  .concept .cgrid,.agrid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .storycard{grid-template-columns:1fr}
  .lessonlist li{grid-template-columns:24px 1fr}
  .lessonlist .r{grid-column:2}
}

/* ---------- Town Square (home) ---------- */
.sqbox .scene{min-width:700px}
.square .dest .bld{transition:transform .25s ease, filter .25s ease;transform-box:fill-box;transform-origin:50% 100%}
.square a.dest:hover .bld,.square a.dest:focus-visible .bld{transform:translateY(-4px);filter:drop-shadow(0 6px 10px rgba(47,111,214,.25))}
.square a.dest:focus-visible{outline:none}
.square .soon{opacity:.6}
.square .jets path{animation:jet 2.4s linear infinite}
@keyframes jet{to{stroke-dashoffset:-20}}
@media (prefers-reduced-motion: reduce){.square .jets path{animation:none}.square .dest .bld{transition:none}}
.subhead{font-family:Lexend,system-ui,sans-serif;font-size:1.35rem;line-height:1.25;color:var(--ink);margin:0}
/* New in this lesson */
.newterms{margin:18px 0 6px;padding:16px 18px;border-radius:10px;background:#f7f4fd;border:1.5px solid #ddd4f3}
.newterms h2{font-family:Lexend,system-ui,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6a55b0;margin:0 0 10px}
.newterms dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 22px;margin:0}
.newterms dt{font-family:Lexend,system-ui,sans-serif;font-weight:600;color:var(--ink);font-size:.98rem}
.newterms dd{margin:2px 0 0;color:var(--muted);font-size:.93rem;line-height:1.4}
/* Heads-up tip box */
.tipbox{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin:22px 0 0;padding:18px 20px;border-radius:10px;background:#fdf3d4;border:2px solid #e2b54a}
.tipicon{width:40px;height:40px;border-radius:50%;background:#d65a2c;color:#fff;font-family:Lexend,system-ui,sans-serif;font-weight:700;font-size:1.4rem;display:grid;place-items:center}
.tiphead{font-family:Lexend,system-ui,sans-serif;font-weight:700;font-size:1.08rem;color:var(--ink);margin:2px 0 6px}
.tipbox p{margin:0 0 8px;color:var(--ink);line-height:1.5;max-width:80ch}
.tipbox p:last-child{margin-bottom:0}
/* Before you start */
.beforestart{margin:18px 0 8px;border:1.5px solid #ddd4f3;border-radius:12px;background:#fbfaff;overflow:hidden}
.beforestart h3{font-family:Lexend,system-ui,sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6a55b0;margin:0 0 8px}
.bs-top{display:grid;grid-template-columns:1.2fr 1fr;gap:0}
.bs-col{padding:16px 20px}
.bs-col+.bs-col{border-left:1.5px dashed #ddd4f3}
.bs-col p{margin:0;color:var(--ink);line-height:1.5}
.bs-col ul{margin:0;padding-left:1.1em;color:var(--ink);line-height:1.5}
.bs-col li{margin:2px 0}
.bs-words{padding:14px 20px 16px;background:#f3effc;border-top:1.5px solid #ddd4f3}
.bs-words dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 22px;margin:0}
.bs-words dt{font-family:Lexend,system-ui,sans-serif;font-weight:600;color:var(--ink);font-size:.95rem}
.bs-words dd{margin:1px 0 0;color:var(--muted);font-size:.9rem;line-height:1.4}
@media (max-width:720px){.bs-top{grid-template-columns:1fr}.bs-col+.bs-col{border-left:0;border-top:1.5px dashed #ddd4f3}}
.tipsam{width:60px;height:60px;border-radius:50%;background:#fde6d8;border:2px solid #d65a2c;display:grid;place-items:center}
.tipkicker{display:block;font-family:Lexend,system-ui,sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#d65a2c}
/* Key words beside the scene */
.scenehead{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;margin-bottom:18px}
.scenehead .sechead{margin-bottom:0}
.keywords{padding:14px 16px;border-radius:10px;background:#f7f4fd;border:1.5px solid #ddd4f3}
.keywords h3{font-family:Lexend,system-ui,sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6a55b0;margin:0 0 8px}
.keywords dl{margin:0;display:grid;gap:8px}
.keywords dt{font-family:Lexend,system-ui,sans-serif;font-weight:600;color:var(--ink);font-size:.95rem}
.keywords dd{margin:1px 0 0;color:var(--muted);font-size:.88rem;line-height:1.4}
@media (max-width:860px){.scenehead{grid-template-columns:1fr;gap:14px}}
/* Follow Drawing 042 */
.journey{margin-top:22px}
.jcontrols{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.jcontrols>button{font:600 15px var(--display);color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:8px 18px;cursor:pointer}
.jcontrols>button.primary{background:var(--ink);color:#fff}
.jcontrols>button:disabled{opacity:.35;cursor:default}
.jdots{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center}
.jdots button{width:30px;height:30px;border-radius:50%;border:1.5px solid #c8d4ec;background:#fff;color:var(--muted);font:600 12px var(--display);cursor:pointer;padding:0}
.jdots button.done{background:#e1ecfa;border-color:#9db8e6;color:var(--ink)}
.jdots button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.jpanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;margin-top:14px;align-items:start}
.jstep h3{font-family:var(--display);font-size:1.5rem;line-height:1.2;margin:4px 0 8px;color:var(--ink)}
.jstep p{margin:0 0 10px;color:var(--ink);line-height:1.55}
.jlink{font-family:var(--display);font-weight:600;font-size:14px;color:#d65a2c;text-decoration:none}
.jlink:hover{text-decoration:underline}
.jfields{margin:0;padding:6px 16px 12px}
.jfields>div{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:7px 6px;border-bottom:1px dashed var(--faint);border-radius:6px}
.jfields>div:last-child{border-bottom:0}
.jfields dt{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.jfields dd{margin:0;color:var(--ink);font-weight:600}
.jfields [data-f=number] dd,.jfields [data-f=rev] dd,.jfields [data-f=status] dd{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:15px}
.jfields .changed{animation:jflash 1.6s ease-out}
@keyframes jflash{0%{background:#fde6a0}100%{background:transparent}}
.jstate{border-radius:999px;padding:1px 10px;letter-spacing:.06em;color:var(--ink)!important;background:#fff}
.jstate.planned{background:#e6e9f2}.jstate.wip{background:#ece7f8}.jstate.shared{background:#fdf3d4}.jstate.published{background:#e1ecfa}.jstate.record{background:#e2f2e6}
.jtable tr.on td{background:#fdf3d4}
.jtable td:first-child{font-family:var(--display);font-weight:700}
@media (max-width:820px){.jpanel{grid-template-columns:1fr}.jfields>div{grid-template-columns:96px 1fr}}
@media (prefers-reduced-motion:reduce){.jfields .changed{animation:none}}
.jpromo{margin-top:16px;color:var(--muted)}
.journey .scene{min-width:540px}
@media (max-width:640px){.jdots{order:3;flex-basis:100%;justify-content:flex-start}.jcontrols{justify-content:space-between}}
/* Visitor Centre */
.banner.vc{background:#2e8b57}
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:18px;margin-top:26px}
.castcard{display:grid;grid-template-columns:110px 1fr;gap:18px;border:1.5px solid var(--ink);border-radius:12px;padding:18px;background:var(--paper)}
.castcard.star{border-color:#e8743b;border-width:2px}
.castcard .fig{background:#f4f7fc;border-radius:10px;display:grid;place-items:center;padding:8px;align-self:start}
.castcard .fig svg{width:90px;height:112px}
.castcard h2{font-family:var(--display);font-size:1.5rem;margin:0;color:var(--ink)}
.castcard .role{margin:2px 0 10px;color:var(--muted);font-weight:600}
.castcard dl{margin:0 0 10px;display:grid;gap:6px}
.castcard dl>div{display:grid;grid-template-columns:105px 1fr;gap:8px}
.castcard dt{font-family:var(--display);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.castcard dd{margin:0;color:var(--ink);line-height:1.45}
.castcard .quip{margin:0 0 8px;padding:10px 12px;background:#fdf3d4;border-radius:8px;color:var(--ink);font-style:italic;line-height:1.45}
.castcard .seen{margin:0;font-size:15px;color:var(--muted)}
.castcard .seen a{color:var(--main);font-weight:600}
@media (max-width:560px){.cast{grid-template-columns:1fr}.castcard{grid-template-columns:1fr}.castcard .fig{justify-self:start}.castcard dl>div{grid-template-columns:1fr;gap:0}}
/* From the UK National Annex */
.naref{margin:26px 0 8px}
.naref details{border:1.5px solid var(--ink);border-radius:10px;background:#fbfcfe}
.naref summary{cursor:pointer;padding:14px 18px;font-family:var(--display);font-weight:600;color:var(--ink);list-style:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.naref summary::-webkit-details-marker{display:none}
.naref summary::after{content:'+';margin-left:auto;font-size:1.3rem;line-height:1;color:var(--muted)}
.naref details[open] summary::after{content:'–'}
.naflag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:999px;padding:3px 10px}
.nabody{padding:4px 18px 18px;border-top:1px dashed var(--faint)}
.nabody h4{font-family:var(--display);font-size:1rem;color:var(--ink);margin:16px 0 8px}
.natable{overflow-x:auto}
.natable table{width:100%;border-collapse:collapse;font-size:15px}
.natable th{text-align:left;font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 10px;border-bottom:1.5px solid var(--ink)}
.natable td{padding:7px 10px;border-bottom:1px solid var(--faint);vertical-align:top;color:var(--ink)}
.nabody code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.92em;background:#eef2fa;border-radius:4px;padding:1px 5px;white-space:nowrap}
.nacodes{margin:0;line-height:1.9;color:var(--ink);font-size:15px}
.nanote{margin:10px 0 0;color:var(--muted);font-size:15px}
.nasrc{margin:14px 0 0;font-size:13px;color:var(--muted);font-style:italic}
.naflag.na{background:#2e8b57}
/* Keep going (story → next lesson) */
.nextup{margin:34px 0 10px;padding:22px;border-radius:12px;background:#eef3fc;text-align:center;display:grid;gap:10px;justify-items:center}
.nextbtn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-family:var(--display);font-size:1.15rem;font-weight:600;padding:14px 26px;border-radius:999px}
.nextbtn b{font-weight:700}
.nextbtn:hover{background:#2f6fd6}
.nextalt{margin:0;font-size:15px}
.nextalt a{color:var(--muted)}
/* Colour per place: Academy blue, Stories orange, Phrase Book green, Visitor Centre red, Manifesto purple */
.banner.vc{background:#c8423b}
.banner.mf{background:#7b5cc4}
.starthere{display:inline-block;font:600 18px var(--display);background:var(--ink);color:#fff;text-decoration:none;padding:13px 26px;border-radius:999px}
.starthere:hover{background:#2f6fd6}
.sqcaps a text{cursor:pointer}
@media (max-width:560px){.zoom{white-space:normal;display:inline-block;text-align:center}}
/* Meet the characters */
.bs-meet{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;padding:12px 20px 14px;border-top:1.5px dashed #ddd4f3;background:#fff}
.bs-person{display:flex;gap:10px;align-items:center;max-width:380px}
.bs-person svg{flex:none;background:#f4f7fc;border-radius:8px;padding:4px 6px;box-sizing:content-box}
.bs-person b{display:block;font-family:var(--display);color:var(--ink)}
.bs-person span{display:block;color:var(--muted);font-size:15px;line-height:1.4}
.bs-vc{margin-left:auto;font-family:var(--display);font-weight:600;font-size:14px;color:#c8423b;text-decoration:none}
/* Find out more (moved from the stories) */
.moresec{margin:26px 0 6px;display:grid;gap:10px}
.more{border:1.5px solid var(--faint);border-radius:10px;background:#fff}
.more summary{cursor:pointer;padding:14px 18px;font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink);list-style:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:'+';margin-left:auto;font-size:1.3rem;line-height:1;color:var(--muted)}
.more[open] summary::after{content:'–'}
.more[open]{border-color:var(--ink)}
.moreflag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:#eef2fa;color:var(--muted);border-radius:999px;padding:3px 10px}
.morebody{padding:4px 18px 18px;border-top:1px dashed var(--faint)}
.morebody .sechead{margin:10px 0 12px}
.moreflag.im{background:#ece7f8;color:#6a55b0}
.morebody .bringback{margin-top:14px}
.morebody .test .q h3{font-size:1.3rem}
.jhist{font-size:14.5px;color:var(--muted);line-height:1.9}
.jhist code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;background:#eef2fa;border-radius:4px;padding:1px 6px;white-space:nowrap;color:var(--ink)}
.jreg{margin-top:18px;border-top:1.5px dashed var(--faint);padding-top:12px}
.jreghead{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:6px}
.jregnote{font-size:14px;color:var(--muted)}
#j-reg td:nth-child(2),#j-reg td:nth-child(3),#j-reg td:nth-child(4){font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13.5px}
#j-reg tr.on td{background:#fdf3d4}
/* Rex's diary */
.bs-rex{display:flex;gap:12px;align-items:center;padding:10px 20px;border-top:1.5px dashed #ddd4f3;background:#fff8f2}
.bs-rex svg{flex:none}
.bs-rex p{margin:0;color:var(--ink);font-style:italic;line-height:1.45}
.bs-rex b{font-style:normal;color:#c4521c;font-family:var(--display);font-weight:600}
/* Speaker first, then the quote */
.say::before,.say::after{content:none}
.say .who{font-weight:700;color:#c4521c;margin-right:2px}
.say .sq::before{content:"\201C"}.say .sq::after{content:"\201D"}
/* Builder (mobilise the site) */
.builder{display:grid;gap:10px;margin-bottom:12px}
.bsteps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:b}
.bsteps li{counter-increment:b;font:600 13px var(--display);color:var(--muted);border:1.5px solid var(--faint);border-radius:999px;padding:5px 12px;background:#fff}
.bsteps li::before{content:counter(b) " · "}
.bsteps li.now{border-color:var(--ink);color:var(--ink)}
.bsteps li.done{background:#e2f2e6;border-color:#2e8b57;color:#1f6b43}
.bsteps li.done::before{content:"✓ "}
.bctl{display:flex;gap:10px;flex-wrap:wrap}
.bnext{font:600 15px var(--display);background:var(--ink);color:#fff;border:0;border-radius:999px;padding:9px 18px;cursor:pointer}
.breset{font:600 14px var(--display);background:#fff;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer}
.bmsg{margin:0;color:var(--ink);font-weight:600}
.scene .bhide{opacity:0;pointer-events:none}
.scene [data-step]{transition:opacity .6s ease}
@media (prefers-reduced-motion:reduce){.scene [data-step]{transition:none}}

/* ---------- Story first: home hero, cliffhanger, right way ---------- */
.homehero{display:grid;grid-template-columns:minmax(0,780px) auto;justify-content:start;gap:40px;align-items:end}
.homehero .hh-meet{font-size:19px;margin-top:12px;max-width:40em}
.homehero .hh-rex svg{display:block;max-width:100%;width:250px;height:auto}
@media (max-width:640px){.homehero{grid-template-columns:1fr}.homehero .hh-rex{display:none}}
.cliff{text-align:center}
.cliff .clifftxt{font-family:var(--display);font-size:24px;font-weight:600;color:var(--alley);margin:0 0 14px;text-wrap:balance}
.rightway{margin-top:40px}
.rightway .sechead{margin-bottom:6px}
.storycard.nextstory{grid-template-columns:1fr}
.castafter{margin-top:28px;border:1px solid var(--faint);border-radius:14px;padding:16px 18px;background:var(--wash)}
.castafter .bs-meet{border-top:0;padding:10px 0 0;margin:0;background:none}
.rightway{margin-top:28px}
svg .pick{cursor:pointer}
svg .pick:focus{outline:none}
svg .pick:focus-visible > rect:first-child{stroke:#2f6fd6;stroke-width:4}
svg .pick:hover > rect:first-child{stroke:#2f6fd6;stroke-width:2.5}
.explained{margin-top:36px}
.explained .idea .expl{font-size:19px;line-height:1.55;color:var(--ink);margin-top:8px}
.scenefold{margin-top:28px}
.scenefold > summary{font-size:18px}
.scenefold > .morebody > section{margin-top:8px}
/* Continue your journey: the one button to press */
.nextstory{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:16px;background:var(--alley);color:#fff;text-decoration:none;box-shadow:0 4px 0 #a8401c;transition:transform .15s,box-shadow .15s}
.nextstory:hover{transform:translateY(-2px);box-shadow:0 6px 0 #a8401c}
.nextstory:active{transform:translateY(2px);box-shadow:0 2px 0 #a8401c}
.nextstory:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.nextstory .ns-text{flex:1;min-width:0}
.nextstory .ns-eyebrow{font:700 13px var(--display);letter-spacing:.12em;text-transform:uppercase;color:#ffe6d9}
.nextstory h3{color:#fff;font-size:22px;margin:4px 0 6px}
.nextstory p{color:#fff3ec;font-size:15px;margin:0}
.nextstory .ns-arrow{flex:none;width:64px;height:64px;border-radius:50%;background:#fff;color:var(--alley);display:grid;place-items:center;font:700 38px/1 var(--display)}
@media (prefers-reduced-motion:reduce){.nextstory{transition:none}.nextstory:hover,.nextstory:active{transform:none}}
@media (max-width:640px){.nextstory .ns-arrow{width:52px;height:52px;font-size:30px}.nextstory h3{font-size:20px}}
.explained{margin-top:32px;padding:22px 24px;border:2px solid var(--ink);border-radius:16px;background:var(--paper)}
.explained .expl{font-size:20px;line-height:1.6;color:var(--ink);margin-top:8px;max-width:none}
.concept.infold{margin-top:24px}
.concept.infold .reveal{max-width:none}
/* Lesson folds with more definition */
.fixwrap{margin-top:18px}
.more.fixit{border:2px solid #7b5cc4;background:#f6f3fd}
.more.fixit > summary{font-size:1.12rem}
.more.fixit .moreflag.im{background:#7b5cc4;color:#fff}
.more.fixit > summary::after{color:#7b5cc4}
.more.scenefold{border:2px solid var(--main);background:var(--sky)}
.more.scenefold > summary{font-size:1.15rem;padding:18px 20px}
.more.scenefold > summary .moreflag{background:var(--main);color:#fff}
.more.scenefold > summary::after{color:var(--main);font-size:1.6rem}
.more.scenefold[open]{background:#fff}
.isosec{margin:36px 0 8px;padding-top:22px;border-top:2px solid var(--faint);display:grid;gap:10px}
.isosec .naref{margin:0}
.isosec .naref details{border:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 0 0 2px var(--ink)}
.isosec .naref summary{background:var(--ink);color:#fff;padding:16px 20px}
.isosec .naref summary::after{color:#fff}
.isosec .naflag{background:#fff;color:var(--ink)}
.isosec .naref:has(.naflag.na) details{box-shadow:0 0 0 2px #1f6b44}
.isosec .naref:has(.naflag.na) summary{background:#1f6b44}
.isosec .naflag.na{background:#fff;color:#1f6b44}
.isosec > *, .moresec > *{min-width:0}
.natable td code{white-space:nowrap}
/* Sam's Heads Up, folded */
.fixwrap{display:grid;gap:10px}
.more.samtip{border:2px solid #e2b54a;background:#fdf8e6}
.more.samtip > summary{gap:10px}
.more.samtip .samface svg{display:block}
.more.samtip .moreflag.sam{background:#d65a2c;color:#fff}
.more.samtip > summary::after{color:#b07a12}
.more.samtip .morebody p{margin:0 0 8px;color:var(--ink);line-height:1.5}
/* Using InfoTown */
.usepage{margin:28px 0 40px;display:grid;gap:22px}
.usegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.usecard{border-radius:14px;padding:18px 22px;border:2px solid var(--faint)}
.usecard.ok{background:var(--mint);border-color:#2e8b57}
.usecard.ask{background:var(--butter);border-color:#e2b54a}
.usecard h2,.usecredit h2,.uselegal h2,.usewho h2{font-size:20px;margin:0 0 10px}
.usecard ul{margin:0;padding-left:20px;display:grid;gap:8px}
.usecredit{border:2px dashed var(--line);border-radius:14px;padding:16px 22px}
.usecredit code{font-size:15px;background:var(--wash);padding:4px 8px;border-radius:6px;overflow-wrap:anywhere}
.uselegal p,.usewho p{max-width:70ch;margin:0 0 10px}
.site-footer a{color:inherit}
.usepage > *{min-width:0}
@media (max-width:640px){.usegrid{grid-template-columns:1fr}}
.usecredit code{white-space:normal;display:inline-block;max-width:100%}
/* Choose your path */
.cyp-cta{margin-top:14px}
.cyp{margin-top:28px}
#townmap .pick{cursor:pointer}
#townmap [data-hl="com"],#townmap [data-hl="pre"],#townmap [data-hl="pro"],#townmap [data-hl="eng"],#townmap [data-hl="qa"]{opacity:.5}
#townmap [data-hl].hl{opacity:1}
.cyp-card{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:20px 22px;border-top:1px solid var(--faint)}
.cyp-card .cyp-text{flex:1 1 320px;min-width:0}
.cyp-card h3{font-size:24px;margin:4px 0 8px}
.cyp-card p{margin:0 0 8px;max-width:70ch}
.cyp-meta{color:var(--muted);font-size:15px}
.cyp-go{display:inline-flex;align-items:center;gap:10px;background:var(--alley);color:#fff;text-decoration:none;font:700 18px var(--display);padding:14px 22px;border-radius:999px;box-shadow:0 4px 0 #a8401c}
.cyp-go:hover{transform:translateY(-1px)}
.cyp-soon{display:inline-block;font:600 14px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:2px dashed var(--faint);border-radius:999px;padding:10px 16px}
.cyp-card.soon .cyp-soon{color:var(--main);border-color:var(--main)}
.cyp-note{color:var(--muted);font-size:15px;margin-top:10px}
@media (prefers-reduced-motion:reduce){.cyp-go:hover{transform:none}}
/* Rex-orange calls to action */
.worldtop{display:flex;justify-content:center;margin:2px 0 14px}
.zoom,.starthere{background:var(--alley);color:#fff;box-shadow:0 4px 0 #a8401c;transition:transform .15s,box-shadow .15s}
.zoom{font-size:18px;padding:13px 26px}
.zoom:hover,.starthere:hover{background:#c4521c;transform:translateY(-2px);box-shadow:0 6px 0 #a8401c}
.zoom:active,.starthere:active{transform:translateY(2px);box-shadow:0 2px 0 #a8401c}
@media (prefers-reduced-motion:reduce){.zoom,.starthere{transition:none}.zoom:hover,.starthere:hover,.zoom:active,.starthere:active{transform:none}}
/* Helen's journey (the Town Hall) */
.banner.hall{background:#8a6a10}
.strip4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:980px){.strip4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.strip4{grid-template-columns:1fr}}
.hallask{margin-top:24px;display:flex;gap:18px;align-items:center;background:var(--alley);border-radius:16px;padding:20px 24px;box-shadow:0 4px 0 #a8401c}
.hallask .ha-k{flex:none;background:#fff;color:var(--alley);font:700 13px var(--display);letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.hallask p{margin:0;color:#fff;font:600 clamp(18px,2.4vw,22px)/1.35 var(--display);text-wrap:balance}
@media (max-width:600px){.hallask{flex-direction:column;align-items:flex-start;gap:10px}}
.more.briefing{margin-top:18px;border:2px solid var(--ink)}
.moreflag.bp{background:var(--ink);color:#fff}
.bpaper{border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;background:#fff}
.bp-row{display:grid;grid-template-columns:210px minmax(0,1fr);border-top:1px solid var(--faint)}
.bp-row:first-child{border-top:0}
.bp-k{background:var(--wash);font:700 12px/1.4 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:14px 16px;border-right:1px solid var(--faint)}
.bp-row p{margin:0;padding:12px 16px;font-size:17px;line-height:1.5;color:var(--ink)}
@media (max-width:600px){.bp-row{grid-template-columns:1fr}.bp-k{border-right:0;padding-bottom:6px}.bp-row p{padding-top:0;background:var(--wash)}}
.qcard{margin-top:28px;border:2px dashed var(--ink);border-radius:16px;padding:22px 24px;background:var(--butter)}
.qcard h2{margin:4px 0 12px}
.qcard ol{margin:0;padding-left:26px;display:grid;gap:10px}
.qcard li{padding-left:4px}
.qcard li::marker{font:700 18px var(--display);color:var(--alley)}
.qcard li p{margin:0;font:600 18px/1.4 var(--display);color:var(--ink)}
.qcard li span{font-size:13px;color:var(--muted)}
.qcard .qnote{margin:14px 0 0;color:var(--muted)}
.hallintro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;margin-top:28px;padding:20px 24px;border:1.5px solid var(--faint);border-radius:16px;background:var(--wash)}
.hallintro p{margin:0 0 10px}.hallintro p:last-child{margin:0}
@media (max-width:600px){.hallintro{grid-template-columns:1fr}.hi-fig{display:none}}
.hallstops{margin-top:28px}
.agrid .hallask{margin-top:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}
.rightway .strip4 + .verdict{margin-top:16px}
/* Sam's journey */
.banner.sam{background:#1f6b6b}
.panel .pv{position:relative}

.panel .later{position:absolute;top:16px;left:10px;background:#fff7cc;border:1.5px solid var(--ink);color:var(--ink);font:italic 600 12.5px/1.2 var(--display);padding:4px 8px;border-radius:2px;box-shadow:2px 2px 0 rgba(27,52,120,.15)}
.laterkey{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:14px;color:var(--muted)}
.laterkey .lk-swatch{width:28px;height:8px;background:repeating-linear-gradient(-45deg,#ffd84d 0 6px,#1b3478 6px 12px);border-radius:2px}
.clientpanel{margin-top:22px;border:2px solid #1f8a4c;background:#e2f2e6;border-radius:16px;padding:18px 22px}
.clientpanel .cp-k{display:inline-block;background:#1f8a4c;color:#fff;font:700 13px var(--display);letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.clientpanel p{margin:10px 0 0;font-size:18px;line-height:1.5;color:var(--ink)}
.plainlist{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--ink)}
/* Sam: delivery + finale */
.cyp-act{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cyp-alt{font:600 15px var(--display);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.moreflag.pm{background:#1f6b6b;color:#fff}
.rexlink{margin:14px 0 0;font-size:16px;color:var(--ink)}
.rexlink a{color:var(--main);font-weight:600}
.assessor{margin-top:40px;padding-top:24px;border-top:2px solid var(--faint)}
.assessor h2{margin:4px 0 8px}
.fc-tools{margin:12px 0 16px}
.fc-all{font:600 15px var(--display);background:#fff;border:2px solid var(--ink);color:var(--ink);border-radius:999px;padding:8px 16px;cursor:pointer}
.fcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.fcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fcards{grid-template-columns:1fr}}
.fc{display:flex;flex-direction:column;gap:6px;min-width:0}
.fc-in{position:relative;display:block;width:100%;min-height:190px;padding:0;border:0;background:none;cursor:pointer;perspective:900px;text-align:left;font:inherit}
.fc-front,.fc-back{position:absolute;inset:0;border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;backface-visibility:hidden;transition:transform .45s ease;border:2px solid var(--ink)}
.fc-front{background:#fff}
.fc-back{background:#e1ecfa;border-color:var(--main);transform:rotateY(180deg)}
.fc-in.flipped .fc-front{transform:rotateY(-180deg)}
.fc-in.flipped .fc-back{transform:rotateY(0)}
.fc-in:focus-visible{outline:3px solid var(--alley);outline-offset:3px;border-radius:14px}
.fc-k{font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fc-q{font:600 18px/1.35 var(--display);color:var(--ink)}
.fc-hint{margin-top:auto;font-size:13px;color:var(--alley);font-weight:600}
.fc-back ul{margin:0;padding-left:18px;display:grid;gap:4px;color:var(--ink);font-size:15px;line-height:1.4}
.fc-link{font:600 14px var(--display);color:var(--main);text-decoration:none}
@media (prefers-reduced-motion:reduce){.fc-front,.fc-back{transition:none}}
.clientpanel.pm{border-color:#1f6b6b;background:#dff0ee}
.clientpanel.pm .cp-k{background:#1f6b6b}
.cyp-act{flex-direction:row;flex-wrap:wrap;align-items:center}
.cyp-alt{display:inline-flex;align-items:center;font:700 16px var(--display);color:var(--ink);text-decoration:none;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:11px 18px}
.cyp-alt:hover{background:var(--wash)}

/* ---------- Sam's post-audit quiz ---------- */
.qz-go{margin:28px 0 8px;text-align:center}
.quiz{margin-top:28px;display:flex;flex-direction:column;gap:18px}
.qz-sec{--qc:#a8741a;--qw:#fdf3d4;border:2px solid var(--qc);border-radius:16px;background:#fff;overflow:hidden}
.qz-sec.delivery{--qc:#1f6b6b;--qw:#e0f0ef}
.qz-h{margin:0;font-size:inherit}
.qz-head{width:100%;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;border:0;background:var(--qw);cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.qz-head:focus-visible{outline:3px solid var(--qc);outline-offset:-3px}
.qz-tag{background:var(--qc);color:#fff;font:700 13px var(--display);letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.qz-title{font:700 clamp(18px,2.4vw,22px) var(--display)}
.qz-state{margin-left:auto;font:600 14px var(--display);color:var(--muted)}
.qz-head::after{content:"";width:10px;height:10px;border-right:2.5px solid var(--qc);border-bottom:2.5px solid var(--qc);transform:rotate(45deg);margin:-4px 4px 0 0}
.qz-sec.is-open .qz-head::after{transform:rotate(-135deg);margin-top:4px}
.qz-sec.is-locked{--qc:#9aa5bf;--qw:#f3f5f9}
.qz-sec.is-locked .qz-head{cursor:not-allowed}
.qz-sec.is-locked .qz-head::after{display:none}
.qz-body{padding:18px 20px 20px}
.qz-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.qz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.qz-grid{grid-template-columns:minmax(0,1fr)}}
.qz-card{min-width:0;display:flex}
.qz-card [hidden],.qz-res[hidden]{display:none}
.qz-front,.qz-back{width:100%;min-height:200px;border:2px solid var(--qc);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.qz-front{background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.qz-front:hover{background:var(--qw)}
.qz-front:focus-visible{outline:3px solid var(--qc);outline-offset:3px}
.qz-k{font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--qc)}
.qz-t{font:700 19px/1.3 var(--display)}
.qz-hint{margin-top:auto;font-size:14px;font-weight:600;color:var(--alley)}
.qz-back{background:var(--qw)}
.qz-card.open .qz-back{animation:qzflip .35s ease}
@keyframes qzflip{from{transform:perspective(800px) rotateY(80deg);opacity:.3}to{transform:none;opacity:1}}
.qz-q{font:600 16px/1.35 var(--display);color:var(--ink)}
.qz-opt{display:flex;gap:8px;align-items:flex-start;text-align:left;width:100%;padding:8px 10px;border:2px solid var(--faint);border-radius:10px;background:#fff;font:15px/1.35 var(--body);color:var(--ink);cursor:pointer}
.qz-opt b{flex:none;font-family:var(--display);color:var(--qc)}
.qz-opt:hover:not(:disabled){border-color:var(--qc)}
.qz-opt:disabled{cursor:default}
.qz-opt.correct{border-color:#1f8a4c;background:#e2f2e6}
.qz-opt.picked:not(.correct){border-color:var(--alley);background:var(--peach)}
.qz-card.done .qz-opt:not(.correct):not(.picked){opacity:.55}
.qz-res{font-size:14.5px;line-height:1.4}
.qz-card.right .qz-res b{color:#1f8a4c}
.qz-card.wrong .qz-res b{color:var(--alley)}
.qz-card.right .qz-back{border-color:#1f8a4c}
.qz-card.wrong .qz-back{border-color:var(--alley)}
.qz-foot{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qz-count{font:600 15px var(--display);color:var(--muted)}
.qz-submit{margin-left:auto;font:600 16px var(--display);background:var(--qc);color:#fff;border:0;border-radius:999px;padding:11px 22px;cursor:pointer}
.qz-submit:disabled{opacity:.4;cursor:not-allowed}
.qz-score{width:100%;font:600 18px var(--display)}
.qz-marking{text-align:center;font:600 18px var(--display);color:var(--muted)}
body.qz-lock{overflow:hidden}
.qz-modal{position:fixed;inset:0;z-index:50;background:rgba(27,52,120,.55);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}
.qz-modal[hidden]{display:none}
.qz-dialog{background:#fff;border-radius:18px;max-width:640px;width:100%;padding:26px 24px;box-shadow:0 10px 40px rgba(0,0,0,.25);animation:qzpop .35s ease}
@keyframes qzpop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.qz-dialog h2{font-size:clamp(24px,4vw,30px);margin-bottom:14px;text-align:center}
.qz-cert{border:3px double #a8741a;outline:2px solid #a8741a;outline-offset:4px;background:#fffaf0;border-radius:6px;padding:22px 20px;text-align:center;margin:6px 4px 18px}
.qz-cert-k{font:700 13px var(--display);letter-spacing:.3em;text-transform:uppercase;color:#a8741a}
.qz-cert-s{margin:10px 0 6px;color:var(--muted)}
.qz-name{display:block;margin:0 auto;width:min(100%,360px);text-align:center;font:600 22px var(--display);color:var(--ink);border:0;border-bottom:2px solid var(--ink);background:transparent;padding:4px}
.qz-cert-t{font:700 clamp(24px,4.5vw,32px) var(--display);color:var(--ink);margin:4px 0 8px}
.qz-scoreline{text-align:center;color:var(--muted);margin:6px 0}
.qz-cert-sig{margin-top:16px;display:flex;flex-direction:column;align-items:center}
.qz-cert-sig span{font:italic 600 24px var(--display);color:var(--ink);border-bottom:1.5px solid var(--ink);padding:0 28px}
.qz-cert-sig small{margin-top:4px;color:var(--muted);font-size:13px}
.qz-sam{display:flex;gap:14px;align-items:center;background:var(--wash);border-radius:14px;padding:12px 16px;margin:10px 0}
.qz-sam.low{background:var(--peach)}
.qz-samfig{flex:none}
.qz-say{font:600 17px/1.4 var(--display);color:var(--ink)}
.qz-pat{display:block;font:italic 15px var(--body);color:var(--muted);margin-bottom:2px}
.qz-joke{margin-top:6px;width:100%}
.qz-miss{margin-top:10px;font-size:15.5px}
.qz-miss ul{margin:4px 0 0;padding-left:20px}
.qz-actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.qz-btn{font:600 15px var(--display);background:var(--ink);color:#fff;border:2px solid var(--ink);border-radius:999px;padding:9px 18px;cursor:pointer;text-decoration:none}
.qz-btn.ghost{background:#fff;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.qz-card.open .qz-back,.qz-dialog{animation:none}}
@media print{
  body.qz-lock > *:not(main){display:none}
  body.qz-lock main .wrap > *:not(.qz-modal){display:none}
  .qz-modal{position:static;background:none;padding:0}
  .qz-dialog{box-shadow:none;animation:none}
  .qz-dialog > .qz-actions,.qz-dialog .qz-sam,.qz-dialog .qz-miss,.qz-dialog h2{display:none}
  .qz-name{border-bottom-color:#000}
}

/* ---------- Groups by organisation (Stories, Visitor Centre) ---------- */
.vc-group,.sp-group{margin-top:40px}
.vc-gh h2{font-size:clamp(24px,3.4vw,30px);margin:2px 0 4px}
.vc-gh p{color:var(--muted)}
.vc-group .cast{margin-top:18px}
.castcard h3{font-family:var(--display);font-size:1.5rem;margin:0;color:var(--ink)}
.vc-soon{margin-top:14px;padding:12px 16px;border:2px dashed var(--faint);border-radius:12px;color:var(--muted);font-weight:600}
.sp-grid{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.sp-grid.soon{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.sp-grid,.sp-grid.soon{grid-template-columns:minmax(0,1fr)}}
.sp-card{border:2px solid var(--ink);border-radius:14px;background:#fff}
.sp-card.rex{border-color:#e8743b}
.sp-card.sam{border-color:#1f6b6b}
.sp-card.helen{border-color:#6d4c8f}
.sp-card summary{list-style:none;display:flex;gap:14px;align-items:center;padding:14px 16px;cursor:pointer}
.sp-card summary::-webkit-details-marker{display:none}
.sp-card summary:focus-visible{outline:3px solid var(--main);outline-offset:2px;border-radius:12px}
.sp-fig{flex:none;background:var(--wash);border-radius:10px;padding:6px 10px}
.sp-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-txt b{font:700 24px var(--display);color:var(--ink)}
.sp-role{color:var(--muted);font-weight:600}
.sp-count{font:600 14px var(--display);color:var(--alley)}
.sp-open{margin-left:auto;flex:none;width:12px;height:12px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg);margin-top:-6px}
.sp-card[open] .sp-open{transform:rotate(-135deg);margin-top:6px}
.sp-body{padding:0 16px 16px;border-top:1.5px solid var(--faint)}
.sp-body>p{margin:12px 0 6px;color:var(--muted)}
.sp-body h4{font:700 13px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}
.sp-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.sp-list a{display:flex;gap:10px;align-items:baseline;padding:6px 8px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600}
.sp-list a:hover{background:var(--wash)}
.sp-n{flex:none;min-width:22px;font:700 13px var(--display);color:var(--muted)}
.sp-start{display:inline-block;margin-top:12px;font:600 15px var(--display);color:#fff;background:var(--ink);padding:9px 16px;border-radius:999px;text-decoration:none}
.sp-soon{border:2px dashed var(--faint);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.sp-soon b{font:700 22px var(--display);color:var(--ink)}
.sp-badge{align-self:flex-start;margin-top:4px;background:var(--butter);color:#8a6a10;font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.sp-vc{margin-top:28px;color:var(--muted)}

/* ---------- Reveals and new scenes on Helen's and Sam's lessons ---------- */
.revealsec{margin-top:28px}
.revealsec .reveal h2{font-size:clamp(26px,4.2vw,44px)}
.scap{margin:0 0 14px;padding:10px 14px;border-left:4px solid var(--main);background:var(--sky);border-radius:0 8px 8px 0;font:600 16px/1.45 var(--display);color:var(--ink)}
.newscene{width:100%;height:auto;display:block;border-radius:10px}
.scenekey{margin:14px 0 0;padding-left:0;list-style:none;display:grid;gap:8px}
.scenekey li{display:flex;gap:10px;align-items:baseline}
.scenekey b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:inline-grid;place-items:center;font:700 12px var(--display)}
.scenescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.clientpanel.im{border-color:#6d4c8f;background:#f3effc}.clientpanel.im .cp-k{background:#6d4c8f}

/* Tier 1, Batch 1: Stevie (Engineering) and Priya (Assurance) */
.banner.eng{background:#2b5797}
.banner.qa{background:#1f7a52}
#townmap [data-hl="eng"],#townmap [data-hl="qa"]{opacity:1}
.clientpanel.des{border-color:#2b5797;background:#e6edf8}.clientpanel.des .cp-k{background:#2b5797}
.clientpanel.site{border-color:#a86b00;background:#fdf3d4}.clientpanel.site .cp-k{background:#a86b00}
.sp-card.stevie{border-color:#2b5797}
.sp-card.priya{border-color:#1f7a52}
@media (max-width:480px){.titleblock h1{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}}
@media (max-width:480px){.top .titleblock{min-width:0}}

/* Tier 1 Batch 2: role colours (provisional, DEC-120) */
.banner.com{background:#8c2f39}
.banner.pro{background:#8a5a1f}
.banner.pre{background:#4a5d73}
#townmap [data-hl="com"],#townmap [data-hl="pre"],#townmap [data-hl="pro"]{opacity:1}
.clientpanel.sub{border-color:#8a5a1f;background:#f6ecdd}.clientpanel.sub .cp-k{background:#8a5a1f}
.sp-card.kofi{border-color:#8c2f39}
.sp-card.bev{border-color:#8a5a1f}
.sp-card.tom{border-color:#4a5d73}

/* Phase 3, 24 Oct 2026: trade mark sign */
.tm{font-size:.55em;vertical-align:super;line-height:0;font-weight:600;margin-left:1px}
.brand .tm{align-self:flex-start;margin:2px 0 0 -9px;vertical-align:baseline;line-height:1}

/* Phase 3, 24 Oct 2026: the "Ask this" / "Think like…" box takes the page's banner colour,
   so orange only ever means "continue" (Dan) */
body:has(.banner.hall){--role:#8a6a10}
body:has(.banner.sam){--role:#1f6b6b}
body:has(.banner.eng){--role:#2b5797}
body:has(.banner.qa){--role:#1f7a52}
body:has(.banner.com){--role:#8c2f39}
body:has(.banner.pro){--role:#8a5a1f}
body:has(.banner.pre){--role:#4a5d73}
.hallask{background:var(--role,var(--ink));box-shadow:0 4px 0 color-mix(in srgb,var(--role,var(--ink)) 70%,#000)}
.hallask .ha-k{color:var(--role,var(--ink))}

/* Phase 3, 24 Oct 2026: on phones the banner sits beside the eyebrow and title only;
   the subtext drops underneath at full width (Dan) */
@media (max-width:600px){
  header.top{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:8px;align-items:start}
  header.top > .banner{grid-row:1 / span 2}
  header.top > .titleblock{display:contents}
  header.top > .titleblock > .eyebrow{grid-column:2;align-self:end}
  header.top > .titleblock > h1{grid-column:2;align-self:start;margin:0}
  header.top > .titleblock > :not(.eyebrow):not(h1){grid-column:1 / -1;margin-top:6px}
}

/* Phase 3, 24 Oct 2026: the maker, beside "Who made InfoTown?" */
.usewho{display:flex;gap:16px;align-items:flex-start}
.usewho-fig{flex:none;margin-top:6px}

/* Phase 3, 24 Oct 2026: home page. Rex leaves the hero; InfoTown floats above the fountain */
.homehero{grid-template-columns:minmax(0,780px)}
.homehero .hh-go{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.homehero .hh-alt{font-weight:600;color:var(--ink)}
.square .infosign .float{animation:infofloat 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes infofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.square a.infosign:hover .bld,.square a.infosign:focus-visible .bld{filter:drop-shadow(0 0 10px rgba(47,111,214,.45))}
.square a.infosign:focus-visible text:first-child{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.square .infosign .float{animation:none}}

/* Phase 3, 24 Oct 2026: world map, "Who do you work for?" (client: Emilia, contractor: Rex, subcontractor: Nicole) */
.whopick{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
.whopick button{font:600 15px var(--display);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;padding:8px 18px;cursor:pointer}
.whopick button[aria-pressed=true]{background:var(--ink);color:#fff}
.whopick button:focus-visible{outline:3px solid #f2b400;outline-offset:2px}
.whocards{display:grid;gap:12px;margin-bottom:16px}
.whocard{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--wash);border-radius:14px;padding:14px 18px}
.whocard h3{margin:0 0 4px;font-size:20px}
.whocard p{margin:0 0 6px;max-width:68ch}
.whocard .wc-soon{font-size:15px;color:var(--muted,#56658a)}
.worldtop .zoomsoon{display:none;font:600 16px var(--display);color:var(--ink);background:#fff;border:2px dashed #9aa5bf;border-radius:999px;padding:10px 20px}
.world.js-who .whocard{display:none}
.world.js-who[data-who=client] .whocard[data-who=client],.world.js-who[data-who=contractor] .whocard[data-who=contractor],.world.js-who[data-who=sub] .whocard[data-who=sub]{display:grid}
.world.js-who .whomark{display:none}
.world.js-who[data-who=client] .whomark[data-who=client],.world.js-who[data-who=contractor] .whomark[data-who=contractor],.world.js-who[data-who=sub] .whomark[data-who=sub]{display:inline}
.world.js-who[data-who=client] #zoom,.world.js-who[data-who=sub] #zoom{display:none}
.world.js-who[data-who=client] .zoomsoon[data-who=client],.world.js-who[data-who=sub] .zoomsoon[data-who=sub]{display:inline-block}
@media (max-width:600px){.whocard{grid-template-columns:1fr;justify-items:start}.whocard .wc-fig{width:48px;height:68px}}
/* World Map: designer pick (Alex), 24 Oct 2026 */
.world .whohead{margin:0 0 12px;font-size:24px}
.world.js-who[data-who=designer] .whocard[data-who=designer]{display:grid}
.world.js-who[data-who=designer] .whomark[data-who=designer]{display:inline}
.world.js-who[data-who=designer] .zoomsoon[data-who=designer]{display:inline-block}
.world.js-who[data-who=designer] #zoom{display:none}
/* Choose your path: follow the whole project (Phase 3b, 24 Oct 2026) */
.cyp-whole{display:inline-block;margin:8px 0 0 10px;font:600 17px var(--display);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;padding:11px 22px;text-decoration:none}
.cyp-whole:hover,.cyp-whole:focus-visible{background:var(--ink);color:#fff}
@media (max-width:600px){.cyp-whole{margin-left:0}}

/* World Map: two ways in (Dan, 25 Oct; DEC-176) */
.twoways{display:grid;grid-template-columns:minmax(0,1.6fr) auto minmax(0,1fr);gap:18px;align-items:stretch;margin:30px 0 8px}
.twoways article{border-radius:16px;padding:20px 22px}
.twoways h2{margin:2px 0 8px;font-size:1.45rem;line-height:1.2}
.twoways p{margin:0 0 12px;max-width:60ch}
.tw-main{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:linear-gradient(120deg,#fff8de,#fff 75%);border:2.5px solid #f0d27a}
.tw-town{border:2px solid var(--faint);background:var(--wash);display:flex;align-items:center}
.tw-go{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin:4px 0 0 !important}
.tw-alt{font-family:var(--display);font-weight:600;color:var(--ink);text-decoration:none;border:2px solid var(--ink);border-radius:999px;padding:10px 20px}
.tw-alt:hover,.tw-alt:focus-visible{background:var(--ink);color:#fff}
.tw-or{display:flex;align-items:center;margin:0 !important;font:600 14px var(--display);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
@media (max-width:860px){.twoways{grid-template-columns:1fr}.tw-or{justify-content:center}.tw-main{grid-template-columns:1fr}}
/* The information's icon (DEC-177) */
.it-sun{overflow:visible;flex:none}
.it-sun g,.it-sun circle{transform-box:fill-box;transform-origin:center}
.it-sun .glow{animation:it-breathe 2.8s ease-in-out infinite alternate}
.it-sun .core{animation:it-breathe 2.8s ease-in-out infinite alternate-reverse}
.it-sun .swirl{animation:it-spin 2.6s linear infinite}
.it-sun .o1{animation:it-spin 6s linear infinite}
.it-sun .o2{animation:it-spin 8s linear infinite reverse}
.it-sun .o3{animation:it-spin 10s linear infinite}
.it-sun .tilt{animation:it-tilt 3.2s ease-in-out infinite alternate}
.it-sun .t2{animation-duration:4.1s}.it-sun .t3{animation-duration:5s;animation-delay:-1.4s}
@keyframes it-spin{to{transform:rotate(360deg)}}
@keyframes it-breathe{from{transform:scale(.82)}to{transform:scale(1.16)}}
@keyframes it-tilt{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.it-sun *{animation:none !important}}
/* Lessons link to the Project Line (DEC-185) */
.onproject{margin:22px 0;padding:14px 18px;border:2px solid #1f6b6b;border-radius:14px;background:#eef7f6}
.onproject h2{font-size:18px;margin:2px 0 8px}
.onproject ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.onproject a{display:inline-block;padding:7px 13px;border-radius:999px;background:#fff;border:1.5px solid #1f6b6b;color:var(--ink);text-decoration:none;font-weight:600}
.onproject a small{display:block;font-weight:400;color:var(--muted,#56658a);font-size:12px}
.onproject a:hover,.onproject a:focus-visible{background:#1f6b6b;color:#fff}
.onproject a:hover small,.onproject a:focus-visible small{color:#e6f2f1}
/* World Map, compact top so the map shows (DEC-186) */
.wm-top{gap:18px;padding-bottom:4px}
.wm-top .banner{font-size:15px;padding:14px 16px 20px;min-width:0;width:auto}
.wm-top h1{font-size:clamp(1.7rem,3.2vw,2.3rem);margin:2px 0 6px;line-height:1.15}
.wm-top .lead{font-size:17px;margin:0;max-width:none}
.wm-ways{grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 10px}
.wm-ways article{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px}
.wm-ways article>div{flex:1;min-width:0}
.wm-ways h2{font-size:1.15rem;margin:0}
.wm-ways p{margin:0;font-size:15px}
.wm-ways .it-sun{width:42px;height:42px}
.wm-ways .nextbtn,.wm-ways .tw-alt{font-size:15px;padding:8px 16px;white-space:nowrap;margin:0}
.world{margin-top:8px}
.world .whohead{font-size:20px;margin:0 0 8px}
.world .whopick{margin:0 0 8px}
.world .whopick button{font-size:14px;padding:6px 14px}
.world .whocards{margin-bottom:10px}
.world .whocard{padding:8px 14px;gap:12px}
.world .whocard h3{font-size:17px;margin:0}
.world .whocard p{margin:0 0 2px;font-size:15px}
.world .whocard .wc-soon{font-size:14px;margin:0}
@media (max-width:760px){.wm-ways{grid-template-columns:1fr}.wm-ways article{flex-wrap:wrap}}
.wm-ways{grid-template-columns:1fr}
.wm-ways .tw-main{background:linear-gradient(90deg,#e6f0fc,#f7fbff 70%);border:2px solid #b9d0f2}
.wm-ways article>div{flex:1 1 200px}
@media (max-width:600px){.world .whocard{grid-template-columns:auto 1fr;align-items:start}.world .whocard .wc-fig{width:32px;height:46px}.wm-ways .it-sun{display:none}}
/* Comic labels stay readable over lines (DEC-188) */
article.panel svg text:not([fill="#fff"]):not([fill="white"]){paint-order:stroke;stroke:#fff;stroke-width:2.4px;stroke-linejoin:round}
/* DEC-221: a time jump is banded by the stage it lands in: a striped band across the top, and the card in that stage's colour naming the stage. In use panels also take the Use it wash (DEC-191). */
.panel.p-ph .pv::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;z-index:1;background:repeating-linear-gradient(-45deg,var(--phc) 0 9px,#fff 9px 18px)}
.panel.p-ph .later{background:#fff;border-color:var(--phc);color:var(--ink);top:13px;left:8px;font-size:12px;padding:3px 7px}
.panel.p-ph .phtag{position:absolute;top:0;right:10px;z-index:2;background:var(--phc);color:#fff;font:700 10.5px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;padding:3px 7px 4px;border-radius:0 0 5px 5px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.panel.p-ph-use{border-color:#3d5f8f}
.panel.p-ph-use svg{background:#dfe7f2 !important;border-bottom-color:#3d5f8f}
.panel.p-ph-use .tag{color:#3d5f8f}
.panel.p-ph-need{--phc:#6a55b0}
.panel.p-ph-win{--phc:#a8741a}
.panel.p-ph-ready{--phc:#1f6b6b}
.panel.p-ph-design{--phc:#2f6fd6}
.panel.p-ph-build{--phc:#5e7d2a}
.panel.p-ph-hand{--phc:#8c2f39}
.panel.p-ph-use{--phc:#3d5f8f}
.laterkey .lk-swatch{background:repeating-linear-gradient(-45deg,#5e7d2a 0 6px,#fff 6px 12px);border:1px solid #5e7d2a}

/* DEC-225: the Stories page, town by town */
.sp-key{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--muted);font-size:15px}
.sp-key li{display:flex;align-items:center;gap:8px}
.sp-st{display:inline-block;font:700 11.5px var(--display);letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;align-self:flex-start}
.st-live{background:#dff2e8;color:#1f6b45}.st-planned{background:#fff1d1;color:#7a5410}.st-cameo{background:#e9edf3;color:#56658a}
.sp-follow{display:inline-block;align-self:flex-start;font:700 11.5px var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--tc,#1b3478);padding:3px 9px;border-radius:4px}
.sp-key .sp-follow{background:#1b3478}
.town-fold{margin-top:22px;border:2px solid var(--tc);border-radius:16px;background:#fff}
.town-fold>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer}
.town-fold>summary::-webkit-details-marker{display:none}
.town-fold>summary:focus-visible{outline:3px solid var(--main);outline-offset:2px;border-radius:14px}
.tdot{flex:none;width:16px;height:16px;border-radius:50%;background:var(--tc)}
.tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tt b{font:700 26px var(--display);color:var(--ink)}
.tsum{color:var(--muted);font-weight:600;font-size:15px}
.tfaces{margin-left:auto;display:flex;align-items:flex-end;gap:0}
.tf{display:inline-flex;margin-left:-4px;opacity:.9}.tf-lead{transform:scale(1.18);transform-origin:bottom;opacity:1}
.town-fold[open]>summary .sp-open{transform:rotate(-135deg);margin-top:6px}
.town-fold[open]>summary .tfaces{display:none}
.town-body{padding:0 18px 20px;border-top:1.5px solid var(--faint)}
.tblurb{margin:14px 0 0;color:var(--muted);max-width:80ch}
.tn-note{margin:14px 0 0;color:var(--muted);font-style:italic}
.sp-leadrow{margin-top:16px}
.sp-card.sp-lead,.sp-card.sp-lead.sp-planned{border:3px solid var(--tc);box-shadow:0 0 0 4px color-mix(in srgb,var(--tc) 18%,#fff)}
.sp-card.sp-lead .sp-fig{background:color-mix(in srgb,var(--tc) 14%,#fff)}
.sp-card.sp-lead summary{padding:18px 20px}
.sp-card.sp-lead .sp-txt b{font-size:28px}
.sp-card.sp-cameo{border-style:dashed;border-color:var(--faint)}
.sp-card.sp-planned{border-color:#e8d39a}
.sp-plan{margin:12px 0 0;font-weight:600;color:#7a5410}
.sp-none{color:var(--muted);font-weight:500}
.sp-app{margin:12px 0 0}.sp-app h4{margin-top:4px}
.sp-app ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.sp-app a{display:block;padding:5px 8px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600}
.sp-app a:hover{background:var(--wash)}
.sp-app .sp-where{color:var(--muted);font-weight:500;font-size:13.5px}
@media (max-width:700px){.tfaces{display:none}.tt b{font-size:22px}}

.sp-card .sp-head{display:flex;gap:14px;align-items:center;padding:14px 16px}
.sp-card.sp-cameo{border:1.5px solid var(--faint);background:#fafbfd}
.sp-card.sp-cameo .sp-txt b{font-size:19px}.sp-card.sp-cameo .sp-fig svg{width:40px;height:70px}
.sp-card.sp-planned{border:2px solid #e8d39a}

/* ---------- Town Plan: the route sign at the top of every page (routes.py; DEC-233 proposal, 1 Nov 2026) ---------- */
.route-sign{--rs:var(--ink);border:1.5px solid var(--faint);border-left:6px solid var(--rs);border-radius:10px;padding:10px 16px 10px;margin:0 0 22px;background:var(--paper);font-family:var(--display);font-size:14px;color:var(--ink)}
.route-sign .rs-top{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;align-items:baseline}
.route-sign .rs-route{font-weight:700;font-size:15px}
.route-sign .rs-where{color:var(--muted);font-size:13.5px}
.route-sign .rs-line{list-style:none;margin:10px 0 4px;padding:0;display:flex;align-items:center;position:relative}
.route-sign .rs-line::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:4px;margin-top:-2px;background:var(--rs);border-radius:2px;opacity:.35}
.route-sign .rs-line li{position:relative;flex:1 1 0;display:flex;justify-content:center}
.route-sign .rs-line li:first-child{justify-content:flex-start}
.route-sign .rs-line li:last-child{justify-content:flex-end}
.route-sign .rs-line li::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--paper);border:2.5px solid var(--rs);box-sizing:border-box}
.route-sign .rs-line li.done::after{background:var(--rs)}
.route-sign .rs-line li.here::after{width:18px;height:18px;border-width:3.5px}
.route-sign .rs-bar{height:6px;border-radius:3px;background:var(--faint);margin:12px 0 6px;overflow:hidden}
.route-sign .rs-bar span{display:block;height:100%;background:var(--rs)}
.route-sign .rs-stop{font-weight:600;font-size:14px;margin:2px 0 6px}
.route-sign .rs-foot{display:flex;gap:4px 18px;flex-wrap:wrap;color:var(--muted);font-size:13px;font-family:var(--body)}
.route-sign .rs-way{margin-left:auto}
.route-sign .rs-way a{color:var(--line);font-weight:600}
@media (max-width:560px){.route-sign .rs-way{margin-left:0}.route-sign .rs-line li::after{width:8px;height:8px;border-width:2px}.route-sign .rs-line li.here::after{width:14px;height:14px;border-width:3px}}

/* ---------- Site search: "Ask at the desk" (search.py; DEC-240, 1 Nov 2026) ---------- */
.ss-box{position:relative;display:flex;align-items:center;font-family:var(--body)}
.ss-box .ss-icon{position:absolute;left:11px;color:var(--muted);display:flex;pointer-events:none}
.ss-box input{font:500 15px var(--body);color:var(--ink);background:var(--wash);border:1.5px solid var(--faint);border-radius:999px;padding:7px 14px 7px 34px;width:200px;transition:border-color .2s}
.ss-box input:focus{outline:none;border-color:var(--line);background:var(--paper)}
.ss-box input::-webkit-search-cancel-button{cursor:pointer}
.ss-list{position:absolute;top:calc(100% + 6px);right:0;width:min(420px,92vw);max-height:70vh;overflow:auto;margin:0;padding:6px;list-style:none;background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;box-shadow:0 10px 30px rgba(27,52,120,.16);z-index:50}
.ss-list a{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.ss-list li.on a,.ss-list a:hover{background:var(--wash)}
.ss-txt{display:flex;flex-direction:column;min-width:0}
.ss-txt b{font:600 15px var(--display)}
.ss-txt small{color:var(--muted);font-size:13.5px;line-height:1.35}
.ss-type{flex:0 0 auto;font:700 10.5px var(--display);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:4px;margin-top:2px;color:#fff;background:var(--muted);min-width:52px;text-align:center}
.ss-type.ss-stop{background:#2f6fd6}.ss-type.ss-word{background:#2e8b57}.ss-type.ss-person{background:#d65a2c}.ss-type.ss-place{background:#1b3478}
.ss-none{padding:10px 12px;color:var(--muted);font-size:14.5px}
.ss-big input{width:100%;font-size:17px;padding:12px 18px 12px 42px;background:var(--paper);border-width:2px;border-color:var(--ink)}
.ss-big input:focus{width:100%}
.ss-big .ss-icon{left:15px}
.ss-big{width:100%}
.ss-big .ss-list{left:0;right:auto;width:100%}
@media (max-width:700px){.site-header .ss-box{order:3;width:100%}.site-header .ss-box input,.site-header .ss-box input:focus{width:100%}.site-header .ss-list{left:0;right:auto;width:100%}}

/* ---------- The Visitor Centre: the front door (visitorcentre.py; DEC-238, 1 Nov 2026) ---------- */
.vc-front{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:center;margin-top:26px}
.vc-under{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px;align-items:end}
.vc-under .vc-skip{grid-column:1 / -1}
.vc-under .vc-tour{margin-top:0}
.vc-art svg{width:100%;height:auto;display:block}
@media (prefers-reduced-motion:no-preference){.vc-steam{animation:vcsteam 3.2s ease-in-out infinite}}
@keyframes vcsteam{0%,100%{opacity:.25;transform:translateY(2px)}50%{opacity:.9;transform:translateY(-3px)}}
.vc-bubble{position:relative;background:var(--butter);border:2px solid var(--ink);border-radius:16px;padding:16px 20px;font-size:17.5px}
.vc-bubble p+p{margin-top:8px}
.vc-bubble::before{content:"";position:absolute;left:-13px;top:34px;border:12px solid transparent;border-right-color:var(--ink);border-left:0}
.vc-bubble::after{content:"";position:absolute;left:-9px;top:36px;border:10px solid transparent;border-right-color:var(--butter);border-left:0}
.vc-ask-desk{margin-top:0}
.vc-ask-desk .eyebrow{display:block;margin-bottom:6px}
.vc-tour{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin-top:18px;padding:16px 20px;border-radius:14px;background:var(--ink);color:#fff;text-decoration:none;font-family:var(--display)}
.vc-tour span:first-child{font-size:20px;font-weight:700}
.vc-tour small{flex-basis:100%;order:3;color:#cfd8ee;font-size:14px}
.vc-tour .vc-arrow{margin-left:auto;font-size:26px}
.vc-tour:hover{background:#244291}
.vc-skip{margin-top:10px;color:var(--muted);font-size:15.5px}
.vc-intray-line{grid-column:1 / -1;margin-top:4px;padding:10px 14px;border:1.5px dashed var(--faint);border-radius:10px;font-size:15.5px}
.vc-intray-line small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.vc-intray-tag{display:inline-block;font:700 11px var(--display);letter-spacing:.08em;text-transform:uppercase;background:#fde6a0;color:#1b3478;border:1.5px solid #1b3478;border-radius:3px;padding:1px 6px;margin-right:6px}
.vc-intray-link:hover .vc-intray rect,.vc-intray-link:focus .vc-intray rect{fill:#ffd84d}
.vc-fb{transform-box:fill-box;transform-origin:50% 50%;filter:drop-shadow(0 0 6px rgba(47,111,214,.6))}
@media (prefers-reduced-motion:no-preference){.vc-fb{animation:infofloat 3.2s ease-in-out infinite,vcglow 2.4s ease-in-out infinite}}
@keyframes infofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes vcglow{0%,100%{filter:drop-shadow(0 0 3px rgba(47,111,214,.35))}50%{filter:drop-shadow(0 0 12px rgba(47,111,214,.9))}}
.vc-intray-link{cursor:pointer}
.vc-intray-link:hover .vc-fb text,.vc-intray-link:focus-visible .vc-fb text{text-decoration:underline}
.vc-intray-link:hover .vc-intray rect,.vc-intray-link:focus-visible .vc-intray rect{fill:#ffd84d}
.vc-sec{margin-top:52px}
.vc-sec .sechead p{margin-top:8px}
.vc-maps{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.vc-maps li{border:1.5px solid var(--faint);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.vc-maps svg{width:64px;height:48px}
.vc-maps b{font:600 17px var(--display)}
.vc-maps span{color:var(--muted);font-size:15.5px;flex:1}
.vc-maps a,.vc-maps em{font:600 14.5px var(--display);color:var(--line);font-style:normal}
.vc-maps em{color:var(--muted)}
.vc-steps{list-style:none;counter-reset:vs;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vc-steps li{counter-increment:vs;border-top:4px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.vc-steps li::before{content:counter(vs);font:700 28px var(--display);color:var(--alley)}
.vc-steps b{font:600 17px var(--display)}
.vc-steps span{color:var(--muted);font-size:15.5px}
.vc-signs{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center}
.vc-signs h3{font-size:18px;margin-bottom:6px}
.vc-signs p+p{margin-top:8px}
.vc-sample .route-sign{margin:0}
.vc-fakelink{color:var(--line);font-weight:600;text-decoration:underline}
.vc-leads{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.vc-lead{display:flex;gap:12px;padding:16px;border:2px solid var(--ink);border-radius:16px;text-decoration:none;color:var(--ink);background:var(--paper);scroll-margin-top:80px}
.vc-lead:hover{background:var(--wash)}
.vc-lead .vc-fig{flex:0 0 auto}
.vc-lt{display:flex;flex-direction:column;gap:4px}
.vc-ask{font:600 13px var(--display);color:var(--muted)}
.vc-lt b{font:700 21px var(--display)}
.vc-body{font-size:15.5px}
.vc-meta{font:600 13.5px var(--display);color:var(--muted)}
.vc-go{font:700 15px var(--display);color:var(--line);margin-top:4px}
.vc-soon{margin-top:22px}
.vc-soon h3{font-size:15px;color:var(--muted);font-family:var(--display);letter-spacing:.08em;text-transform:uppercase}
.vc-soon ul,.vc-who{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 16px}
.vc-soon li,.vc-who li{display:flex;align-items:center;gap:8px;scroll-margin-top:80px}
.vc-soon li b,.vc-who li b{display:block;font:600 15.5px var(--display)}
.vc-soon small,.vc-who small{display:block;color:var(--muted);font-size:14px}
.vc-follow{font:600 14px var(--display);color:var(--line)}
.vc-st{font-size:13px;color:var(--muted);font-style:italic}
.vc-everyone{margin-top:24px;border:1.5px solid var(--faint);border-radius:14px;padding:4px 16px}
.vc-everyone>summary{cursor:pointer;font:600 17px var(--display);padding:12px 0}
.vc-town{border-left:5px solid var(--tc);padding:4px 0 4px 14px;margin:14px 0 22px}
.vc-town h3{font-size:17px}
.vc-town>p{color:var(--muted);font-size:15px;margin-top:2px}
.vc-uc{display:inline-block;margin-left:8px;background:#ffd84d;color:#1b3478;padding:2px 8px;border-radius:4px;letter-spacing:.08em}
.vc-build{background:repeating-linear-gradient(-45deg,#fff7d6 0 14px,#fffbea 14px 28px);border-radius:16px;padding:22px}
.vc-job{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.vc-job li{background:var(--paper);border:1.5px solid var(--ink);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.vc-job b{font:600 18px var(--display)}
.vc-job span{font-size:15.5px;flex:1}
.vc-job a{font:600 14.5px var(--display);color:var(--line)}
.vc-deskl{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.vc-deskl a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1.5px solid var(--faint);border-radius:12px;text-decoration:none;color:var(--ink);height:100%}
.vc-deskl a:hover{border-color:var(--ink)}
.vc-deskl b{font:600 17px var(--display)}
.vc-deskl span{color:var(--muted);font-size:15px}
@media (max-width:820px){.vc-front,.vc-signs,.vc-under{grid-template-columns:1fr}.vc-under .vc-tour{margin-top:10px}.vc-steps{grid-template-columns:1fr}.vc-bubble::before,.vc-bubble::after{display:none}.vc-art{max-width:460px}}

/* Front page heading: full width, one line on desktop, wraps neatly on phones (1 Nov 2026) */
.homehero{grid-template-columns:minmax(0,1fr)}
.homehero h1{font-size:clamp(32px,4.9vw,56px);text-wrap:balance;margin:6px 0 14px}
.homehero .lead,.homehero .hh-meet{max-width:none}

/* ---------- The Map Room (maproom.py, DEC-243) ---------- */
.mr-head{padding:26px 0 6px}.mr-head h1{margin:.15em 0 .25em}.mr-head .eyebrow a{color:inherit}
.mr-pick,.mr-routes{margin:34px 0}
.mr-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 0}
.mr-tabs button{all:unset;box-sizing:border-box;cursor:pointer;border:2px solid var(--faint);border-radius:12px;padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:4px;color:var(--ink)}
.mr-tabs button:hover{border-color:#2f6fd6}
.mr-tabs button:focus-visible{outline:3px solid #ffd84d;outline-offset:2px}
.mr-tabs button[aria-selected=true]{border-color:#1b3478;background:#1b3478;color:#fff}
.mr-q{font:600 15px/1.3 var(--display)}.mr-a{font-size:13px;opacity:.78}
.mr-panel{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:center;margin-top:12px;border:2px solid #1b3478;border-radius:14px;padding:16px;background:#fbfcfe}
.mr-panel[hidden]{display:none}
.mr-pic img{width:100%;height:auto;display:block;border-radius:8px;background:#fff}
.mr-say h3{margin:0 0 .4em}.mr-not{color:var(--muted)}
.mr-go{display:inline-block;font:600 15px var(--display);color:#fff;background:#1b3478;border-radius:10px;padding:9px 14px;text-decoration:none;margin-top:4px}
.mr-go:hover{background:#2f6fd6}.mr-go.ghost{background:#fff;color:#1b3478;border:2px solid #1b3478;padding:7px 12px}
.mr-mini{display:flex;flex-direction:column;gap:7px;padding:16px;background:#fff;border-radius:8px}
.mr-mini i{display:block;height:6px;border-radius:3px;background:var(--c);width:calc(var(--n) / 53 * 100%);min-width:16px}
.rm-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 16px}
.rm-filter span{font-weight:600;margin-right:4px}
.rm-filter button{all:unset;cursor:pointer;border:1.5px solid #c5cee0;border-radius:99px;padding:5px 12px;font-size:14px}
.rm-filter button:focus-visible{outline:3px solid #ffd84d}
.rm-filter button[aria-pressed=true]{background:#1b3478;border-color:#1b3478;color:#fff}
.net{border:2px solid var(--faint);border-radius:14px;padding:16px 18px;background:#fff}
.net-in{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:0 0 12px;border-bottom:1px dashed #d5dcea;margin-bottom:12px;color:var(--muted)}
.tour-track{display:flex;align-items:center;justify-content:space-between;height:8px;width:120px;background:var(--c);border-radius:4px;padding:0 4px}
.tour-track i{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--c)}
.net-body{display:grid;grid-template-columns:64px 1fr}
.hub{background:#fff;border:3px solid #1b3478;border-radius:32px;display:flex;align-items:flex-start;justify-content:center;padding-top:14px;position:relative;z-index:1}
.hub span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 13px/1.1 var(--display);color:#1b3478;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.lines{display:flex;flex-direction:column;gap:2px;margin-left:-3px;padding-bottom:6px}
.ln-group{font:600 12px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:12px 0 4px 18px}
.ln{all:unset;cursor:pointer;display:flex;align-items:center;min-height:38px;border-radius:0 8px 8px 0;transition:opacity .2s}
.ln:hover,.ln:focus-visible{background:#f4f7fc}.ln:focus-visible{outline:3px solid #ffd84d}
.ln-bar{flex:none;position:relative;height:6px;background:var(--c);width:calc(var(--n) / 53 * 62%);min-width:34px;transition:height .15s,box-shadow .15s}
.ln-bar::after{content:"";position:absolute;right:-6px;top:50%;width:10px;height:10px;margin-top:-8px;border-radius:50%;background:#fff;border:3px solid var(--c)}
.ln-lab{padding:0 10px 0 16px;color:#1b3478}.ln-lab b{font-weight:600}
.ln-lab em{font-style:normal;font-size:11px;font-weight:600;background:#ffd84d;border-radius:4px;padding:1px 5px;margin-left:4px}
.ln-meta{font-size:13px;color:var(--muted);margin-left:6px;white-space:nowrap}
.ln:hover .ln-bar,.ln[aria-expanded=true] .ln-bar{height:9px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent)}
.ln[aria-expanded=true]{background:#eef3fb}
.ln[data-r=process] .ln-bar{background:repeating-linear-gradient(90deg,var(--c) 0 6px,transparent 6px 10px)}
.ln.dim{opacity:.28}
.strip{margin:18px 0 0;border:2px solid var(--c);border-radius:14px;padding:16px 18px 18px;background:#fff}
.st-head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;justify-content:space-between}
.st-head h3{margin:0;color:var(--c)}.st-head .k{font-size:13px;color:var(--muted)}
.st-stage{font:600 12px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;margin:18px 0 2px;color:var(--sc,var(--c))}
.st-line{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));row-gap:18px}
.st-line li{position:relative;padding:20px 10px 0 0;font-size:14px;line-height:1.3}
.st-line li::before{content:"";position:absolute;left:0;right:0;top:6px;height:6px;background:var(--lc,var(--c))}
.st-line li:first-child::before{left:8px}.st-line li:last-child::before{right:auto;width:8px}
.st-line li:only-child::before{display:none}
.st-line li a{color:#1b3478;text-decoration:none;display:block}
.st-line li a:hover{text-decoration:underline}
.st-line li a::before{content:"";position:absolute;left:2px;top:1px;width:10px;height:10px;border-radius:50%;background:#fff;border:3px solid var(--lc,var(--c));z-index:1}
.st-line .n{display:block;font-size:11px;color:#8a93a6}
.st-line li.here a{font-weight:700}.st-line li.here .n{color:#1b3478;font-weight:700}
.st-line li.here a::before{background:#ffd84d;border-color:#1b3478;width:14px;height:14px;left:0;top:-1px}
@media (prefers-reduced-motion:no-preference){.st-line li.here a::before{animation:mr-yah 1.6s ease-in-out infinite}}
@keyframes mr-yah{50%{box-shadow:0 0 0 6px rgba(255,216,77,.55)}}
.st-go{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.mr-back{margin:30px 0 50px}
@media (max-width:760px){
 .mr-tabs{grid-template-columns:1fr 1fr}
 .mr-panel{grid-template-columns:1fr}
 .net{padding:12px}.net-in{font-size:14px}
 .net-body{grid-template-columns:34px 1fr}.hub span{font-size:11px}
 .ln{flex-direction:column-reverse;align-items:flex-start;padding:4px 0 6px}
 .ln-lab{padding:0 0 4px 16px;font-size:15px}.ln-meta{display:block;margin:0;font-size:12px}
 .ln-bar{width:calc(var(--n) / 53 * 88%)}
 .ln-group{margin-left:14px}
 .st-line{grid-template-columns:1fr;row-gap:0}
 .st-line li{padding:4px 0 14px 26px}
 .st-line li::before{left:6px!important;right:auto!important;top:0;bottom:0;width:6px!important;height:auto}
 .st-line li:first-child::before{top:8px}.st-line li:last-child::before{bottom:auto;height:8px}
 .st-line li a::before{left:1px;top:3px}.st-line li.here a::before{left:-1px;top:1px}
}
.vc-mr{margin:14px 0 0;font:600 15px var(--display)}