/* Retro line: "charmingly badly designed" layer on top of the live red-cream design (rm.css stays untouched).
   Sketches: js/retro.js + data/sketches.js (marker set from tools/make_marker_sketches.py). */
:root{--rs-ink:#1E1915;--rs-stroke:6px}
@media (max-width:699px){:root{--rs-stroke:5px}}
html,body{overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
.rs-host{position:relative;isolation:isolate}
.rs-layer{position:absolute;z-index:-1;overflow:hidden;pointer-events:none}
svg.rs{position:absolute;z-index:-1;pointer-events:none;overflow:visible;transform:rotate(var(--r,0deg));transform-origin:50% 50%}
svg.rs g{fill:none;stroke:var(--rs-ink);stroke-width:var(--rs-stroke);stroke-linecap:round;stroke-linejoin:round}
svg.rs path{vector-effect:non-scaling-stroke}
svg.rs.rs-faint{opacity:.36}
@media (max-width:699px){svg.rs.rs-faint{opacity:.42}}
.rs-dark svg.rs g{stroke:#F3EADB}
.rs-dark svg.rs{opacity:.55}
.rs-dark svg.rs.rs-faint{opacity:.2}
@keyframes rs-wob{0%{transform:rotate(var(--r)) translate(0,0)}50%{transform:rotate(calc(var(--r) + 1.4deg)) translate(1px,-2px)}}
svg.rs.rs-wob{animation:rs-wob 1.2s steps(1) infinite}
@media (prefers-reduced-motion:reduce){svg.rs.rs-wob{animation:none}}

/* crooked on purpose, but still readable / clickable */
main h1{rotate:-1.6deg;transform-origin:0 50%}
main h2{rotate:-.9deg;transform-origin:0 50%}
main section:nth-of-type(even) h2{rotate:.8deg}
main .eyebrow{rotate:.7deg;transform-origin:0 50%;translate:6px 0}
main section:nth-of-type(odd) .eyebrow{rotate:-.5deg;translate:-3px 0}
main .btn{rotate:-1.3deg}
main .btn:nth-of-type(even),main .btn.ghost{rotate:1.1deg}
main .btn:hover{rotate:0deg}
.timebox{rotate:-.7deg}
.step:nth-child(1){rotate:-2deg}.step:nth-child(2){rotate:1.4deg;translate:0 10px}.step:nth-child(3){rotate:-.8deg;translate:0 -4px}
.shelf .obj:nth-child(3n+1){rotate:-1.2deg}.shelf .obj:nth-child(3n+2){rotate:.9deg;translate:0 4px}.shelf .obj:nth-child(3n){rotate:-.4deg}
.shelf{padding-block:10px 22px}
.auth-card{rotate:.9deg}
.empty-state{rotate:-1.3deg}
.deck-empty>div{rotate:1deg}
.share-box{rotate:.8deg}
.qcard{rotate:-.6deg}
.foot .cols>div:nth-child(2){rotate:-1.2deg}.foot .cols>div:nth-child(3){rotate:1deg;translate:0 6px}.foot .cols>div:nth-child(4){rotate:-.6deg}

/* device detail (Tobias, 22:49): smaller title + year as a badge, the photo stays the visual focus
   (a fullscreen photo slideshow on click is planned for later – keep .gallery calm, no tilt, no sketches on it) */
.label-panel h1{font-size:clamp(1.5rem,4.2vw,2rem);line-height:1.12;margin:4px 0 8px;rotate:-1.8deg}
.label-panel .yearline{gap:10px}
.label-panel .lcd.big{font-size:1.45rem;padding:1px 9px;border-radius:6px;rotate:-4deg;translate:0 -1px}
.label-panel .yearline b{font-size:.9rem}
.gallery{rotate:0deg}

/* ship-ready: no text under 13px (KI labels .ai-tag are the only exception) */
.logo-word small{display:none}
.obj .inv{font-size:13px;letter-spacing:.04em}
.hero .collage .pc figcaption{font-size:13px}
.q-mid .eyebrow,.q-side>.eyebrow{font-size:13px}
.qcat{font-size:13px;letter-spacing:.04em}
.qcard .media .ph span{font-size:13px}
.ex-tag{font-size:13px}
.tabbar a span:not(.count){font-size:max(13px,min(3.5vw,.76rem))}
@media (max-width:699px){main .eyebrow,main section:nth-of-type(odd) .eyebrow{translate:3px 0}}

/* header (Tobias, 2026-11-01): no tagline; logo on one line with the nav, vertically centred; clear space before the nav */
.site-head .logo{grid-template-rows:auto;align-items:center;align-self:center}
.site-head .logo .logo-mark{margin-block:0;translate:none}
.site-head .logo .wm{align-self:center}
@media (min-width:900px){.site-head .logo{margin-inline-end:40px}}
@media (min-width:1200px){.site-head .logo{margin-inline-end:48px}}
/* without the tagline and with clear space after the logo the five nav items no longer fit below 1100px:
   collapse to the bottom tab bar earlier (900-1099px behaves like tablet) */
@media (min-width:900px) and (max-width:1099px){
  .site-head .nav-top{display:none}
  .tabbar{display:grid}
  body{padding-bottom:var(--tabbar-h)}
  .toast{bottom:calc(var(--tabbar-h) + 14px)}
  .site-head .lang-switch{margin-inline-start:auto}
}
/* desktop header must fit logo + clear space + 5 nav items + language + account without overlap (also in German):
   compact globe-only language switch (as below 1200px) and slightly tighter nav pills */
@media (min-width:1100px){
  .site-head .logo{margin-inline-end:36px}
  .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)}
}
@media (min-width:1200px){.site-head .nav-top a{padding:10px 11px}}

/* photos: square corners everywhere (the original had no rounding) */
.media,.media img,.obj,.collage .pc,.collage .pc .media,.dcard,.dcard .media,.gallery .media,.shot,.shot .media,.mm-item .media,
.age-col .mini .media,.q-deck-thumbs .media,.qcard .media,.share-card img,.obj .media{border-radius:0}

/* home hero polaroids: random tilt/offset/stacking per load (js heroShuffle, CSS vars); never tinted */
.hero .collage .pc:nth-child(n){transform:translate(var(--pc-x,0px),var(--pc-y,0px)) rotate(var(--pc-r,0deg))}
.hero .collage .pc:nth-child(1){--pc-r:-4deg}.hero .collage .pc:nth-child(2){--pc-r:3.5deg}.hero .collage .pc:nth-child(3){--pc-r:1deg}
.hero .collage .pc figcaption{display:flex;flex-wrap:nowrap;gap:8px;min-width:0}
.hero .collage .pc figcaption span:first-child{min-width:0;overflow-wrap:anywhere;line-height:1.25} /* full device name, wraps instead of ellipsis (night shift 02.11.) */
.hero .collage .pc figcaption{align-items:baseline}
.hero .collage .pc figcaption span:last-child{flex:none}
@media (max-width:899px){
  .hero .collage .pc:nth-child(n){transform:translate(0,calc(var(--pc-y,0px) / 2)) rotate(calc(var(--pc-r,0deg) * .6))}
  .hero .collage .pc figcaption{flex-direction:column;gap:1px}
}

/* small Quartett entry on My museum (Quartett is out of the main nav for now) */
.mm-q-link{margin:10px 0 0;font-weight:700}
.mm-q-link a{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.mm-q-link svg{width:22px;height:22px;flex:none}
.tabbar{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:899px){
  .hero .collage .pc figcaption span:first-child{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;hyphens:auto;line-height:1.2;min-height:2.4em} /* full device name, no ellipsis (night shift 02.11.) */
}

/* ---------- detail gallery + fullscreen slideshow: retro host glue (js/lightbox.js, css/lightbox.css) ----------
   Colours only; the photo itself is never styled (no filter/blend/opacity/transform), corners square like every photo here. */
dialog.lb{--lb-bg:#1A1714;--lb-fg:#F3EADB;--lb-btn:#F3EADB;--lb-btn-fg:#1E1915;--lb-accent:var(--mustard);--lb-font:var(--f-text);--lb-font-2:var(--f-display);--lb-font-mono:var(--f-mono)}
dialog.lb .lb-img{border-radius:0}
.lb .lb-sk{display:block;width:min(220px,50vw);height:auto;margin-inline:auto;rotate:-6deg}
.lb .lb-sk g{fill:none;stroke:#F3EADB;stroke-width:6px;stroke-linecap:round;stroke-linejoin:round}
.lb .lb-sk path{vector-effect:non-scaling-stroke}
.g-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:0}
.g-open:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}
.shots.n4{grid-template-columns:repeat(4,1fr)}
.shots.many{grid-template-columns:repeat(4,1fr)}
@media (min-width:600px){.shots.many{grid-template-columns:repeat(5,1fr)}}
.shot.coming{cursor:default}
.g-all{margin:12px 0 0}

/* lightbox pill: lightbox.css uses "font:700 16px/1 inherit" (invalid shorthand -> UA button font); fix here */
dialog.lb .lb-pill{font-family:inherit;font-size:16px;font-weight:700;line-height:1}

/* N3 night shift 02.11.: mobile hero polaroids - smaller marker-ish caption, name and year stay together, equal polaroid bottoms */
/* N4 night shift 02.11.: caption back to 12.5px for readability (11px was below our own 13px floor) */
@media (max-width:899px){
  .hero .collage{align-items:stretch}
  .hero .collage .pc{display:flex;flex-direction:column}
  .hero .collage .pc figcaption{font-size:12.5px;margin-top:auto;padding-top:7px}
  .hero .collage .pc figcaption span:first-child{min-height:0;line-height:1.2}
}

/* N5 night shift 02.11.: desktop hero, no polaroid hides another one's caption (js heroShuffle sets data-lay + z-order).
   up = layout from rm.css (middle card high, in front). down = side cards high, middle card low and behind. */
@media (min-width:900px){
  .hero .collage[data-lay="down"] .pc:nth-child(1){top:0}
  .hero .collage[data-lay="down"] .pc:nth-child(2){top:3%}
  .hero .collage[data-lay="down"] .pc:nth-child(3){top:auto;bottom:0}
}
@media (min-width:900px) and (max-width:1199px){ /* narrower column: long names wrap, cards get taller -> a bit more room */
  .hero .collage{aspect-ratio:1/0.92}
  .hero .collage[data-lay="up"] .pc:nth-child(1){top:28%}
  .hero .collage[data-lay="up"] .pc:nth-child(2){top:26%}
}

/* N7 night shift 02.11.: accessibility (axe). Headings in correct order, readable placeholder label. Looks unchanged. */
.ph{color:#685a4d}
main h2.as-h3{font-size:var(--s-2);rotate:none}
main h1.as-h2{font-size:var(--s-4);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 0}
.auth-card .crt h1.crt-h1{font-family:var(--f-lcd);font-size:1.5rem;font-weight:400;margin:0;line-height:1.1;letter-spacing:normal;font-variation-settings:normal;color:inherit;rotate:none}

/* N9 night shift 02.11.: N7 leftover, error heading on invalid share link tilts like other h2 (-.9deg, was -1.6deg from main h1) */
main h1.as-h2{rotate:-.9deg}

/* N13 night shift 02.11.: skip link, only visible on keyboard focus (paper on ink, square like the photo tiles) */
.skip-link{position:absolute;left:12px;top:-200px;z-index:1000;padding:10px 16px;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none;border:3px solid var(--mustard);rotate:-1.2deg}
.skip-link:focus{top:12px;outline:none}
main:target,main[id]:focus{outline:none}