/* ==========================================================================
+1 Loot To Forge Guide — base stylesheet (races1loottoforge.wiki)
Structure + this site's visual tokens. Visual direction: "the forge at
night" — deep violet dusk, molten-gold numerals, arcane magenta action
colour. Token values come from
02-design/20260924-races-1-loot-to-forge/tokens_1-Loot-To-Forge.css and are
not re-decided here.
Class hooks consumed by check-geo.mjs / capture.cjs must survive:
h1, .btn, details, .table-wrap, footer brand , .byline,
, .consent-choice-required locks.
========================================================================== */
:root {
/* ---- page ground: forge-night deep violet (not blue/green/charcoal) ---- */
--bg-page: #12101C;
--bg-sunken: #0A0912;
--bg-raised: #1D1A30;
/* ---- text ---- */
--ink-primary: #F4F1FF;
--ink-secondary: #C9C3E8;
--ink-muted: #A49DC6;
/* ---- brand and emphasis ---- */
--brand: #D24BFF;
--brand-text: #E7A8FF;
--accent: #FFC53D;
--accent-text: #FFD97A;
/* ---- semantic states ---- */
--state-verified: #7CE7A6;
--state-live: #8FD9FF;
--state-absent: #FF9DB0;
/* ---- strokes ---- */
--border: #2E2A47;
--border-strong: #7A6CC0;
/* ---- label ink on filled buttons (deliberately not named --on-*) ---- */
--label-ink: #180A20;
/* ---- type: sticker-weight display, monospace numerals ---- */
--font-display: "Archivo Black", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
/* ---- scale ---- */
--w-page: 76rem;
--w-measure: 68ch;
--radius: 10px;
--radius-lg: 16px;
--gap: 1rem;
--gap-lg: 2rem;
--ad-slot-height: 120px;
}
/* --------------------------------------------------------------------------
.plate — the light paper island. Used in exactly one place: the home hero's
official-record board, which carries the bracketed official listing name.
-------------------------------------------------------------------------- */
.plate {
--surface-plate: #F6F3E6;
--ink-primary: #221B31;
--ink-secondary: #4B4260;
--ink-muted: #6C6383;
--brand-text: #8A12B5;
--state-verified: #0F6B3A;
--state-absent: #A3233A;
--border-strong: #6B5FA8;
background: var(--surface-plate);
color: var(--ink-primary);
border-radius: var(--radius-lg);
}
/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--ink-primary);font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--brand-text);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,summary:focus-visible,button:focus-visible,.table-wrap:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
img{max-width:100%}
.shell{max-width:var(--w-page);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--bg-raised);color:var(--ink-primary);padding:10px 16px;z-index:99;border-radius:var(--radius)}
.skip-link:focus{left:12px;top:12px}
/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:5;background:rgba(18,16,28,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar__in{display:flex;align-items:center;gap:14px;min-height:60px;flex-wrap:wrap}
.brandmark{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.01em;color:var(--ink-primary)}
.brandmark:hover{text-decoration:none}
.brandmark__cube{width:22px;height:22px;flex:0 0 22px;border-radius:5px;background:linear-gradient(150deg,var(--brand),var(--accent));display:grid;place-items:center;color:var(--label-ink);font:700 11px/1 var(--font-mono)}
.brandmark small{display:block;font:600 10px/1.3 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.topnav{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topnav a{color:var(--ink-secondary);font:500 13px/1 var(--font-body);letter-spacing:.02em;padding:8px 0;border-bottom:2px solid transparent}
.topnav a:hover{color:var(--ink-primary);border-bottom-color:var(--brand);text-decoration:none}
.topnav a[aria-current="page"]{color:var(--ink-primary);border-bottom-color:var(--brand)}
/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 18px;border-radius:var(--radius);border:1px solid transparent;font:600 14px/1.2 var(--font-body);cursor:pointer}
.btn:hover{text-decoration:none}
.btn.primary,.btn--primary{background:var(--brand);color:var(--label-ink);border-color:var(--brand)}
.btn.primary:hover,.btn--primary:hover{background:var(--brand-text);border-color:var(--brand-text);color:var(--label-ink)}
.btn:not(.primary):not(.btn--primary){background:transparent;color:var(--ink-primary);border-color:var(--border-strong)}
.btn:not(.primary):not(.btn--primary):hover{border-color:var(--brand-text);color:var(--brand-text)}
/* ---- home hero ---- */
.hero{padding:52px 0 0}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:start}
.eyebrow{display:inline-flex;flex-wrap:wrap;gap:8px;font:600 11px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 16px}
h1.display{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(38px,6.2vw,74px);line-height:.95;letter-spacing:-.02em}
h1.display .plus{color:var(--accent);text-shadow:0 0 26px rgba(255,197,61,.42)}
.alias{margin:18px 0 0;padding-left:14px;border-left:3px solid var(--brand);color:var(--ink-secondary);font-size:15px}
.alias code{font-family:var(--font-mono);font-size:.94em;color:var(--ink-primary);background:var(--bg-raised);border:1px solid var(--border);border-radius:4px;padding:2px 6px}
.vstamp{margin:20px 0 0;display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--font-mono);letter-spacing:.03em;color:var(--state-verified)}
.vstamp i{width:7px;height:7px;border-radius:50%;background:var(--state-verified)}
.lede{margin:18px 0 0;max-width:56ch;color:var(--ink-secondary);font-size:17px}
.hero__cta{display:flex;gap:12px;margin:26px 0 0;flex-wrap:wrap}
.hero__stats{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.hero__stats li{font:600 12px/1 var(--font-mono);letter-spacing:.02em;color:var(--ink-secondary);background:var(--bg-raised);border:1px solid var(--border);border-radius:999px;padding:7px 12px}
.byline{margin:22px 0 0;font:500 11.5px/1.6 var(--font-mono);color:var(--ink-muted)}
/* ---- signature component A: official record plate ---- */
.platebox{--glow:0 18px 40px rgba(0,0,0,.38)}
.plate{padding:22px 22px 18px;box-shadow:var(--glow)}
.plate__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:2px solid var(--border-strong);padding-bottom:11px}
.plate__head h2{margin:0;font:700 13px/1 var(--font-body);letter-spacing:.13em;text-transform:uppercase}
.plate__head span{font:600 10px/1 var(--font-mono);letter-spacing:.08em;color:var(--ink-muted)}
.plate dl{margin:14px 0 0}
.plate dt{font:600 10px/1.3 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-top:13px}
.plate dd{margin:5px 0 0;font-size:15px}
.plate dd.name{font-family:var(--font-mono);font-size:15.5px;letter-spacing:-.01em;color:var(--ink-primary);word-break:break-word}
.plate dd.name--core{color:var(--brand-text);font-weight:700}
.plate__note{margin:16px 0 0;color:var(--ink-secondary);font-size:13px}
.plate__foot{margin:14px 0 0;border-top:1px solid var(--border-strong);padding-top:11px;font:600 11px/1.4 var(--font-mono);color:var(--state-verified)}
/* ---- signature component B: as-of counter ---- */
.counter{margin:34px auto 0;padding-bottom:40px}
.counter__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.meter{background:var(--bg-raised);padding:18px 18px 15px}
.meter__num{display:block;font:700 clamp(26px,3.4vw,38px)/1 var(--font-display);letter-spacing:-.02em;color:var(--accent)}
.meter__lab{display:block;margin-top:9px;font:600 10.5px/1.35 var(--font-body);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-secondary)}
.meter__src{display:block;margin-top:9px;font:500 10.5px/1.4 var(--font-mono);letter-spacing:.02em;color:var(--ink-muted)}
.meter__src b{font-weight:600}
.srcline{margin:12px 0 0;font:500 11.5px/1.6 var(--font-mono);color:var(--ink-muted)}
/* ---- sections ---- */
.sec{padding:56px 0}
.sec--alt{background:var(--bg-sunken);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sec__eyebrow{font:600 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-text);margin:0 0 12px}
h2.sec__title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.4vw,40px);line-height:1.02;letter-spacing:-.015em}
h2.sec__title::after{content:"";display:block;width:54px;height:4px;background:var(--accent);border-radius:2px;margin-top:16px}
/* ---- aboutGame ---- */
.about__grid{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(22px,3.4vw,48px);margin-top:30px}
.about p{margin:0 0 15px;color:var(--ink-secondary);max-width:var(--w-measure)}
.about p strong{color:var(--ink-primary)}
.about__cta{margin-top:22px}
.facts{margin:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;align-self:start}
.facts table{width:100%;border-collapse:collapse;font-size:14px}
.facts th,.facts td{padding:11px 14px;text-align:left;vertical-align:top}
.facts tr+tr th,.facts tr+tr td{border-top:1px solid var(--border)}
.facts th{width:44%;background:var(--bg-sunken);color:var(--ink-muted);font:600 10.5px/1.4 var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.facts td{color:var(--ink-primary)}
.facts td em{display:block;font-style:normal;font:500 10.5px/1.5 var(--font-mono);color:var(--ink-muted);margin-top:3px}
.facts td em b{white-space:nowrap;font-weight:500}
.coverage{margin:22px 0 0;padding:14px 16px;background:var(--bg-raised);border:1px dashed var(--border-strong);border-radius:var(--radius);color:var(--ink-secondary);font-size:14px;max-width:var(--w-measure)}
/* ---- FAQ (rendered as so the toggle hook stays live) ---- */
.faq{margin:28px 0 0;display:grid;gap:12px;max-width:74ch}
details.qa{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0}
details.qa summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:18px 20px;cursor:pointer;list-style:none;min-height:44px}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary:after{content:"+";margin-left:auto;font:400 22px/1 var(--font-display);color:var(--brand-text)}
details.qa[open] summary:after{content:"−"}
details.qa .tag{font:600 9.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--label-ink);background:var(--accent);border-radius:3px;padding:4px 6px}
details.qa .qa__q{font:700 16px/1.4 var(--font-body);color:var(--ink-primary)}
details.qa > p{margin:0;padding:0 20px 18px;color:var(--ink-secondary);font-size:14.5px;max-width:none}
/* ---- footer ---- */
footer{background:var(--bg-sunken);border-top:1px solid var(--border);padding:44px 0 34px}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
.foot__title{margin:0 0 10px;font:700 12px/1.3 var(--font-body);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted)}
.foot p{margin:0 0 8px;color:var(--ink-secondary);font-size:13.5px;max-width:44ch}
.foot__tag{color:var(--ink-muted);font-size:12.5px}
.foot__meta{font:500 11.5px/1.6 var(--font-mono);color:var(--ink-muted)}
.foot ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.foot ul a{color:var(--ink-secondary);font-size:13.5px;min-height:32px;display:inline-flex;align-items:center}
.foot ul a:hover{color:var(--brand-text);text-decoration:underline}
.foot__legal{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--border);font:500 11.5px/1.7 var(--font-mono);color:var(--ink-muted);max-width:90ch}
/* ---- content / trust pages ---- */
.page{padding:44px 0 64px}
/* The engine's 404 page is `` with no shell wrapper, so
it needs its own container. Scoped to main.article on purpose: content pages
nest a plain inside .shell and must not pick this
up. */
main.article{max-width:min(1000px,calc(100% - 40px));margin:0 auto;padding:50px 0 80px}
.page__grid{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:clamp(24px,4vw,56px);align-items:start}
.page__grid--single{grid-template-columns:minmax(0,1fr)}
.crumb{font:500 11.5px/1.6 var(--font-mono);color:var(--ink-muted);margin:0 0 14px}
.article h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4vw,48px);line-height:1.03;letter-spacing:-.02em;max-width:22ch}
.article .lead{margin:18px 0 0;font-size:18px;line-height:1.6;color:var(--ink-secondary);max-width:var(--w-measure)}
.article .byline{margin:16px 0 24px}
.article h2{margin:38px 0 12px;font:700 19px/1.3 var(--font-body);color:var(--ink-primary)}
.article h2::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--accent);margin-right:10px;vertical-align:1px}
.article h3{margin:30px 0 10px;font:700 16px/1.4 var(--font-body);color:var(--ink-primary)}
.article p,.article li{color:var(--ink-secondary);max-width:var(--w-measure)}
.article p{margin:0 0 14px}
.article ul,.article ol{margin:0 0 14px;padding-left:20px}
.article li{margin-bottom:7px}
.article strong{color:var(--ink-primary)}
/* Long machine tokens (API hostnames, ids) must be able to break at any
character, otherwise their min-content width blows the single-column grid
out past the mobile viewport. overflow-wrap:anywhere also shrinks the
min-content contribution, which word-break alone does not. */
.article{min-width:0}
.article code{font-family:var(--font-mono);font-size:.93em;color:var(--accent-text);overflow-wrap:anywhere}
.article a{overflow-wrap:anywhere}
blockquote.callout{margin:26px 0;padding:16px 18px;background:var(--bg-raised);border-left:3px solid var(--brand);border-radius:0 var(--radius) var(--radius) 0;max-width:var(--w-measure)}
blockquote.callout p{margin:0 0 8px}
blockquote.callout p:last-child{margin-bottom:0}
.table-wrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--border);border-radius:var(--radius)}
.table-wrap table{border-collapse:collapse;width:100%;min-width:520px;text-align:left;font-size:15px}
.table-wrap th{font:600 11px/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.08em;background:var(--bg-sunken);color:var(--ink-muted)}
.table-wrap td,.table-wrap th{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top}
.table-wrap tr:last-child td{border-bottom:0}
.scroll-hint{display:none}
.related{margin-top:40px;padding-top:22px;border-top:1px solid var(--border)}
.related h2{margin:0 0 14px;font:700 12px/1.3 var(--font-body);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted)}
.related h2::before{display:none}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.related a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink-secondary)}
.related a:hover{color:var(--brand-text)}
.srcbox{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 18px 16px;position:sticky;top:78px;min-width:0}
.srcbox h2{margin:0 0 12px;font:700 11px/1.3 var(--font-body);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted)}
.srcbox h2::before{display:none}
.srcbox ol{margin:0;padding-left:18px}
.srcbox li{margin:0 0 12px;font-size:13.5px;color:var(--ink-secondary)}
.srcbox li a{display:block;word-break:break-word;overflow-wrap:anywhere}
/* ---- self-hosted consent: mandatory-choice page lock (site-ads.md §6) ---- */
html.consent-choice-required,
body.consent-choice-required {
overflow: hidden !important;
overscroll-behavior: none;
}
html.consent-choice-required{
position:fixed;
inset:0;
width:100%;
}
body.consent-choice-required{
position:fixed;
inset:0;
width:100%;
}
/* ---- self-hosted consent dialog ---- */
html body #tarteaucitronRoot #tarteaucitronAlertBig{border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg-raised);color:var(--ink-primary);box-shadow:0 24px 90px rgba(0,0,0,.55);font-family:var(--font-body)}
html body #tarteaucitronRoot.tarteaucitronSize-middle.tarteaucitronBeforeVisible::before{background:rgba(6,5,12,.86) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:auto}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig{box-sizing:border-box !important;width:min(700px,calc(100% - 48px)) !important;min-width:0 !important;max-width:700px !important;max-height:calc(100dvh - 48px);padding:clamp(30px,4.6vw,48px) !important;overflow-y:auto;border-radius:var(--radius)}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig::before{display:block;margin-bottom:18px;color:var(--ink-primary);font-family:var(--font-display);font-size:clamp(29px,4.4vw,42px);font-weight:400;line-height:1.05;letter-spacing:-1px;text-align:center}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronDisclaimerAlert{display:block;max-width:58ch;margin:0 auto 26px;padding:0;color:var(--ink-secondary);font-size:18px;line-height:1.6;text-align:center}
html body #tarteaucitronRoot #tarteaucitronAlertBig button.tarteaucitronCTAButton{min-height:48px;padding:13px 18px !important;border-radius:var(--radius);border:1px solid var(--brand);background:var(--brand);color:var(--label-ink);font:700 15px/1.3 var(--font-body);cursor:pointer}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronAllDenied2{border:1px solid var(--border-strong);background:transparent;color:var(--ink-primary)}
html body #tarteaucitronRoot #tarteaucitronCloseAlert,
html body #tarteaucitronRoot #tarteaucitronPersonalize,
html body #tarteaucitronRoot #tarteaucitronPrivacyUrl,
html body #tarteaucitronRoot #tarteaucitronPrivacyUrlDialog{display:none !important}
html body #tarteaucitronRoot [data-consent-privacy-link]{display:block;width:fit-content;margin:16px auto 0;color:var(--ink-muted);font-size:13px;line-height:1.4;text-align:center;text-decoration:underline;text-underline-offset:3px}
html body #tarteaucitronRoot [data-consent-privacy-link]:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
/* ---- consent choices entry point + section ---- */
.consent-settings-button{margin-top:14px;padding:12px 16px;min-height:48px;border:1px solid var(--border-strong);border-radius:var(--radius);background:transparent;color:var(--ink-secondary);font:600 12.5px var(--font-body);cursor:pointer}
.consent-settings-button:hover{border-color:var(--brand-text);color:var(--brand-text)}
.consent-choices{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-raised);margin:28px 0 34px;padding:22px 24px;max-width:var(--w-measure)}
.consent-choices h2{margin:0 0 8px;font:700 16px/1.3 var(--font-body)}
.consent-choices h2::before{display:none}
.consent-choices p{font-size:14px;color:var(--ink-secondary);margin:0}
/* ---- inert advertising placeholder (site-ads.md §4) ---- */
.ad-slot{--ad-slot-height:120px;display:grid;place-items:center;gap:6px;min-height:var(--ad-slot-height);margin:32px 0;padding:14px;overflow:hidden;border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--bg-sunken);color:var(--ink-muted);text-align:center}
.ad-slot--banner{--ad-slot-height:96px;width:100%}
.ad-slot--rectangle{--ad-slot-height:280px;width:min(100%,360px);margin-right:auto;margin-left:auto}
.ad-slot-label{font:700 11px/1.4 var(--font-mono);letter-spacing:2px;text-transform:uppercase}
.ad-consent-note{margin:0;max-width:38ch;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.ad-slot-body{width:100%;overflow-wrap:anywhere}
.ad-slot-body iframe,.ad-slot-body img,.ad-slot-body ins{max-width:100%}
.ad-slot[data-ad-state="loaded"] > .ad-consent-note{display:none}
.ad-slot[data-ad-state="error"]{border-style:solid;border-color:var(--border-strong)}
/* ---- responsive ---- */
@media (max-width:900px){
.hero__grid,.about__grid,.foot__grid,.page__grid{grid-template-columns:1fr}
.counter__grid{grid-template-columns:1fr 1fr}
.srcbox{position:static}
.topnav{gap:14px}
}
@media(max-width:760px){
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig{width:calc(100% - 20px) !important;max-height:calc(100dvh - 20px);padding:26px 14px 20px !important}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig::before{margin-bottom:14px;font-size:clamp(25px,8vw,34px)}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronDisclaimerAlert{margin-bottom:20px;font-size:17px;line-height:1.5}
html body #tarteaucitronRoot.tarteaucitronSize-middle #tarteaucitronAlertBig button{width:100% !important;margin:0 0 10px !important}
.ad-slot{margin:26px 0;padding:12px}
.ad-slot--rectangle{--ad-slot-height:250px}
}
@media (max-width:640px){
.hero{padding:34px 0 0}
.sec{padding:40px 0}
.counter{margin-top:26px;padding-bottom:32px}
.topnav{margin-left:0;width:100%;order:3;border-top:1px solid var(--border);padding-top:10px;gap:16px;overflow-x:auto}
.topnav a{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;padding:12px 0}
h1.display{letter-spacing:-.01em}
.hero__cta{flex-direction:column}
.btn{width:100%}
.plate{padding:18px 16px 15px}
.meter{padding:15px 14px 13px}
.page{padding:28px 0 44px}
main.article{padding-top:30px}
.article h1{max-width:none}
.scroll-hint{display:block;font:500 11.5px/1.6 var(--font-mono);color:var(--ink-muted)}
.foot ul a{min-height:44px}
}