/* FontYard. Layout: a bright, open catalogue. White ground, one cobalt accent, coloured tiles for pairings, type does the talking. */
:root{
  --paper:#ffffff; --surface:#ffffff; --soft:#f3f3ef; --ink:#111111; --muted:#5d5d58; --line:#e3e3dd;
  --accent:#2b3bff; --accent-ink:#ffffff; --accent-soft:#e8eaff;
  --good:#1d7a42; --good-bg:#e2f3e8; --bad:#b3261e; --bad-bg:#fbe4e2; --mid:#8a5a00; --mid-bg:#fbf0d8;
  --display:"Bricolage Grotesque","Geist",ui-sans-serif,system-ui,sans-serif;
  --ui:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:16px; --r-sm:10px; color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0f0f10; --surface:#18181a; --soft:#1f1f22; --ink:#f2f2ee; --muted:#a3a39d; --line:#2c2c30;
  --accent:#8f99ff; --accent-ink:#0f0f10; --accent-soft:#23264d;
  --good:#6fd39a; --good-bg:#163322; --bad:#ff8a80; --bad-bg:#3a1b19; --mid:#f2c46b; --mid-bg:#3a2c12; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0f0f10; --surface:#18181a; --soft:#1f1f22; --ink:#f2f2ee; --muted:#a3a39d; --line:#2c2c30;
  --accent:#8f99ff; --accent-ink:#0f0f10; --accent-soft:#23264d;
  --good:#6fd39a; --good-bg:#163322; --bad:#ff8a80; --bad-bg:#3a1b19; --mid:#f2c46b; --mid-bg:#3a2c12; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.55;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1200px;margin:0 auto;padding-block:0 40px;display:flex;flex-direction:column;gap:56px}
.wrap.tight{gap:28px}
.main{display:flex;flex-direction:column;gap:56px;min-width:0;width:100%}
.wrap.tight .main{gap:28px}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;margin:0}

/* header */
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;padding:7px 13px;border-radius:999px;color:var(--muted);font-weight:550;font-size:15px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:var(--soft)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.nav .ext::after{content:" ↗";font-size:.85em}

/* header: the utility bar scrolls away, the logo and nav stay put */
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:max(16px,env(safe-area-inset-left,0px))}
/* sticky header: logo and colours on top, nav underneath */
.site-head{display:flex;flex-direction:column;position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);
  box-shadow:0 0 0 100vmax var(--paper),0 1px 0 100vmax var(--line);clip-path:inset(0 -100vmax -1px)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;padding-block:14px 10px}
.logo{display:inline-flex;align-items:baseline;text-decoration:none;font-size:36px;line-height:1;color:var(--ink);letter-spacing:0;gap:.01em}
.logo .l{display:inline-block;transition:transform .2s}
.logo:hover .l:nth-child(odd){transform:translateY(-2px) rotate(-3deg)}
.logo:hover .l:nth-child(even){transform:translateY(1px) rotate(3deg)}
.logo .l:nth-child(5){color:var(--accent)}
.logo.small{font-size:28px;margin-bottom:8px}
.nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;max-width:100%;border-top:1px solid var(--line);padding-block:8px;margin-inline:-4px;padding-inline:4px}

/* tags, as on a magazine card */
.tags{display:flex;flex-wrap:wrap;gap:0;font-size:13px;font-weight:600;opacity:.75}
.tag{display:inline}
.tag + .tag::before{content:"·";margin:0 .45em}
.date{font-size:13px;color:var(--muted)}

/* editor's picks */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.picks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.picks{grid-template-columns:1fr}}
.pick{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px;text-decoration:none;background:var(--surface);min-width:0;transition:transform .15s,border-color .15s}
.pick:hover{border-color:var(--ink);transform:translateY(-2px)}
.pick.lead{grid-column:span 2;grid-row:span 2;background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:600px){.pick.lead{grid-column:auto;grid-row:auto}}
.pick.lead .date{color:inherit;opacity:.7}
.pick-spec{font-size:clamp(26px,3vw,34px);line-height:1.05;overflow-wrap:anywhere}
.pick.lead .pick-spec{font-size:clamp(40px,6vw,84px)}
.pick-sample{font-size:18px;opacity:.8;overflow-wrap:anywhere}
.pick.lead .pick-sample{font-size:clamp(22px,2.6vw,30px)}
.pick-note{font-size:15px;line-height:1.5;flex:1}
.pick.lead .pick-note{font-size:clamp(17px,1.8vw,21px);max-width:36ch}

/* tinted section bands (full width, no sideways scroll) */
.band{--band:var(--soft);background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);padding-block:48px}
.band-new{--band:#eef3ff}
.band-best{--band:#fff6e0}
.band-studios{--band:#ecf7ef}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band-new{--band:#161b2b}:root:not([data-theme="light"]) .band-best{--band:#241f12}:root:not([data-theme="light"]) .band-studios{--band:#132119}}
:root[data-theme="dark"] .band-new{--band:#161b2b}:root[data-theme="dark"] .band-best{--band:#241f12}:root[data-theme="dark"] .band-studios{--band:#132119}
.band + .band{margin-top:-56px}
.band .best{border-top-color:rgb(0 0 0 / .1)}
.band .best li{border-bottom-color:rgb(0 0 0 / .1)}

/* moods */
.moods{display:flex;flex-wrap:wrap;gap:8px}
.moods a{font-family:var(--display);font-weight:650;font-size:clamp(18px,2.2vw,24px);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:8px 18px;background:var(--surface)}
.moods a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* buttons, fields */
.btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:10px 18px;cursor:pointer;
  font-size:15px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.small{padding:7px 13px;font-size:13.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.label{font-size:13px;font-weight:600;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.label output{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}
.input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 14px;min-width:0}
input[type=range]{width:100%;accent-color:var(--accent)}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;user-select:none}
.toggle input{accent-color:var(--accent);width:17px;height:17px}
.hint{margin:0;font-size:13.5px;color:var(--muted)}
.badge{display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;vertical-align:middle}
.more{font-weight:600;text-decoration:none;white-space:nowrap}
.more:hover{text-decoration:underline}

/* section heads */
.sec{display:flex;flex-direction:column;gap:20px;min-width:0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(26px,3.4vw,38px);font-weight:700}
.sec-head p{margin:6px 0 0;color:var(--muted);max-width:60ch}
.page-intro{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.page-intro h1{font-size:clamp(34px,6vw,64px);font-weight:750;line-height:1.02}
.page-intro p{margin:0;color:var(--muted);font-size:18px;max-width:58ch}
.crumbs{font-size:13.5px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

/* home: hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding-top:20px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:28px}}
.hero h1{font-size:clamp(44px,7.4vw,92px);font-weight:800;line-height:.95;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.hero-copy p{margin:0;font-size:19px;color:var(--muted);max-width:44ch}
.namebox{display:flex;gap:8px;background:var(--soft);border-radius:999px;padding:6px;max-width:520px}
.namebox input{flex:1;min-width:0;border:0;background:transparent;padding:10px 14px;font-size:17px;outline:none}
.namebox:focus-within{box-shadow:0 0 0 2px var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tile{border-radius:var(--r);padding:18px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  text-decoration:none;min-width:0;overflow:hidden;transition:transform .15s}
.tile:hover{transform:translateY(-2px)}
.tile .t-name{font-size:clamp(26px,3.4vw,40px);line-height:1;overflow-wrap:anywhere}
.tile small{font-size:12.5px;opacity:.8;font-weight:550}
.tile.wide{grid-column:span 2}

/* home: pairing cards */
.pair-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.pair-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pair-cards{grid-template-columns:1fr}}
.pair-card{border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px;text-decoration:none;min-height:300px;min-width:0;overflow:hidden;transition:transform .15s}
.pair-card:hover{transform:translateY(-3px)}
.pair-card .pc-head{font-size:clamp(30px,3.2vw,40px);line-height:1.02;overflow-wrap:anywhere}
.pair-card .pc-body{font-size:15px;line-height:1.55;margin:0;flex:1}
.pair-card .pc-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600;
  border-top:1px solid currentColor;padding-top:12px;opacity:.85}

/* home: new fonts row */
.scroller{min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.new-card{border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px;text-decoration:none;scroll-snap-align:start;background:var(--surface);min-width:0}
.new-card:hover{border-color:var(--ink)}
.new-card .n-spec{font-size:40px;line-height:1.02;overflow-wrap:anywhere}
.new-card .date{margin-top:auto}
.new-card b{font-size:16px}
.new-card span{font-size:13px;color:var(--muted)}

/* best list */
.best{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.best li{border-bottom:1px solid var(--line)}
.best a.row{display:grid;grid-template-columns:48px minmax(0,1.3fr) minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 4px;text-decoration:none}
.best a.row:hover{background:var(--soft)}
.best .num{font-family:var(--display);font-weight:700;color:var(--muted);font-size:18px;font-variant-numeric:tabular-nums}
.best .spec{font-size:clamp(26px,3.6vw,40px);line-height:1.05;overflow-wrap:anywhere}
.best .why{font-size:14.5px;color:var(--muted)}
.best .go{font-weight:600;font-size:14px}
@media (max-width:720px){.best a.row{grid-template-columns:36px minmax(0,1fr)}.best .why{grid-column:2}.best .go{display:none}}

/* studios */
.studio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px}
.studio{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px;background:var(--surface);min-width:0}
.studio h3{font-size:24px}

.studio p{margin:0;font-size:14.5px;color:var(--muted)}
.studio .specs{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.studio .specs a{font-size:28px;line-height:1.15;text-decoration:none;overflow-wrap:anywhere}
.studio .specs a:hover{text-decoration:underline;text-decoration-thickness:1px}

/* promo + learn bands */
.promo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.promo-grid{grid-template-columns:1fr}}
.promo{border-radius:var(--r);padding:24px;background:var(--soft);display:flex;flex-direction:column;gap:10px;text-decoration:none;min-height:190px}
.promo h3{font-size:24px}
.promo p{margin:0;color:var(--muted);flex:1}
.promo .go{font-weight:650}
.promo:hover{outline:1px solid var(--ink)}
.learn{border-radius:calc(var(--r) + 6px);background:var(--ink);color:var(--paper);padding:clamp(24px,5vw,48px);display:grid;
  grid-template-columns:minmax(0,1.4fr) auto;gap:20px;align-items:center}
@media (max-width:760px){.learn{grid-template-columns:1fr}}
.learn h2{font-size:clamp(28px,4vw,44px)}
.learn p{margin:8px 0 0;opacity:.8;max-width:56ch}
.learn .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* directory */
.toolbar{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:end}
@media (max-width:820px){.toolbar{grid-template-columns:1fr}}
.filters{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.cats{display:flex;flex-wrap:wrap;gap:6px}
.cat{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 15px;cursor:pointer;font-size:14px;font-weight:550}
.cat[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.count{font-size:13.5px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card:hover{border-color:#bdbdb6}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-head h2{font-family:var(--ui);letter-spacing:0;margin:0;font-size:16px;font-weight:650}
.card-head h2 a{text-decoration:none}
.card-head h2 a:hover{text-decoration:underline}
.meta{font-size:12.5px;color:var(--muted);white-space:nowrap}
.preview{font-size:var(--size,44px);line-height:1.08;overflow-wrap:anywhere;margin:0 -10px;text-decoration:none;display:block;padding:10px;border-radius:var(--r-sm)}
.preview span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.note{margin:0;color:var(--muted);font-size:14px;flex:1}
.empty{padding:40px;text-align:center;color:var(--muted);grid-column:1/-1}

/* font page + testers */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:16px;min-width:0}
.panel h3,.h-label{margin:0;font-family:var(--ui);letter-spacing:0;font-size:15px;font-weight:700;color:var(--ink)}
.group{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--line)}
.group:first-child{border-top:0;padding-top:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media (max-width:920px){.split{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.tester{width:100%;min-height:200px;resize:vertical;border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,3vw,32px);line-height:1.15;overflow-wrap:anywhere}
.ctrls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:600px){.ctrls{grid-template-columns:1fr}}
.glyphs{font-size:28px;line-height:1.35;overflow-wrap:anywhere;margin:0;padding:18px;border-radius:var(--r);border:1px solid var(--line)}
.weights{display:flex;flex-direction:column;gap:6px}
.weights div{display:flex;gap:12px;align-items:baseline;min-width:0}
.weights small{color:var(--muted);width:36px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.weights span{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.facts{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted)}
.facts b{color:var(--ink);font-weight:600}
.prose{max-width:66ch;display:flex;flex-direction:column;gap:12px}
.prose p{margin:0}
.prose h2{font-size:24px;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span,.chips a{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;text-decoration:none;background:var(--surface)}
.chips a:hover{border-color:var(--ink)}
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px}
.link-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 16px;text-decoration:none;display:flex;flex-direction:column;gap:3px;min-width:0}
.link-card:hover{border-color:var(--ink)}
.link-card b{font-size:24px;font-weight:400;line-height:1.15;overflow-wrap:anywhere}
.link-card span{font-size:13px;color:var(--muted)}
.sec-title{margin:0;font-size:24px;font-weight:700}

/* pairing tester */
.presets{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.preset{flex:0 0 auto;border:0;border-radius:var(--r-sm);padding:12px 16px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:180px}
.preset b{font-weight:700;font-size:14px}
.preset span{font-size:12.5px;opacity:.8}
.preset[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.layouts{display:flex;gap:4px;background:var(--soft);padding:4px;border-radius:999px;align-self:flex-start;flex-wrap:wrap}
.layouts button{border:0;background:transparent;padding:7px 14px;border-radius:999px;cursor:pointer;font-size:14px;color:var(--muted);font-weight:600}
.layouts button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.canvas{border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,5vw,56px);min-width:0;overflow:hidden}
[contenteditable]{outline:none;border-radius:4px}
[contenteditable]:hover{box-shadow:0 0 0 1px currentColor}
[contenteditable]:focus{box-shadow:0 0 0 2px var(--accent)}
.h{margin:0;overflow-wrap:anywhere;text-wrap:balance}
.b{margin:0;max-width:62ch;overflow-wrap:anywhere}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;margin:0}
.ed{display:flex;flex-direction:column;gap:18px}
.bcard{aspect-ratio:85/55;max-width:100%;width:min(100%,560px);margin:0 auto;border-radius:8px;padding:clamp(16px,4vw,32px);
  display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 14px 40px -18px rgb(0 0 0 / .35)}
.bcard .h{font-size:clamp(22px,5vw,40px)!important;line-height:1}
.bcard .small{font-size:12px!important;line-height:1.5;margin:0}
.poster{margin:calc(-1*clamp(20px,5vw,56px));padding:clamp(24px,6vw,64px);min-height:520px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.credit{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px;color:var(--muted)}
.credit a{font-weight:600;color:var(--ink)}

/* colour + accessibility */
.swatches{display:flex;flex-wrap:wrap;gap:6px}
.sw{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);cursor:pointer;display:grid;place-items:center;font-weight:700;font-size:14px;padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.colour{display:flex;gap:6px;align-items:center;min-width:0}
.colour input[type=color]{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--surface);flex:0 0 auto;cursor:pointer}
.colour .input{padding:9px 10px;font-size:14px;text-transform:uppercase;font-variant-numeric:tabular-nums}
.ratio{display:flex;align-items:baseline;gap:8px}
.ratio strong{font-family:var(--display);font-size:32px;font-weight:700;font-variant-numeric:tabular-nums}
.ratio span{color:var(--muted);font-size:14px}
.checks{display:flex;flex-direction:column;gap:8px}
.check{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.check small{color:var(--muted);font-size:13px}
.pills{display:flex;gap:4px;flex-wrap:wrap}
.pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--good-bg);color:var(--good)}
.pill.mid{background:var(--mid-bg);color:var(--mid)}
.pill.no{background:var(--bad-bg);color:var(--bad)}
.warn{margin:0;font-size:13px;color:var(--bad)}
.palette{display:flex;flex-direction:column;gap:10px}
.pal-list{display:flex;flex-wrap:wrap;gap:8px}
.pal-item{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 3px;background:var(--surface)}
.pal-item i{width:24px;height:24px;border-radius:50%;border:1px solid rgb(0 0 0 / .12);display:block}
.pal-item code{font-size:12.5px;font-family:var(--ui)}
.pal-item button{border:0;background:transparent;cursor:pointer;width:22px;height:22px;border-radius:50%;color:var(--muted);font-size:15px;line-height:1}
.pal-item button:hover{background:var(--soft);color:var(--ink)}
.pal-add{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pal-add .input{width:120px;font-size:14px;text-transform:uppercase;padding:9px 10px}
.pal-add input[type=color]{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;padding:2px;background:var(--surface);cursor:pointer}
.combos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.combo{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:8px;min-width:0}
.combo[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.combo .aa{font-size:34px;line-height:1}
.combo .r{font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:600}
.combo .pill{align-self:flex-start}
.combo-tools{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}

/* footer */
.site-foot{border-top:1px solid var(--line);padding-top:28px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:24px;font-size:14px;color:var(--muted)}
@media (max-width:760px){.site-foot{grid-template-columns:1fr 1fr}}
.site-foot b{display:block;color:var(--ink);margin-bottom:6px}
.site-foot p{margin:0}
.site-foot a{display:block;text-decoration:none;padding:2px 0}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.site-foot .fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;font-size:13px}
@media (prefers-reduced-motion:reduce){.tile,.pair-card,.pick,.logo .l{transition:none}.tile:hover,.pair-card:hover,.pick:hover,.logo:hover .l{transform:none}}

/* ---------- site colour themes (chosen in the top nav; override light and dark) ---------- */
:root[data-site-theme="bw"]{
  --paper:#ffffff; --surface:#ffffff; --ink:#000000; --muted:#2b2b2b; --line:#000000;
  --accent:#000000; --accent-ink:#ffffff; --soft:#ececec; --accent-soft:#ececec;
  --good:#000000; --good-bg:#ffffff; --bad:#000000; --bad-bg:#ffffff; --mid:#000000; --mid-bg:#ffffff; color-scheme:light}
:root[data-site-theme="by"]{
  --paper:#000000; --surface:#000000; --ink:#ffe600; --muted:#e6cf00; --line:#6b6000;
  --accent:#ffe600; --accent-ink:#000000; --soft:#1c1a00; --accent-soft:#1c1a00;
  --good:#ffe600; --good-bg:#000000; --bad:#ffe600; --bad-bg:#000000; --mid:#ffe600; --mid-bg:#000000; color-scheme:dark}
:root[data-site-theme="gr"]{
  --paper:#062a15; --surface:#0a3a1e; --ink:#ff9e94; --muted:#f08f84; --line:#1f6139;
  --accent:#ff9e94; --accent-ink:#062a15; --soft:#0f4526; --accent-soft:#0f4526;
  --good:#ff9e94; --good-bg:#062a15; --bad:#ffd2cc; --bad-bg:#3a0d0a; --mid:#ffc4bd; --mid-bg:#2a1a0a; color-scheme:dark}
/* pass/fail pills keep a visible edge when a theme flattens their colours */
:root[data-site-theme] .pill{border:1px solid currentColor}
:root[data-site-theme] .pill.no{text-decoration:line-through}
:root[data-site-theme="bw"] .btn.primary:hover,:root[data-site-theme="by"] .btn.primary:hover{filter:none;outline:2px solid var(--ink);outline-offset:1px}

.head-right{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.themes{display:flex;align-items:center;gap:6px}
.themes .label{margin-right:2px;font-size:12.5px}
.theme-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);padding:0;cursor:pointer;
  display:grid;place-items:center;font-weight:700;font-size:12px;line-height:1;font-family:var(--ui)}
.theme-btn[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}

/* ---------- WordArt (a deliberate Windows 95 look, so its colours are fixed) ---------- */
.w95{--w95-face:#c0c0c0;--w95-hi:#ffffff;--w95-lo:#808080;--w95-dk:#000000;
  background:var(--w95-face);color:#000;font-family:Tahoma,"MS Sans Serif",Geneva,Verdana,sans-serif;font-size:12px;
  border:2px solid;border-color:var(--w95-hi) var(--w95-dk) var(--w95-dk) var(--w95-hi);
  box-shadow:inset -1px -1px 0 var(--w95-lo),inset 1px 1px 0 #dfdfdf;padding:3px;max-width:100%;min-width:0}
.w95-title{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:700;padding:3px 4px 3px 6px;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.w95-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w95-x{width:18px;height:16px;background:var(--w95-face);color:#000;font:700 11px/1 Tahoma,sans-serif;padding:0;cursor:pointer;
  border:1px solid;border-color:var(--w95-hi) var(--w95-dk) var(--w95-dk) var(--w95-hi);flex:0 0 auto}
.w95-body{padding:10px;display:flex;flex-direction:column;gap:10px;min-width:0}
.w95-body p{margin:0}
.w95-sunken{background:#fff;border:2px solid;border-color:var(--w95-lo) var(--w95-hi) var(--w95-hi) var(--w95-lo);
  box-shadow:inset 1px 1px 0 var(--w95-dk);min-width:0}
.w95-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px}
.w95-cell{aspect-ratio:1.5;background:#fff;border:1px solid #dcdcdc;cursor:pointer;padding:2px;display:grid;place-items:center;overflow:hidden;min-width:0}
.w95-cell:hover{border-color:#000080}
.w95-cell[aria-pressed="true"]{outline:2px dotted #000;outline-offset:-4px;border-color:#000080;background:#e8e8ff}
.w95-cell .wa{font-size:clamp(11px,2.4vw,20px)}
.w95-cell svg{width:100%;height:100%}
.w95-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.w95-row label{display:flex;align-items:center;gap:6px}
.w95-input{font:inherit;font-size:12px;color:#000;background:#fff;padding:3px 5px;min-width:0;flex:1 1 180px;
  border:2px solid;border-color:var(--w95-lo) var(--w95-hi) var(--w95-hi) var(--w95-lo)}
.w95-input:focus-visible{outline:1px dotted #000;outline-offset:1px}
.w95-btn{font:inherit;font-size:12px;color:#000;background:var(--w95-face);padding:4px 14px;cursor:pointer;min-width:72px;
  border:2px solid;border-color:var(--w95-hi) var(--w95-dk) var(--w95-dk) var(--w95-hi);box-shadow:inset -1px -1px 0 var(--w95-lo)}
.w95-btn:active{border-color:var(--w95-dk) var(--w95-hi) var(--w95-hi) var(--w95-dk);box-shadow:inset 1px 1px 0 var(--w95-lo)}
.w95-btn:focus-visible{outline:1px dotted #000;outline-offset:-5px}
.w95-page{padding:clamp(16px,4vw,40px);min-height:260px;display:grid;place-items:center;overflow:hidden}
.w95-status{display:flex;gap:4px}
.w95-status span{flex:1;padding:2px 6px;border:1px solid;border-color:var(--w95-lo) var(--w95-hi) var(--w95-hi) var(--w95-lo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the WordArt styles themselves */
.wa-stage{width:100%;text-align:center;line-height:1.05;overflow-wrap:anywhere;padding:.25em 0}
.wa-stage .wa{font-size:clamp(34px,8vw,104px)}
.wa-stage svg{width:100%;max-width:900px;height:auto;display:block;margin:0 auto;overflow:visible}
.wa{position:relative;display:inline-block;line-height:1.05;max-width:100%}
.wa::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;pointer-events:none}
.wa-wrap{position:relative;z-index:0;display:inline-block;max-width:100%}
.wa-outline{color:transparent;-webkit-text-stroke:.035em #000;filter:drop-shadow(.06em .06em 0 #a0a0a0)}
.wa-rainbow{background:linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#004dff,#750787);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(.05em .05em 0 rgb(0 0 0 / .45))}
.wa-chrome{background:linear-gradient(180deg,#fff 0%,#c9d3de 40%,#2c3845 50%,#8ea3b8 68%,#fff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.012em #1d252e;
  filter:drop-shadow(.05em .06em 0 rgb(0 0 0 / .5))}
.wa-gold{background:linear-gradient(180deg,#fff6b0,#f7c935 40%,#c9871a 60%,#ffe27a);-webkit-background-clip:text;background-clip:text;color:transparent}
.wa-gold::before{color:#6b3d00;text-shadow:.01em .01em 0 #6b3d00,.02em .02em 0 #6b3d00,.03em .03em 0 #5a3300,.04em .04em 0 #5a3300,.05em .05em 0 #4a2a00,.06em .06em 0 #4a2a00,.07em .07em 0 #3a2100,.08em .08em 0 #2a1800}
.wa-tilt{background:linear-gradient(180deg,#ff6ad5,#8c1eff);-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:perspective(6em) rotateX(28deg);filter:drop-shadow(0 .06em 0 #2b0057)}
.wa-tall{background:linear-gradient(180deg,#fff200 0%,#ff9100 45%,#e10600 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.01em #7a0000;transform:scale(.8,1.5);transform-origin:center;margin-block:.25em}
.wa-shadow{color:#1b2a8f;font-style:italic}
.wa-shadow::before{color:rgb(0 0 0 / .28);transform:skewX(-48deg) scaleY(.5);transform-origin:50% 92%}
.wa-retro{background:linear-gradient(90deg,#ff2e93,#00e5ff);-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(-5deg)}
.wa-retro::before{color:#3c0aa0;text-shadow:.02em .02em 0 #3c0aa0,.04em .04em 0 #3c0aa0,.06em .06em 0 #ffe600,.08em .08em 0 #ffe600}
.wa-frame{display:block;margin-top:.15em}
@media (prefers-reduced-motion:no-preference){.wa-wobble{animation:wa-wobble 2.4s ease-in-out infinite}}
@keyframes wa-wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* in the high-contrast themes, coloured tiles take the theme colours too */
:root[data-site-theme] .band{--band:var(--paper)}
:root[data-site-theme] .tile,:root[data-site-theme] .pair-card,:root[data-site-theme] .pick.lead,:root[data-site-theme] .preset,:root[data-site-theme] .learn,:root[data-site-theme] .promo{
  background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)}
:root[data-site-theme] .learn .btn{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}