*{box-sizing:border-box}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light;--bg:#FFF9F1;--paper:#fff;--ink:#24202A;--line:#24202A;--shadow:#24202A;--dots:#FFB77280;--hd:#FFB772;--ft:#FFE16D}
@media(prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--bg:#24202A;--paper:#312C38;--ink:#FFF9F1;--line:#FFF9F1;--shadow:#FFF9F1;--dots:#FFB77233;--hd:#FFB772;--ft:#312C38}}
:root[data-theme=dark]{color-scheme:dark;--bg:#24202A;--paper:#312C38;--ink:#FFF9F1;--line:#FFF9F1;--shadow:#FFF9F1;--dots:#FFB77233;--hd:#FFB772;--ft:#312C38}
html{scroll-padding-top:env(safe-area-inset-top,0px);font-size:max(100%,calc(100% + (min(100vw,210vh) - 1600px)*.004))}
body{margin:0;background:var(--bg) radial-gradient(var(--dots) 0.09375rem,transparent 0.1rem) 0 0/1.125rem 1.125rem;color:var(--ink);font:600 1rem/1.5 Nunito,system-ui,sans-serif}
h1,h2,h3,b,.btn,.tag{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-weight:400}
[hidden]{display:none!important}
.wrap{max-width:61.25rem;margin:auto;padding:1rem}
.stripe{height:0.875rem;background:linear-gradient(90deg,#75D1EF 33.33%,#FFE16D 33.33% 66.66%,#C6EE6A 66.66%);border-bottom:0.1875rem solid #24202A}
.top{border-bottom:0.1875rem solid #24202A;background:var(--hd) radial-gradient(#FFF9F11f 0.125rem,transparent 0.1375rem) 0 0/1rem 1rem}
.nav{display:flex;align-items:center;justify-content:space-between;gap:0.625rem;flex-wrap:wrap;padding-top:0.625rem;padding-bottom:0.75rem}
.brand{background:#fff;border:0.1875rem solid #24202A;border-radius:62.4375rem;padding:0.1875rem 0.875rem;box-shadow:0.25rem 0.25rem 0 #24202A,0.375rem 0.375rem 0 #24202A;display:block;cursor:pointer;transform:rotate(-1.5deg)}
.brand img{height:2.375rem;display:block}
@media(max-width:560px){.brand img{height:1.5rem}.nav .btn{padding:0.375rem 0.75rem;font-size:1rem}.nav{flex-wrap:nowrap}.nav .row{flex-wrap:nowrap;margin:0;gap:0.5rem}.brand{flex-shrink:1;min-width:0}.brand img{max-width:100%;height:auto;max-height:1.5rem}.brand{padding:0.1875rem 0.625rem}}
.btn{font-size:1.1rem;cursor:pointer;background:var(--paper);color:var(--ink);border:0.1875rem solid var(--line);border-radius:0.875rem;padding:0.5625rem 1.125rem;box-shadow:0.25rem 0.25rem 0 var(--shadow)}
.btn:active{transform:translate(0.1875rem,0.1875rem);box-shadow:0.0625rem 0.0625rem 0 var(--shadow)}
.btn:focus-visible,.sub:focus-visible,.card:focus-visible{outline:0.25rem solid #75D1EF;outline-offset:0.1875rem}
.st{background:var(--paper);color:var(--ink);border:0.1875rem solid var(--line);border-radius:1.125rem;box-shadow:0.3125rem 0.3125rem 0 var(--shadow)}
.y{background:#FFB772;color:#24202A}.o{background:#75D1EF;color:#24202A}.t{background:#75D1EF;color:#24202A}.p{background:#FFE16D;color:#24202A}.b{background:#C6EE6A;color:#24202A}.w{background:#fff;color:#24202A}
.tag{display:inline-block;border:0.125rem solid var(--line);border-radius:6.1875rem;padding:0 0.625rem;font-size:.9rem;transform:rotate(-3deg);background:var(--paper);color:var(--ink)}
.hero{display:grid;gap:1.375rem;align-items:center;padding:0.625rem 0 1.125rem}
@media(min-width:700px){.hero{grid-template-columns:1.4fr 1fr}}
h1{font-size:clamp(2.5rem,10vw,4.4rem);line-height:1;margin:.3em 0;text-shadow:0.25rem 0.25rem 0 #FFB772}
h2{font-size:1.9rem;margin:.5em 0 .2em}
h3{font-size:1.3rem;margin:.6em 0 .2em}
.logo{background:#fff;border:0.1875rem solid var(--line);border-radius:50%;box-shadow:0.375rem 0.375rem 0 var(--shadow);width:min(16.25rem,70vw);aspect-ratio:1;overflow:hidden;margin:auto;transform:rotate(4deg)}
.logo img{width:100%;display:block}
.ph{min-height:8.125rem;border:0.1875rem dashed var(--line);border-radius:0.875rem;background:repeating-linear-gradient(45deg,transparent 0 0.625rem,var(--dots) 0.625rem 1.25rem);display:grid;place-items:center;text-align:center;padding:0.625rem;margin:0.75rem 0}
.ph small{display:block;font-weight:800}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));gap:0.75rem}
.ad{margin:1.125rem 0;min-height:5.625rem;border:0.125rem dashed var(--line);border-radius:0.625rem;display:grid;place-items:center;font-size:.8rem;opacity:.7}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr));gap:1.125rem;padding:0.375rem 0.375rem 1rem}
.sub{padding:1rem;display:flex;flex-direction:column;gap:0.5rem;align-items:flex-start;font-size:1.2rem;text-align:left;min-height:6.875rem;font-family:inherit}
button.sub{cursor:pointer}
.sub:nth-child(odd){transform:rotate(-1.2deg)}.sub:nth-child(even){transform:rotate(1.2deg)}
.opts{display:flex;flex-wrap:wrap;gap:0.75rem;margin:0.5rem 0 1rem}
.on{background:#FFB772;color:#24202A}
.card{display:block;width:100%;min-height:11.875rem;padding:1.25rem;text-align:left;font:inherit;cursor:pointer;margin:0.75rem 0}
.card small{opacity:.75;display:block}
.q{font-size:1.25rem;margin:.4em 0}
.row{display:flex;gap:0.75rem;flex-wrap:wrap;margin:0.5rem 0}
.pg{height:1rem;border:0.1875rem solid var(--line);border-radius:0.5625rem;overflow:hidden;margin:0.625rem 0}
.pg i{display:block;height:100%;background:#C6EE6A}
.back{margin:0.375rem 0}
.foot{background:var(--ft);border-top:0.1875rem solid var(--line);margin-top:1.25rem;font-size:.9rem;text-align:center}
.soc{display:flex;gap:0.625rem;justify-content:center;flex-wrap:wrap;margin:0.375rem 0 0.875rem}
.soc a{text-decoration:none;font-size:1rem;padding:0.375rem 0.875rem}
.fl{display:flex;gap:0.25rem 1rem;justify-content:center;flex-wrap:wrap;margin-bottom:0.625rem}
.fl button{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0.375rem}
.ph.has{padding:0;min-height:0;border-style:solid;overflow:hidden}
.ph img{width:100%;max-height:23.75rem;object-fit:cover;display:block}
.fn{font-weight:600;opacity:.7;font-size:.75rem}
#su,#tl{flex-direction:column;align-items:flex-start;gap:0.875rem}
#su .btn,#tl .btn{text-align:left;max-width:100%}
.wide{grid-template-columns:repeat(auto-fill,minmax(14.375rem,1fr))}
.lv{display:flex;gap:0.375rem;flex-wrap:wrap}
.sub small{opacity:.8}
.qrow{flex-wrap:nowrap}.qrow .btn{flex:1 1 0;min-width:0}
@media(max-width:560px){.qrow{gap:0.5rem}.qrow .btn{padding:0.5625rem 0.375rem;font-size:.95rem;text-align:center}}
#ib{max-width:47.5rem}#ib ul{padding-left:1.2em}#ib li{margin:.3em 0}#ib h3{margin:1.2em 0 .3em}
.col{flex-direction:column;align-items:flex-start;gap:0.875rem}.col .btn{text-align:left;max-width:100%}
.tabs{margin:0.25rem 0 1rem}.tabs .btn,#at .btn{font-size:1rem;padding:0.4375rem 0.875rem}
.small{font-size:.95rem;opacity:.9;max-width:47.5rem}
.cwwrap{overflow-x:auto;padding:0.375rem 0.375rem 0.875rem;margin:0.375rem 0}.cwg{display:grid;gap:0.1875rem;width:max-content}
.cwx{width:var(--cs);height:var(--cs)}.cwc{position:relative;width:var(--cs);height:var(--cs)}
.cwc input{width:100%;height:100%;box-sizing:border-box;border:0.125rem solid #24202A;border-radius:0.375rem;background:#fff;color:#24202A;text-align:center;text-transform:uppercase;font:400 calc(var(--cs)*.52) "Lilita One","Arial Rounded MT Bold",Impact,sans-serif;padding:0;outline:none;caret-color:#24202A}
.cwc i{position:absolute;top:0.0625rem;left:0.1875rem;font:800 .6rem Nunito,sans-serif;font-style:normal;pointer-events:none;color:#24202A;z-index:1}
.cwc.on input{background:#FFE16D}.cwc.cur input{background:#FFB772}.cwc input:focus{box-shadow:0 0 0 0.1875rem #75D1EF}
.cwc.shown input{background:#75D1EF}.cwc.ok input{background:#C6EE6A}.cwc.bad input{background:repeating-linear-gradient(45deg,#FFB772 0 0.3125rem,#fff 0.3125rem 0.5625rem)}
.clues{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.25rem,1fr));gap:1.125rem;margin:0.625rem 0}
.cl{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;font:inherit;padding:0.375rem 0.5rem;border-radius:0.5rem;cursor:pointer;margin:0.125rem 0}.cl.act{background:#FFE16D;color:#24202A}
.cl .rs{font-weight:800}
.fdc{display:grid;grid-template-columns:1fr auto 1fr;gap:0.75rem;align-items:stretch;margin:0.75rem 0}
.fdt{padding:1.125rem;min-height:6.875rem;display:flex;flex-direction:column;justify-content:center;gap:0.375rem}.fdt b{font-size:clamp(1.3rem,4vw,2rem);line-height:1.1}.fdt small{text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.fdto{font-family:"Lilita One",Impact,sans-serif;font-size:1.3rem}
@media(max-width:560px){.fdc{grid-template-columns:1fr;text-align:center}}
.route,.aslist{padding-left:1.3em;margin:0.5rem 0}.route li,.aslist li{margin:.5em 0}.route p{margin:.1em 0}
.asb{position:relative;aspect-ratio:1.5/1;min-height:25rem;margin:0.625rem 0 1.125rem;background:var(--paper);border:0.1875rem solid var(--line);border-radius:1.125rem;box-shadow:0.3125rem 0.3125rem 0 var(--shadow);background-image:radial-gradient(var(--dots) 0.09375rem,transparent 0.1rem);background-size:1.125rem 1.125rem;overflow:hidden}
.asp{position:absolute;transform:translate(-50%,-50%);width:max-content;max-width:14.375rem;padding:0.375rem 0.625rem;text-align:center;font-size:.95rem;z-index:2;display:flex;gap:0.375rem;align-items:center;box-shadow:0.1875rem 0.1875rem 0 var(--shadow)}
.asp span{overflow-wrap:break-word;min-width:0}.asp em{flex:none;font-style:normal;font-family:"Lilita One",Impact,sans-serif;background:#fff;color:#24202A;border:0.125rem solid #24202A;border-radius:50%;min-width:1.375rem;height:1.375rem;display:grid;place-items:center;font-size:.8rem}
.asl{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}.asl path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}.asl path.hi{stroke:#FFB772;stroke-width:5}.asl.ontop{z-index:4;pointer-events:none}.asl.ontop path.hi{opacity:1}.asl path.dim,.asn.dim,.asp.dim{opacity:.35}.asp.on{outline:0.25rem solid #75D1EF;outline-offset:0.125rem}
.asn{position:absolute;transform:translate(-50%,-50%);z-index:5;background:#FFE16D;color:#24202A;border:0.125rem solid #24202A;border-radius:50%;width:1.625rem;height:1.625rem;padding:0;cursor:pointer;display:grid;place-items:center;font:800 .75rem Nunito,sans-serif}.asn.sel{background:#FFB772;box-shadow:0 0 0 0.1875rem #75D1EF}
.asn:focus-visible{outline:0.1875rem solid #75D1EF}
@media(max-width:920px){.asb{aspect-ratio:1/1.2;min-height:35rem}.asp{max-width:50%;font-size:.88rem}}
@media(max-width:560px){.asb{aspect-ratio:5/11;min-height:0}.asp{padding:0.3125rem 0.5rem;font-size:.82rem}.asn{width:1.75rem;height:1.75rem}}
a.nl{text-decoration:none;color:var(--ink)}
.mf{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.15;margin:0 .15em;font-size:.92em}
.mf>span{padding:0 .2em}
.mf>span:first-child{border-bottom:.09em solid currentColor}
sup .mf{font-size:.8em;margin:0 .05em}
sup:has(.mf){line-height:0}
.mv{display:inline-flex;align-items:stretch;vertical-align:middle;margin:0 .2em}
.mc{display:inline-flex;flex-direction:column;text-align:center;line-height:1.2;font-size:.9em;padding:0 .12em}
.mb{display:block;width:.4em;border:.09em solid currentColor;border-right:0;border-radius:.7em 0 0 .7em}
.mb.r{border:.09em solid currentColor;border-left:0;border-radius:0 .7em .7em 0}
#tr:empty{display:none}
.cc[hidden],.ccm[hidden]{display:none}
.cc{position:fixed;left:0.75rem;right:0.75rem;bottom:0.75rem;z-index:60;max-width:56.25rem;margin:0 auto;padding:0.875rem 1rem;animation:ccin .3s ease-out}
@keyframes ccin{from{transform:translateY(1.5rem);opacity:0}to{transform:none;opacity:1}}
.cc h2,.ccp h2{font-size:1.25rem;margin:0 0 0.25rem;line-height:1.2}
.cc p,.ccp p{margin:0 0 0.625rem;font-size:.95rem;line-height:1.45}
.cc p a,.cc p button,.ccp p button{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.ccb{display:grid;grid-template-columns:repeat(3,1fr);gap:0.625rem}
.ccb .btn{flex:none;width:100%;margin:0;text-align:center;font-size:1rem;padding:0.5625rem 0.5rem}
.ccb .btn.go{background:#FFB772;color:#24202A}
.ccm{position:fixed;inset:0;z-index:70;background:rgba(36,32,42,.65);display:grid;place-items:center;padding:0.75rem;overflow:auto}
.ccp{width:100%;max-width:36.25rem;max-height:calc(100vh - 1.5rem);max-height:calc(100dvh - 1.5rem);overflow:auto;padding:1.125rem}
.ccr{display:flex;justify-content:space-between;gap:0.875rem;align-items:flex-start;padding:0.75rem 0;border-top:0.125rem dashed var(--line)}
.ccr label{flex:1;cursor:pointer}
.ccr b{display:block;font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-weight:400;font-size:1.05rem}
.ccr span{display:block;font-size:.9rem;line-height:1.4;opacity:.9}
.sw{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:4.25rem;height:2.125rem;border:0.1875rem solid var(--line);border-radius:1.25rem;background:var(--paper);cursor:pointer;margin:0}
.sw::before{content:"OFF";position:absolute;right:0.5rem;top:50%;transform:translateY(-50%);font:800 .65rem Nunito,Arial,sans-serif;color:var(--ink)}
.sw::after{content:"";position:absolute;top:0.1875rem;left:0.1875rem;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--ink);transition:transform .15s}
.sw:checked{background:#C6EE6A}
.sw:checked::before{content:"ON";left:0.5625rem;right:auto;color:#24202A}
.sw:checked::after{transform:translateX(2.125rem);background:#24202A}
.sw:disabled{opacity:.75;cursor:not-allowed}
.sw:focus-visible{outline:0.25rem solid #75D1EF;outline-offset:0.1875rem}
.ccp .ccb{margin-top:0.375rem;padding-top:0.75rem;border-top:0.125rem dashed var(--line)}
@media(max-width:560px){.cc{left:0.5rem;right:0.5rem;bottom:0.5rem;padding:0.75rem}.cc h2{font-size:1.1rem}.cc p{font-size:.88rem;margin-bottom:0.5rem}.ccb{grid-template-columns:1fr 1fr;gap:0.5rem}.ccb [data-cc=reject]{order:1}.ccb [data-cc=accept]{order:2}.ccb [data-cc=manage]{order:3;grid-column:1/-1}.ccp .ccb [data-cc=save]{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.cc{animation:none}.sw::after{transition:none}}
@media print{.cc,.ccm{display:none!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* ===== Multi-page additions (Nov 2026) ===== */
a{color:inherit}
a.btn,a.tag{text-decoration:none;display:inline-block}
.brand{text-decoration:none}
.skip{position:absolute;left:-9999px;top:0.5rem;z-index:99;background:#fff;color:#24202A;padding:0.5rem 0.875rem;border:0.1875rem solid #24202A;border-radius:0.625rem}
.skip:focus{left:0.5rem}
.crumbs{font-size:.92rem;margin:0.25rem 0 0.375rem}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0.125rem 0.375rem}
.crumbs li+li::before{content:"›";margin-right:0.375rem;opacity:.7}
.crumbs a{text-decoration:underline}
.crumbs [aria-current]{opacity:.85}
.eyebrow{display:inline-block;margin:0.375rem 0 0}
h1.pg-h{font-size:clamp(2rem,7vw,3.2rem);text-shadow:0.1875rem 0.1875rem 0 #FFB772;margin:.25em 0}
.lead{font-size:1.05rem;max-width:47.5rem}
.sub h3,.sub h2{margin:0;font-size:1.3rem}
.sub ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0.5rem}
.sub .tag{transform:none;font-size:1rem;padding:0.125rem 0.625rem}
.sub .tag:hover,.sub .tag:focus-visible{background:#FFE16D;color:#24202A}
a.sub{text-decoration:none}
.tlist{list-style:none;padding:0;margin:0.75rem 0;display:grid;gap:0.75rem}
.tlist a{display:block;text-decoration:none;padding:0.75rem 1rem}
.tlist a b{display:block;font-size:1.15rem}
.tlist a small{opacity:.8}
.tlist a:hover,.tlist a:focus-visible{background:#FFE16D;color:#24202A}
.study{margin:1.125rem 0 0.5rem;padding:0.875rem 1rem 0.375rem}
.study .tabs{margin:0.125rem 0 0.625rem}
.study .tabs .btn[aria-pressed=true]{background:#FFB772;color:#24202A}
.tier{display:flex;flex-wrap:wrap;gap:0.625rem;align-items:center;margin:0.5rem 0}
.tier .btn[aria-pressed=true]{background:#FFB772;color:#24202A}
.qa-head{display:flex;flex-wrap:wrap;gap:0.625rem;align-items:center;justify-content:space-between}
.qa-list{padding-left:0;list-style:none;margin:0.75rem 0;display:grid;gap:0.875rem}
.qa{padding:0.875rem 1rem;background:var(--paper);border:0.1875rem solid var(--line);border-radius:1rem;box-shadow:0.25rem 0.25rem 0 var(--shadow)}
.qa-m{margin:0;font-size:.85rem;opacity:.8}
.qa-q{margin:.3em 0;font-size:1.12rem;font-weight:800}
.qa-a{border-top:0.125rem dashed var(--line);padding-top:0.5rem;margin-top:0.375rem}
.qa-l{font-size:.95rem;margin-right:0.25rem}
.qa-t{display:inline}
/* with JavaScript on, answers start hidden (.js is set in the page head, so there is no flash); no JavaScript = answers visible */
.js .qa-list:not(.show-a) .qa:not(.show) .qa-a{display:none}
.qa .reveal{display:none;margin-top:0.375rem;font-size:.95rem;padding:0.3125rem 0.75rem}
.js .qa-list:not(.show-a) .qa:not(.show) .reveal{display:inline-block}
.qa.tier-hidden{display:none}
.nav-pn{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:space-between;margin:0.875rem 0}
.nav-pn a{max-width:100%}
.more{columns:2 16.25rem;padding-left:1.2em}
.more li{margin:.25em 0;break-inside:avoid}
.ad-slot{display:block;margin:2rem 0;min-height:18.75rem;text-align:center}
.ad-slot .ad-l{display:block;font-size:.75rem;opacity:.7;margin-bottom:0.25rem}
.fl a{padding:0.375rem}
.fl button{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0.375rem}
figure.ph{margin:0.75rem 0}
figure.fig{margin:0.625rem 0}
figure.fig img{width:100%;height:auto;max-height:23.75rem;object-fit:contain;border:0.1875rem solid var(--line);border-radius:0.875rem;background:#fff}
.card .q{display:block}
.prose{max-width:47.5rem}.prose a{overflow-wrap:anywhere}.prose ul{padding-left:1.2em}.prose li{margin:.3em 0}.prose h2{font-size:1.4rem;margin:1.2em 0 .3em}
.news a{text-decoration:none}
@media(max-width:560px){.qa{padding:0.75rem}.qa-q{font-size:1.05rem}.study{padding:0.75rem 0.625rem 0.25rem}}
@media print{.study,.ad-slot,.top,.foot,.tier,.qa .reveal,#qa-toggle{display:none!important}.qa{box-shadow:none;break-inside:avoid}.js .qa-list .qa .qa-a{display:block!important}}
/* keep logos in proportion (width/height attributes are only for layout reservation) */
.logo img{height:auto;aspect-ratio:1/1;object-fit:contain}
.brand img{width:auto;max-width:100%}
/* colour restored (4 Nov): no white panel, coloured question cards and topic buttons */
.study{background:none;border:0;box-shadow:none;padding:0.25rem 0 0;margin:1.125rem 0 0.5rem}
.qa.o,.qa.b,.qa.p,.qa.y{color:#24202A;border-color:var(--line);box-shadow:0.25rem 0.25rem 0 var(--shadow)}
.qa.o .qa-a,.qa.b .qa-a,.qa.p .qa-a,.qa.y .qa-a{border-top-color:#24202A}
.qa.o .qa-m,.qa.b .qa-m,.qa.p .qa-m,.qa.y .qa-m{opacity:.85}
.pills{list-style:none;padding:0;margin:0.625rem 0 1.125rem;display:flex;flex-direction:column;align-items:flex-start;gap:0.875rem}
.pills .btn{text-align:left;max-width:100%;font-size:1.05rem}
.pills .btn.on{cursor:default}
.tlist a.st{color:#24202A}
.qa.o{background:#75D1EF}.qa.b{background:#C6EE6A}.qa.p{background:#FFE16D}.qa.y{background:#FFB772}
/* crossword layout (7 Nov): whole grid on screen, clue always visible */
.cwlay{display:grid;gap:1rem;align-items:start}
.cwleft{min-width:0}
.cwbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:0.5rem;background:#FFE16D;color:#24202A;border:0.1875rem solid var(--line);border-radius:0.875rem;box-shadow:0.1875rem 0.1875rem 0 var(--shadow);padding:0.375rem 0.5rem;margin:0.25rem 0 0.625rem}
.cwbar p{flex:1;margin:0;font-weight:800;font-size:1rem;line-height:1.3;min-height:2.6em;display:flex;align-items:center}
.cwnav{flex:none;width:2.5rem;height:2.5rem;border:0.125rem solid #24202A;border-radius:0.625rem;background:#fff;color:#24202A;font-size:1rem;cursor:pointer}
.cwnav:focus-visible{outline:0.1875rem solid #75D1EF;outline-offset:0.125rem}
.cwwrap{overflow-x:auto;padding:0.25rem 0.125rem 0.625rem;margin:0}
.cwc i{font-size:max(0.5rem,calc(var(--cs)*.28))}
/* clues beside the grid when the panel is wide enough (study.js adds .side) */
.cwlay.side{grid-template-columns:max-content minmax(17.5rem,1fr)}
.cwlay.side .clues{grid-template-columns:1fr;position:sticky;top:0.5rem;max-height:calc(100vh - 1.5rem);overflow:auto;margin:0;padding-right:0.25rem}
.cwwrap{padding:0.25rem 0 0.625rem}
@media(max-width:560px){.cwc input{border-width:0.09375rem;border-radius:0.25rem}}

/* ===== Light / dark switch (Nov 2026) ===== */
.theme-btn{display:inline-flex;align-items:center;gap:0.45rem}
.theme-btn svg{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
:root[data-theme=dark] .theme-btn svg{fill:currentColor}
/* the header is orange in both themes, so its buttons stay white with dark lettering; dark mode shows as a filled button */
.top .btn{background:#fff;color:#24202A;border-color:#24202A;box-shadow:0.25rem 0.25rem 0 #24202A}
.top .btn:active{box-shadow:0.0625rem 0.0625rem 0 #24202A}
:root[data-theme=dark] .top .theme-btn{background:#24202A;color:#FFF9F1}
.top .btn:focus-visible{outline-color:#24202A}
.nav-i{display:none;width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* small screens: Home and the theme switch are icon buttons (lettering stays for screen readers) so the logo stays readable */
@media(max-width:800px){.nav .row{gap:0.5rem}.theme-t,.nav-home .nav-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.nav-i{display:block}.theme-btn,.nav-home{display:inline-flex;align-items:center;padding:0.5rem 0.65rem}}
@media(max-width:560px){.theme-btn,.nav-home{padding:0.3rem 0.45rem}.nav .row{gap:0.4rem}.nav .row a.btn:not(.nav-home){padding:0.3rem 0.6rem}}
/* pills and tags that sit on a coloured card keep white-and-dark lettering in both themes */
.sub .tag,.sub .tag:hover,.sub .tag:focus-visible{border-color:#24202A}
.sub .tag{background:#fff;color:#24202A}
.sub .tag:hover,.sub .tag:focus-visible{background:#FFE16D}
.cwbar,.cwbar p{color:#24202A}
.ph{color:var(--ink)}
@media print{:root[data-theme=dark],:root:not([data-theme]){color-scheme:light;--bg:#fff;--paper:#fff;--ink:#24202A;--line:#24202A;--shadow:#24202A;--dots:#FFB77280;--ft:#FFE16D}.theme-btn{display:none}}

/* ===== Wide screens (Nov 2026): use the space on laptops, 1080p, 1440p, 4K and ultrawide monitors ===== */
.hero p{max-width:42rem}
@media(min-width:1100px){
 .wrap{max-width:min(94vw,72rem)}
 .hero{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
 .logo{width:clamp(16.25rem,20vw,26rem)}
 h1{font-size:clamp(2.5rem,10vw,5rem)}
 .tlist{grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}
 .tlist li{display:flex}.tlist a{flex:1}
 .pills{flex-direction:row;flex-wrap:wrap;align-items:stretch}
}
/* home page: the four ways to revise become a row of coloured cards */
@media(min-width:1000px){
 .how{list-style:none;padding:0;max-width:none;opacity:1;font-size:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem;margin:0.5rem 0 1.5rem}
 .how li{margin:0;padding:1rem 1.2rem;color:#24202A;border:0.1875rem solid var(--line);border-radius:1.125rem;box-shadow:0.3125rem 0.3125rem 0 var(--shadow)}
 .how li:nth-child(4n+1){background:#75D1EF}.how li:nth-child(4n+2){background:#C6EE6A}.how li:nth-child(4n+3){background:#FFE16D}.how li:nth-child(4n+4){background:#FFB772}
 .how li b{display:block;font-size:1.3rem;margin-bottom:0.2rem}
}
@media(min-width:1400px){
 .wrap{max-width:min(94vw,max(112rem,62vw))}
 /* topic page: practise on the left (stays in view), every question and answer on the right */
 .js .tlay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
 .js .tl-study{position:sticky;top:1rem;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow:auto;padding:0.25rem 0.75rem 1rem 0.25rem;scrollbar-width:thin}
 .js .tl-study{margin-left:-0.25rem}
 .js .tl-study .study{margin:0}
 .js .tl-qa .qa-head{margin-top:0}
 .js .tl-qa .qa-head h2{margin-top:0}
 .js .tl-qa .qa-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,26rem),1fr));align-items:stretch}
 /* the big puzzles (crosswords, Five Degrees, Associations) take the whole width; the questions move below */
 .js .tlay:has(#study[data-view=crosswords]),.js .tlay:has(#study[data-view=associations]),.js .tlay:has(#study[data-view=five-degrees]){grid-template-columns:minmax(0,1fr)}
 .js .tlay:has(#study[data-view=crosswords]) .tl-study,.js .tlay:has(#study[data-view=associations]) .tl-study,.js .tlay:has(#study[data-view=five-degrees]) .tl-study{position:static;max-height:none;overflow:visible;padding:0;margin-left:0}
 .cwlay.side .clues{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
}
@media(min-width:921px){.asb{max-width:min(100%,calc((100vh - 7rem)*1.5));margin-left:auto;margin-right:auto}}