/* Shared by every look: reset, accessibility, the footer and the player's mechanics. Looks set the tokens. */
:root{--bg:#0B0B0A;--ink:#EDEBE6;--dust:#8F8C85;--line:rgba(237,235,230,.14);--gut:max(20px,4.5vw);--player-h:0px;
  --sans:"DM Sans",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
body.has-player{--player-h:96px}
main{flex:1;outline:none;display:block}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:50;padding:8px 12px;background:var(--ink);color:var(--bg);text-decoration:none}
.skip:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hd{position:relative;z-index:3}

/* Footer: the last thing on every page, centred, clear of the player and the phone's home bar. */
.ft{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:56px var(--gut) calc(28px + env(safe-area-inset-bottom) + var(--player-h));font:400 11px/1.4 var(--mono);letter-spacing:.04em}
.ft p{margin:0}
.ft-credit{color:var(--ink)}
.ft-credit a{color:inherit;text-decoration:none}
.ft-credit a:hover{text-decoration:underline;text-underline-offset:3px}
.ft-love{color:var(--dust)}

/* Player: fixed band; each look restyles it. */
#player{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"np ctl" "time time" "st st";
  align-items:center;column-gap:16px;padding:12px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
#player[hidden]{display:none}
.np{grid-area:np;display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.np img{width:44px;height:44px;object-fit:cover;flex:none}
.np-text{min-width:0;display:flex;flex-direction:column}
.np-text b,.np-text span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-text b{font-weight:500}
.np-text span{font:400 12px/1.4 var(--mono);color:var(--dust)}
.pl-controls{grid-area:ctl;display:flex;align-items:center;gap:2px}
.pl-controls button{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;padding:12px;color:var(--ink)}
.pl-controls svg{width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
#pl-close svg{fill:none}
#pl-close{color:var(--dust)}
#player .i-pause{display:none}
#player[data-paused="false"] .i-pause{display:block}
#player[data-paused="false"] .i-play{display:none}
.pl-time{grid-area:time;display:flex;align-items:center;gap:12px;font:400 11px/1 var(--mono);color:var(--dust);font-variant-numeric:tabular-nums;padding-top:4px}
#pl-seek{flex:1;-webkit-appearance:none;appearance:none;height:20px;background:transparent;margin:0}
#pl-seek::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,var(--ink) var(--progress,0%),var(--line) var(--progress,0%))}
#pl-seek::-moz-range-track{height:1px;background:var(--line)}
#pl-seek::-moz-range-progress{height:1px;background:var(--ink)}
#pl-seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--ink);margin-top:-5px}
#pl-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--ink)}
#player{--progress:0%}
.pl-status{grid-area:st;margin:0;font:400 11px/1.4 var(--mono);color:var(--dust)}
.pl-status:empty{display:none}
@media (max-width:640px){body.has-player{--player-h:104px}.pl-controls button{width:40px;height:44px;padding:11px}#pl-close{width:32px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Shared pages (brand, variants, not found) in each look's tokens. */
.brand,.variants,.nf{padding:48px var(--gut) 0;max-width:1100px}
.brand h1,.variants h1,.nf h1{margin:0 0 28px;font-weight:500;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.02em}
.brand{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px 40px;align-items:start}
.brand h1,.brand-mark,.brand-colours{grid-column:1/-1}
.brand figure{margin:0}
.brand figcaption,.brand-mark p,.brand-colours p{font:400 12px/1.6 var(--mono);color:var(--dust);margin:10px 0 0}
.brand figcaption a,.brand-mark a{color:var(--ink)}
.brand-photo img{width:100%;aspect-ratio:1;object-fit:cover}
.brand-alt img{width:min(100%,320px);aspect-ratio:1;object-fit:cover}
.brand-mark{padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-mark img{width:min(100%,900px);height:auto}
.brand-colours h2{font-size:15px;font-weight:500;margin:0}
.brand-colours ul{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.brand-colours li{display:flex;align-items:center;gap:6px;font-size:13px}
.sw{width:22px;height:22px;flex:none;box-shadow:0 0 0 1px var(--line)}
.sw-name{margin-left:4px;color:var(--dust)}
.variants p{max-width:56ch;color:var(--dust);margin:0 0 28px}
.variants ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.variants a{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none}
.variants a span{color:var(--dust)}
.variants a:hover b{text-decoration:underline;text-underline-offset:4px}
.nf p a{color:var(--ink)}
.vtag{position:fixed;right:10px;bottom:calc(10px + var(--player-h) + env(safe-area-inset-bottom));z-index:30}
.vtag a{display:block;padding:7px 10px;background:#000c;color:#fff;font:400 11px/1 "Geist Mono",ui-monospace,Menlo,monospace;text-decoration:none;border:1px solid #ffffff30}
@media (max-width:760px){.brand{grid-template-columns:minmax(0,1fr)}.variants a{grid-template-columns:1fr;gap:4px}}