/* ═══════════════════════════════════════════════════════════════════════
   Games We Print — site.css
   Design system ported from the chosen AB2 "Warm Toy Ward" mockup:
   Mockup B's isometric block world in Mockup A's warm daylight palette.

   The isometric engine uses 2D matrix() faces that are the exact per-face
   result of rotateX(54.7356°) rotateZ(45°).
   NOTE: matrix() SILENTLY FAILS with 4 arguments — every face needs all six:
       top   face: matrix(.866,.5,-.866,.5,0,0)
       left  face: matrix(.866,.5,0,1,0,0)
       right face: matrix(.866,-.5,0,1,0,0)
   Light from the top-left everywhere: top face lightest, front-left mid,
   front-right darkest. All text stays horizontal; printouts render flat.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  --bg:#FAF7F2;
  --ink:#1E2422;
  --muted:#49534E;
  --teal:#0F6B5C;
  --teal-deep:#0B5449;
  --teal-mist:#E3EEEB;
  --coral:#E5735A;
  --coral-deep:#D95F44;
  --card:#FFFFFF;
  --line:#E5DDCF;
  --desk:#F1E9DC;
  --radius:18px;

  /* Font stacks. layout.php overrides these two variables (in a <style>
     AFTER this sheet) to splice a per-script Noto family — Thai, Ethiopic,
     Arabic — into the fallback chain. Always use the variables; a hardcoded
     font-family here silently drops the non-Latin fallback (tofu). */
  --font-body:'Source Sans 3','Segoe UI',system-ui,sans-serif;
  --font-display:'Nunito','Source Sans 3',sans-serif;

  /* Warm block palette — base, then top / left / right lighting shades */
  --sage:#CFE3D6;  --sage-t:#E2F0E7;  --sage-l:#AFCDBB;  --sage-r:#8CAE99;
  --sand:#EFDFC0;  --sand-t:#F7EDD8;  --sand-l:#D9C295;  --sand-r:#B89F6E;
  --terra:#F2CFC4; --terra-t:#F8E2DA; --terra-l:#DFB0A1; --terra-r:#BF8B7B;
  --wblue:#C9D8E8; --wblue-t:#DEE8F2; --wblue-l:#ACC0D6; --wblue-r:#89A1BA;
  --lav:#D9CFE3;   --lav-t:#EAE2F0;   --lav-l:#BCAECC;   --lav-r:#9D8CB0;
  --wood-t:#EFDCB9; --wood-l:#CFAB7D; --wood-r:#B08C5F;

  /* subtle paper grain, tiled */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{font-size:112.5%} /* 1rem = 18px — accessibility floor */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
body{
  margin:0;
  min-height:100vh;
  display:flex;flex-direction:column; /* sticky footer on short pages */
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
main{flex:1 0 auto}
h1,h2,h3{font-family:var(--font-display);line-height:1.18;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,4.6vw,3rem);font-weight:800}
h2{font-size:clamp(1.55rem,3vw,2rem);font-weight:800}
h3{font-size:1.22rem;font-weight:800}
p{margin:0 0 1em;max-width:38em}
.muted{color:var(--muted)}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:24px}

/* Keep the [hidden] attribute authoritative: component rules that set
   display (e.g. .btn{display:inline-flex}) would otherwise beat the UA's
   [hidden]{display:none} — print.js relies on toggling .hidden. */
[hidden]{display:none !important}

:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:50;
  background:var(--teal);color:#fff;padding:12px 20px;border-radius:10px;
  font-weight:700;text-decoration:none;transition:top .15s ease;
}
.skip-link:focus{top:12px}

/* ── Isometric engine (verbatim from AB2 — do not "simplify") ────────── */
.origin,.block,.face{display:block}
.origin{position:absolute}
.block{position:absolute;left:0;top:0;transition:transform .18s ease}
.face{position:absolute;left:0;top:0;transform-origin:0 0}
.face.t{
  width:calc(var(--w)*1px);height:calc(var(--d)*1px);
  background:var(--ft);
  transform:translate(0,calc(var(--h)*-1px)) matrix(.866,.5,-.866,.5,0,0);
}
.face.l{ /* front-left face — mid tone */
  width:calc(var(--w)*1px);height:calc(var(--h)*1px);
  background:var(--fl);
  transform:translate(calc(var(--d)*-.866px),calc(var(--d)*.5px - var(--h)*1px)) matrix(.866,.5,0,1,0,0);
}
.face.r{ /* front-right face — darkest */
  width:calc(var(--d)*1px);height:calc(var(--h)*1px);
  background:var(--fr);
  transform:translate(calc((var(--w) - var(--d))*.866px),calc((var(--w) + var(--d))*.5px - var(--h)*1px)) matrix(.866,-.5,0,1,0,0);
}
/* Hairline of each face's own color hides antialiasing seams where faces meet */
.face.t{box-shadow:0 0 0 .5px var(--ft)}
.face.l{box-shadow:0 0 0 .5px var(--fl)}
.face.r{box-shadow:0 0 0 .5px var(--fr)}
.face.shad{ /* soft ground shadow, cast toward bottom-right (light from top-left) */
  width:calc(var(--w)*1px);height:calc(var(--d)*1px);
  background:rgba(30,36,34,.17);
  filter:blur(5px);
  transform:translate(7px,4px) matrix(.866,.5,-.866,.5,0,0);
  transition:filter .18s ease,opacity .18s ease;
}
.face.shad.soft{filter:blur(11px);background:rgba(30,36,34,.11)}
.face.t > svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Category palettes (top / left / right derived from each base color) */
.p-sage {--ft:var(--sage-t); --fl:var(--sage-l); --fr:var(--sage-r)}
.p-sand {--ft:var(--sand-t); --fl:var(--sand-l); --fr:var(--sand-r)}
.p-wblue{--ft:var(--wblue-t);--fl:var(--wblue-l);--fr:var(--wblue-r)}
.p-lav  {--ft:var(--lav-t);  --fl:var(--lav-l);  --fr:var(--lav-r)}
.p-terra{--ft:var(--terra-t);--fl:var(--terra-l);--fr:var(--terra-r)}
.p-wood {--ft:var(--wood-t); --fl:var(--wood-l); --fr:var(--wood-r)}
.p-cup  {--ft:#FFFEFB;       --fl:#EDE6D9;       --fr:#D4C9B7}
.p-slab {--fl:#E7DCC6;       --fr:#D3C5AA}

/* Tiny inline cube used as a motif icon (decorative) */
.minicube{position:relative;display:inline-block;width:30px;height:30px;vertical-align:-6px}
.minicube .origin{left:50%;top:15px}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.site-nav{padding:14px 0;border-bottom:1px solid var(--line)}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wordmark{
  display:inline-flex;align-items:center;gap:11px;min-height:48px;
  font-family:var(--font-display);font-size:1.4rem;font-weight:800;
  letter-spacing:-.015em;
  color:var(--ink);text-decoration:none;
}
.wm-accent{color:var(--teal)}
.logo-mark{width:auto;flex:none}
.wordmark .logo-mark{height:38px;margin-top:-2px} /* slab sits low: nudge up for optical centering */
.nav-links{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav-links a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;min-width:48px;padding:0 18px;
  color:var(--teal);font-weight:600;text-decoration:none;border-radius:999px;
  transition:background-color .15s ease;
}
.nav-links a:hover{background:var(--teal-mist);text-decoration:underline;text-underline-offset:3px}

/* Language picker — top-right corner, flags + names, current marked */
.lang-picker{margin-left:auto}
.lang-picker ul{
  display:flex;gap:4px;list-style:none;margin:0;padding:4px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
}
.lang-picker a{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  color:var(--teal);font-weight:600;text-decoration:none;border-radius:999px;
  transition:background-color .15s ease;
}
.lang-picker a:hover{background:var(--teal-mist)}
.lang-picker a.is-current,
.lang-picker a[aria-current="true"]{background:var(--teal);color:#fff}
.lang-flag{display:inline-flex;line-height:1}
.lang-flag svg{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(30,36,34,.12)}
@media (max-width:1149px){.lang-picker{margin-left:0}}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding:48px 0 64px}
.hero .wrap{display:grid;grid-template-columns:minmax(360px,1fr) 620px;gap:40px;align-items:center}
.eyebrow{
  display:inline-block;font-weight:700;font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--teal);margin-bottom:14px;
}
.hero p.lede{font-size:1.15rem;color:var(--muted)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.trust-line{margin-top:22px;font-size:.92rem;color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:2px 30px 0;border-radius:999px;
  font-family:var(--font-body);font-weight:700;font-size:1rem;
  text-decoration:none;cursor:pointer;border:2px solid transparent;
  transition:background-color .15s ease,transform .12s ease;
}
.btn-primary{background:var(--coral);color:var(--ink)}
.btn-primary:hover{background:var(--coral-deep)}
.btn-primary:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.btn-secondary{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn-secondary:hover{background:var(--teal-mist)}

/* ── Diorama ──────────────────────────────────────────────────────────── */
.dio-wrap{width:620px;max-width:100%}
.dio{position:relative;width:620px;height:472px;--oy:90px}
.dio .pos{
  position:absolute;
  left:calc(50% + (var(--x) - var(--y))*.866px);
  top:calc(var(--oy) + (var(--x) + var(--y))*.5px - var(--z,0)*1px);
  width:0;height:0;
}
.floor .face.t{
  background-image:repeating-conic-gradient(#F7F2E8 0 90deg,#E2EBE3 0 180deg);
  background-size:112px 112px;
  border-radius:8px;
}
.steam{pointer-events:none}
.steam span{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:#fff;filter:blur(2.5px);opacity:0;
  animation:steam 2.9s ease-out infinite;
}
.steam span:nth-child(1){left:-5px;top:-6px}
.steam span:nth-child(2){left:-11px;top:-4px;animation-delay:.95s}
.steam span:nth-child(3){left:0;top:-5px;animation-delay:1.9s}
@keyframes steam{
  0%{transform:translateY(0) scale(.6);opacity:0}
  25%{opacity:.85}
  100%{transform:translateY(-36px) scale(1.45);opacity:0}
}

/* Clickable blocks inside the diorama: real anchors with a real hit box */
.dio-tile{
  position:absolute;display:block;
  width:calc((var(--w) + var(--d))*.866px);
  height:calc((var(--w) + var(--d))*.5px + var(--h)*1px);
  left:calc(50% + (var(--x) - var(--y))*.866px - (var(--w) + var(--d))*.433px);
  top:calc(var(--oy) + (var(--x) + var(--y))*.5px - (var(--h) + var(--z,0))*1px);
  border-radius:12px;
}
.dio-tile .origin{left:50%;top:calc(var(--h)*1px)}
.dio-tile:hover .block,
.dio-tile:focus-visible .block{transform:translateY(-8px)}
.dio-tile:hover .face.shad,
.dio-tile:focus-visible .face.shad{filter:blur(10px);opacity:.55}
.dio-tile:focus-visible{outline:3px solid var(--teal);outline-offset:4px}

/* ── Shelf rows ───────────────────────────────────────────────────────── */
.shelves{padding:30px 0 20px}
.shelves-intro{max-width:640px;margin-bottom:8px}
.shelf{padding:26px 0 8px}
.shelf-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.shelf-head h3{margin:0}
.shelf-head p{margin:0;color:var(--muted)}
.shelf-row{
  display:flex;flex-wrap:wrap;gap:10px;
  list-style:none;margin:6px 0 0;padding:0;
}
.tile{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  width:180px;padding:8px 8px 16px;border-radius:var(--radius);
  text-decoration:none;color:var(--ink);
  transition:background-color .15s ease;
}
a.tile:hover,a.tile:focus-visible{background:#fff}
a.tile:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.tile-scene{position:relative;width:172px;height:158px;pointer-events:none}
.tile-scene .origin{left:50%;top:56px} /* shared baseline: blocks of any height sit on one shelf line */
a.tile:hover .block,
a.tile:focus-visible .block{transform:translateY(-8px)}
a.tile:hover .face.shad,
a.tile:focus-visible .face.shad{filter:blur(10px);opacity:.55}
.tile-name{font-family:var(--font-display);font-weight:800;font-size:1.12rem;margin-top:6px}
.tile-sub{font-size:.88rem;color:var(--muted);text-align:center;line-height:1.4}

/* Coming-soon blocks: visibly muted, not links */
.tile--soon{cursor:default}
.tile--soon .tile-scene{filter:saturate(.35) opacity(.55)}
.tile--soon .tile-name{color:var(--muted)}
.soon-badge{
  display:inline-block;margin-top:8px;padding:2px 12px;border-radius:999px;
  background:var(--teal-mist);color:var(--teal-deep);
  font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}

/* ── How-it-works strip ───────────────────────────────────────────────── */
.steps{padding:56px 0 30px}
.steps-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  list-style:none;margin:18px 0 0;padding:0;
  counter-reset:step;
}
.step{
  background:var(--card) var(--grain);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 26px 18px;
  box-shadow:0 1px 3px rgba(30,36,34,.05);
}
.step h3{margin:14px 0 6px}
.step p{margin:0;color:var(--muted);font-size:.95rem}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--teal);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;
}
.steps-more{margin:18px 0 0}
.steps-more a{
  display:inline-flex;align-items:center;min-height:48px;
  color:var(--teal);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
  border-radius:8px;
}
.steps-more a:hover{color:var(--teal-deep);text-decoration-thickness:2.5px}

/* ── Reassurance band ─────────────────────────────────────────────────── */
.reassure{padding:26px 0 56px}
.reassure-card{
  background:var(--teal-mist);border:1px solid #CFE0DB;border-radius:22px;
  padding:36px 36px 28px;
}
.reassure-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  list-style:none;margin:18px 0 0;padding:0;
}
.reassure-grid h3{margin:8px 0 4px;font-size:1.08rem}
.reassure-grid p{margin:0;color:var(--muted);font-size:.95rem}

/* ── Game detail page ─────────────────────────────────────────────────── */
.detail{padding:34px 0 80px}
.crumbs{margin-bottom:20px}
.crumbs a{
  display:inline-flex;align-items:center;min-height:48px;
  color:var(--teal);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;border-radius:8px;
}
.game-sub{margin:2px 0 6px;color:var(--muted);font-size:1.02rem;font-style:italic}
.game-lede{color:var(--muted);font-size:1.1rem}
.detail-grid{display:grid;grid-template-columns:360px 1fr;gap:44px;align-items:start;margin-top:18px}
.hero-scene{position:relative;width:340px;min-height:300px;margin-top:10px}
.hero-scene .origin{left:50%;top:108px}
.howto-card{
  position:relative;margin-top:330px;
  background:var(--card) var(--grain);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px 12px;
  box-shadow:0 1px 3px rgba(30,36,34,.05);
}
.howto-title{font-size:1.05rem;margin-bottom:.35em}
.howto-card p{margin:0 0 .8em;font-size:.95rem;color:var(--muted)}

.detail-card{
  background:var(--card) var(--grain);border:1px solid var(--line);border-radius:22px;
  padding:32px 34px;
  box-shadow:0 1px 3px rgba(30,36,34,.05);
}
.detail-card-grid{display:grid;grid-template-columns:1fr 300px;gap:34px}
.diff-fieldset{border:0;margin:2px 0 0;padding:0}
.diff-fieldset legend{font-weight:700;padding:0;margin-bottom:10px}
.pill-row{display:flex;gap:10px;flex-wrap:wrap}
.pill{position:relative;display:inline-block}
.pill input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.pill-face{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 22px;border-radius:999px;
  border:2px solid var(--teal);background:var(--bg);color:var(--teal);
  font-weight:600;
  transition:background-color .15s ease,color .15s ease;
}
.pill input:hover + .pill-face{background:#fff}
.pill input:checked + .pill-face{background:var(--teal);border-color:var(--teal);color:#fff}
.pill input:focus-visible + .pill-face{outline:3px solid var(--teal);outline-offset:3px}
.diff-hint{font-size:.9rem;color:var(--muted);margin-top:10px}

.opt-row{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;margin-top:22px}
.copies-title{display:block;font-weight:700;margin-bottom:6px}
.stepper{display:inline-flex;align-items:stretch;gap:6px}
.stepper input{
  width:76px;min-height:50px;padding:0 8px;text-align:center;
  font:600 1.1rem 'Source Sans 3',sans-serif;color:var(--ink);
  border:2px solid var(--teal);border-radius:12px;background:#fff;
  -moz-appearance:textfield;appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step-btn{
  min-width:50px;min-height:50px;border-radius:12px;
  border:2px solid var(--teal);background:var(--bg);color:var(--teal);
  font:700 1.4rem/1 'Source Sans 3',sans-serif;cursor:pointer;
  transition:background-color .15s ease;
}
.step-btn:hover{background:var(--teal-mist)}

.print-cta{margin-top:26px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.print-note{font-size:.9rem;color:var(--muted);margin-top:14px;max-width:30em}
.seed-row{margin:18px 0 6px;font-weight:700}
.seed-chip{
  display:inline-block;padding:2px 14px;margin-left:4px;border-radius:8px;
  background:var(--teal-mist);color:var(--teal-deep);
  font-family:var(--font-display);font-weight:800;letter-spacing:.08em;
}

/* AB2's signature: the A4 sheet sits slightly rotated on a warm desk
   panel, held by a paperclip. The printout itself stays flat and true. */
.sheet-fig{margin:0}
.desk{
  position:relative;
  background:var(--desk) var(--grain);
  border-radius:20px;
  padding:40px 26px 44px;
  display:flex;justify-content:center;
}
.sheet{
  position:relative;
  width:min(240px,100%);
  transform:rotate(-2.4deg);
  filter:drop-shadow(0 10px 22px rgba(30,36,34,.22));
  transition:transform .2s ease;
}
.desk:hover .sheet{transform:rotate(-1.2deg)}
/* The flat white A4 paper that carries the live preview SVG */
.sheet-paper{
  width:100%;aspect-ratio:210/297;
  background:#fff;border-radius:3px;
  padding:7% 6%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sheet-paper > svg{display:block;width:100%;height:auto;max-height:100%}
.preview-empty{font-size:.82rem;line-height:1.5;color:var(--muted);text-align:start;margin:0}
/* Specificity: the paperclip stays small and pinned to the top edge */
.sheet > svg.paperclip{
  position:absolute;top:-16px;left:28px;
  width:26px;height:54px;
  transform:rotate(9deg);
}
.desk-pencil{position:absolute;right:7%;bottom:12px}
.sheet-fig figcaption{font-size:.9rem;color:var(--muted);margin-top:14px;line-height:1.5;max-width:300px}

/* ── Content pages (how / about / 404) ────────────────────────────────── */
.page{padding:48px 0 80px}
.prose{max-width:760px}
.prose h2{margin-top:1.6em;font-size:1.35rem}
.prose .lede{font-size:1.15rem;color:var(--muted)}
.checklist{list-style:none;margin:0 0 1em;padding:0}
.checklist li{
  position:relative;padding:6px 0 6px 38px;max-width:38em;
}
.checklist li::before{
  content:"";position:absolute;left:4px;top:14px;
  width:16px;height:16px;border-radius:5px;
  background:var(--sage);border:2px solid var(--teal);
}
.page-cta{margin-top:2em}

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer{background:var(--teal);color:var(--bg);padding:52px 0 44px;margin-top:20px}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:36px}
.site-footer p{color:#DCEAE6}
.site-footer h2{color:#fff;font-size:1.3rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.site-footer a{
  display:inline-flex;align-items:center;min-height:48px;
  color:#fff;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;border-radius:8px;
}
.site-footer :focus-visible{outline-color:#fff}
.footer-tag{margin-top:18px;font-size:.9rem;color:#BCD6D0}
.footer-brand{
  display:flex;align-items:center;gap:10px;margin:0 0 18px;
  font-family:var(--font-display);font-size:1.15rem;font-weight:800;
  letter-spacing:-.015em;color:#fff;
}
.footer-brand .logo-mark{height:32px}
.footer-brand .wm-accent{color:var(--sage)}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1149px){
  .hero .wrap{grid-template-columns:1fr;justify-items:start}
  .dio-wrap{margin-inline:auto}
  .detail-card-grid{grid-template-columns:1fr}
  .sheet-fig{justify-self:start;max-width:340px}
}
@media (max-width:920px){
  .detail-grid{grid-template-columns:1fr}
  .hero-scene{min-height:0;margin-top:0}
  .howto-card{margin-top:330px}
  .steps-row{grid-template-columns:1fr}
  .reassure-grid{grid-template-columns:1fr}
}
@media (max-width:799px){
  /* The diorama steps aside; shelves carry navigation. */
  .dio-wrap{display:none}
  .hero{padding-top:28px}
  .site-footer .wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tile{width:158px}
  .tile-scene{transform:scale(.86);transform-origin:top center;height:140px;width:158px}
  .hero-scene{transform:scale(.78);transform-origin:top left}
  .howto-card{margin-top:270px}
  .detail-card{padding:26px 22px}
  .reassure-card{padding:26px 22px}
}

/* ── RTL (ar / fa / ur) ───────────────────────────────────────────────────
   The layout is largely direction-safe (flex/grid follow <html dir="rtl">);
   only physical left/right offsets need mirroring. Keep this minimal. */
[dir="rtl"] .seed-chip{margin-left:0;margin-right:4px}
[dir="rtl"] .skip-link{left:auto;right:16px}
/* Isometric art (diorama, tiles, preview desk) deliberately stays LTR —
   it is decorative geometry, not text. */

/* ── Reduced motion: no steam, no lifts, no smooth scroll ─────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition:none !important;
  }
  html{scroll-behavior:auto}
  .steam{display:none}
  .dio-tile:hover .block,.dio-tile:focus-visible .block,
  a.tile:hover .block,a.tile:focus-visible .block{transform:none}
  .desk:hover .sheet{transform:rotate(-2.4deg)}
}

/* ═══ Print pipeline ═════════════════════════════════════════════════════
   print.js clones generated sheets into #print-root; on screen it is hidden,
   in print it is the ONLY thing visible. One A4 page per .print-sheet,
   solutions as trailing pages. Generators draw title/instructions/footer
   INSIDE their SVGs (sized in mm), so the wrapper only paginates.
   ═══════════════════════════════════════════════════════════════════════ */
@page{size:A4;margin:12mm}

#print-root{display:none}

@media print{
  body{background:#fff;display:block;min-height:0} /* flex breaks pagination */
  body > *:not(#print-root){display:none !important}
  #print-root{display:block}
  .print-sheet{
    break-after:page;
    page-break-after:always; /* older engines */
    width:186mm;height:270mm;overflow:hidden;
    display:flex;flex-direction:column;align-items:flex-start;
  }
  .print-sheet:last-child{break-after:auto;page-break-after:auto}
  .print-sheet > svg{display:block;max-width:186mm;max-height:270mm}
}