/* Wordwell: a type-specimen sheet. White paper, black ink, four flat colours, very large letters. */
@font-face{font-family:Fraunces;src:url(fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Public Sans";src:url(fonts/publicsans.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#121212;--paper:#fff;--soft:#55585f;--line:#dcdce2;--fill:#f4f4f7;--blue:#2340e8;--red:#cf331d;--sun:#ffc21a;--green:#087a4b;
 --serif:Fraunces,"Iowan Old Style",Georgia,serif;--sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
.s-deduce{--s:var(--blue);--st:#fff}.s-assemble{--s:var(--red);--st:#fff}.s-quick{--s:var(--sun);--st:var(--ink)}.s-know{--s:var(--green);--st:#fff}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.04rem/1.6 var(--sans)}
h1,h2,p,ol,ul{margin:0}ol,ul{padding:0;list-style:none}
a{color:inherit}button,input{font:inherit;color:inherit}button{cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.skip{position:absolute;left:10px;top:-60px;background:var(--ink);color:#fff;padding:8px 14px;z-index:30}
.skip:focus{top:10px}
h1,h2{font-family:var(--serif);font-weight:800;line-height:1;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.2rem + 5.6vw,5.4rem)}
h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
.eyebrow{font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.lede{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);line-height:1.5;max-width:52ch;margin-top:18px}
.small{font-size:.85rem;color:var(--soft)}
.pad{padding:0 clamp(16px,4vw,56px);max-width:1280px;margin:0 auto}
main>.pad,main>.band{margin-top:clamp(36px,6vw,72px)}
main>.pad:first-child{margin-top:clamp(28px,5vw,56px)}
main>.band:first-child{margin-top:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none;border:3px solid var(--ink);border-radius:0}
.btn:hover{background:var(--blue);border-color:var(--blue)}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.wide{width:100%;margin-top:12px}

.top{display:flex;align-items:baseline;gap:10px 28px;flex-wrap:wrap;padding:18px clamp(16px,4vw,56px);border-bottom:3px solid var(--ink);max-width:1280px;margin:0 auto}
.mark,.fmark{font-family:var(--serif);font-weight:900;font-size:1.9rem;line-height:1;text-decoration:none;letter-spacing:-.02em;margin-right:auto}
.mark i,.fmark i{font-style:normal;color:var(--red)}
.top nav{display:flex;gap:6px 22px;flex-wrap:wrap;font-weight:700}
.top nav a{text-decoration:none;padding:4px 0;border-bottom:4px solid var(--s,transparent)}
.top nav a:first-child{border-color:var(--ink)}
.top nav a:hover,.top nav a[aria-current]{background:var(--s,var(--ink));color:var(--st,#fff);padding-inline:8px;margin-inline:-8px}
@media (max-width:640px){.top nav{flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding-inline:8px;margin-inline:-8px}.top nav::-webkit-scrollbar{display:none}}

.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media (max-width:860px){.hero{grid-template-columns:1fr}}
.head{margin-bottom:22px}

.finder{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-bottom:22px}
.finder label{font-weight:700}
.finder input{flex:1 1 220px;max-width:340px;height:48px;padding:0 14px;border:3px solid var(--ink);border-radius:0;background:var(--paper)}
.finder input:focus{outline:0;background:var(--fill)}
.pick{display:flex;flex-wrap:wrap;gap:6px}
.pick button{min-height:42px;padding:0 14px;border:3px solid var(--ink);background:var(--paper);font-weight:700}
.pick button.on{background:var(--s,var(--ink));color:var(--st,#fff)}
.nomatch{padding:28px;border:3px dashed var(--line);font-weight:700}

/* specimen tiles */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1020px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.tiles.one{grid-template-columns:1fr}
.tile a{position:relative;display:flex;flex-direction:column;gap:6px;min-height:220px;height:100%;padding:16px;background:var(--s);color:var(--st);text-decoration:none;overflow:hidden;isolation:isolate}
.tile .init,.band .init{position:absolute;z-index:-1;right:-.04em;bottom:-.3em;font:900 13rem/1 var(--serif);opacity:.2;pointer-events:none;transition:transform .2s}
.tile a:hover .init{transform:translate(-6px,-10px)}
.tile .lab{font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.tile strong{font:800 1.5rem/1.05 var(--serif);letter-spacing:-.01em}
.tile .sum{font-size:.9rem;line-height:1.4;max-width:30ch}
.tile .rec{margin-top:auto;align-self:flex-start;background:var(--paper);color:var(--ink);font-weight:700;font-size:.78rem;padding:3px 8px}
.tile.big a{min-height:340px;padding:26px}
.tile.big strong{font-size:clamp(2rem,1.4rem + 2vw,3rem)}
.tile.big .sum{font-size:1.05rem}
.tile.big .init{font-size:22rem}
@media (max-width:720px){.tile a{min-height:190px;padding:12px}.tile strong{font-size:1.25rem}.tile .sum{font-size:.84rem}.tile .init{font-size:9rem}.tile.big a{min-height:230px}.tile.big .init{font-size:14rem}}
.after{margin-top:28px}

/* coloured band at the top of game and skill pages */
.band{position:relative;overflow:hidden;isolation:isolate;background:var(--s);color:var(--st);padding:clamp(28px,5vw,64px) max(clamp(16px,4vw,56px),calc((100% - 1280px)/2 + 56px))}
.band .init{font-size:clamp(14rem,34vw,30rem);right:.02em;bottom:-.34em}
.band :focus-visible{outline-color:currentColor}
.crumbs{font-weight:700;font-size:.9rem;margin-bottom:14px}

.play{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(20px,3vw,44px);align-items:start}
.frame{position:relative;height:min(680px,82svh);min-height:520px;border:3px solid var(--ink);background:var(--paper)}
.frame iframe{width:100%;height:100%;border:0;display:block}
.frame .exit{display:none;position:absolute;right:8px;bottom:8px;border:3px solid var(--ink);background:var(--paper);padding:6px 12px;font-weight:700}
.frame.fill{position:fixed;inset:0;height:auto;z-index:50;border:0}
.frame.fill .exit,.frame:fullscreen .exit{display:block}
body.lock{overflow:hidden}
.side h2{font-size:1.5rem;margin-bottom:14px}
.side ol{counter-reset:n;display:grid;gap:14px}
.side li{counter-increment:n;display:grid;grid-template-columns:44px 1fr;gap:10px;line-height:1.45}
.side li::before{content:counter(n);font:900 2.4rem/.9 var(--serif);color:var(--s)}
.side.s-quick li::before{color:var(--ink);-webkit-text-stroke:0}
.record{margin-top:28px;padding:18px;border:3px solid var(--ink)}
.record h2{font-size:1.2rem;margin-bottom:6px}
.record #rec{font-weight:700}
@media (max-width:900px){.play{grid-template-columns:1fr}.frame{margin-inline:calc(-1*clamp(16px,4vw,56px) + 6px)}}

.prose{max-width:68ch;font-size:1.08rem;line-height:1.72}
.prose h1{margin-bottom:22px;font-size:clamp(2.2rem,1.4rem + 3.4vw,3.8rem)}
.prose h2{font-size:1.5rem;margin:34px 0 8px;letter-spacing:-.01em}
.prose h2:first-child,.prose h2.first{margin-top:0}
.prose p+p{margin-top:14px}
.prose a{color:var(--blue);font-weight:700;text-underline-offset:3px}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pager a{background:var(--s);color:var(--st);padding:18px;text-decoration:none}
.pager a:last-child{text-align:right}
.pager span{display:block;font-size:.85rem;font-weight:700}
.pager b{font:800 1.5rem/1.1 var(--serif)}
@media (max-width:560px){.pager{grid-template-columns:1fr}.pager a:last-child{text-align:left}}

.ad{margin:clamp(28px,5vw,56px) auto 0;min-height:100px;text-align:center;max-width:1280px;padding:0 16px}
.ad::before{content:"Advertisement";display:block;font-size:.72rem;color:var(--soft)}

.foot{max-width:1280px;margin:clamp(48px,8vw,96px) auto 0;padding:26px clamp(16px,4vw,56px) 40px;border-top:3px solid var(--ink);display:grid;gap:10px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-weight:700}
.legal{font-size:.88rem;color:var(--soft)}

.consent{position:fixed;left:12px;right:12px;bottom:12px;max-width:540px;margin:0 auto;z-index:40;background:var(--paper);border:3px solid var(--ink);padding:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.consent p{flex:1 0 100%}
.consent .btn{min-height:42px;padding:0 16px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}