/* ============================================================
   Xiao Studio — BASE stylesheet (shared by every page)
   ------------------------------------------------------------
   Loaded LAST in each page's <head>, after that page's own
   inline <style>, so the tokens defined here win the cascade.

   Contents:
     1. Web fonts (Inter + XImpact display face)
     2. Theme tokens — light (default) + dark (auto & manual)
     3. Shared base elements (body, links, selection)
     4. Top navigation
     5. Theme toggle button (markup injected by site.js)
     6. Title display face

   Page-specific layout lives in its own file, e.g. home.css.
   ============================================================ */

@import url('https://rsms.me/inter/inter.css');
@font-face{font-family:'XImpact';src:url('../fonts/Impacted.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'Graphik';src:url('../fonts/Graphik-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Graphik';src:url('../fonts/Graphik-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Graphik';src:url('../fonts/Graphik-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}

/* ---- SYSTEM-LEVEL cross-page transition ------------------------------------
   Native path (Chrome 126+/Safari 18.2+/Edge): cross-document view transitions.
   On EVERY same-origin navigation — menu, in-page links, back/forward — the
   browser snapshots the live viewport (whatever the scroll position) and
   crossfades it into the new page with plus-lighter blending, so black↔white
   pages blend through a clean luminance ramp instead of cutting or flashing.
   Browsers without support get the colour-wash fallback in site.js (module 2b);
   both read the page surface from the same tokens, so the feel matches. */
@view-transition { navigation: auto; }
::view-transition-group(root){ animation-duration:.72s; }
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.72s;                       /* explicit — not every engine inherits from the group */
  animation-timing-function:cubic-bezier(.2,.7,.2,1);
}
/* the BacktoXiao wordmark lives OUTSIDE the page crossfade: it is captured as
   its own layer, so it holds perfectly still while the pages dissolve under it
   (it sits at the same spot on every page). Pages without it simply fade. */
.backto{ view-transition-name:backto; }
::view-transition-group(backto){ animation-duration:.72s; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-image-pair(*),
  ::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
}
/* the capability self-test (site.js module 2b) must be IMPERCEPTIBLE: while it
   runs, all transition animations collapse to zero so it never holds the page
   under a snapshot — without this it inherits the .72s fade above, and a menu
   opened in that window seems frozen. */
html[data-vt-probe]::view-transition-group(*),
html[data-vt-probe]::view-transition-image-pair(*),
html[data-vt-probe]::view-transition-old(*),
html[data-vt-probe]::view-transition-new(*){ animation-duration:0s !important; animation-delay:0s !important; }

/* colour-wash veil — fallback cross-page transition (site.js module 2b) for
   browsers without cross-document view transitions (Firefox, older Safari).
   Leaving: the veil fades TO the destination page's resting surface colour;
   arriving: the new page starts under that same colour and the veil lifts. */
.pt-veil{position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:0;
  transition:opacity .4s ease;}
.pt-veil.on{opacity:1;}
.pt-veil--instant{transition:none;}

/* ---- SYSTEM-LEVEL page transition (shared → every page, incl. future ones, inherits this) ----
   Each page fades up over its own background colour. Page CSS may set
   --page-bg / --page-ink; pages that do not set them fall back to the system
   theme tokens below. */
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}
html{background:var(--page-bg,var(--bg));transition:background-color .45s ease;overflow-x:clip;}
body{margin:0;animation:pageFadeIn .55s ease both;}
@media (prefers-reduced-motion:reduce){ body{animation:none;} }

/* ---- 2 · theme tokens --------------------------------------------- */
:root{
  /* light (default) */
  --bg:#ffffff;
  --ink:#16130d;
  --dim:rgba(22,19,13,.62);
  --faint:rgba(22,19,13,.40);
  --line:rgba(22,19,13,.14);
  --scrim:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.60) 55%,transparent);
  --sel-bg:#16130d; --sel-fg:#ffffff;

  /* font stacks — everything is Inter except the XIAO/title display face */
  --gro:'Inter',-apple-system,system-ui,Arial,sans-serif;
  --serif:'Inter',-apple-system,system-ui,Arial,sans-serif;
  --imp:'XImpact','Impact','Haettenschweiler','Arial Narrow Bold',sans-serif;

  font-feature-settings:'liga' 1,'calt' 1;
  color-scheme:light dark;
}

/* ---- SYSTEM-LEVEL auto theme: maps every page's --page-bg / --page-ink / --page-panel-bg
   to the OS light/dark from ONE place. site.css loads after each page's CSS, so this wins
   over their fixed values. Fixed-surface pages are reasserted below from this shared
   file, so white/dark artwork pages do not become unreadable in the opposite mode. ---- */
:root{ --page-bg:#ffffff; --page-ink:#16130d; --page-panel-bg:#ebe9e2; --page-ink-rgb:22,19,13; --page-bg-rgb:255,255,255; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --page-bg:#000; --page-ink:#ededed; --page-panel-bg:#0c0c0c; --page-ink-rgb:237,237,237; --page-bg-rgb:0,0,0; }
}
@supports (font-variation-settings:normal){
  :root{ --gro:'InterVariable',-apple-system,system-ui,Arial,sans-serif;
         --serif:'InterVariable',-apple-system,system-ui,Arial,sans-serif; }
}

/* dark tokens — applied automatically on dark systems, unless the
   visitor has explicitly forced light via the toggle … */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --ink:#ededed;
    --dim:rgba(237,237,237,.62);
    --faint:rgba(237,237,237,.40);
    --line:rgba(237,237,237,.16);
    --scrim:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.55) 55%,transparent);
    --sel-bg:#ededed; --sel-fg:#000;
  }
}
/* … or whenever the visitor manually picks dark */
:root[data-theme="dark"]{
  --bg:#000000;
  --ink:#ededed;
  --dim:rgba(237,237,237,.62);
  --faint:rgba(237,237,237,.40);
  --line:rgba(237,237,237,.16);
  --scrim:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.55) 55%,transparent);
  --sel-bg:#ededed; --sel-fg:#000;
}

/* Shared page-surface guard.
   Some artwork/legal pages are intentionally fixed dark, and some index/studio
   pages are intentionally fixed light. Because site.css is loaded last, the
   exceptions also live here; this keeps day mode from turning a black page into
   a white page while leaving system-themed pages such as Gaze free to adapt.
   html:root:has(...) — the :root is load-bearing: it lifts specificity to (0,2,2)
   so these fixed surfaces beat the (0,2,0) dark-scheme token block above. */
html:root:has(body.series-page:not(.gaze-page):not(.xiaoyu-page)),
html:root:has(body.vn-page),
html:root:has(body.ax-page),
html:root:has(body.arc01-page),
html:root:has(body.legal-page){
  --page-bg:#000;
  --page-ink:#fff;
  --page-panel-bg:#0b0b0b;
  --page-ink-rgb:255,255,255;
  --page-bg-rgb:0,0,0;
  --bg:#000;
  --ink:#fff;
  --dim:rgba(255,255,255,.62);
  --faint:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.16);
  --scrim:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.55) 55%,transparent);
  --sel-bg:#fff;
  --sel-fg:#000;
  color-scheme:dark;
}
html:root:has(body.pt-page){
  --page-bg:#0a0a0a;
  --page-ink:#f2f2f2;
  --page-panel-bg:#0b0b0b;
  --page-ink-rgb:242,242,242;
  --page-bg-rgb:10,10,10;
  --bg:#0a0a0a;
  --ink:#f2f2f2;
  --dim:rgba(242,242,242,.62);
  --faint:rgba(242,242,242,.40);
  --line:rgba(242,242,242,.16);
  --scrim:linear-gradient(180deg,rgba(10,10,10,.92),rgba(10,10,10,.55) 55%,transparent);
  --sel-bg:#f2f2f2;
  --sel-fg:#0a0a0a;
  color-scheme:dark;
}
html:root:has(body.canvas-page){
  --page-bg:#000;
  --page-ink:#f4f1ec;
  --page-panel-bg:#0b0b0b;
  --page-ink-rgb:244,241,236;
  --page-bg-rgb:0,0,0;
  --bg:#000;
  --ink:#f4f1ec;
  --dim:rgba(244,241,236,.62);
  --faint:rgba(244,241,236,.40);
  --line:rgba(244,241,236,.16);
  --scrim:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.55) 55%,transparent);
  --sel-bg:#f4f1ec;
  --sel-fg:#000;
  color-scheme:dark;
}
html:root:has(body.portfolio),
html:root:has(body.os-page),
html:root:has(body.xiaoyu-page){
  --page-bg:#f4f3ee;
  --page-ink:#16130d;
  --page-panel-bg:#ebe9e2;
  --page-ink-rgb:22,19,13;
  --page-bg-rgb:244,243,238;
  --bg:#f4f3ee;
  --ink:#16130d;
  --dim:rgba(22,19,13,.62);
  --faint:rgba(22,19,13,.40);
  --line:rgba(22,19,13,.14);
  --scrim:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.60) 55%,transparent);
  --sel-bg:#16130d;
  --sel-fg:#fff;
  color-scheme:light;
}
html:root:has(body.xiaoyu-page){
  --page-bg:#fff;
  --page-bg-rgb:255,255,255;
  --bg:#fff;
}
/* The White Room — intentionally a fixed WHITE cube in both light & dark; the
   ignition intro plays black→burst→white on top, then the room rests white. */
html:root:has(body.wr-page){
  --page-bg:#ffffff;
  --page-ink:#16130d;
  --page-panel-bg:#f3f1ea;
  --page-ink-rgb:22,19,13;
  --page-bg-rgb:255,255,255;
  --bg:#ffffff;
  --ink:#16130d;
  --dim:rgba(22,19,13,.62);
  --faint:rgba(22,19,13,.40);
  --line:rgba(22,19,13,.14);
  --scrim:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.60) 55%,transparent);
  --sel-bg:#16130d;
  --sel-fg:#fff;
  color-scheme:light;
}

/* ---- 3 · shared base ---------------------------------------------- */
html,body{background:var(--page-bg,var(--bg));}
body{color:var(--page-ink,var(--ink));font-family:var(--gro);overflow-x:clip;transition:background-color .45s ease,color .45s ease;}
a{color:inherit;}
::selection{background:var(--sel-bg);color:var(--sel-fg);}

/* ---- 4 · top nav --------------------------------------------------- */
.top{background:var(--scrim) !important;backdrop-filter:saturate(140%) blur(6px);}
.top a,.nav a{color:var(--dim) !important;text-shadow:none !important;}
.top a:hover,.nav a:hover,.nav a.on,.top a.on{color:var(--ink) !important;}
.lang{display:none !important;}

/* BacktoXiao return/menu entry — matches the supplied type settings. */
.backto,
.backto-link{
  font-family:var(--gro) !important;
  font-weight:700 !important;
  font-size:28px !important;
  line-height:20px !important;
  letter-spacing:-3.3px !important;
  text-transform:none !important;
  white-space:nowrap;
}
.top a.backto-link,
.nav a.backto-link,
.footer-nav a.backto-link,
.backto{
  color:var(--ink) !important;
}
.backto:hover,
.top a.backto-link:hover,
.nav a.backto-link:hover,
.footer-nav a.backto-link:hover{
  opacity:.65;
}

/* ---- 5 · theme toggle (injected by site.js into the nav) ----------- */
.theme-toggle{margin-left:clamp(10px,1.6vw,22px);width:30px;height:30px;flex:none;padding:0;
  display:inline-flex;align-items:center;justify-content:center;line-height:0;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--dim);
  transition:color .25s ease,border-color .25s ease;}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink);}
.theme-toggle svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
/* moon shows in light mode, sun shows in dark mode */
.theme-toggle .ic-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .ic-sun{display:block;}
  :root:not([data-theme="light"]) .theme-toggle .ic-moon{display:none;}
}

/* ---- 6 · titles keep the Impact display face ----------------------- */
.wordmark,.head h1,.hero h1,.head h1 em,.hero h1 em{
  font-family:var(--imp) !important;font-style:normal !important;letter-spacing:0 !important;}

/* ---- 7 · shared overlay menu (opened by XIAO on home, BacktoXiao on
   open-studio; built + wired by site.js) ----------------------------- */
.menu{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,8,.66);backdrop-filter:blur(7px) saturate(120%);-webkit-backdrop-filter:blur(7px) saturate(120%);
  opacity:0;pointer-events:none;transition:opacity .42s cubic-bezier(.2,.7,.2,1),backdrop-filter .42s ease;}
.menu.open{opacity:1;pointer-events:auto;}
.menu-list{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.6vh,30px);}
/* original mixed-format menu, enlarged: every menu word stays pure white; the two Xiao wordmarks stay bold (.backto-link) */
.menu-list a{color:#fff !important;-webkit-text-fill-color:#fff;text-decoration:none;font-family:var(--gro);font-weight:400;letter-spacing:-3.3px;line-height:1.05;
  font-size:clamp(32px,5.8vw,60px);opacity:1;transition:opacity .2s ease;}
.menu-list a.backto-link{color:#fff !important;-webkit-text-fill-color:#fff;opacity:1;font-size:clamp(24px,3.6vw,38px) !important;}
.menu-list a:hover{opacity:1;}
/* staggered entrance — each item rises in while staying pure white */
.menu.open .menu-list > *{animation:menuItemIn .55s cubic-bezier(.2,.7,.2,1) backwards;}
.menu.open .menu-list > :nth-child(1){animation-delay:.05s}
.menu.open .menu-list > :nth-child(2){animation-delay:.11s}
.menu.open .menu-list > :nth-child(3){animation-delay:.17s}
.menu.open .menu-list > :nth-child(4){animation-delay:.23s}
.menu.open .menu-list > :nth-child(5){animation-delay:.29s}
.menu.open .menu-list > :nth-child(6){animation-delay:.35s}
@keyframes menuItemIn{from{transform:translateY(20px);}to{transform:none;}}
@keyframes menuItemOut{to{opacity:0;transform:translateY(-18px);filter:blur(4px);}}
.menu.leaving{opacity:0;pointer-events:none;backdrop-filter:blur(18px) saturate(120%);}
.menu.leaving .menu-list > *{animation:menuItemOut .38s cubic-bezier(.4,0,.2,1) both;}
@media (prefers-reduced-motion:reduce){.menu.open .menu-list > *{animation:none;}}
.menu .theme-toggle{margin:18px 0 0;width:38px;height:38px;border-color:rgba(255,255,255,.45);color:#fff;}
.menu .theme-toggle:hover{border-color:#fff;color:#fff;}
.menu .theme-toggle svg{width:18px;height:18px;}

/* ---- 8 · BacktoXiao system-wide auto-hide (set by site.js when the button would
   sit over text or an image). open-studio keeps its own controller, so this is
   scoped away from it. ---- */
body:not(.os-page) .backto{transition:opacity .35s ease;}
.backto.backto--auto-hide{opacity:0 !important;pointer-events:none !important;}

/* unified footer container — system-wide base. Uses :where() (0 specificity) so any
   page that defines its own .site-foot still wins, while pages without one (e.g. portrait)
   inherit a centred, padded footer instead of a flush, left-aligned strip. */
:where(.site-foot){position:relative;z-index:1;text-align:center;padding:clamp(40px,8vh,90px) 20px;}

/* unified copyright — Georgia, one smaller size everywhere, with policy links beside.
   SYSTEM-LEVEL: this is the ONLY place the footer type is defined; each page just adds its
   own ink colour (light vs dark bg). Responsive on every screen — the line shrinks a hair on
   the narrowest phones, policy names never split mid-phrase, "© XIAOSTUDIO 2026" stays intact,
   and separators (·) never strand at a line start (see the &nbsp; glue in the footer markup). */
.copyright{font-family:Georgia,'Times New Roman',serif !important;font-style:italic;
  font-size:clamp(10.5px,3vw,11px) !important;letter-spacing:.02em;line-height:1.7;
  margin-inline:auto;max-width:60rem;overflow-wrap:break-word;}
.copyright a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;white-space:nowrap;}
.copyright a:hover{opacity:.6;}
/* keep each "·" glued to its neighbours so a wrap never leaves it dangling at a line start */
.copyright .csep{opacity:.45;margin:0 .55em;border:0;white-space:nowrap;}

/* ============================================================
   9 · Horizontal gallery — SYSTEM-LEVEL scroll-driven serpentine.
   Native vertical scroll drives a sticky-pinned track's translateX;
   a panel may wrap a .hgal-scroll for tall scroll-through content.
   Behaviour self-inits in site.js (module 6). Only STRUCTURE lives
   here — each page themes its own panel content. Mobile / reduced-
   motion fall back to a plain vertical stack.
       <section class="hgal" data-hgal [data-hgal-ease="smooth"]>
         <div class="hgal-pin"><div class="hgal-track">
           <div class="hgal-panel">… or … <div class="hgal-scroll">…</div>
         </div></div>
       </section>
   ============================================================ */
.hgal{position:relative;z-index:1;flex:none;}            /* tall; height set by site.js */
.hgal-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;}
.hgal-track{display:flex;height:100%;will-change:transform;}
.hgal-panel{flex:0 0 100vw;width:100vw;height:100vh;height:100svh;overflow:hidden;}
.hgal-scroll{will-change:transform;}
@media (prefers-reduced-motion:reduce),(max-width:760px){
  .hgal{height:auto !important;}
  .hgal-pin{position:static;height:auto;overflow:visible;}
  .hgal-track{flex-direction:column;transform:none !important;}
  .hgal-panel{flex:none;width:100%;height:auto;overflow:visible;}
  .hgal-scroll{transform:none !important;}
}
/* opt-in cinematic mobile — set data-hgal-mobile="solo" on the section: one work
   per screen, centred & scroll-snapped; site.js fades each panel toward black as
   it leaves the viewport centre (the previous work darkens as the next arrives). */
@media (max-width:760px){
  html:has([data-hgal-mobile="solo"]){scroll-snap-type:y mandatory;}
  [data-hgal-mobile="solo"] .hgal-panel{height:100svh;min-height:100svh;
    scroll-snap-align:center;scroll-snap-stop:always;will-change:opacity;}
}

/* ============================================================
   9b · Horizontal filmstrip — SYSTEM-LEVEL continuous strip.
   Native vertical scroll maps 1:1 onto one uninterrupted
   horizontal band (a book unrolled). Behaviour self-inits in
   site.js (module 6b). Only STRUCTURE lives here — each page
   themes its own strip content.
       <section data-hstrip>
         <div class="hstrip-pin"><div class="hstrip-track">…</div></div>
       </section>
   Mobile + reduced-motion: the pin becomes a native swipe
   scroller filling the full viewport height — no scroll hijack.
   ============================================================ */
.hstrip{position:relative;z-index:1;}                      /* tall; height set by site.js */
.hstrip-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;}
.hstrip-track{display:flex;align-items:stretch;height:100%;width:max-content;will-change:transform;}
.hstrip-bar{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:40;background:rgba(var(--page-ink-rgb),.12);}
.hstrip-bar > i{display:block;height:100%;width:0;background:var(--page-ink);transition:width .12s linear;}
@media (prefers-reduced-motion:reduce),(max-width:760px){
  .hstrip{height:auto !important;}
  .hstrip-pin{position:static;height:100vh;height:100svh;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
  .hstrip-track{transform:none !important;}
  .hstrip-bar{display:none;}
}

/* ===== Cookie consent banner (system-level; analytics is opt-in) ===========
   Injected by site.js only when no choice is stored. Rectangular, elevated,
   editorial; inherits day/night through the same --page-* tokens. */
.xc-banner{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:1200;
  display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,30px);flex-wrap:wrap;
  max-width:min(660px,calc(100vw - 32px));padding:18px clamp(18px,3vw,26px);border-radius:2px;
  background:var(--page-bg);color:var(--page-ink);border:1px solid rgba(var(--page-ink-rgb),.14);
  box-shadow:inset 0 1px 0 rgba(var(--page-bg-rgb),.6),
             0 18px 40px -14px rgba(0,0,0,.34),
             0 40px 90px -34px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1);
  font-family:'Graphik','Inter',-apple-system,system-ui,Arial,sans-serif;}
.xc-banner.in{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.xc-text{margin:0;font-size:12px;line-height:1.55;color:rgba(var(--page-ink-rgb),.78);max-width:42ch;}
.xc-text a{color:var(--page-ink);text-decoration:underline;text-underline-offset:2px;}
.xc-text a:hover{opacity:.6;}
.xc-actions{display:flex;gap:10px;flex:none;}
.xc-btn{font-family:inherit;font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  cursor:pointer;padding:11px 22px;border-radius:0;border:1px solid rgba(var(--page-ink-rgb),.32);
  background:transparent;color:var(--page-ink);white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;}
.xc-btn:hover{border-color:var(--page-ink);transform:translateY(-1px);}
.xc-decline:hover{background:rgba(var(--page-ink-rgb),.05);}
.xc-accept{background:var(--page-ink);color:var(--page-bg);border-color:var(--page-ink);
  box-shadow:0 7px 18px -7px rgba(var(--page-ink-rgb),.6);}
.xc-accept:hover{transform:translateY(-1px);box-shadow:0 11px 24px -8px rgba(var(--page-ink-rgb),.72);}
.xc-btn:active{transform:translateY(0);}
@media (max-width:560px){
  .xc-banner{left:16px;right:16px;max-width:none;transform:translateY(16px);
    flex-direction:column;align-items:stretch;gap:14px;bottom:16px;padding:18px;}
  .xc-banner.in{transform:translateY(0);}
  .xc-actions{width:100%;}
  .xc-btn{flex:1 1 0;text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .xc-banner,.xc-btn{transition:opacity .2s ease;}
}

/* ---- 9 · hand-drawn paging arrows (SYSTEM) --------------------------
   The artist's arrows from assets/img/whiteroom/po/early-concept/, one
   component for every prev/next pair on the site: the Portable Objects
   book and the transfer picker on The White Room: Syncing. Day/night is
   automatic — black pair on light surfaces, white pair on dark ones; the
   White Room pages (body.wr-page) are a fixed-white cube, so they always
   keep the black pair. Pages may override locally (see po.css .po-page). */
.po-bk-btn{appearance:none;background-color:transparent;background-repeat:no-repeat;
  background-position:center;background-size:contain;border:0;padding:0;cursor:pointer;
  width:clamp(50px,5.4vw,68px);height:clamp(32px,3.4vw,42px);
  opacity:.8;transition:opacity .25s ease,transform .25s ease;}
.po-bk-btn:hover{opacity:1;}
.po-bk-prev:hover{transform:translateX(-3px);}
.po-bk-next:hover{transform:translateX(3px);}
.po-bk-btn:disabled{opacity:.22;cursor:default;transform:none;}
.po-bk-prev{background-image:url(../img/whiteroom/po/early-concept/arrow-left-black.png);}
.po-bk-next{background-image:url(../img/whiteroom/po/early-concept/arrow-right-black.png);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body:not(.wr-page) .po-bk-prev{background-image:url(../img/whiteroom/po/early-concept/arrow-left-white.png);}
  :root:not([data-theme="light"]) body:not(.wr-page) .po-bk-next{background-image:url(../img/whiteroom/po/early-concept/arrow-right-white.png);}
}
:root[data-theme="dark"] body:not(.wr-page) .po-bk-prev{background-image:url(../img/whiteroom/po/early-concept/arrow-left-white.png);}
:root[data-theme="dark"] body:not(.wr-page) .po-bk-next{background-image:url(../img/whiteroom/po/early-concept/arrow-right-white.png);}
@media (prefers-reduced-motion:reduce){.po-bk-btn{transition:opacity .2s ease;}}

/* ===== media protection — pairs with site.js module 8 ===================== */
img, video, canvas {
  -webkit-touch-callout: none;   /* iOS long-press "Save Image" */
  -webkit-user-drag: none;       /* drag photo to desktop */
  user-select: none;
}

/* ===== mobile menu — opens instantly. Animating backdrop-filter freezes iOS
   Safari over image-heavy pages, so coarse pointers get a plain dark veil. == */
@media (max-width:760px), (pointer:coarse){
  .menu{background:rgba(8,8,8,.93);backdrop-filter:none;-webkit-backdrop-filter:none;
    transition:opacity .42s cubic-bezier(.2,.7,.2,1);}
  .menu.leaving{backdrop-filter:none;-webkit-backdrop-filter:none;}
}
