/* Reboot Museum – Relaunch Prototype · one shared stylesheet
   Fonts (all SIL Open Font License, served locally from /fonts):
   Fraunces (display), Atkinson Hyperlegible (text/UI), IBM Plex Mono (labels), VT323 (LCD accents only) */
@font-face{font-family:"Fraunces";src:url(../fonts/Fraunces-VF.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/Fraunces-Italic-VF.ttf) format("truetype");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../fonts/AtkinsonHyperlegible-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../fonts/AtkinsonHyperlegible-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson";src:url(../fonts/AtkinsonHyperlegible-Italic.ttf) format("truetype");font-style:italic;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../fonts/IBMPlexMono-SemiBold.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"VT323";src:url(../fonts/VT323-Regular.ttf) format("truetype");font-display:swap}
/* Script fallbacks (OFL, Noto subsets: Latin Ext-A/B + Vietnamese, Cyrillic, Greek). The browser only downloads them when a glyph
   in this range is missing from the primary font. CJK / Arabic / Hebrew: add per-locale @font-face blocks (see README › i18n). */
@font-face{font-family:"RM Fallback Sans";src:url(../fonts/RMFallbackSans-VF.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+0300-036F,U+0370-03FF,U+0400-052F,U+1E00-1EFF,U+1F00-1FFF,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:"RM Fallback Serif";src:url(../fonts/RMFallbackSerif-VF.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+0300-036F,U+0370-03FF,U+0400-052F,U+1E00-1EFF,U+1F00-1FFF,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:"RM Fallback Mono";src:url(../fonts/RMFallbackMono-VF.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+0300-036F,U+0370-03FF,U+0400-052F,U+1E00-1EFF,U+1F00-1FFF,U+2DE0-2DFF,U+A640-A69F}

:root{
  --paper:#F3EADB; --paper-2:#E9DCC6; --card:#FFFAF1; --ink:#1E1915; --ink-2:#4B4037; --line:#CBB99E;
  --orange:#B8441A; --orange-d:#93360F; --mustard:#E2A62A; --red:#9C2B24; --brown:#5A3A22; --teal:#1E5F5B;
  --lcd:#B8C298; --lcd-ink:#24301A; --night:#221B16; --night-2:#2F261F; --glow:#A6EBC6;
  --ok:#2F6B33;
  --f-display:"Fraunces","RM Fallback Serif",Georgia,serif; --f-text:"Atkinson","RM Fallback Sans",system-ui,sans-serif; --f-mono:"Plex Mono","RM Fallback Mono",ui-monospace,monospace; --f-lcd:"VT323","RM Fallback Mono",ui-monospace,monospace;
  --s-0:1rem; --s-1:1.1875rem; --s-2:1.375rem; --s-3:1.75rem; --s-4:2.25rem; --s-5:clamp(2.5rem,8vw,4.75rem);
  --r:14px; --r-lg:22px; --shadow:0 1px 0 rgba(30,25,21,.08),0 10px 30px -14px rgba(30,25,21,.35);
  --stripe:linear-gradient(90deg,var(--mustard) 0 25%,var(--orange) 25% 50%,var(--red) 50% 75%,var(--brown) 75% 100%);
  --wrap:1100px; --tabbar:76px; /* --wrap = content width; .wrap adds the gutters */
  /* spacing system (see README › Layout): one page gutter for every container, a 4px-based vertical rhythm */
  --gutter:16px;                                   /* ≥16px phone, 24px tablet, 40px desktop */
  --gutter-x:max(var(--gutter),env(safe-area-inset-left),env(safe-area-inset-right)); /* + notch / rounded corners in landscape */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:72px;
  --section:40px;                                  /* vertical section padding */
  --tabbar-h:calc(var(--tabbar) + 5px + env(safe-area-inset-bottom)); /* tab bar incl. 5px stripe + home indicator */
}
@media (min-width:600px){:root{--gutter:24px;--section:56px}}
@media (min-width:1024px){:root{--gutter:40px;--section:72px}}
*{box-sizing:border-box}
html{font-size:19px;-webkit-text-size-adjust:100%}
@media (min-width:900px){html{font-size:20px}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-text);line-height:1.55;
  background-image:radial-gradient(rgba(90,58,34,.06) 1px,transparent 1px);background-size:6px 6px;padding-bottom:var(--tabbar-h)}
@media (min-width:900px){body{padding-bottom:0}}
img{max-width:100%;display:block}
a{color:var(--orange-d);text-underline-offset:3px;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;line-height:1.08;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--s-5);font-weight:650;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
h2{font-size:var(--s-4);font-weight:600}
h3{font-size:var(--s-2);font-weight:600}
p{margin:0 0 1em}
.wrap{max-width:calc(var(--wrap) + 2*var(--gutter-x));margin-inline:auto;padding-inline:var(--gutter-x)}
.muted{color:var(--ink-2)}
.eyebrow{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.stripe{height:8px;background:var(--stripe);border-radius:2px}
.stripe.thin{height:5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header / nav ---------- */
.site-head{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top);background:rgba(243,234,219,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:var(--space-2);min-height:64px}
@media (min-width:600px){.site-head .wrap{gap:var(--space-4)}}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.logo-mark{width:42px;height:42px;display:grid;place-items:center;color:currentColor;flex:none}
.logo-mark svg{width:100%;height:100%;overflow:visible}
.logo-word{font-family:var(--f-display);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;line-height:1}
.logo-word small{display:block;font-family:var(--f-mono);font-weight:400;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:3px}
.nav-top{display:none;margin-inline-start:auto;gap:4px}
.nav-top a{font-weight:700;color:var(--ink);text-decoration:none;padding:10px 14px;border-radius:999px}
.nav-top a[aria-current=page]{background:var(--ink);color:var(--paper)}
.nav-top a:hover:not([aria-current=page]){background:var(--paper-2)}
.head-account{margin-inline-start:auto}
@media (min-width:900px){.nav-top{display:flex}.head-account{margin-inline-start:8px}}
.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--night);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:env(safe-area-inset-bottom);padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);border-top:5px solid transparent;border-image:var(--stripe) 1}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tabbar);color:#d9cbb4;text-decoration:none;font-size:.78rem;font-weight:700}
.tabbar a svg{width:26px;height:26px}
.tabbar a[aria-current=page]{color:var(--mustard)}
.tabbar .count{font-family:var(--f-lcd);font-size:1rem;color:var(--glow)}
@media (min-width:900px){.tabbar{display:none}}

/* ---------- buttons, chips, inputs ---------- */
.btn{--bg:var(--orange);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;border:2px solid var(--bg);background:var(--bg);color:var(--fg);font:700 1rem/1 var(--f-text);text-decoration:none;cursor:pointer;transition:transform .12s,background .12s}
.btn:hover{--bg:var(--orange-d)}
.btn:active{transform:translateY(1px)}
.btn.ghost{--bg:transparent;--fg:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--paper-2)}
.btn.dark{--bg:var(--ink);--fg:var(--paper)}
.btn.teal{--bg:var(--teal)}
.btn.small{min-height:42px;padding:0 16px;font-size:.9rem}
.btn.block{width:100%}
.btn svg{width:22px;height:22px;flex:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:700 .9rem/1 var(--f-text);cursor:pointer;text-decoration:none}
.chip[aria-pressed=true],.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.variant{font-family:var(--f-mono);font-weight:600;font-size:.82rem}
.chip .k{color:var(--ink-2);font-weight:400}
.chip[aria-pressed=true] .k{color:#cdbfa8}
.scroller{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-inline:calc(-1*var(--gutter-x));padding-inline:var(--gutter-x);scroll-padding-inline:var(--gutter-x)}
.scroller::-webkit-scrollbar{display:none}
.scroller .chip{flex:none}
label.lbl{display:block;font-weight:700;margin-bottom:6px}
.input,select.input,textarea.input{width:100%;min-height:56px;padding:12px 16px;border-radius:12px;border:2px solid var(--ink);background:var(--card);font:400 1.05rem/1.4 var(--f-text);color:var(--ink)}
textarea.input{min-height:96px;resize:vertical}
.input::placeholder{color:#7d6f62}
.hint{font-size:.88rem;color:var(--ink-2);margin-top:6px}

/* ---------- LCD ---------- */
.lcd{font-family:var(--f-lcd);background:var(--lcd);color:var(--lcd-ink);border-radius:8px;padding:2px 10px;box-shadow:inset 0 2px 0 rgba(0,0,0,.18),inset 0 0 0 2px rgba(36,48,26,.25);letter-spacing:.04em;line-height:1.1;display:inline-block}
.lcd.big{font-size:3.4rem;padding:4px 16px}
.lcd-input{font-family:var(--f-lcd);font-size:3rem;background:var(--lcd);color:var(--lcd-ink);border:3px solid var(--night);border-radius:12px;width:5.2ch;text-align:center;padding:2px 8px;box-shadow:inset 0 3px 0 rgba(0,0,0,.18)}
.lcd-input::placeholder{color:rgba(36,48,26,.35)}
.crt{background:radial-gradient(ellipse at center,#2a3a32 0%,#141b17 75%);color:var(--glow);font-family:var(--f-lcd);border-radius:18px;text-shadow:0 0 8px rgba(166,235,198,.55);position:relative;overflow:hidden}
.crt::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}

/* ---------- media + AI label ---------- */
.media{position:relative;border-radius:var(--r);overflow:hidden;background:#E4DED4;aspect-ratio:4/3}
.media img{width:100%;height:100%;object-fit:cover}
.ai-tag{position:absolute;inset-inline-start:8px;bottom:8px;display:inline-block;background:rgba(30,25,21,.55);color:#FFFAF1;font:600 11px/1 var(--f-mono);font-variant-caps:all-small-caps;letter-spacing:.08em;padding:3px 7px 4px;border-radius:999px;pointer-events:auto;cursor:help;backdrop-filter:blur(2px)}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8b7c6c;background:repeating-linear-gradient(135deg,#ECE4D6 0 14px,#E6DDCD 14px 28px)}
.ph svg{width:30%;max-width:120px;height:auto;opacity:.75}
.ph span{font:600 .8rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--card);padding:6px 10px;border-radius:6px;border:1px dashed var(--line)}

/* ---------- museum label card (object card) ---------- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}}
.obj{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;overflow:hidden;border:1px solid #e3d6c2;position:relative}
.obj .media{border-radius:0;aspect-ratio:1/1}
.obj .lbl-card{padding:12px 14px 14px;border-top:4px solid var(--ink)}
.obj .inv{font:600 .68rem/1 var(--f-mono);letter-spacing:.08em;color:var(--ink-2);display:flex;justify-content:space-between}
.obj .nm{font-family:var(--f-display);font-weight:600;font-size:1.08rem;line-height:1.15;margin:6px 0 4px}
.obj .meta{font-size:.85rem;color:var(--ink-2)}
.obj .badge{position:absolute;top:8px;inset-inline-end:8px;background:var(--mustard);color:var(--ink);font:700 .72rem/1 var(--f-text);padding:6px 9px;border-radius:999px}
.obj:hover .nm{text-decoration:underline;text-decoration-thickness:2px}

/* ---------- sections ---------- */
section{padding-block:var(--section)}
.band-night{background:var(--night);color:#F3EADB}
.band-night .eyebrow{color:#cdbfa8}
.band-night .muted{color:#d6c8b2}
.band-paper2{background:var(--paper-2)}

/* hero */
.hero{padding-block:var(--space-6) var(--space-7)}
.hero-grid{display:grid;gap:28px}
@media (min-width:900px){.hero{padding-block:64px 80px}.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:56px}}
.hero h1 em{font-style:italic;color:var(--orange)}
.hero .lead{font-size:var(--s-2);line-height:1.4;max-width:30ch}
.collage{position:relative;aspect-ratio:1/0.92}
.collage .pc{position:absolute;width:56%;background:var(--card);padding:8px 8px 10px;border-radius:6px;box-shadow:var(--shadow)}
.collage .pc .media{aspect-ratio:1/1;border-radius:3px}
.collage .pc figcaption{font:600 .7rem/1.2 var(--f-mono);margin-top:7px;display:flex;justify-content:space-between;gap:6px}
.collage .pc:nth-child(1){inset-inline-start:0;top:4%;transform:rotate(-4deg)}
.collage .pc:nth-child(2){inset-inline-end:0;top:0;transform:rotate(3deg);width:50%}
.collage .pc:nth-child(3){inset-inline-start:20%;bottom:0;transform:rotate(1.5deg);width:52%;z-index:2}
.timebox{background:var(--night);color:#F3EADB;border-radius:var(--r-lg);padding:22px;display:grid;gap:14px;box-shadow:var(--shadow)}
.timebox .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.timebox label{font-family:var(--f-display);font-size:var(--s-2);font-weight:600}
.age-strip{display:grid;gap:14px;margin-top:22px}
@media (min-width:700px){.age-strip{grid-template-columns:repeat(4,1fr)}}
.age-col{background:var(--card);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.age-col h3{display:flex;align-items:baseline;gap:10px;font-size:1.2rem}
.age-col .mini{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px dashed var(--line);text-decoration:none;color:var(--ink)}
.age-col .mini .media{width:56px;flex:none;aspect-ratio:1;border-radius:8px}
.age-col .mini .media .ph svg{width:60%}
.age-col .mini .media .ph span{display:none}
.age-col .mini .ai-tag,.mm-item .ai-tag,.shot .ai-tag,.collage .ai-tag,.q-deck-thumbs .ai-tag{inset-inline-start:4px;bottom:4px;font-size:11px;padding:2px 5px 3px}
.age-col .mini b{display:block;font-size:.92rem;line-height:1.2}
.age-col .mini small{color:var(--ink-2);font-size:.8rem}
.steps3{display:grid;gap:16px}
@media (min-width:800px){.steps3{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card);border-radius:var(--r);padding:20px;border:1px solid #e3d6c2}
.step .n{font-family:var(--f-lcd);font-size:2.2rem;color:var(--orange);line-height:1}
.decade-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,44%);gap:14px;overflow-x:auto;padding-block:4px 18px;padding-inline:var(--gutter-x);margin-inline:calc(-1*var(--gutter-x));scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter-x)}
.shelf>*{scroll-snap-align:start}
@media (min-width:900px){.shelf{grid-auto-columns:minmax(200px,1fr);grid-auto-flow:column;margin-inline:0;padding-inline:0}}
.foot{background:var(--night);color:#d6c8b2;padding-block:var(--space-6) var(--space-7);font-size:.92rem}
.foot a{color:var(--mustard)}
.foot .cols{display:grid;gap:18px}
@media (min-width:800px){.foot .cols{grid-template-columns:2fr 1fr 1fr 1fr}}

/* ---------- discovery deck ---------- */
.deck-wrap{max-width:calc(520px + 2*var(--gutter-x));margin-inline:auto;padding-block:12px 20px;padding-inline:var(--gutter-x)}
.deck-top{display:flex;justify-content:space-between;align-items:center;margin:4px 0 10px;gap:10px}
.deck{position:relative;height:calc(100svh - 478px - env(safe-area-inset-bottom));max-height:560px;min-height:320px;margin:12px 0 14px}
@media (min-width:900px){.deck{height:min(60vh,540px)}}
.deck-filters{display:flex;gap:8px;align-items:center}
.deck-filters .scroller{flex:1;min-width:0}
.deck-filters select{width:auto;min-height:42px;padding:0 10px;font-weight:700;font-size:.9rem;border-radius:999px;max-width:132px;flex:none}
.dcard{position:absolute;inset:0;background:var(--card);border-radius:var(--r-lg);box-shadow:0 18px 40px -18px rgba(30,25,21,.55);display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y;user-select:none;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .3s;border:1px solid #e0d2bc}
.dcard.behind{transform:translateY(14px) scale(.955);opacity:.9}
.dcard.behind2{transform:translateY(28px) scale(.91);opacity:.6}
.dcard .media{border-radius:0;aspect-ratio:auto;flex:1;min-height:0}
.dcard .body{padding:16px 18px 18px;border-top:4px solid var(--ink)}
.dcard .row1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dcard h2{font-size:1.65rem;margin:10px 0 4px}
.dcard p{margin:0;color:var(--ink-2);font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stamp{position:absolute;top:22px;padding:6px 14px;border:4px solid;border-radius:10px;font:700 1.5rem/1 var(--f-display);transform:rotate(-10deg);opacity:0;background:rgba(255,250,241,.85);z-index:3}
.stamp.yes{inset-inline-start:18px;color:var(--ok)} .stamp.know{left:50%;transform:translateX(-50%) rotate(-4deg);color:var(--teal)} .stamp.skip{inset-inline-end:18px;color:var(--red);transform:rotate(10deg)}
.deck-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.deck-actions .btn{flex-direction:column;min-height:68px;gap:4px;padding:6px;border-radius:18px;font-size:.95rem}
.deck-actions .btn svg{width:26px;height:26px}
.deck-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:var(--card);border-radius:var(--r-lg);border:2px dashed var(--line)}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 14px);transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:12px 14px 12px 18px;border-radius:14px;display:flex;align-items:center;gap:12px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:calc(100vw - 2*var(--gutter-x));box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%);pointer-events:auto}
.toast button{background:none;border:2px solid var(--mustard);color:var(--mustard);border-radius:999px;padding:6px 12px;font:700 .85rem var(--f-text);cursor:pointer}
@media (min-width:900px){.toast{bottom:max(28px,env(safe-area-inset-bottom))}}

/* ---------- search ---------- */
.searchbar{position:relative}
.searchbar svg{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;color:var(--ink-2)}
.searchbar .input{padding-inline-start:52px;font-size:1.15rem;min-height:60px;border-radius:999px}
.filters{display:grid;gap:12px;margin:16px 0 8px}
.filter-row{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.filter-row>.eyebrow{flex:none}
.result-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 14px;flex-wrap:wrap}
.didyou{background:var(--card);border-inline-start:6px solid var(--mustard);padding:10px 14px;border-radius:8px;margin:8px 0}
@media (min-width:1000px){.search-layout{display:grid;grid-template-columns:280px 1fr;gap:36px;align-items:start}.search-layout .filters{position:sticky;top:90px}.filter-row .scroller{flex-wrap:wrap;margin:0;padding:0;overflow:visible}}

/* ---------- detail ---------- */
.crumbs{font-size:.88rem;color:var(--ink-2);margin:16px 0 6px}
.crumbs a{color:var(--ink-2)}
.detail{display:grid;gap:24px;padding-bottom:30px}
@media (min-width:960px){.detail{grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}}
.gallery .media{aspect-ratio:4/3;border-radius:var(--r-lg)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.shot{background:none;border:3px solid transparent;border-radius:12px;padding:0;cursor:pointer;text-align:start;font:700 .8rem var(--f-text);color:var(--ink)}
.shot .media{aspect-ratio:4/3;border-radius:9px}
.shot .media .ph span{display:none}
.shot[aria-pressed=true]{border-color:var(--orange)}
.shot span.t{display:block;padding:4px 2px}
.label-panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid #e3d6c2;overflow:hidden}
.label-panel .top{padding:20px 22px 6px}
.label-panel h1{font-size:clamp(2.2rem,6vw,3.2rem);margin:6px 0 10px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;padding:14px 22px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin:0;font-size:.95rem}
.facts dt{font:600 .74rem/1.9 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.facts dd{margin:0;font-weight:700}
.yearline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.status-btn{min-height:58px;border-radius:14px;border:2px solid var(--ink);background:var(--card);font:700 .98rem/1.15 var(--f-text);cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:10px;padding:8px 14px;text-align:start}
.status-btn small{display:block;font-weight:400;font-size:.76rem;color:var(--ink-2)}
.status-btn[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.status-btn[aria-pressed=true] small{color:#cdbfa8}
.status-btn svg{width:22px;height:22px;flex:none}
.panel-sec{padding:16px 22px}
.panel-sec+.panel-sec{border-top:1px dashed var(--line)}
.legacy{background:#F7EFE2;border-inline-start:4px solid var(--line);padding:10px 12px;font-size:.88rem;color:var(--ink-2);border-radius:6px}
.sources li{margin-bottom:6px}
.like{display:inline-flex;align-items:center;gap:8px}
.like[aria-pressed=true] svg{fill:var(--red);color:var(--red)}

/* ---------- my museum ---------- */
.mm-head{display:grid;gap:18px;padding:28px 0 8px}
@media (min-width:900px){.mm-head{grid-template-columns:1fr auto;align-items:end}}
.counter-row{display:flex;gap:10px;flex-wrap:wrap}
.counter{background:var(--night);color:#F3EADB;border-radius:12px;padding:8px 12px;min-width:86px}
.counter .lcd{font-size:1.9rem;display:block;text-align:center;margin-bottom:4px}
.counter small{font-size:.75rem;display:block;text-align:center}
.timeline{position:relative;margin:20px 0 0;padding-inline-start:22px}
.timeline::before{content:"";position:absolute;inset-inline-start:7px;top:0;bottom:0;width:4px;background:var(--stripe);border-radius:2px}
.tl-year{font-family:var(--f-lcd);font-size:2rem;line-height:1;margin-block:22px 10px;margin-inline-start:-22px;display:flex;align-items:center;gap:10px}
.tl-year::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--ink);border:4px solid var(--paper);flex:none}
.mm-item{display:grid;grid-template-columns:96px 1fr;gap:14px;background:var(--card);border-radius:var(--r);padding:12px;box-shadow:var(--shadow);margin-bottom:12px;border:1px solid #e3d6c2}
@media (min-width:700px){.mm-item{grid-template-columns:140px 1fr}}
.mm-item .media{aspect-ratio:1;border-radius:10px}
.mm-item .media .ph span{display:none}
.mm-item h3{font-size:1.15rem;margin:2px 0 4px}
.mm-item h3 a{color:var(--ink);text-decoration:none}
.note{font-family:var(--f-display);font-style:italic;font-size:1.02rem;background:#FFF3C9;border-radius:4px;border-end-start-radius:0;padding:8px 12px;margin:8px 0;position:relative;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.note.empty{font-style:normal;font-family:var(--f-text);background:none;border:1px dashed var(--line);color:var(--ink-2);font-size:.9rem}
.pill{display:inline-flex;align-items:center;gap:6px;font:700 .75rem/1 var(--f-text);padding:6px 10px;border-radius:999px;background:var(--paper-2)}
.pill.owned{background:#D9E8CF;color:#1f4a22}.pill.used{background:#D3E4E2;color:#17423f}.pill.wished{background:#F6DFB3;color:#5a3b06}.pill.liked{background:#F2D3CD;color:#6b1d17}
.mm-layout{display:grid;gap:26px}
@media (min-width:1000px){.mm-layout{grid-template-columns:1fr 440px;align-items:start}.mm-layout aside{position:sticky;top:88px}}
.share-box{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);border:1px solid #e3d6c2}
.share-card-preview{width:100%;aspect-ratio:1200/630;border-radius:10px;box-shadow:0 8px 24px -10px rgba(0,0,0,.4);background:var(--night)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.switch input{appearance:none;width:56px;height:32px;border-radius:999px;background:#cbbba3;position:relative;cursor:pointer;flex:none;transition:.2s}
.switch input::after{content:"";position:absolute;inset-inline-start:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked{background:var(--ok)}
.switch input:checked::after{inset-inline-start:28px}
.linkbox{display:flex;gap:8px;align-items:center;font-family:var(--f-mono);font-size:.82rem;background:var(--paper);border:2px dashed var(--line);border-radius:10px;padding:10px 12px;word-break:break-all}
.empty-state{text-align:center;padding:var(--space-6) var(--space-5);background:var(--card);border-radius:var(--r-lg);border:2px dashed var(--line)}
dialog{border:none;border-radius:var(--r-lg);padding:0;max-width:520px;width:calc(100% - 2*var(--gutter-x));max-height:calc(100dvh - 2*var(--space-5) - env(safe-area-inset-top) - env(safe-area-inset-bottom));background:var(--card);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(30,25,21,.55)}
dialog form{padding:22px;display:grid;gap:14px}

/* ---------- auth ---------- */
.auth{max-width:calc(520px + 2*var(--gutter-x));margin-inline:auto;padding-block:var(--space-6) var(--space-7);padding-inline:var(--gutter-x)}
.auth-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;border:1px solid #e3d6c2}
.auth-card .crt{padding:22px 22px 18px;border-radius:0}
.auth-card .crt p{font-size:1.5rem;margin:0;line-height:1.1}
.auth-card .in{padding:22px;display:grid;gap:16px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--paper-2);border-radius:999px;padding:4px}
.tabs button{min-height:46px;border:none;background:none;border-radius:999px;font:700 1rem var(--f-text);cursor:pointer;color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:.85rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.privacy{background:#EEF3EA;border-radius:12px;padding:14px 16px;font-size:.9rem}
.privacy ul{margin:6px 0 0;padding-inline-start:20px}
.mock-banner{background:#FFF3C9;border:2px dashed var(--mustard);border-radius:12px;padding:10px 14px;font-size:.88rem}

/* ---------- style guide ---------- */
.swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:800px){.swatches{grid-template-columns:repeat(5,1fr)}}
.sw{border-radius:12px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.sw i{display:block;height:84px}
.sw div{padding:10px;font-size:.82rem}
.sw b{display:block}
.sw code{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-2)}
.typerow{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--line)}
.typerow code{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-2)}
.sg-grid{display:grid;gap:22px}
@media (min-width:900px){.sg-grid{grid-template-columns:1fr 1fr}}
.sg-box{background:var(--card);border-radius:var(--r);padding:20px;border:1px solid #e3d6c2}

.dcard img{pointer-events:none;-webkit-user-drag:none}

.hint svg,p svg.inl{width:1em;height:1em;vertical-align:-2px;display:inline}
.tabbar a{position:relative;font-size:.76rem}
.tabbar .count{position:absolute;top:9px;left:calc(50% + 6px);background:var(--orange);color:#fff;font:700 .72rem/1 var(--f-text);border-radius:999px;padding:3px 7px;text-shadow:none}
.counter-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (min-width:900px){.counter-row{display:flex}}
.counter{min-width:0;padding:8px 6px}
@media (max-width:899px){
  .hero{padding-top:18px}
  .hero-grid{gap:18px}
  .hero .collage{order:-1;aspect-ratio:auto;height:230px;max-width:420px}
  .hero .collage{width:100%;margin-inline:auto;height:auto;aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);align-items:start;padding-block:var(--space-2) var(--space-3);padding-inline:var(--space-2)}
  .hero .collage .pc{position:relative;inset:auto!important;width:auto!important;margin:0;padding:5px 5px 7px}
  .hero .collage .pc:nth-child(1){order:1;margin-block-start:14px;transform:rotate(-4deg)}
  .hero .collage .pc:nth-child(3){order:2;transform:rotate(1.5deg)}
  .hero .collage .pc:nth-child(2){order:3;margin-block-start:10px;transform:rotate(3deg)}
  .hero .collage .pc figcaption{font-size:.6rem;min-width:0;flex-wrap:wrap;column-gap:4px;row-gap:1px}
  .hero .lead{font-size:1.15rem}
  .hero h1{font-size:clamp(2.6rem,12.5vw,3.1rem)}
}

.mm-layout>*,.detail>*,.hero-grid>*,.search-layout>*{min-width:0}
html,body{overflow-x:hidden}

.dcard .media{background:#DAD8D4}.dcard .media img{object-fit:contain}

/* =========================================================
   Relaunch phase 3: i18n, community, OTP login, Quartett
   ========================================================= */
/* long strings: let words break instead of overflowing (German compounds, pseudo-locale) */
h1,h2,h3,.btn,.chip,.status-btn,.q-deck-title,.tabbar a span,.qrows .ql{overflow-wrap:break-word;hyphens:auto}
.head-account span,.nav-top a{white-space:nowrap}
.nav-top a{display:inline-flex;align-items:center;gap:6px}
.btn{text-align:center;line-height:1.15}
.tabbar a span{max-width:100%;padding-inline:2px;text-align:center;line-height:1.1}
[dir=rtl] .btn svg[class=""],[dir=rtl] svg.flip{transform:scaleX(-1)}
.stack{display:grid;gap:14px}
.linkbtn{background:none;border:none;padding:6px 0;color:var(--orange-d);font:700 .95rem var(--f-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn[disabled]{color:var(--ink-2);text-decoration:none;cursor:default}
.linkbtn.small{font-size:.85rem}
.mono{font-family:var(--f-mono)}
/* language switcher */
.lang-switch{position:relative;display:flex;align-items:center;margin-inline-start:auto}
.lang-switch svg{position:absolute;inset-inline-start:10px;width:18px;height:18px;pointer-events:none;color:var(--ink-2)}
.lang-switch select{appearance:none;min-height:42px;border:2px solid var(--line);border-radius:999px;background:var(--card);font:700 .85rem var(--f-text);color:var(--ink);padding-block:0;padding-inline:34px 12px;cursor:pointer;max-width:9.5rem}
.site-head .head-account{margin-inline-start:8px}
@media (max-width:1199px){.lang-switch select{width:44px;padding-inline:0;color:transparent;border-color:transparent;background:transparent}.lang-switch svg{inset-inline-start:13px;color:var(--ink)}.site-head .head-account span{max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media (max-width:520px){.logo-word small{display:none}}
@media (min-width:900px){.nav-top{margin-inline-start:auto}.lang-switch{margin-inline-start:6px}}
.head-account span{display:inline-block}
.foot a[aria-current]{font-weight:700;color:#F3EADB}

/* home quartett teaser */
.qt-teaser{display:grid;gap:24px;align-items:center}
@media (min-width:900px){.qt-teaser{grid-template-columns:1fr 1fr}}
.q-teaser-cards{display:flex;justify-content:center;gap:0}
.q-teaser-cards .qcard{width:min(46%,250px);pointer-events:none}
.q-teaser-cards .qcard:first-child{transform:rotate(-5deg) translateX(10px)}
.q-teaser-cards .qcard:last-child{transform:rotate(4deg) translate(-10px,16px)}
.dcard-com{margin-block-start:6px!important;display:flex!important;align-items:center;gap:6px;font-size:.85rem!important;color:var(--teal)!important;font-weight:700}
.dcard-com svg{width:18px;height:18px}

/* detail: community strip, tabs, posts, data */
.post-text p{font-size:1.12rem;line-height:1.45;margin:14px 0 6px}
.com-strip{background:var(--night);color:#F3EADB;padding:16px 22px;display:grid;gap:14px}
.com-had{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.com-had .lcd{font-size:2.2rem;padding:0 10px}
.com-had>span:nth-child(2){font-weight:700;flex:1;min-width:8ch}
.com-had .btn.small{--bg:var(--mustard);--fg:var(--ink)}
.com-had .btn.teal{--bg:var(--glow);--fg:var(--night)}
.com-rate{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.com-rate .eyebrow{color:#cdbfa8}
.rate-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rate-line b{font-family:var(--f-lcd);font-size:1.6rem;font-weight:400;line-height:1}
.com-strip .muted{color:#cdbfa8}
.stars{display:inline-flex;gap:2px}
.stars .st svg{width:22px;height:22px;color:#6b5d4e}
.stars .st.on svg{color:var(--mustard)}
.stars .st.half svg{color:var(--mustard);opacity:.5}
.my-rate{display:flex;gap:2px}
.my-rate button{background:none;border:none;padding:6px;min-width:40px;min-height:44px;cursor:pointer;color:#6b5d4e;border-radius:8px}
.my-rate button svg{width:26px;height:26px}
.my-rate button.on{color:var(--mustard)}
.my-rate button:hover{color:#f0c35a}
.reactions{display:flex;flex-wrap:wrap;gap:8px}
.react{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding-inline:12px;border-radius:999px;border:2px solid #4a3d33;background:var(--night-2);color:#F3EADB;font:700 .88rem var(--f-text);cursor:pointer}
.react b{font-family:var(--f-mono);font-weight:600;color:#cdbfa8}
.react[aria-pressed=true]{border-color:var(--mustard);background:#3d2f20}
.ex-note{color:#cdbfa8!important;margin:0}
.ex-note svg{color:var(--mustard)}
.tabs.big{display:flex;gap:6px;background:var(--paper-2);border-radius:16px;padding:5px;margin-block:4px 0;overflow-x:auto}
.tabs.big button{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:12px;padding-inline:14px;font-size:1rem}
.tabs.big button svg{width:20px;height:20px}
.tab-panel{padding-block:20px 10px}
.composer{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:16px;display:grid;gap:10px;margin-block-end:18px}
.composer-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.composer-row .small-select{width:auto;min-height:44px;padding-block:0;font-size:.9rem;border-width:2px}
.composer-row .hint{margin:0;margin-inline-end:auto}
.post-list{display:grid;gap:12px}
@media (min-width:900px){.stories{max-width:760px}}
.post{background:var(--card);border-radius:var(--r);border:1px solid #e3d6c2;padding:14px 16px;box-shadow:var(--shadow)}
.post.example{background:repeating-linear-gradient(135deg,var(--card) 0 18px,#FBF4E7 18px 36px)}
.post header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.post .avatar{width:36px;height:36px;border-radius:50%;background:var(--night);color:var(--glow);display:grid;place-items:center;font:20px/1 var(--f-lcd);flex:none}
.post .avatar svg{width:20px;height:20px}
.post .who{display:grid;line-height:1.2;margin-inline-end:auto}
.post .who small{color:var(--ink-2);font-size:.8rem}
.post p{margin:10px 0;font-size:1.05rem}
.post footer{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ex-tag{font:600 11px/1 var(--f-mono);font-variant-caps:all-small-caps;letter-spacing:.1em;border:1.5px dashed var(--orange);color:var(--orange-d);padding:3px 7px 4px;border-radius:999px}
.lang-tag{font:600 .7rem/1 var(--f-mono);background:var(--teal);color:#fff;padding:4px 6px;border-radius:5px;letter-spacing:.06em}
.react-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding-inline:12px;border-radius:999px;border:2px solid var(--line);background:var(--paper);font:700 .85rem var(--f-text);cursor:pointer;color:var(--ink)}
.react-btn svg{width:18px;height:18px}
.react-btn[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.about-grid{display:grid;gap:22px}
@media (min-width:900px){.about-grid{grid-template-columns:1.2fr 1fr;gap:40px}}
.about-grid .facts{padding-inline:0;border-top:none}
.why{font-size:1.05rem}
.sources{margin:0;padding-inline-start:20px}
.ai-note{font-size:.85rem}
.data-tab{display:grid;gap:26px}
@media (min-width:900px){.data-tab{grid-template-columns:1.1fr 1fr;gap:40px}}
.spec-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);font-size:.95rem}
.spec-table th,.spec-table td{text-align:start;padding:10px 12px;border-block-end:1px dashed var(--line)}
.spec-table thead th{font:600 .72rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2)}
.spec-table tbody th{font-weight:700}
.spec-table tr.na{color:#8b7c6c}
.spec-table tr.na th{font-weight:400}
.spec-table .rule svg{width:16px;height:16px;vertical-align:-3px}
.spec-table small{color:var(--ink-2)}
.facts.raw{padding-inline:0;font-size:.88rem}
.facts.raw dd{font-weight:400}

/* login: OTP */
.otp-h{font-size:1.7rem;margin:0 0 6px}
.otp-input{font-family:var(--f-lcd);font-size:2.6rem;letter-spacing:.42em;text-align:center;width:100%;max-width:340px;background:var(--lcd);color:var(--lcd-ink);border:3px solid var(--night);border-radius:14px;padding-block:6px;padding-inline:.42em 0;box-shadow:inset 0 3px 0 rgba(0,0,0,.18)}
.otp-input::placeholder{color:rgba(36,48,26,.35)}
.otp-input[aria-invalid=true]{border-color:var(--red);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.hint.err{color:var(--red);font-weight:700;min-height:1em}
.otp-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dev-hint{background:#FFF3C9;border:2px dashed var(--mustard);border-radius:12px;padding:10px 14px;font-size:.88rem}
.dev-hint .lcd{font-size:1.4rem;padding:0 8px;letter-spacing:.2em}
.dev-hint summary{cursor:pointer;font-weight:700;margin-block-start:8px}
.mail-preview{background:#fff;border:1px solid var(--line);border-radius:10px;margin-block-start:10px;overflow:hidden;font-size:.9rem}
.mp-head{background:var(--paper-2);padding:8px 12px;font-size:.8rem;line-height:1.6}
.mp-head span{color:var(--ink-2)}
.mp-body{padding:12px 14px}
.mp-body p{margin:0 0 8px}
.mp-code{font:600 2rem/1 var(--f-mono);letter-spacing:.3em;background:var(--paper);border-radius:8px;padding:12px;text-align:center;margin:6px 0 10px}
.mp-foot{font-size:.75rem;border-block-start:1px solid var(--line);padding-block-start:8px}
.gate-reason{background:var(--paper);border-inline-start:5px solid var(--mustard);padding:10px 12px;border-radius:8px;margin:0}
dialog.gate{max-width:480px}
.gate-in{padding:18px;display:grid;gap:14px}
.gate-top{display:flex;gap:10px;align-items:stretch}
.gate-top .crt{flex:1;padding:10px 14px;border-radius:12px}
.gate-top .crt p{margin:0;font-size:1.35rem;line-height:1.1}
.gate-x{font-size:1.4rem;min-width:44px;text-decoration:none;color:var(--ink)}

/* Quartett */
.q-head{padding-block:6px 10px}
.q-h2{font-size:1.5rem;margin-block:22px 10px}
.q-decks{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.q-deck{display:grid;gap:6px;text-align:start;background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:12px 14px;cursor:pointer;color:var(--ink);font:inherit}
.q-deck[aria-checked=true]{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);background:#FFF6E4}
.q-deck[disabled]{opacity:.55;cursor:not-allowed}
.q-deck-title{font:600 1.15rem/1.15 var(--f-display)}
.q-deck-meta{font:600 .75rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.q-deck-attrs{display:flex;flex-wrap:wrap;gap:4px}
.q-deck-attrs span{font-size:.75rem;background:var(--paper-2);border-radius:999px;padding:2px 8px}
.q-deck-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.q-deck-thumbs .media{aspect-ratio:1;border-radius:6px}
.q-deck-thumbs .ph span{display:none}
.q-modes{display:grid;gap:10px;margin-block:18px}
@media (min-width:700px){.q-modes{grid-template-columns:1fr 1fr}}
.q-modes .btn{min-height:60px}
.q-join .row{display:flex;gap:10px}
.code-input{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.2em;max-width:12ch}
.q-rules{margin-block-start:18px;background:var(--card);border-radius:var(--r);padding:12px 16px;border:1px solid #e3d6c2}
.q-rules summary{font-weight:700;cursor:pointer}
.q-rules ol{padding-inline-start:20px;margin-block:10px 0}
.q-wait{max-width:560px;margin:10px auto;text-align:center}
.q-wait .crt{padding:16px}
.q-wait .crt p{margin:0;font-size:1.5rem}
.q-code{font-size:3.4rem;letter-spacing:.2em;padding:4px 18px}
.q-wait .chips{justify-content:center}
.q-board{max-width:860px;margin:0 auto}
.q-score{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;background:var(--night);color:#F3EADB;border-radius:var(--r-lg);padding:10px 14px}
.q-player{display:grid;gap:2px;justify-items:start;padding:6px 8px;border-radius:12px;min-width:0}
.q-player:last-child{justify-items:end;text-align:end}
.q-player small{font-weight:700;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:flex;gap:4px;align-items:center}
.q-player small svg{width:16px;height:16px}
.q-player .lcd{font-size:2.2rem;padding:0 10px}
.q-player.active{box-shadow:inset 0 0 0 2px var(--mustard)}
.q-mid{display:grid;justify-items:center;gap:4px;text-align:center}
.q-mid .eyebrow{color:#cdbfa8;font-size:.68rem}
.q-pot{font:600 .72rem var(--f-mono);color:var(--mustard)}
.q-deckname{font-size:.75rem;color:#cdbfa8}
.q-status{text-align:center;font-size:1.08rem;margin:14px 0;min-height:2.6em}
.q-status.reveal{background:var(--card);border-radius:12px;padding:10px 14px;border:2px solid var(--ink)}
.q-table{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start}
.q-side{display:grid;gap:6px;min-width:0}
.q-side>.eyebrow{text-align:center;font-size:.68rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-vs{font:28px/1 var(--f-lcd);color:var(--orange);align-self:center}
@media (max-width:620px){.q-table{grid-template-columns:1fr 1fr}.q-vs{display:none}}
.qcard{position:relative;background:var(--card);border-radius:16px;border:3px solid var(--ink);box-shadow:0 12px 26px -14px rgba(30,25,21,.6);overflow:hidden;display:flex;flex-direction:column}
.qcard header{display:flex;justify-content:space-between;align-items:center;gap:6px;background:var(--ink);color:var(--paper);padding:5px 8px}
.qcode{font:22px/1 var(--f-lcd);background:var(--mustard);color:var(--ink);border-radius:5px;padding:1px 6px}
.qcat{font:600 .62rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-align:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qcard .media{border-radius:0;aspect-ratio:4/3}
.qcard .media .ph span{font-size:.6rem}
.qcard h3{font-size:1rem;line-height:1.15;margin:8px 8px 4px;min-height:2.3em}
.qrows{list-style:none;margin:0;padding:0 6px 8px;display:grid;gap:3px}
.qrows button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:5px;align-items:center;min-height:38px;padding-inline:8px;border-radius:8px;border:1.5px solid var(--line);background:var(--paper);font:700 .8rem/1.15 var(--f-text);color:var(--ink);text-align:start;cursor:pointer}
.qrows button b{font:600 .8rem/1 var(--f-mono);white-space:nowrap}
.qrows .ql{min-width:0}
@media (max-width:620px){.qrows button{font-size:.72rem;padding-inline:6px;min-height:40px}.qrows button b{font-size:.72rem}.qcard h3{font-size:.92rem}}
.qrows .rule svg{width:14px;height:14px;color:var(--ink-2)}
.qrows button:not([disabled]):hover{background:var(--mustard);border-color:var(--ink)}
.qrows button[disabled]{cursor:default}
.qrows li.na button{background:repeating-linear-gradient(135deg,#EFE7DA 0 6px,#E8DFD0 6px 12px);color:#968877;border-style:dashed}
.qrows li.na b{font-weight:400}
.qrows li.hl button{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.qrows li.hl .rule svg{color:var(--mustard)}
.qcard.res-win{border-color:var(--ok)}
.qcard.res-lose{border-color:var(--red);opacity:.92}
.qstamp{position:absolute;top:44px;inset-inline-end:8px;font:700 1.2rem/1 var(--f-display);padding:4px 10px;border:3px solid;border-radius:8px;background:rgba(255,250,241,.9);transform:rotate(8deg)}
.res-win .qstamp{color:var(--ok)} .res-lose .qstamp{color:var(--red)} .res-tie .qstamp{color:var(--teal)}
.qcard.back{background:var(--night);min-height:340px;display:grid;place-items:center;border-color:var(--night-2)}
.qback{display:grid;justify-items:center;gap:10px;color:var(--glow);font:1.4rem var(--f-lcd);text-align:center;padding:20px;background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(226,166,42,.12) 10px 20px);inset:8px;position:absolute;border-radius:10px;align-content:center}
.qback .logo-mark{width:64px;height:64px}
.q-over{text-align:center;margin-block:18px}
.q-over .crt{padding:22px}
.q-over .crt p{font-size:2.4rem;margin:0}
.q-over .lead{font-size:1.4rem;margin-block:14px}

@media (max-width:520px){.tabs.big{gap:3px;padding:4px}.tabs.big button{padding-inline:6px;font-size:.92rem;gap:5px}.tabs.big button svg{width:17px;height:17px}.spec-table{font-size:.86rem}.spec-table th,.spec-table td{padding:8px}}

/* ---------- line art: logo, spot illustrations (tools/make_art.py) ---------- */
.art{display:block;overflow:visible;--art-bg:var(--card)}
.spot{width:min(100%,220px);height:auto;margin-inline:auto;color:var(--ink)}
.empty-state .spot,.deck-empty .spot{width:min(70%,200px);margin-block-end:6px}
.foot-logo{color:#F3EADB;gap:10px}
.foot-logo .logo-mark{width:36px;height:36px}
.step .step-spot{width:150px;margin:0 0 6px;margin-inline-start:-6px}
.share-spot{width:170px;margin-block:-4px 4px}
.spot-code{width:150px;margin:0 0 4px;margin-inline-start:-8px}
.mp-body .spot-mail{width:150px;margin-block:4px 8px}
.q-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}
.q-head .q-spot{width:clamp(110px,26vw,220px);margin:0}
.spot-cta{display:grid;justify-items:start;gap:4px}
.spot-cta .spot{width:180px;margin:0}
.sg-logos{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sg-lockup .logo-mark{width:56px;height:56px}
.sg-lockup .logo-word{font-size:1.5rem}
.sg-dark{background:var(--night);color:#F3EADB;border-color:#3a2f27}
.sg-dark .eyebrow{color:#cdbfa8}
.sg-fav{display:flex;flex-wrap:wrap;gap:22px;align-items:end}
.sg-fav figure{margin:0;display:grid;justify-items:center;gap:6px}
.sg-fav figcaption{font:600 .75rem var(--f-mono);color:var(--ink-2)}
.sg-tab span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-block-end:0;border-radius:10px 10px 0 0;padding:8px 14px;font-size:.85rem}
.sg-spots{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sg-spots figure{margin:0}
.sg-spots .spot{width:100%;max-width:260px}
.sg-spots figcaption{margin-block-start:6px}
@media (max-width:520px){.logo-mark{width:38px;height:38px}.q-head{grid-template-columns:1fr}.q-head .q-spot{width:150px;justify-self:end;margin-block-start:-8px}.step .step-spot{width:130px}}
/* image batch review marker, only with ?review=1 */
.review-mode .media[data-review]{outline:3px dashed var(--mustard,#E2A62A);outline-offset:-3px}
.band-night .step .muted{color:var(--ink-2)}
.sg-dark .logo{color:#F3EADB}

/* ---------- logo lockup: icon optically centred on the wordmark (middle of cap- and x-height of Fraunces) ----------
   Grid: icon in column 1 / row 1, wordmark in row 1, tagline in row 2. Both row-1 items are centred, so the icon centre
   meets the centre of the wordmark's line box(es); --wm-dy corrects from line-box centre (content area, ascender .978 /
   descender .255 em) to the optical middle ((cap .70 + x .482)/4 = .2955 em above baseline): .3615 - .2955 = .066 em down.
   Works for a wrapped two-line wordmark too (centre of the block). */
.logo{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;justify-content:start;--wm-fs:1.2rem;--wm-dy:.066em}
.logo .logo-word{display:contents}
.logo .wm{grid-column:2;grid-row:1;align-self:center;font-family:var(--f-display);font-weight:700;font-size:var(--wm-fs);line-height:1;letter-spacing:-.01em}
.logo .logo-word small{grid-column:2;grid-row:2;align-self:start}
.logo .logo-mark{grid-column:1;grid-row:1;align-self:center;font-size:var(--wm-fs);translate:0 var(--wm-dy);margin-block:-40px} /* icon overflows its row so the tagline stays tight under the wordmark */
.sg-lockup{--wm-fs:1.5rem}

/* ---------- spacing system: guards (2026-11-01) ----------
   Every page container uses .wrap (padding-inline: var(--gutter-x)); full-bleed bands only paint background.
   Grid/flex children may shrink below their content width, so long words, scrollers and chips never push the page wider. */
.grid>*,.filters>*,.filter-row>*,.qt-teaser>*,.sg-grid>*,.steps3>*,.age-strip>*,.about-grid>*,.data-tab>*,.q-modes>*,.mm-head>*,.foot .cols>*,.status-grid>*,.q-decks>*{min-width:0}
.status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.status-btn{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.status-btn>span{min-width:0}
.eyebrow{overflow-wrap:break-word;text-wrap:balance}
h2,h3{text-wrap:balance}
p{text-wrap:pretty}
@media (max-width:599px){.eyebrow{letter-spacing:.1em}}
/* header: logo never squeezed, account button never pushed off-screen */
.site-head .wrap>*{flex:none}
.site-head .lang-switch{margin-inline-start:auto}
.site-head .head-account{margin-inline-start:0;max-width:calc(100vw - 2*var(--gutter-x) - 210px)}
@media (max-width:599px){.site-head .head-account{padding-inline:14px;gap:6px}.site-head .head-account svg{width:20px;height:20px}}
@media (max-width:374px){.site-head .head-account svg{display:none}.logo-mark{width:34px;height:34px}.logo{column-gap:8px;--wm-fs:1.1rem}}
@media (min-width:900px){
  .site-head .wrap{gap:var(--space-3)}
  .site-head .nav-top{flex:0 1 auto;min-width:0;margin-inline-start:auto;gap:2px}
  .site-head .lang-switch{margin-inline-start:var(--space-2)}
  .site-head .head-account{max-width:none}
}
@media (min-width:900px) and (max-width:1199px){.nav-top a{padding:10px 10px;font-size:.92rem}.site-head .logo-word small{display:none}}
/* quartett teaser cards: fanned but kept inside the gutter */
.q-teaser-cards{padding-inline:var(--space-3);padding-block-end:var(--space-4)}
.q-teaser-cards .qcard{min-width:0}
.q-teaser-cards .qcard:first-child{transform:rotate(-4deg) translateX(6px)}
.q-teaser-cards .qcard:last-child{transform:rotate(3deg) translate(-6px,14px)}
/* style guide boxes and other cards: consistent inner padding */
.sg-box{padding:var(--space-5) var(--space-4)}
@media (min-width:600px){.sg-box{padding:var(--space-5)}}
.typerow{grid-template-columns:minmax(0,90px) minmax(0,1fr)}
@media (min-width:600px){.typerow{grid-template-columns:110px minmax(0,1fr)}}
/* card fan in the desktop hero stays inside its column */
/* desktop card fan: front card overlaps only the images of the side cards, every caption stays readable */
@media (min-width:900px){
  .hero .collage{aspect-ratio:1/0.8;margin-inline:var(--space-4)}
  .hero .collage .pc{margin:0}
  .hero .collage .pc:nth-child(1){inset-inline-start:0;top:21%;width:45%;transform:rotate(-4deg)}
  .hero .collage .pc:nth-child(2){inset-inline-end:0;inset-inline-start:auto;top:19%;width:45%;transform:rotate(3.5deg)}
  .hero .collage .pc:nth-child(3){inset-inline-start:26%;top:0;bottom:auto;width:48%;transform:rotate(1deg)}
}
@media (max-width:599px){.site-head .logo .wm{width:min-content}} /* two-line wordmark on phones, as designed */
/* tab bar labels: one line, scale down on very narrow phones instead of breaking words */
.tabbar a span:not(.count){white-space:nowrap;hyphens:none;overflow:hidden;text-overflow:ellipsis;font-size:clamp(.62rem,3.5vw,.76rem)}
/* discover: decade chips scroll under soft edges instead of being cut hard (active chip is centred by app.js) */
.deck-filters .scroller{margin-inline-end:0;--fade:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 14px),transparent 100%);-webkit-mask-image:var(--fade);mask-image:var(--fade)}