/* The Catalog: shared site styles. Tokens are in tokens.css; rules come from design/STYLE_GUIDE.md. */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink)}
body{font:400 var(--t-body)/1.5 var(--f-sans);background:var(--paper)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--margin)}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.nav{display:flex;align-items:center;gap:var(--s6);padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.word{font:800 1.05rem/1 var(--f-sans);font-stretch:125%;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.nav nav{display:flex;gap:var(--s5);margin-left:auto}
.nav nav a{text-decoration:none;font:600 .95rem/1 var(--f-sans);display:inline-flex;align-items:center;min-height:44px}
.nav nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.bubble{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--signal);font:700 .7rem/1 var(--f-mono);margin-left:6px}
@media(max-width:640px){.nav{gap:var(--s4)}.nav nav{gap:var(--s4)}.nav nav a.wide{display:none}}

/* type helpers */
.t-poster{font:900 var(--t-poster)/.92 var(--f-display);letter-spacing:-.015em}
.lead{font-size:1.25rem;line-height:1.4;max-width:46ch}
.muted{color:var(--ink-2)}

/* catalog grid: square plates, 2 px of paper between them */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1280px){.grid{grid-template-columns:repeat(5,1fr)}}
.tile{text-decoration:none;display:block;background:var(--paper);padding-bottom:var(--s4);min-width:0}
.plate{position:relative;aspect-ratio:1/1;background:var(--plate);overflow:hidden}
.plate img{position:absolute;left:50%;bottom:9%;height:78%;width:86%;object-fit:contain;object-position:50% 100%;transform:translateX(-50%)}
.plate .no{position:absolute;top:var(--s3);left:var(--s3)}
.plate .sz{position:absolute;top:var(--s3);right:var(--s3)}
.tile:hover .name,.tile:focus-visible .name{text-decoration:underline;text-underline-offset:3px}
.fw{white-space:nowrap}
.tile .name{margin:var(--s3) var(--s3) 2px;overflow-wrap:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .meta{margin:0 var(--s3);color:var(--ink-2)}
.tile .stamp{position:absolute;right:-6px;top:54px;width:96px;z-index:2;opacity:0;transform:rotate(-8deg) scale(1.15);transition:transform var(--dur) var(--ease-snap),opacity var(--dur) linear}
.tile.on-board .stamp{opacity:1;transform:rotate(-8deg) scale(1)}
@media(max-width:640px){.tile .stamp{width:72px;top:48px}}

/* size marker: drawn card outline to true relative scale (k=5 px per inch), letter beside it */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.tile .sizem::before{content:"";display:block;border:1.5px solid var(--ink);border-radius:2px}
.tile[data-size=S] .sizem::before{width:14px;height:19px}
.tile[data-size=M] .sizem::before{width:16.5px;height:26.5px}
.tile[data-size=L] .sizem::before{width:21.5px;height:31.5px}
.tile[data-size=XL] .sizem::before{width:26.5px;height:36.5px}
/* size marker (svg form, used outside tiles) */
.sizem{display:inline-flex;align-items:center;gap:5px;font:500 .72rem/1 var(--f-mono)}
.sizem svg{display:block;color:var(--ink)}

/* keys (buttons) */
.key{font:650 .82rem/1 var(--f-sans);font-stretch:125%;text-transform:uppercase;letter-spacing:.06em;border:0;cursor:pointer;text-decoration:none;
 display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 var(--s5);border-radius:var(--r-key);position:relative;top:0;
 transition:top 90ms var(--ease),box-shadow 90ms var(--ease)}
.key.primary{background:var(--c-cobalt);color:var(--paper);box-shadow:0 6px 0 var(--c-cobalt-edge)}
.key.secondary{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink),0 6px 0 var(--paper-3)}
.key:active,.key.is-down{top:4px}
.key.primary:active,.key.primary.is-down{box-shadow:0 2px 0 var(--c-cobalt-edge)}
.key.secondary:active,.key.secondary.is-down{box-shadow:inset 0 0 0 1px var(--ink),0 2px 0 var(--paper-3)}
.key.quiet{background:none;box-shadow:none;height:auto;padding:0;text-decoration:underline;text-underline-offset:3px}
.key[disabled]{background:var(--paper-3);color:var(--ink-3);box-shadow:none;cursor:default;top:0}

/* toggle switch and chips */
.tog{display:inline-flex;align-items:center;gap:var(--s3);font:600 .9rem/1 var(--f-sans)}
.switch{width:56px;height:30px;border-radius:var(--r-pill);border:1px solid var(--ink);background:var(--paper-2);position:relative;cursor:pointer;transition:background var(--dur) var(--ease)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--white);border:1px solid var(--ink);transition:transform var(--dur) var(--ease-snap)}
.switch[aria-checked=true]{background:var(--act)}
.switch[aria-checked=true]::after{transform:translateX(26px)}
.chip{min-height:36px;padding:0 var(--s4);border-radius:var(--r-pill);border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:600 .85rem/1 var(--f-sans);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.chip[aria-pressed=true] .sizem svg{color:var(--paper)}

/* spec sheet */
.spec{display:grid;grid-template-columns:auto 1fr}
.spec dt,.spec dd{padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.spec dt{font:450 .95rem/1.2 var(--f-sans);color:var(--ink-2);padding-right:var(--s6)}
.spec dd{font:500 .9rem/1.2 var(--f-mono);text-align:right}

/* section headings: Text bold, condensed */
.t-h2{font:700 var(--t-h2)/1.05 var(--f-sans);font-stretch:85%}

footer.foot{margin-top:var(--s9);padding:var(--s6) 0 var(--s7);border-top:1px solid var(--rule);color:var(--ink-2);display:grid;gap:var(--s2)}
footer.foot a{color:var(--ink)}