.c-root{
  scroll-behavior:smooth;
  --c-bg:#ffffff; --c-fg:#1b1b30; --c-muted:#6e7292; --c-accent:#2f5bea;
  --c-accent-fg:#ffffff; --c-bar:#ffffff; --c-bar-fg:#1b1b30; --c-surface:#f3f6fd;
  --c-line:#e2e7f5; --c-radius:22px; --c-body:"Figtree",system-ui,sans-serif;
  --c-head:"Bricolage Grotesque","Figtree",system-ui,sans-serif; --c-measure:68ch;
  background:var(--c-bg);color:var(--c-fg);font-family:var(--c-body);
  display:flex;flex-direction:column;min-height:100%;position:relative;
}
.c-root *{box-sizing:border-box}
.c-nav{
  background:var(--c-bar);color:var(--c-bar-fg);display:flex;align-items:center;gap:6px;
  padding:0 14px;min-height:62px;font-family:var(--c-head);position:sticky;top:0;z-index:6;
  border-bottom:1px solid var(--c-line);
}
.c-nav .nz{display:flex;align-items:center;gap:5px;min-height:44px}
.c-nav .nz-left,.c-nav .nz-right{flex:0 0 auto}
.c-nav .nz-mid{flex:1;justify-content:center;min-width:24px}
.c-nav button{
  background:transparent;border:0;color:inherit;border-radius:999px;padding:9px 13px;font-size:14px;
  font-weight:600;display:flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
}
.c-nav button:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.c-nav button svg{width:17px;height:17px}
.c-nav .c-title{font-size:15px;font-weight:700;padding:0 10px;text-align:center;letter-spacing:-.01em}
.c-progress{height:7px;background:color-mix(in srgb,currentColor 15%,transparent);width:96px;border-radius:4px;overflow:hidden}
.c-progress i{display:block;height:100%;background:var(--c-accent);border-radius:4px;transition:width .3s}

/* hero */
.c-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.c-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.c-hero .veil{position:absolute;inset:0;z-index:-1}
.c-hero .hin{padding:38px 30px;max-width:min(760px,100%);color:#fff}
.c-hero .hin h1{font-family:var(--c-head);font-size:clamp(28px,4.4vw,50px);line-height:1.05;margin:0 0 10px;letter-spacing:-.03em;font-weight:800}
.c-hero .hin p{font-size:clamp(15px,1.9vw,19px);margin:0;line-height:1.5;opacity:.95}
.c-hero.tone-light .hin{color:var(--c-fg)}
.c-hero.pos-center{align-items:center;justify-content:center;text-align:center}
.c-hero.pos-center .hin{padding:52px 30px}

.c-page{flex:1;padding:38px 26px 90px}
.c-page.has-hero{padding-top:34px}
.c-page-head{max-width:var(--c-measure);margin:0 auto 30px}
.c-page-head .disp{font-family:var(--c-head);font-size:clamp(27px,3.6vw,42px);line-height:1.08;margin:0 0 10px;letter-spacing:-.03em;font-weight:800}
.c-page-head .sub{font-family:var(--c-head);color:var(--c-accent);font-weight:700;font-size:14px;margin:0 0 10px;letter-spacing:.01em}
.c-page-head .body{font-size:17.5px;line-height:1.62;margin:0;color:var(--c-muted)}
.c-article{max-width:1080px;margin:0 auto 10px}
.c-article-head{max-width:var(--c-measure);margin:0 auto 18px}
.c-article-head h2{font-family:var(--c-head);font-size:25px;margin:0;letter-spacing:-.02em;font-weight:700}
.c-block{display:grid;gap:26px;max-width:1080px;margin:0 auto 40px;align-items:start}
.c-block[data-layout="full"]{grid-template-columns:1fr}
.c-block[data-layout="half"]{grid-template-columns:1fr 1fr}
.c-block[data-layout="third"]{grid-template-columns:repeat(3,1fr)}
.c-block[data-layout="two-one"]{grid-template-columns:2fr 1fr}
.c-block[data-layout="one-two"]{grid-template-columns:1fr 2fr}
.c-block-head{grid-column:1/-1;max-width:var(--c-measure)}
.c-block-head h3{font-family:var(--c-head);font-size:19px;margin:0 0 5px;font-weight:700}
.c-block-head p{margin:0;color:var(--c-muted);font-size:15px}
.c-comp{position:relative}
.c-comp>h4{font-family:var(--c-head);font-size:20px;margin:0 0 6px;letter-spacing:-.02em;font-weight:700}
.c-comp>.instr{font-size:14px;color:var(--c-muted);margin:0 0 14px}
.c-comp p{line-height:1.65;margin:0 0 13px;max-width:var(--c-measure)}
.c-comp p:last-child{margin-bottom:0}
.c-comp img{max-width:100%;height:auto;display:block;border-radius:var(--c-radius)}
.c-cap{font-size:13px;color:var(--c-muted);margin-top:9px}
.c-btn{
  background:var(--c-accent);color:var(--c-accent-fg);border:0;border-radius:999px;
  padding:11px 20px;font-family:var(--c-head);font-weight:700;font-size:14.5px;cursor:pointer;
}
.c-btn:hover{filter:brightness(.92)}
.c-btn[disabled]{opacity:.4;cursor:not-allowed;filter:none}
.c-btn.ghost{background:transparent;color:var(--c-accent);box-shadow:inset 0 0 0 2px var(--c-line)}
.c-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;align-items:center}

/* image + text */
.c-it{display:grid;gap:26px;align-items:center}
.c-it[data-side="left"]{grid-template-columns:1fr 1fr}
.c-it[data-side="right"]{grid-template-columns:1fr 1fr}
.c-it[data-side="right"] .c-it-img{order:2}
.c-it-img img{width:100%;object-fit:cover}
@media(max-width:700px){.c-it[data-side]{grid-template-columns:1fr}.c-it[data-side="right"] .c-it-img{order:0}}

/* gallery */
.c-gal{display:grid;gap:12px}
.c-gal[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.c-gal[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.c-gal[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
.c-gal figure{margin:0;position:relative}
.c-gal img{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;transition:transform .18s}
.c-gal img:hover{transform:scale(1.015)}
.c-gal figcaption{font-size:12.5px;color:var(--c-muted);margin-top:7px}
.c-car{position:relative;border-radius:var(--c-radius);overflow:hidden;background:var(--c-surface)}
.c-car .slide{position:relative}
.c-car .slide img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;cursor:zoom-in}
.c-car .cap{padding:13px 16px;font-size:14px;color:var(--c-muted)}
.c-car-ctl{display:flex;align-items:center;gap:10px;padding:0 14px 14px}
.c-dots{display:flex;gap:6px;flex:1;justify-content:center}
.c-dots b{width:9px;height:9px;border-radius:50%;background:var(--c-line);display:block;cursor:pointer}
.c-dots b.on{background:var(--c-accent);transform:scale(1.15)}
.c-lightbox{position:fixed;inset:0;background:rgba(12,12,26,.92);z-index:999;display:none;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.c-lightbox.open{display:flex}
.c-lightbox img{max-width:100%;max-height:86vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.c-lightbox .lbcap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#fff;font-size:14px;font-family:var(--c-body)}
.c-lightbox .lbx{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.16);color:#fff;border:0;width:42px;height:42px;border-radius:12px;font-size:22px;cursor:pointer}

/* accordion */
.c-acc-item{border:1.5px solid var(--c-line);border-radius:var(--c-radius);margin-bottom:10px;background:var(--c-bg);overflow:hidden}
.c-acc-item.open{border-color:var(--c-accent)}
.c-acc-item>button{
  width:100%;text-align:left;background:transparent;border:0;padding:16px 18px;cursor:pointer;
  font-family:var(--c-head);font-weight:700;font-size:15.5px;display:flex;justify-content:space-between;
  gap:12px;align-items:center;color:inherit;
}
.c-acc-item>button i{font-style:normal;transition:transform .2s;color:var(--c-accent);font-size:21px;line-height:1}
.c-acc-item.open>button i{transform:rotate(45deg)}
.c-acc-body{padding:0 18px 18px;display:none;font-size:15.5px}
.c-acc-item.open .c-acc-body{display:block}
.c-acc-body img{margin-top:10px}

/* narrative */
.c-nar{border:1.5px solid var(--c-line);border-radius:var(--c-radius);overflow:hidden;background:var(--c-bg)}
.c-nar-stage{display:grid;grid-template-columns:1fr 1fr;min-height:240px}
.c-nar-stage img{border-radius:0;height:100%;object-fit:cover;width:100%;cursor:zoom-in}
.c-nar-txt{padding:24px}
.c-nar-txt h5{font-family:var(--c-head);margin:0 0 8px;font-size:18px;font-weight:700}
.c-nar-ctl{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1.5px solid var(--c-line)}
@media(max-width:700px){.c-nar-stage{grid-template-columns:1fr}}

/* hotspots */
.c-hot{position:relative;display:inline-block;max-width:100%}
.c-pin{
  position:absolute;width:34px;height:34px;border-radius:50%;background:var(--c-accent);
  color:var(--c-accent-fg);border:3px solid #fff;font-family:var(--c-head);font-weight:800;font-size:14px;
  transform:translate(-50%,-50%);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.32);
}
.c-pin:hover{transform:translate(-50%,-50%) scale(1.12)}
.c-pin.seen{background:#fff;color:var(--c-accent)}
.c-hot-pop{margin-top:14px;border:1.5px solid var(--c-accent);border-radius:var(--c-radius);padding:18px;background:var(--c-surface)}
.c-hot-pop h5{font-family:var(--c-head);margin:0 0 6px;font-size:17px}

/* questions */
.c-opt{
  display:flex;gap:12px;align-items:flex-start;border:2px solid var(--c-line);border-radius:var(--c-radius);
  padding:14px 16px;margin-bottom:10px;cursor:pointer;background:var(--c-bg);font-size:15.5px;
}
.c-opt:hover{border-color:var(--c-accent);background:var(--c-surface)}
.c-opt input{margin:3px 0 0;accent-color:var(--c-accent);width:19px;height:19px;flex:0 0 auto}
.c-opt.correct{border-color:#12a866;background:#eafaf2}
.c-opt.wrong{border-color:#e5455f;background:#fdeff1}
.c-opt .mk{margin-left:auto;font-weight:800;font-size:15px}
.c-opt.correct .mk{color:#0a7c4a}.c-opt.wrong .mk{color:#c8324a}
.c-gmcq{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.c-gmcq .c-opt{flex-direction:column;align-items:stretch;padding:10px;margin:0}
.c-gmcq .c-opt img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:10px}
.c-fb{border-radius:var(--c-radius);padding:16px 18px;margin-top:16px;font-size:15px;background:var(--c-surface);border-left:5px solid var(--c-accent)}
.c-fb.ok{border-left-color:#12a866;background:#eafaf2}
.c-fb.no{border-left-color:#e5455f;background:#fdeff1}
.c-fb.part{border-left-color:#f59211;background:#fff6e8}
.c-fb h5{font-family:var(--c-head);margin:0 0 5px;font-size:15px}
.c-ti-row{display:flex;gap:12px;align-items:center;margin-bottom:11px;flex-wrap:wrap}
.c-ti-row label{flex:0 0 auto;font-size:15px}
.c-ti-row input{flex:1;min-width:180px;padding:12px 16px;border:2px solid var(--c-line);border-radius:999px;font:inherit;font-size:15px}
.c-match-row{margin-bottom:14px}
.c-match-row label{display:block;font-size:15px;margin-bottom:6px;font-weight:600}
.c-match-row select{width:100%;padding:12px 16px;border:2px solid var(--c-line);border-radius:999px;font:inherit;font-size:15px;background:var(--c-bg)}
.c-slider-wrap{padding:8px 0 2px}
.c-slider-wrap input[type=range]{width:100%;accent-color:var(--c-accent);height:26px}
.c-slider-scale{display:flex;justify-content:space-between;font-size:13px;color:var(--c-muted)}
.c-slider-val{font-family:var(--c-head);font-weight:800;font-size:30px;text-align:center;margin:6px 0;color:var(--c-accent)}
.c-attempts{font-size:13px;color:var(--c-muted)}
.c-results{border-radius:var(--c-radius);padding:30px;background:var(--c-surface);text-align:center}
.c-results .score{font-family:var(--c-head);font-size:60px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--c-accent)}

/* menu */
.c-menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;max-width:1080px;margin:0 auto}
.c-menu-card{
  border:0;border-radius:var(--c-radius);overflow:hidden;background:var(--c-bg);text-align:left;cursor:pointer;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(20,20,45,.06),0 8px 22px rgba(20,20,45,.08);
  transition:transform .16s, box-shadow .16s;font-family:inherit;color:inherit;padding:0;
}
.c-menu-card:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(20,20,45,.08),0 18px 40px rgba(20,20,45,.14)}
.c-menu-card .thumb{height:165px;background:var(--c-surface) center/cover;position:relative}
.c-menu-card .num{position:absolute;left:14px;top:14px;background:var(--c-accent);color:var(--c-accent-fg);font-family:var(--c-head);font-weight:800;font-size:13px;padding:4px 11px;border-radius:20px}
.c-menu-card .mc{padding:16px 18px 20px}
.c-menu-card h3{font-family:var(--c-head);margin:0 0 5px;font-size:18px;font-weight:700}
.c-menu-card p{margin:0;font-size:14px;color:var(--c-muted)}
.c-menu-card .st{font-size:12.5px;font-weight:700;color:var(--c-accent);margin-top:12px;display:flex;align-items:center;gap:6px}
.c-menu-card .st.done{color:#0a7c4a}
.c-menu-card .st svg{width:15px;height:15px}

/* drawer + progress */
.c-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,88%);background:var(--c-bg);z-index:20;
  box-shadow:-10px 0 40px rgba(20,20,45,.2);transform:translateX(101%);
  transition:transform .28s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;
}
.c-drawer.open{transform:none}
.c-drawer header{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1.5px solid var(--c-line);font-family:var(--c-head);font-weight:700;font-size:17px}
.c-drawer header button{background:var(--c-surface);border:0;font-size:20px;cursor:pointer;width:36px;height:36px;border-radius:10px;color:inherit}
.c-drawer .dbody{padding:18px;overflow:auto}
.c-res{display:block;padding:14px;border:1.5px solid var(--c-line);border-radius:var(--c-radius);margin-bottom:10px;text-decoration:none;color:inherit}
.c-res:hover{border-color:var(--c-accent);background:var(--c-surface)}
.c-res b{display:block;font-family:var(--c-head);font-size:15px;margin-bottom:2px}
.c-res span{font-size:13px;color:var(--c-muted)}
.c-lock{opacity:.4;pointer-events:none;filter:grayscale(.7)}
.c-trickle-btn{display:flex;justify-content:center;margin:-18px auto 36px}
.c-plp{max-width:1080px;margin:0 auto 26px;display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--c-muted);font-weight:600}
.c-plp .bar{flex:1;height:9px;background:var(--c-surface);border-radius:5px;overflow:hidden}
.c-plp .bar i{display:block;height:100%;background:var(--c-accent);border-radius:5px;transition:width .3s}

/* ── sections: full-bleed bands of colour or picture ───────── */
.c-page{padding:0}
.c-section{position:relative;isolation:isolate;--sec-pad:72px}
.c-section>.sec-in{max-width:1140px;margin:0 auto;padding:var(--sec-pad) 28px}
.c-section .sec-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.c-section .sec-bg.fixed{background-attachment:fixed}
.c-section .sec-veil{position:absolute;inset:0;z-index:-1}
.c-section.round{border-radius:calc(var(--c-radius) * 2.4);overflow:hidden}
.c-section.round+.c-section.round{margin-top:14px}
.c-section .c-block{margin-bottom:40px}
.c-section .c-block:last-child{margin-bottom:0}
.c-section .c-article-head{margin-bottom:22px}
.c-section .c-article-head h2{font-size:clamp(22px,3vw,32px);letter-spacing:-.03em}
/* light text on dark sections */
.c-section.ink-light{color:#fff}
.c-section.ink-light .c-comp>.instr,.c-section.ink-light .c-block-head p,
.c-section.ink-light .c-cap,.c-section.ink-light .c-gal figcaption,
.c-section.ink-light .c-attempts,.c-section.ink-light .c-slider-scale{color:rgba(255,255,255,.78)}
.c-section.ink-light .c-opt{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);color:#fff}
.c-section.ink-light .c-opt:hover{background:rgba(255,255,255,.18);border-color:#fff}
.c-section.ink-light .c-acc-item{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.c-section.ink-light .c-acc-item.open{border-color:#fff}
.c-section.ink-light .c-acc-item>button i{color:#fff}
.c-section.ink-light .c-nar,.c-section.ink-light .c-car,.c-section.ink-light .c-results,
.c-section.ink-light .c-hot-pop{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.c-section.ink-light .c-nar-ctl{border-top-color:rgba(255,255,255,.24)}
.c-section.ink-light .c-results .score,.c-section.ink-light .c-slider-val{color:#fff}
.c-section.ink-light .c-btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)}
.c-section.ink-light .c-fb{background:rgba(255,255,255,.12)}
.c-section.ink-light .c-ti-row input,.c-section.ink-light .c-match-row select{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.c-section.ink-light .c-dots b{background:rgba(255,255,255,.35)}
.c-section.ink-light .c-dots b.on{background:#fff}
.c-section.ink-dark{color:var(--c-fg)}

/* ── how one section flows into the next ───────────────────── */
.c-fade{height:130px;margin-top:-1px;margin-bottom:-1px}
.c-wave{line-height:0;margin-top:-1px;margin-bottom:-1px}
.c-wave svg{width:100%;height:88px;display:block}
.c-curve{height:76px;position:relative;margin-top:-1px}
.c-curve i{position:absolute;inset:0;border-radius:calc(var(--c-radius) * 3) calc(var(--c-radius) * 3) 0 0;display:block}
.c-notch{height:0;position:relative}

/* ── arriving on screen ────────────────────────────────────── */
.c-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.c-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.c-reveal{opacity:1;transform:none;transition:none}}

/* ── scroll progress under the menu bar ────────────────────── */
.c-scrollbar{position:sticky;top:0;height:4px;background:transparent;z-index:5}
.c-scrollbar i{display:block;height:100%;width:0;background:var(--c-accent);border-radius:0 4px 4px 0;transition:width .12s linear}

@media(max-width:720px){
  .c-section>.sec-in{padding:calc(var(--sec-pad) * .62) 18px}
  .c-block[data-layout]{grid-template-columns:1fr!important}
  .c-gal[data-cols]{grid-template-columns:repeat(2,1fr)}
  .c-page{padding:24px 16px 70px}
}


/* ── numbered-list contents page (menus/list.js) ───────────── */
.c-menu-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.c-menu-row{
  display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:var(--c-radius);
  background:var(--c-surface);border:0;cursor:pointer;text-align:left;font-family:inherit;color:inherit;
  transition:transform .14s,box-shadow .14s;
}
.c-menu-row:hover{transform:translateX(4px);box-shadow:0 6px 20px rgba(20,20,45,.1)}
.c-menu-row .rnum{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--c-accent);color:var(--c-accent-fg);
  font-family:var(--c-head);font-weight:800;font-size:17px;display:grid;place-items:center;
}
.c-menu-row .rtx{flex:1;min-width:0}
.c-menu-row .rtx b{display:block;font-family:var(--c-head);font-size:17px}
.c-menu-row .rtx span{font-size:14px;color:var(--c-muted)}
.c-menu-row .rst{flex:0 0 auto;color:var(--c-muted)}
.c-menu-row .rst.done{color:#12a866}
.c-menu-row .rst svg{width:22px;height:22px}

/* ── a component whose plugin is not installed ─────────────── */
.c-missing{
  border:2px dashed var(--c-line);border-radius:var(--c-radius);padding:20px;background:var(--c-surface);
  font-family:var(--c-body);
}
.c-missing b{display:block;font-family:var(--c-head);font-size:15px;margin-bottom:5px}
.c-missing span{font-size:13.5px;color:var(--c-muted);line-height:1.5}