:root{
    --marble:#F7F5F1; --marble-2:#F1EEE8; --stone:rgba(185,155,98,.32); --stone-deep:rgba(185,155,98,.55);
    /* GOLDINU gold system — three roles, never one generic gold */
    --gold-structural:#B99B62;      /* trims, borders, plaques, pedestal detail: muted champagne / aged brass */
    --gold-structural-deep:#9C7E45;
    --gold-interface:#A77B32;       /* active nav, buttons, labels, interaction states: cleaner, legible */
    --gold-interface-deep:#8C6420;
    --gold-artifact:#D9B45C;        /* reserved for the GOLDINU sculpture, coin and major artifacts (image-borne) */
    --gold-artifact-hi:#F2DFA3;
    /* compatibility aliases (existing rules) */
    --gold:var(--gold-interface); --gold-2:#C8A767; --gold-deep:var(--gold-interface-deep); --gold-pale:#F3EBDC;
    /* one architectural line for the whole building */
    --line:rgba(185,155,98,.32);    /* 1px, low-opacity champagne */
    --line-strong:rgba(185,155,98,.55);
    /* metallic gold for large display type only (headings, key figures). Every use pairs it with a
       solid fallback colour, and the darkest stop keeps it readable on ivory. */
    --gold-metal:linear-gradient(100deg,#8C6420 0%,#A77B32 26%,#C29A55 46%,#B08840 60%,#8C6420 100%);
    --gold-metal-ondark:linear-gradient(100deg,#C9A24A 0%,#E9D08C 40%,#F2DFA3 52%,#D9B45C 70%,#B48A3C 100%);
    --gold-rule:linear-gradient(90deg,rgba(167,123,50,0),rgba(167,123,50,.75) 18%,#C9A65E 50%,rgba(167,123,50,.75) 82%,rgba(167,123,50,0));
    --sel:#F0E4C8;
    --ink:#17130F; --umber:#6F665E; --mute:#8E867D;
    --serif:"Playfair Display",Georgia,"Times New Roman",serif;
    --mono:"IBM Plex Mono","SF Mono",Menlo,Consolas,monospace;
    --sans:"Inter","Helvetica Neue",Arial,sans-serif;
    --gutter:clamp(20px,4.6vw,64px);
    --ease:cubic-bezier(.16,1,.3,1);   /* GOLDINU motion: restrained, physical, a touch slower than the web */
    --t-fast:.32s; --t-base:.9s; --t-slow:1.4s;
    color-scheme:light;
  }
  /* ---------------------------------------------------------------------------
     RESPONSIVE FOUNDATION — breakpoint tiers used consistently across the site.
     CSS custom properties can't drive @media conditions, so these are the fixed
     numbers every media query below should draw from, rather than inventing new
     ones per component. A component may still add a narrower tier of its own
     (e.g. the meme collage at 700px, the Season Chamber's three-column halls at
     1180px) when its own content — not the page grid — is what breaks first;
     those are noted inline where they diverge.
       ≤ 640px   — small phone (the floor beneath which mobile layouts still owe
                   a legible minimum: clamp() type floors, not new breakpoints)
       ≤ 860px   — MOBILE — the site's primary layout switch: rooms go from an
                   art-directed absolute composition to a purpose-built vertical
                   flow (.room .on → static, .flow → a real grid)
       861–1080px — TABLET / narrow laptop — desktop composition stays, but
                   nav spacing and any content nearest the edge gets a little
                   more room to breathe
       1081–1799px — DESKTOP — the primary art-directed composition
       ≥ 1800px  — LARGE DESKTOP — same composition; clamp() ceilings already
                   cap type and spacing so nothing over-grows
     --------------------------------------------------------------------------- */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--marble);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
  a:focus-visible,button:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
  ::selection{background:var(--sel);color:var(--ink)}
  ::-moz-selection{background:var(--sel);color:var(--ink)}
  a,button,[role=button],summary{cursor:pointer}
  a:hover,button:hover{transition-duration:.3s}

  .label{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber)}
  .label.dim{color:var(--mute)}
  .wordmark{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
  .h{font-family:var(--serif);font-weight:500;line-height:1.0;letter-spacing:-.025em;text-wrap:balance;margin:0;color:var(--ink)}
  .rule{height:1px;background:var(--line)}
  /* metallic word treatment — for one conceptual word at a time; never whole sentences, never animated */
  .metal{background:linear-gradient(105deg,#9C7E45 0%,#C8A767 28%,#EBD9A6 50%,#C8A767 72%,#9C7E45 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
  @supports not (background-clip:text){.metal{color:var(--gold-interface)}}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;padding-left:calc(22px + .22em);border:1px solid var(--line-strong);border-radius:0;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;line-height:1;color:var(--gold-interface);background:rgba(250,247,241,.55);transition:background .32s ease,border-color .32s ease,color .32s ease}
  .btn:hover{background:var(--gold-pale);border-color:var(--gold-interface);color:var(--gold-interface-deep)}
  .btn:active{background:#EBDFC3}
  .btn.solid{color:var(--gold-interface)}

  /* ---------- nav ---------- */
  /* Permanently transparent on desktop (mobile keeps its own solid bar, set later in the mobile
     media query — unrelated to this and untouched): the gallery environment (Hero/video/Story,
     and every other room besides) reads as continuing behind the interface rather than stopping
     at a hard bar. No frosted panel — just a faint top gradient plus a light text-shadow on the
     nav's own text/mark, kept subtle enough that the bar still reads as transparent. Was
     background:rgba(...);backdrop-filter:blur() once ".scrolled" (see site.js's onScroll); that
     solid state is gone so there is nothing left to flash during a transition. */
  #nav{position:fixed;left:0;right:0;top:0;z-index:50;padding:0 var(--gutter);padding-top:env(safe-area-inset-top,0px);background:transparent}
  #nav::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;z-index:-1;background:linear-gradient(to bottom,rgba(20,17,13,.22),rgba(20,17,13,0));pointer-events:none}
  /* Desktop, once scrolled past the very top: a FEATHERED scrim behind the header text — a soft
     blur + tint that fades to nothing at its lower edge (masked, so there is no line, band or slab),
     tinted to match the room behind it (ivory over the bright rooms, deep umber over the Vault).
     It exists only so the header's text never lands directly on card or heading text mid-scroll. */
  @media (min-width:861px){
    #nav::before{height:calc(100% + 30px);opacity:0;transition:opacity .45s ease;
      background:linear-gradient(to bottom,rgba(247,245,241,.82),rgba(247,245,241,.55) 55%,rgba(247,245,241,0));
      -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
      -webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent);mask-image:linear-gradient(to bottom,#000 45%,transparent)}
    #nav.scrolled::before{opacity:1}
    #nav.theme-ondark::before{background:linear-gradient(to bottom,rgba(18,13,8,.84),rgba(18,13,8,.55) 55%,rgba(18,13,8,0))}
  }
  #nav .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px}
  #nav .brand{justify-self:start;display:inline-flex;align-items:center;gap:10px}
  #nav .brand .wordmark{font-size:22px;line-height:1;text-shadow:0 1px 8px rgba(20,17,13,.4)}
  #nav .brand .emblem{width:26px;height:26px;display:block;filter:saturate(.9) drop-shadow(0 1px 4px rgba(20,17,13,.35))}
  #nav .links{display:flex;gap:clamp(24px,3.6vw,52px)}
  #nav .links a{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;line-height:1;color:rgba(23,19,15,.72);position:relative;padding:10px 0;display:inline-flex;align-items:center;transition:color .3s ease,opacity .3s ease;text-shadow:0 1px 6px rgba(250,247,241,.5)}
  #nav .links a:hover{color:var(--ink);opacity:.92}
  #nav .links a::after{content:"";position:absolute;left:0;right:.24em;bottom:3px;height:1px;background:var(--gold-interface);opacity:0;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease),opacity .3s}
  #nav .links a:hover::after{opacity:.6;transform:scaleX(1)}
  #nav .links a.cur{color:var(--ink)}
  #nav .links a.cur::after{opacity:1;transform:scaleX(1)}
  /* the header's right side holds two controls: a subtle "Copy CA" (transparent, thin gold
     border) alongside the filled-gold "How to Buy →" primary CTA — Copy CA is intentionally the
     quieter of the two so How to Buy stays the obvious action. Copy CA reuses the sitewide .ca
     click-to-copy handler in site.js (the same one behind the Reserve room's own Contract plaque
     and its mobile action row), so it needs no JS of its own. */
  #nav .cta-group{justify-self:end;display:flex;align-items:center;gap:10px}
  #nav .cta{gap:10px;padding:10px 18px;min-width:0;justify-content:center;background:rgba(250,247,241,.3);color:#2A2219;border:1px solid rgba(156,126,69,.62);box-shadow:none;text-shadow:0 1px 6px rgba(250,247,241,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
  #nav .cta:hover{background:rgba(250,247,241,.52);border-color:var(--gold-interface-deep);color:var(--ink)}
  #nav .cta:active{background:rgba(235,223,195,.6)}
  #nav.theme-ondark .cta{color:#F3ECDD;background:rgba(12,9,6,.3);border-color:rgba(217,180,92,.55);text-shadow:0 1px 8px rgba(8,6,4,.6)}
  #nav.theme-ondark .cta:hover{background:rgba(12,9,6,.5);border-color:rgba(217,180,92,.88);color:#fff}
  #nav .cta .arrow{display:inline-block;transition:transform .3s var(--ease)}
  #nav .cta:hover .arrow{transform:translateX(3px)}
  #nav .navcta-ca{padding:10px 16px;min-width:0;justify-content:center;background:transparent;color:rgba(23,19,15,.82);border:1px solid rgba(185,155,98,.55);text-shadow:0 1px 6px rgba(250,247,241,.5);box-shadow:none}
  #nav .navcta-ca:hover{background:rgba(250,247,241,.28);border-color:var(--gold-interface);color:var(--ink)}
  #nav .navcta-ca.done{background:rgba(217,180,92,.22);border-color:var(--gold-interface);color:var(--ink)}
  #nav .burger{display:none;justify-self:end;width:40px;height:40px;position:relative}
  #nav .burger i{position:absolute;left:10px;right:10px;height:1px;background:var(--ink);top:16px;transition:transform .5s var(--ease),top .5s var(--ease)}
  #nav .burger i+i{top:24px}
  #nav.open .burger i{top:20px;transform:rotate(45deg)}#nav.open .burger i+i{transform:rotate(-45deg)}
  /* active header theme — the header defaults to dark ink text (right for the bright Gallery/Spa/
     Vault/How To Buy marble), and swaps to light/ivory only while the dark Restaurant room sits
     under it (site.js toggles this class via IntersectionObserver). Desktop only — the mobile
     header always has its own solid backdrop, so dark text stays correct there regardless. */
  @media (min-width:861px){
    #nav.theme-ondark .brand .wordmark,#nav.theme-ondark .links a{color:rgba(247,245,241,.94);text-shadow:0 1px 10px rgba(10,8,6,.55)}
    #nav.theme-ondark .links a.cur{color:#fff}
    #nav.theme-ondark .links a::after{background:var(--gold-artifact-hi)}
    #nav.theme-ondark .navcta-ca{color:rgba(247,245,241,.94);border-color:rgba(217,180,92,.6);text-shadow:0 1px 8px rgba(10,8,6,.5)}
    #nav.theme-ondark .navcta-ca:hover{background:rgba(217,180,92,.18)}
    #nav.theme-ondark .burger i{background:#F7F5F1}
    #nav{transition:background .4s ease}
  }
  /* the mobile directory: a museum floor-plan panel sliding in from the right, not a full-screen
     hamburger takeover — a scrim behind it, a numbered room list (00–04) inside it, each row a
     comfortably tappable target. Kept as two layers (.scrim + .menu-panel) so the scrim can fade
     independently of the panel's own slide. */
  #menu{position:fixed;inset:0;z-index:45;pointer-events:none}
  #menu .scrim{position:absolute;inset:0;background:rgba(23,19,15,.34);opacity:0;transition:opacity .5s var(--ease)}
  #menu .menu-panel{position:absolute;top:0;right:0;bottom:0;width:min(360px,84vw);background:var(--marble);
    box-shadow:-40px 0 70px -36px rgba(23,19,15,0),-1px 0 0 transparent;
    display:grid;align-content:start;gap:0;padding:calc(84px + env(safe-area-inset-top,0px)) 0 calc(28px + env(safe-area-inset-bottom,0px));
    transform:translateX(102%);transition:transform .6s var(--ease),box-shadow .6s var(--ease);overflow-y:auto}
  /* the panel's shadow exists only while it is open — parked off-screen it must not shade the page's right edge */
  #menu.open .menu-panel{box-shadow:-40px 0 70px -36px rgba(23,19,15,.45),-1px 0 0 var(--line-strong)}
  #menu.open{pointer-events:auto}
  #menu.open .scrim{opacity:1}
  #menu.open .menu-panel{transform:none}
  #menu .menu-head{padding:0 28px 16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  #menu a{display:flex;align-items:baseline;gap:14px;padding:17px 28px;font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:-.015em;color:var(--ink);border-bottom:1px solid var(--line);transition:background .35s var(--ease),color .35s var(--ease)}
  #menu a .mn-n{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.2em;color:var(--gold-interface);flex:none}
  #menu a:hover,#menu a:active{background:rgba(200,167,103,.1)}
  #menu a.cur{color:var(--gold-interface-deep)}
  #menu a.cur .mn-n{color:var(--gold-interface-deep)}
  #menu .menu-ctas{margin:22px 28px 0;display:flex;gap:10px;justify-self:start}
  #menu .menu-cta{margin:0}
  #menu .menu-ca{background:transparent;border:1px solid rgba(185,155,98,.55);color:var(--umber);white-space:nowrap;padding-left:16px;padding-right:16px}
  #menu .menu-ca:hover,#menu .menu-ca.done{background:rgba(217,180,92,.14);border-color:var(--gold-interface);color:var(--ink)}
  @media (max-width:1080px){
    #nav .links{gap:clamp(16px,2.4vw,32px)}
    #nav .cta{min-width:0}
  }

  /* ---------- hero ---------- */
  #hero{position:relative;width:100%;background:var(--marble);overflow:hidden}
  #hero .scene{position:relative;width:100%;aspect-ratio:1672/941;min-height:100svh}
  #hero .scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  #hero .line-top{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(64px + env(safe-area-inset-top,0px));height:1px;background:var(--line)}
  #hero .wall{position:absolute;left:clamp(20px,16%,320px);top:50%;transform:translateY(-58%);display:grid;gap:clamp(14px,1.6vw,26px);max-width:62%}
  #hero .wall .eyebrow{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--umber);opacity:0;animation:fade 1.6s var(--ease) .3s forwards}
  #hero .wall .mark{font-family:var(--serif);font-weight:500;font-size:clamp(82px,10.1vw,174px);line-height:.9;letter-spacing:-.025em;color:var(--ink);margin:0;opacity:0;animation:fade 2s var(--ease) .5s forwards}
  #hero .wall .tag{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--umber);opacity:0;animation:fade 1.6s var(--ease) 1s forwards}
  #hero .wall .acts{margin-top:clamp(8px,1.4vw,22px);opacity:0;animation:fade 1.6s var(--ease) 1.3s forwards}
  /* a lighter, glass treatment for the entry button — translucent like the pedestal cards and the
     Community directory, rather than the near-opaque default .btn fill */
  #hero .wall .acts .btn{background:rgba(250,247,241,.24);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-color:rgba(185,155,98,.42);text-shadow:0 1px 8px rgba(250,247,241,.5)}
  #hero .wall .acts .btn:hover{background:rgba(250,247,241,.4);border-color:var(--gold-interface)}
  #hero .wall .acts .btn:active{background:rgba(235,223,195,.55)}
  @keyframes fade{to{opacity:1}}

  /* ================= HOME ROOMS — one self-contained composition per room =================
     Restaurant / Spa / Vault / How To Buy. Each .cx-scene is a one-cell grid holding two layers
     in the same cell:
       .cx-scene-visual   the photograph at its own native ratio (never cropped), plus How To Buy's
                          video positioned as percentages of that same photo box
       .cx-scene-content  the copy column AND the exhibit cards, in ONE normal-flow column
     The cell is as tall as whichever layer is taller, so a room is never shorter than its photo
     (nothing can bleed into the next room — the section also clips and isolates itself), and the
     copy and cards can never overlap each other, because they share a flow instead of being
     positioned independently. Offsets use cqw (percent of the room's own width) so the copy lands
     on the same spot of the photograph at every desktop width.
     Superseded and removed: the negative-margin card overlap (the root cause of the translucent
     bands between rooms — each photo ran ~130px past its own section and its fade painted over
     the next room) and the absolutely-positioned copy box (which let cards ride over the CTA). */
  .cx-scene{position:relative;display:grid;width:100%;isolation:isolate;overflow:clip;container-type:inline-size;scroll-margin-top:64px;
    --scene-bg:var(--marble);--scene-ink:var(--ink);--scene-accent:var(--gold-interface-deep);
    --ex-bg:rgba(250,247,241,.38);--ex-bg-hi:rgba(250,247,241,.56);--ex-border:rgba(185,155,98,.46);--ex-border-hi:var(--gold-interface);
    --ex-detail:rgba(250,247,241,.94);--ex-shadow:rgba(23,19,15,.22);--ex-halo:rgba(212,180,106,.30);--ex-tshadow:0 1px 8px rgba(250,247,241,.75);
    --btn-ink:#2A2219;--btn-bg:rgba(250,247,241,.28);--btn-bg-hi:rgba(250,247,241,.52);--btn-line:rgba(156,126,69,.6);--btn-line-hi:var(--gold-interface-deep);--btn-press:rgba(235,223,195,.6);--btn-tshadow:0 1px 8px rgba(250,247,241,.6);
    background:var(--scene-bg)}
  .cx-vault{--scene-bg:#171009;--scene-ink:#F3ECDD;--scene-accent:var(--gold-artifact-hi);
    --ex-bg:rgba(16,11,7,.46);--ex-bg-hi:rgba(16,11,7,.62);--ex-border:rgba(217,180,92,.38);--ex-border-hi:rgba(217,180,92,.78);
    --ex-detail:rgba(14,10,6,.92);--ex-shadow:rgba(0,0,0,.5);--ex-halo:rgba(217,180,92,.22);--ex-tshadow:0 1px 10px rgba(8,6,4,.8);
    --btn-ink:#F3ECDD;--btn-bg:rgba(12,9,6,.3);--btn-bg-hi:rgba(12,9,6,.5);--btn-line:rgba(217,180,92,.5);--btn-line-hi:rgba(217,180,92,.88);--btn-press:rgba(12,9,6,.6);--btn-tshadow:0 1px 8px rgba(8,6,4,.6)}
  .cx-restaurant{--pad-top:7.3cqw;--tb-left:8cqw;--tb-width:34cqw}
  .cx-spa{--pad-top:6.75cqw;--tb-left:8.5cqw;--tb-width:29cqw}
  .cx-vault{--pad-top:8.4cqw;--tb-left:4.5cqw;--tb-width:35cqw}
  .cx-howto{--pad-top:8.4cqw;--tb-left:8cqw;--tb-width:30cqw}
  .cx-scene-visual,.cx-scene-content{grid-area:1/1}
  .cx-scene-visual{position:relative;align-self:start;overflow:visible;z-index:0}
  /* the photo's lower edge melts into the room's own floor colour, which is also the section
     background — so if the content runs taller than the photo, the floor simply continues */
  /* FLOOR REFLECTION — when a room grows past its artwork (an information card opened in place, or
     content that runs longer than the photo), the room's own floor continues below it as a soft
     mirror image of its bottom edge: continuous at the seam, never stretched, zoomed or tiled, and
     never a plain band. The artwork itself never moves or rescales when a card opens; the section
     clips this layer at its own bottom edge. */
  .cx-scene-visual::after{content:"";position:absolute;left:0;right:0;top:100%;height:100%;z-index:0;pointer-events:none;
    background:linear-gradient(to top,color-mix(in srgb,var(--scene-bg) 0%,transparent),color-mix(in srgb,var(--scene-bg) 42%,transparent) 55%,color-mix(in srgb,var(--scene-bg) 62%,transparent)),var(--art-img) center/100% 100% no-repeat;
    transform:scaleY(-1);opacity:0;transition:opacity 1.1s var(--ease)}
  .cx-scene-visual:has(.cx-media.in)::after{opacity:1}
  .cx-restaurant{--art-img:url(img/room-restaurant.webp)}
  .cx-spa{--art-img:url(img/room-spa.webp)}
  .cx-vault{--art-img:url(img/room-vault.webp)}
  .cx-howto{--art-img:url(img/room-howtobuy.webp)}
  .cx-media{position:relative;width:100%;overflow:hidden;opacity:0;transition:opacity 1.1s var(--ease)}
  .cx-media.in{opacity:1}
  .cx-media img{display:block;width:100%;height:auto;transform:scale(1.06);transition:transform 1.9s var(--ease)}
  .cx-media.in img{transform:none}
  .cx-scene-content{position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;gap:clamp(28px,3vw,48px);padding:max(var(--pad-top),88px) 0 clamp(30px,3.2vw,56px)}
  /* the content layer spans the whole room but only its copy and cards take clicks — taps anywhere
     else (the How To Buy video and its controls) pass through to the artwork layer beneath */
  .cx-scene-content{pointer-events:none}
  .cx-scene-content>*{pointer-events:auto}

  /* ---------- the copy column ---------- */
  .cx-textbox{position:relative;margin-left:var(--tb-left);width:var(--tb-width);min-width:260px;max-width:560px;display:grid;gap:14px;justify-items:start;color:var(--scene-ink)}
  /* How To Buy: the column reserves the height of the painted frame (its bottom sits at 53% of the
     photo = 29.8cqw) so the steps can never start above the video */
  .cx-howto .cx-textbox{align-content:start;min-height:calc(31.5cqw - max(var(--pad-top),88px))}
  /* legibility halo: an ellipse that reaches full transparency AT its own edges (closest-side), so
     there is no visible rectangle — the old version faded out inside its box and left hard edges */
  .cx-textbox::before{content:"";position:absolute;inset:-20% -24% -20% -34%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,252,244,.6),rgba(255,252,244,.28) 58%,rgba(255,252,244,0))}
  .cx-vault .cx-textbox::before{background:radial-gradient(closest-side,rgba(8,6,4,.62),rgba(8,6,4,.28) 58%,rgba(8,6,4,0))}
  .cx-textbox .label{font-size:11.5px;letter-spacing:.24em;color:var(--gold-interface-deep)}
  .cx-vault .cx-textbox .label{color:var(--gold-artifact-hi)}
  .cx-textbox .cx-kicker{font-family:var(--mono);font-weight:500;font-size:clamp(11.5px,1vw,14px);letter-spacing:.28em;text-transform:uppercase;line-height:1.5;opacity:.92}
  .cx-textbox .cx-copy{font-family:var(--sans);font-weight:300;font-size:clamp(14.5px,1vw,16.5px);line-height:1.6;opacity:.9;max-width:32em}
  .cx-textbox .engrave{font-size:clamp(38px,4.6vw,72px);line-height:1.02;letter-spacing:-.015em;font-style:normal;color:var(--scene-ink);margin:0}
  .cx-vault .cx-textbox .engrave,.cx-vault .cx-textbox .cx-kicker,.cx-vault .cx-textbox .cx-copy{color:var(--scene-ink)}
  /* gold as an accent, never a default text color — one reusable treatment, applied to a single
     word/mark per room, an 8-12s sweep meant to resemble light moving across polished gold. */
  .gold-accent{background-image:linear-gradient(105deg,#a97720 0%,#f8e7ad 25%,#d7a94b 50%,#fff1bd 75%,#a97720 100%);background-size:220% auto;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:0 1px 12px rgba(210,160,60,.12);animation:cxGold 10s linear infinite}
  @keyframes cxGold{to{background-position:220% 50%}}
  @supports not (background-clip:text){.gold-accent{color:var(--gold-artifact-hi);-webkit-text-fill-color:currentColor;animation:none}}
  .cx-textbox>.reveal{transition-duration:.6s}
  .cx-textbox>.reveal:nth-child(1){transition-delay:0s}
  .cx-textbox>.reveal:nth-child(2){transition-delay:.06s}
  .cx-textbox>.reveal:nth-child(3){transition-delay:.12s}
  .cx-textbox>.reveal:nth-child(4){transition-delay:.18s}
  .cx-textbox>.reveal:nth-child(5){transition-delay:.24s}
  .cx-textbox>.reveal:nth-child(6){transition-delay:.3s}

  /* ---------- three related CTA styles ---------- */
  .cx-textbox .cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;line-height:1;text-decoration:none;color:inherit;cursor:pointer}
  .cx-textbox .cta .arrow{display:inline-block;transition:transform .3s var(--ease)}
  .cx-textbox .cta:hover .arrow{transform:translateX(4px)}
  /* ONE clear button material for every room action — the hero's "Tour the Gallery" language:
     a near-transparent tint, a fine antique-gold hairline and a crisp label; the room's own tokens
     make it charcoal-on-ivory in bright rooms and ivory-on-umber in the Vault. No gold fills. */
  .cx-textbox .cta-primary,.cx-textbox .cta-outline{height:50px;padding:0 24px;padding-left:calc(24px + .22em);color:var(--btn-ink);background:var(--btn-bg);border:1px solid var(--btn-line);border-radius:0;text-shadow:var(--btn-tshadow);
    -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background .32s ease,border-color .32s ease}
  .cx-textbox .cta-primary:hover,.cx-textbox .cta-outline:hover{background:var(--btn-bg-hi);border-color:var(--btn-line-hi)}
  .cx-textbox .cta-primary:active,.cx-textbox .cta-outline:active{background:var(--btn-press)}
  .cx-textbox .cta-primary:focus-visible,.cx-textbox .cta-outline:focus-visible{outline:1px solid var(--btn-line-hi);outline-offset:4px}
  .cx-textbox .cta-text{height:auto;padding:0 0 4px;background:none;border:0;position:relative}
  .cx-textbox .cta-text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-interface);opacity:.55;transform:scaleX(.34);transform-origin:left;transition:transform .45s var(--ease),opacity .3s}
  .cx-textbox .cta-text:hover::after{transform:scaleX(1);opacity:.95}

  /* ---------- How To Buy — the video sits inside the ONE physical frame already drawn into the
     photo, positioned as plain percentages of .cx-scene-visual (the photo's own natural box, never
     cropped), so no cover-crop math is needed. Poster intentionally left off: before playback the
     frame reads as a dark, "powered off" panel rather than repeating a small copy of the room. */
  .cx-howto .cx-video{position:absolute;z-index:2;left:43.4%;top:12.2%;width:43.2%;height:40.8%;background:#0c0a08;overflow:hidden;border:1px solid rgba(217,180,92,.35);opacity:0;transform:scale(1.02);transition:opacity 1s var(--ease) .3s,transform 1.1s var(--ease) .3s}
  .cx-howto .cx-video.in{opacity:1;transform:scale(1)}
  .cx-howto .cx-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .cx-howto .cx-video video::-webkit-media-controls{display:none!important}
  .cx-howto .cx-video::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,4,.55),transparent 40%);pointer-events:none;transition:opacity .4s ease}
  .cx-howto .cx-video.playing::after{opacity:.6}
  .cx-vcaption{position:absolute;left:6%;bottom:11%;z-index:1;display:grid;gap:2px;color:#F7F5F1;pointer-events:none;transition:opacity .35s ease}
  .cx-vcaption .cx-vt{font-family:var(--serif);font-weight:500;font-size:clamp(11px,1.4vw,18px);line-height:1.1}
  .cx-vcaption .cx-vs{font-family:var(--mono);font-size:clamp(6.5px,.7vw,9px);letter-spacing:.2em;text-transform:uppercase;opacity:.82}
  .cx-video.playing .cx-vcaption{opacity:0}
  .cx-vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:15%;min-width:30px;max-width:52px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(247,241,228,.7);background:rgba(10,8,6,.42);display:flex;align-items:center;justify-content:center;color:#F7F5F1;cursor:pointer;padding:0;transition:opacity .3s ease,transform .3s var(--ease),background .3s ease}
  .cx-vplay:hover{background:rgba(10,8,6,.6);transform:translate(-50%,-50%) scale(1.06)}
  .cx-vplay svg{width:38%;height:38%;margin-left:8%}
  .cx-video.playing .cx-vplay{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9)}
  .cx-vbar{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;gap:7%;padding:0 5%;height:15%;min-height:16px;background:linear-gradient(0deg,rgba(6,5,4,.72),rgba(6,5,4,0));opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease;color:#F7F5F1}
  .cx-video:hover .cx-vbar,.cx-video.playing .cx-vbar{opacity:1;transform:translateY(0)}
  .cx-vbar button{background:none;border:0;padding:0;color:inherit;cursor:pointer;display:flex;align-items:center;opacity:.85;transition:opacity .2s ease}
  .cx-vbar button:hover{opacity:1}
  .cx-vbar button svg{width:clamp(8px,.9vw,13px);height:clamp(8px,.9vw,13px)}
  .cx-vb-play .ic-pause{display:none}
  .cx-video.playing .cx-vb-play .ic-play{display:none}
  .cx-video.playing .cx-vb-play .ic-pause{display:block}
  .cx-vb-time{font-family:var(--mono);font-size:clamp(6.5px,.68vw,9px);letter-spacing:.04em;white-space:nowrap;opacity:.85}
  .cx-vb-sp{flex:1}
  .cx-video.muted .cx-vb-mute .wv{opacity:.25}

  /* ---------- the room's cards — always the last thing in the copy column's flow ---------- */
  .cx-scene-details{margin-top:auto;padding:0 var(--gutter);display:grid;gap:clamp(18px,2vw,28px)}
  .cx-details-label{display:flex;align-items:baseline;gap:12px}
  .cx-details-label .k{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--scene-accent)}
  .cx-details-label .t{font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.7vw,24px);color:var(--scene-ink);margin:0}

  /* ---------- EXHIBIT CARDS — the Reserve pedestal language, carried into every room ----------
     Square-edged glass (never a solid slab), a gold hairline, a slow idle drift, a lift and gold
     halo on hover, and a museum label that unfurls IN PLACE on click — no modal, nothing covering
     other text. Rows align to their bottom edge, so an opening card grows upward into the room
     while its neighbours stay exactly where they are; because the row lives in the copy column's
     flow, it can only grow into free photo space, never over the copy above it. */
  .cx-exrow{display:grid;gap:clamp(12px,1.4vw,20px);align-items:end}   /* bottom-anchored: an opened card rises, neighbours stay put */
  .cx-exrow-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cx-exrow-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cx-ex{position:relative;min-width:0}
  .cx-exrow>.cx-ex{transition-duration:.9s}
  .cx-exrow>.cx-ex:nth-child(2){transition-delay:.08s}
  .cx-exrow>.cx-ex:nth-child(3){transition-delay:.16s}
  .cx-exrow>.cx-ex:nth-child(4){transition-delay:.24s}
  .cx-ex-glow{position:absolute;inset:-18% -10%;pointer-events:none;opacity:0;transition:opacity 1s var(--ease);background:radial-gradient(closest-side,var(--ex-halo),rgba(212,180,106,0))}
  .cx-ex-card{position:relative;display:grid;color:var(--scene-ink);background:var(--ex-bg);border:1px solid var(--ex-border);border-radius:0;
    -webkit-backdrop-filter:blur(7px) saturate(1.05);backdrop-filter:blur(7px) saturate(1.05);
    box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 16px 30px -22px var(--ex-shadow);
    transition:transform .9s var(--ease),background .6s ease,border-color .6s ease,box-shadow .9s var(--ease);
    animation:cxDrift var(--dur,7.4s) ease-in-out var(--delay,0s) infinite}
  /* drift uses the independent `translate` property so it composes with the hover transform */
  @keyframes cxDrift{0%,100%{translate:0 0}50%{translate:0 -5px}}
  .cx-ex:hover .cx-ex-card,.cx-ex.open .cx-ex-card{transform:translateY(-6px)}
  .cx-ex:hover .cx-ex-card,.cx-ex:focus-within .cx-ex-card,.cx-ex.open .cx-ex-card{background:var(--ex-bg-hi);border-color:var(--ex-border-hi);
    box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 26px 44px -22px var(--ex-shadow),0 0 0 1px rgba(200,167,103,.22),0 0 30px var(--ex-halo)}
  .cx-ex:hover .cx-ex-glow,.cx-ex:focus-within .cx-ex-glow,.cx-ex.open .cx-ex-glow{opacity:1}
  .cx-ex.open .cx-ex-card{animation-play-state:paused;background:var(--ex-open-bg,var(--ex-bg-hi))}
  .cx-ex-head{display:grid;justify-items:start;gap:7px;width:100%;padding:clamp(16px,1.3vw,22px) clamp(16px,1.4vw,24px) clamp(18px,1.4vw,24px);text-align:left;color:inherit;cursor:pointer;text-shadow:var(--ex-tshadow)}
  .cx-ex-head:focus-visible{outline:1px solid var(--ex-border-hi);outline-offset:-5px}
  .cx-ex-head:active{transform:scale(.99)}
  .cx-ex-top{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:4px}
  .cx-ex-ico{flex:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ex-border);color:var(--scene-accent);transition:border-color .6s ease}
  .cx-ex-ico svg{width:19px;height:19px}
  .cx-ex:hover .cx-ex-ico,.cx-ex.open .cx-ex-ico{border-color:var(--ex-border-hi)}
  .cx-ex-n{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;color:var(--scene-accent)}
  /* the cue: a hairline "+" that turns to "−" when the label is open */
  .cx-ex-cue{position:relative;flex:none;margin-left:auto;width:24px;height:24px;border:1px solid var(--ex-border);transition:border-color .4s ease,transform .5s var(--ease)}
  .cx-ex-cue::before,.cx-ex-cue::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--scene-accent);transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
  .cx-ex-cue::after{transform:translate(-50%,-50%) rotate(90deg)}
  .cx-ex:hover .cx-ex-cue{border-color:var(--ex-border-hi);transform:rotate(90deg)}
  .cx-ex.open .cx-ex-cue{border-color:var(--ex-border-hi);transform:none}
  .cx-ex.open .cx-ex-cue::after{transform:translate(-50%,-50%) rotate(0deg)}
  .cx-ex.cx-pulse .cx-ex-cue{animation:cxCue 1.3s var(--ease) 2}
  @keyframes cxCue{0%,100%{box-shadow:0 0 0 0 rgba(212,180,106,0)}50%{box-shadow:0 0 0 5px rgba(212,180,106,.28)}}
  .cx-ex-k{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--scene-accent)}
  .cx-ex-t{font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.45vw,24px);line-height:1.15;letter-spacing:-.01em}
  .cx-ex-d{font-family:var(--sans);font-weight:400;font-size:13.5px;line-height:1.5;opacity:.86;max-width:34ch}
  /* the unfurling label — grid-rows 0fr → 1fr animates to the content's real height */
  .cx-ex-more{height:0;overflow:hidden;opacity:0;padding:0 12px;transition:opacity .24s ease}
  .cx-ex.open .cx-ex-more{height:auto;opacity:1}
  .cx-ex-inner{margin-bottom:12px}
  .cx-ex-inner{overflow:hidden;background:var(--ex-detail);border:1px solid transparent;transition:border-color .5s ease}
  .cx-ex:not(.open) .cx-ex-inner{border-width:0}                  /* a closed region is exactly 0px tall */
  .cx-ex.open .cx-ex-inner{border-color:var(--line-strong)}
  .cx-vault .cx-ex.open .cx-ex-inner{border-color:rgba(217,180,92,.34)}
  .cx-ex-intro{margin:14px 16px 10px;font-family:var(--sans);font-weight:400;font-size:13.5px;line-height:1.6}
  .cx-ex-points{list-style:none;margin:0 16px 12px;padding:0;display:grid;gap:8px}
  .cx-ex-points li{position:relative;padding-left:16px;font-family:var(--sans);font-weight:300;font-size:12.5px;line-height:1.55;opacity:.9;overflow-wrap:anywhere}
  .cx-ex-points li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--scene-accent)}
  .cx-ex-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:2px 16px 16px}
  .cx-ex-act{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;padding-left:calc(16px + .2em);font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--btn-ink);text-decoration:none;
    background:transparent;border:1px solid var(--btn-line);border-radius:0;transition:background .3s ease,border-color .3s ease}
  .cx-ex-act:hover{background:var(--btn-bg-hi);border-color:var(--btn-line-hi)}
  .cx-ex-act:active{background:var(--btn-press)}
  .cx-ex-act:focus-visible{outline:1px solid var(--btn-line-hi);outline-offset:3px}
  .cx-ex-act.done{border-color:var(--btn-line-hi);background:var(--btn-bg-hi)}
  .cx-ex-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--scene-accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  .cx-ex-act span,.cx-ex-link span{transition:transform .3s var(--ease)}
  .cx-ex-act:hover span,.cx-ex-link:hover span{transform:translateX(3px)}

  /* ---------- How To Buy: Explore More — plain navigation, so arrows, never "+" ---------- */
  .cx-explore{display:grid;gap:clamp(14px,1.8vw,20px);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line)}
  .cx-explore-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
  .cx-explore-head .k{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--scene-accent)}
  .cx-explore-head .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--scene-ink);opacity:.6}
  .cx-pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
  .cx-pcard{position:relative;display:grid;align-content:end;gap:4px;min-height:132px;padding:16px 18px 16px;border:1px solid var(--ex-border);border-radius:0;overflow:hidden;background-size:cover;background-position:center;color:#F7F5F1;text-decoration:none;transition:opacity 1.4s var(--ease),transform 1.4s var(--ease),translate .9s var(--ease),border-color .6s ease,box-shadow .9s var(--ease)}
  .cx-pcard::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,4,.9) 0%,rgba(8,6,4,.62) 50%,rgba(8,6,4,.3) 100%);transition:background .6s ease}
  .cx-pcard:hover,.cx-pcard:focus-visible{translate:0 -5px;border-color:var(--ex-border-hi);box-shadow:0 24px 40px -24px var(--ex-shadow),0 0 26px var(--ex-halo)}
  .cx-pcard:active{translate:0 -2px}
  .cx-pcard:hover::before{background:linear-gradient(0deg,rgba(8,6,4,.92) 0%,rgba(8,6,4,.52) 50%,rgba(8,6,4,.2) 100%)}
  .cx-pcard .t{position:relative;font-family:var(--serif);font-weight:500;font-size:clamp(16px,1.3vw,19px);line-height:1.2;margin:0;text-shadow:0 1px 10px rgba(8,6,4,.6)}
  .cx-pcard .d{position:relative;font-family:var(--sans);font-weight:400;font-size:12px;line-height:1.45;opacity:.92;max-width:26ch;text-shadow:0 1px 8px rgba(8,6,4,.6)}
  .cx-pcard .arrow{position:relative;margin-top:2px;font-family:var(--mono);color:var(--gold-artifact-hi);transition:transform .4s var(--ease)}
  .cx-pcard:hover .arrow{transform:translateX(6px)}

  /* ---------- tablet / narrow laptop: same composition, 4-card rows go 2×2 ---------- */
  @media (min-width:861px) and (max-width:1180px){
    .cx-exrow-4,.cx-pcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  .cx-mobile-buy{display:none}

  /* ================= PHONE / SMALL TABLET (≤860px): PORTRAIT ROOMS =================
     Each room swaps to its own portrait artwork (841×1870, served via <picture> so a phone
     downloads only the portrait and a desktop only the landscape) and becomes ONE scene again:
     the artwork layer spans the whole section, and the copy + compact information rows are
     composed over it in three zones — introduction on the open upper wall, the room's subjects
     left clear in the middle, rows over the foreground.
     Sizing: the artwork is rendered at its NATIVE ratio, full width. Only if a room's content
     genuinely needs more height than that (small screens, larger text) does the scene grow —
     and then the artwork box grows with it, still at its native ratio, cropped evenly left/right
     around the room's focal point (--fx). site.js sets --scene-h to the smallest height that
     keeps the copy above --zone-text and the rows below --zone-rows (fractions of the scene
     height, measured from each portrait). Because the How To Buy video is positioned as
     percentages of that same artwork box, it stays inside the painted frame at any size.
     Superseded and removed: the sticky full-viewport crop of the landscape photos, and the
     separate marble layer behind How To Buy. */
  @media (max-width:860px){
    .cx-scene{display:block;overflow:clip;scroll-margin-top:0;--scene-h:222.4cqw}
    .cx-restaurant{--art-img:url(img/room-restaurant-m.webp)}
    .cx-spa{--art-img:url(img/room-spa-m.webp)}
    .cx-vault{--art-img:url(img/room-vault-m.webp)}
    .cx-howto{--art-img:url(img/room-howtobuy-m.webp)}
    .cx-restaurant{--zone-text:.37;--zone-rows:.685;--fx:.55}
    .cx-spa{--zone-text:.355;--zone-rows:.585;--fx:.5}
    .cx-vault{--zone-text:.33;--zone-rows:.645;--fx:.58}
    .cx-howto{--zone-text:.268;--zone-rows:.482;--fx:.5}
    .cx-scene-visual{position:absolute;top:0;height:var(--scene-h);width:calc(var(--scene-h) * 841 / 1870);left:calc((100% - var(--scene-h) * 841 / 1870) * var(--fx));overflow:visible;z-index:0;pointer-events:none}
    .cx-media,.cx-media img{width:100%;height:100%}
    .cx-media img{object-fit:cover}
    .cx-media picture{display:contents}
    .cx-scene-content{position:relative;z-index:2;display:flex;flex-direction:column;min-height:var(--scene-h);gap:0;
      padding:calc(var(--m-bar,64px) + 22px + env(safe-area-inset-top,0px)) 0 calc(22px + env(safe-area-inset-bottom,0px))}

    /* UPPER ZONE — label, editorial heading, short kicker, clear action. The long paragraph stays
       on desktop; on a phone its points live in the rows' detail sheets (Scarcity / Digital Gold,
       The Vibe, Store of Value / Ownership, the four steps). */
    .cx-textbox{margin:0;width:auto;min-width:0;max-width:30rem;padding:0 var(--gutter);gap:10px}
    /* the steps may rise only to just below the painted frame (its outer edge sits at ~46.6% of the
       artwork), never over the video */
    .cx-howto .cx-textbox{align-content:start;min-height:calc(var(--scene-h) * .474 - var(--m-bar,64px) - 22px - env(safe-area-inset-top,0px))}
    /* that reserved space passes taps through to the video and carries no scrim over it */
    .cx-howto .cx-textbox{pointer-events:none}
    .cx-howto .cx-textbox>*{pointer-events:auto}
    .cx-howto .cx-textbox::before{display:none}
    .cx-howto .cx-textbox .label,.cx-howto .cx-textbox .engrave,.cx-howto .cx-textbox .cx-kicker{text-shadow:0 1px 12px rgba(250,247,241,.95)}
    .cx-textbox .cx-copy{display:none}
    .cx-textbox::before{inset:-16% -12% -18% -14%;background:radial-gradient(closest-side,rgba(250,247,241,.62),rgba(250,247,241,.4) 60%,rgba(250,247,241,0))}
    .cx-vault .cx-textbox::before{background:radial-gradient(closest-side,rgba(10,7,4,.55),rgba(10,7,4,.3) 60%,rgba(10,7,4,0))}
    .cx-textbox .label{font-size:10.5px;letter-spacing:.22em;text-shadow:0 1px 8px rgba(250,247,241,.9)}
    .cx-vault .cx-textbox .label{text-shadow:0 1px 8px rgba(8,6,4,.9)}
    .cx-textbox .engrave{font-size:clamp(36px,11vw,48px);line-height:1.02;margin-top:2px}
    .cx-textbox .cx-kicker{font-size:11px;letter-spacing:.2em;line-height:1.55;max-width:26em;opacity:1}
    .cx-textbox .engrave,.cx-textbox .cx-kicker{text-shadow:0 1px 10px rgba(250,247,241,.75)}
    .cx-vault .cx-textbox .engrave,.cx-vault .cx-textbox .cx-kicker{text-shadow:0 1px 10px rgba(8,6,4,.8)}
    .cx-textbox>div.reveal{margin-top:6px}
    .cx-textbox .cta-primary,.cx-textbox .cta-outline{height:44px;padding:0 18px;padding-left:calc(18px + .22em);font-size:10.5px;letter-spacing:.2em}
    .cx-howto .cx-textbox>div.reveal{display:none}          /* its Buy action sits at the foot of the room instead */

    /* LOWER ZONE — compact translucent rows over the foreground */
    .cx-scene-details{margin-top:auto;gap:10px;padding:0 var(--gutter)}
    .cx-scene{--ex-bg:rgba(250,247,241,.62);--ex-bg-hi:rgba(250,247,241,.74);--ex-border:rgba(156,126,69,.42)}
    .cx-vault{--ex-bg:rgba(14,10,6,.56);--ex-bg-hi:rgba(14,10,6,.68);--ex-border:rgba(217,180,92,.36)}
    .cx-exrow{gap:7px;align-items:end}
    .cx-exrow-3,.cx-exrow-4{grid-template-columns:1fr}
    .cx-ex-card{animation:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);box-shadow:none}
    .cx-ex:hover .cx-ex-card,.cx-ex.open .cx-ex-card{transform:none}
    .cx-ex-glow{display:none}
    /* opened in place: the same row grows downward; a fine gold rule separates summary from detail */
    .cx-scene{--ex-open-bg:rgba(250,247,241,.84)}
    .cx-vault{--ex-open-bg:rgba(14,10,6,.8)}
    .cx-ex-more{padding:0 14px}
    .cx-ex-inner{margin-bottom:14px}
    .cx-ex-inner,.cx-ex.open .cx-ex-inner,.cx-vault .cx-ex.open .cx-ex-inner{background:none;border:0;border-top:1px solid var(--ex-border-hi)}
    .cx-ex-intro{margin:12px 0 10px;font-size:15px;line-height:1.6}
    .cx-ex-points{margin:0 0 14px;gap:9px}
    .cx-ex-points li{font-size:14px;line-height:1.55}
    .cx-ex-acts{margin:0;gap:10px 16px}
    .cx-ex-act,.cx-ex-link{min-height:44px}
    .cx-ex-head{grid-template-columns:auto minmax(0,1fr) auto;column-gap:13px;row-gap:1px;align-items:center;min-height:52px;padding:8px 12px 8px 13px}
    .cx-ex-head:active{transform:none;background:rgba(255,255,255,.12)}
    .cx-ex-top{display:contents}
    .cx-ex-n,.cx-ex-k{display:none}
    .cx-ex-ico{grid-column:1;grid-row:1/3;align-self:center;width:auto;height:auto;border:0}
    .cx-ex-ico svg{width:24px;height:24px}
    .cx-ex-t{grid-column:2;grid-row:1;font-size:16.5px;line-height:1.2}
    .cx-ex-d{grid-column:2;grid-row:2;font-size:12.5px;line-height:1.38;opacity:.9;max-width:none}
    .cx-ex-cue{grid-column:3;grid-row:1/3;align-self:stretch;width:auto;min-width:40px;height:auto;margin:-8px -12px -8px 0;border:0;border-left:1px solid var(--ex-border)}
    .cx-ex:hover .cx-ex-cue{transform:none}
    .cx-ex-cue::before,.cx-ex-cue::after{width:12px}
    /* How To Buy steps lead with their number, as on the board */
    .cx-howto .cx-ex-ico{display:none}
    .cx-howto .cx-ex-n{display:block;grid-column:1;grid-row:1/3;align-self:center;font-size:15px;letter-spacing:.04em;padding-right:12px;border-right:1px solid var(--ex-border);line-height:34px}
    .cx-details-label{margin-bottom:2px}
    .cx-details-label .k{font-size:10.5px}
    .cx-details-label .t{font-size:17px}
    .cx-details-label,.cx-explore-head{text-shadow:0 1px 8px rgba(250,247,241,.9)}

    /* Explore More: compact 2×2 of titled thumbnails, arrows (navigation, not "+") */
    .cx-explore{gap:7px;padding-top:10px;border-top-color:rgba(156,126,69,.35)}
    .cx-explore-head{flex-direction:row;align-items:baseline}
    .cx-pcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .cx-pcard{min-height:50px;padding:8px 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
    .cx-pcard .d{display:none}
    .cx-pcard .t{font-size:15.5px}
    .cx-pcard .arrow{margin:0}
    .cx-mobile-buy{display:block;margin-top:4px}
    .cx-mobile-buy .cta{display:flex;justify-content:center;align-items:center;gap:10px;height:48px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
      color:var(--btn-ink);background:var(--btn-bg);border:1px solid var(--btn-line);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);text-shadow:var(--btn-tshadow)}
    .cx-mobile-buy .cta:active{background:var(--btn-press)}
    .cx-mobile-buy .cta:focus-visible{outline:1px solid var(--btn-line-hi);outline-offset:4px}

    /* the tutorial inside the portrait's painted frame: its INNER opening, measured in the portrait
       asset (x 114–725, y 540–866 of 841×1870), as percentages of the same artwork box. Contain,
       not cover, so no instruction is cropped; the thin bars that leaves stay inside the frame. */
    .cx-howto .cx-video{left:13.56%;top:28.88%;width:72.77%;height:17.49%;border:0;pointer-events:auto}
    .cx-howto .cx-video video{object-fit:contain;background:#0b0907}
    .cx-howto .cx-scene-visual{pointer-events:none}
    .cx-howto .cx-scene-visual .cx-video{pointer-events:auto}
    .cx-vcaption .cx-vt{font-size:15px}
    .cx-vcaption .cx-vs{font-size:8px}
    .cx-vplay{width:16%;min-width:44px;max-width:54px}
    .cx-vbar{padding:0 4%;height:22%;min-height:34px;gap:4%}
    .cx-vbar button{min-width:30px;min-height:30px;justify-content:center}
    .cx-vbar button svg{width:13px;height:13px}
    .cx-vb-time{font-size:9px}
  }
  /* narrowest phones: step rows become number + title (their instructions open in the sheet), so
     How To Buy doesn't have to grow until its painted frame runs off the screen */
  @media (max-width:380px){
    .cx-howto .cx-ex-d{display:none}
    .cx-howto .cx-ex-head{min-height:46px}
    .cx-howto .cx-ex-t{grid-row:1/3;align-self:center}
  }
  /* tablets in portrait: same portrait scene, a two-up row grid where it breathes */
  @media (min-width:600px) and (max-width:860px){
    .cx-exrow-4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .cx-textbox{max-width:34rem}
    .cx-textbox .engrave{font-size:clamp(44px,7.4vw,58px)}
  }

  @media (prefers-reduced-motion:reduce){
    .cx-ex-card{animation:none;transition:background .2s ease,border-color .2s ease}
    .cx-ex:hover .cx-ex-card,.cx-ex:focus-within .cx-ex-card,.cx-ex.open .cx-ex-card{transform:none}
    .cx-ex-cue,.cx-ex-cue::before,.cx-ex-cue::after{transition:none}
    .cx-ex:hover .cx-ex-cue{transform:none}
    .cx-ex.cx-pulse .cx-ex-cue{animation:none}
    .cx-ex-more{transition:opacity .15s linear}
    .cx-pcard:hover,.cx-pcard:focus-visible{translate:none}
    .cx-ex-inner,.cx-ex-card{transition:none}
    .cx-media img{transform:none;transition:none}
  }

  /* ================= THE ROOMS =================
     Every section is a room of the same gallery: a frontal plate of wall + floor,
     with the exhibits, plaques and wall text as real HTML placed on the wall. */
  .room{position:relative;width:100%;overflow:hidden;background:var(--marble)}
  .room .plate{position:relative;width:100%;aspect-ratio:1344/752}
  .room .plate > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .room .plate::after{content:"";position:absolute;left:0;right:0;top:0;height:6%;background:linear-gradient(to bottom,var(--marble),transparent);pointer-events:none}
  .room .on{position:absolute}                              /* an element placed on the wall */
  /* wayfinding: every room label is the same object — mono, two lines, same size, tracking, leading and offset */
  .roomname{position:absolute;left:var(--gutter);top:8%;display:grid;gap:6px;z-index:3}
  /* on a dedicated page (story.html, tokenomics.html, …) this room is the very first thing in <main>
     — there's no hero above it the way there is on Home — so its own top edge loads flush with the
     viewport top, exactly where the fixed nav sits (64px tall). 8% of the plate only clears that once
     the plate itself is tall enough (roughly 800px+, i.e. wide-desktop); below that it doesn't, and at
     dedicated-page load — unlike mid-scroll on Home — there's no transient scroll past it to hide the
     overlap. max() keeps the existing 8% wherever it's already enough room, and only steps in below
     that floor, so nothing changes for Home or for a wide enough dedicated-page viewport. */
  main > .room:first-child .roomname{top:max(8%,calc(64px + 16px + env(safe-area-inset-top,0px)))}
  .roomname .n,.roomname .t{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;line-height:1.3}
  .roomname .n{color:var(--gold-interface)}
  .roomname .t{color:var(--ink)}
  .roomname.rn-flow{position:static;margin-bottom:26px}
  .reveal{opacity:0;transform:translateY(14px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
  .reveal.in{opacity:1;transform:none}

  /* engraved wall statement */
  .engrave{font-family:var(--serif);font-weight:500;color:var(--ink);letter-spacing:-.025em;line-height:1;margin:0;text-wrap:balance}
  .engrave i{font-style:italic}

  /* museum plaque */
  .plaque{display:grid;gap:6px;padding:12px 14px;background:rgba(251,250,247,.82);border:1px solid var(--line);backdrop-filter:blur(2px)}
  .plaque .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .plaque .t{font-family:var(--serif);font-weight:500;font-size:clamp(15px,1.25vw,19px);letter-spacing:-.01em;color:var(--ink);line-height:1.15}
  .plaque .d{font-family:var(--sans);font-weight:300;font-size:12px;line-height:1.55;color:var(--umber)}
  .plaque .m{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

  /* framed work on the wall */
  .framed{display:grid;gap:12px}
  .framed .frame{padding:1px;background:rgba(153,111,38,.6);box-shadow:0 28px 40px -28px rgba(23,19,15,.35)}
  .framed .mat{background:#FBFAF7;padding:clamp(8px,1vw,14px)}
  .framed img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
  .framed.sq img{aspect-ratio:1}
  .framed.land img{aspect-ratio:4/3}

  /* ---- Story gallery ---- */
  #story .plate{aspect-ratio:1672/941}
  #story .statement{left:27%;top:17%;width:46%;text-align:center;display:grid;justify-items:center;gap:10px}
  #story .statement .engrave{font-size:clamp(30px,4.2vw,68px)}
  #story .statement p{margin:0;font-size:clamp(12px,1vw,15px);line-height:1.7;color:var(--umber);max-width:48ch}
  /* "scarcer." — brushed champagne, restrained */
  .champ{background:linear-gradient(100deg,#A8894F 0%,#C8A767 38%,#D8C48E 52%,#C2A263 66%,#A8894F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  @supports not (background-clip:text){.champ{color:var(--gold-interface)}}
  /* exhibition annotations — museum captions: a hairline rule, a mono label, a serif line. No cards. */
  #story .note{display:grid;gap:9px;padding-top:12px;border-top:1px solid var(--line-strong);opacity:.94;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
  #story .note .k{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-interface);line-height:1.3}
  #story .note .t{font-family:var(--serif);font-weight:500;font-size:clamp(17px,1.65vw,26px);letter-spacing:-.015em;line-height:1.18;color:var(--ink);text-wrap:balance}
  #story .note:hover{opacity:1;transform:translateY(-2px);border-color:var(--gold-artifact)}
  #story .note.right{justify-items:end;text-align:right}
  #story .n1{left:27.5%;top:55.5%;width:19%}                 /* left lower wall */
  #story .n3{left:54%;top:55.5%;width:19%}                   /* right lower wall, mirrored */
  /* wall inscription — a quiet line engraved into the marble, spanning the composition just below
     the headline and above the supporting annotations */
  #story .inscription{left:12%;width:76%;top:44.5%;margin:0;text-align:center;white-space:nowrap;font-family:var(--mono);font-weight:500;font-size:clamp(8px,.78vw,13px);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-interface);opacity:.82;line-height:1.6;word-spacing:.14em;pointer-events:none}
  /* at tablet / narrow-laptop widths the statement paragraph above wraps onto a third line before its
     own clamp() floor can catch it (46%-of-plate columns get genuinely narrow here), which grows the
     statement block tall enough to reach this line. There's ample quiet marble between this line and
     the CAST ONCE / CULTURE ENDURES annotations below it, so it simply steps down slightly in this one
     tier rather than the two ever touching. */
  @media (max-width:1080px){ #story .inscription{top:48.5%} }
  /* the artifact: a wrapper over the sculpture, reserved for parallax / idle motion later (no motion in this pass) */
  #story .artifact{left:76%;top:34%;width:18%;height:52%;pointer-events:none}
  #story .artifact .obj{position:absolute;inset:0;transform:translate3d(var(--px,0),var(--py,0),0)}


  /* ---- The Archive: a curator's ledger raised on a tall marble plinth at the heart of the room —
     the signature interactive exhibit. Stacked vertically (pedestal above, signage below), like a
     floor-standing sculpture with its museum placard beneath it. ---- */
  #story .archive{left:37%;top:50.5%;width:26%;display:grid;grid-template-rows:auto auto;justify-items:center;justify-self:center;gap:14px;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;perspective:1600px}
  #story .archive .stand{position:relative;width:52%;aspect-ratio:1/1.5}
  /* the plinth: front + top faces read as one solid, tall volume beneath the book — a real pedestal,
     not a shelf */
  #story .archive .plinth{position:absolute;left:6%;right:6%;bottom:0;height:70%}
  #story .archive .p-top{position:absolute;left:0;right:0;bottom:88%;height:22%;transform-origin:50% 100%;transform:perspective(700px) rotateX(60deg);
      background:linear-gradient(155deg,#FCFAF5 0%,#F2ECDF 100%);box-shadow:inset 0 0 0 1px rgba(185,155,98,.24)}
  #story .archive .p-front{position:absolute;left:0;right:0;bottom:0;top:10%;background:linear-gradient(180deg,#F5F0E5 0%,#DED4C0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px rgba(185,155,98,.16),0 34px 40px -24px rgba(23,19,15,.52);transition:box-shadow var(--t-base) var(--ease)}
  #story .archive .p-front::before{content:"";position:absolute;left:11%;right:11%;top:9%;height:1px;background:var(--gold-structural);opacity:.55} /* plinth moulding line, upper */
  #story .archive .p-front::after{content:"";position:absolute;left:11%;right:11%;bottom:9%;height:1px;background:var(--gold-structural);opacity:.4} /* plinth moulding line, lower */
  #story .archive .p-plate{position:absolute;left:50%;top:46%;transform:translateX(-50%);width:52%;padding:6% 0;text-align:center;border:1px solid rgba(185,155,98,.45);background:rgba(251,250,247,.4)}
  #story .archive .p-plate span{display:block;font-family:var(--mono);font-weight:500;font-size:6.5px;letter-spacing:.24em;color:var(--gold-structural-deep)}
  #story .archive .plinth::after{content:"";position:absolute;left:4%;right:4%;top:100%;height:46%;background:linear-gradient(180deg,rgba(214,206,192,.42),transparent);transform:scaleY(.55);transform-origin:top} /* floor reflection */
  /* the tome: cover + a real page block giving it thickness, resting on the plinth top */
  #story .archive .tome{position:absolute;left:2%;right:2%;bottom:66%;height:26%;transform-origin:50% 100%;transform:perspective(700px) rotateX(50deg) translateZ(0);transition:transform var(--t-base) var(--ease),filter var(--t-base) var(--ease)}
  #story .archive .t-block{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#EFE8D8 0px,#F6F1E4 1.4px,#EFE8D8 2.8px);border-radius:1px 3px 3px 1px;box-shadow:0 2px 0 #E4DAC2,0 4px 0 #D9CDAF,0 6px 8px -3px rgba(23,19,15,.35)} /* fanned page edges, seen from above */
  #story .archive .t-cover{position:absolute;left:-2%;right:2%;top:-6%;bottom:6%;background:linear-gradient(100deg,#F8F3E8 0%,#FCFAF4 45%,#F3EDDF 100%);box-shadow:0 0 0 1px rgba(185,155,98,.5),inset 0 0 0 1px rgba(255,255,255,.55),0 3px 6px -2px rgba(23,19,15,.28);transition:box-shadow var(--t-base) var(--ease)}
  #story .archive .t-cover::before{content:"";position:absolute;left:12%;top:8%;bottom:8%;width:1px;background:rgba(185,155,98,.55)}   /* spine hinge */
  #story .archive .t-cover::after{content:"";position:absolute;left:18%;right:16%;top:30%;height:1px;background:var(--gold-structural);opacity:.8} /* blind-tooled rule */
  #story .archive .t-mark{position:absolute;right:15%;bottom:10%;width:19%;height:auto;opacity:.6;filter:sepia(1) saturate(2.4) hue-rotate(-6deg) brightness(.92)}
  #story .archive .t-cover i{position:absolute;left:18%;bottom:14%;text-align:left;font:500 6.5px/1 var(--mono);letter-spacing:.24em;color:var(--gold-structural-deep);font-style:normal}
  /* signage beneath the pedestal — a museum placard, not a caption glued to a photo */
  #story .archive .cap{display:grid;gap:7px;padding-top:12px;border-top:1px solid var(--line-strong);width:auto;justify-items:center;transition:border-color var(--t-fast) var(--ease)}
  #story .archive .cap .k{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-interface);line-height:1.3}
  #story .archive .cap .t{font-family:var(--serif);font-weight:500;font-size:clamp(16px,1.4vw,22px);letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
  #story .archive .cap .o{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);transition:color var(--t-fast) var(--ease)}
  #story .archive:hover .tome{transform:perspective(700px) rotateX(50deg) translateY(-5%) translateZ(7px)}
  #story .archive:hover .t-cover{box-shadow:0 0 0 1.5px var(--gold-artifact),inset 0 0 0 1px rgba(255,255,255,.6),0 6px 12px -3px rgba(23,19,15,.32)}
  #story .archive:hover .p-front{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px rgba(200,167,103,.4),0 34px 40px -24px rgba(23,19,15,.52)} /* subtle gold edge brightening on the plinth itself */
  #story .archive:hover .cap{border-color:var(--gold-artifact)}
  #story .archive:hover .cap .o{color:var(--gold-interface)}
  #story .archive:active .tome{transition-duration:.15s}
  #story .archive.opening .stand{opacity:0;transition:opacity .38s var(--ease) .1s}

  /* the flying volume: a FLIP clone that grows from the closed tome to the opened ledger */
  #arc-fly{position:fixed;z-index:59;background:linear-gradient(100deg,#F8F3E8 0%,#FCFAF4 45%,#F3EDDF 100%);box-shadow:0 0 0 1px rgba(185,155,98,.5),0 40px 70px -30px rgba(23,19,15,.45);opacity:0;pointer-events:none;will-change:transform,opacity;transition:transform .68s cubic-bezier(.2,.75,.24,1),opacity .3s ease}
  #arc-fly.go{opacity:1}
  #arc-fly.fade{opacity:0;transition:opacity .32s ease}

  /* the archive, opened: a lightbox presentation of the ledger's spreads */
  #ledger{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(16px,4vw,48px);background:rgba(247,245,241,.88);backdrop-filter:blur(14px) saturate(.9);opacity:0;visibility:hidden;transition:opacity var(--t-slow) var(--ease),visibility 0s linear var(--t-slow)}
  #ledger.open{opacity:1;visibility:visible;transition:opacity var(--t-slow) var(--ease),visibility 0s}
  #ledger .book{position:relative;width:min(1180px,100%);aspect-ratio:1180/640;display:grid;grid-template-columns:1fr 1fr;
      background:linear-gradient(90deg,#F5F0E6 0%,#F8F4EC 49.4%,#E7E0D2 49.9%,#E7E0D2 50.1%,#F8F4EC 50.6%,#F5F0E6 100%);
      box-shadow:0 60px 90px -50px rgba(23,19,15,.5),0 0 0 1px rgba(185,155,98,.45),0 0 0 4px #F9F6F0,0 0 0 5px rgba(185,155,98,.32);
      transform:translateY(18px) scale(.985);opacity:0;transition:transform var(--t-slow) var(--ease),opacity .3s ease}
  #ledger.open .book{transform:none}
  #ledger .book.show{opacity:1}
  @media (prefers-reduced-motion:reduce){ #ledger .book{opacity:1} }
  #ledger .page{position:relative;padding:clamp(28px,4.2vw,64px) clamp(28px,4.4vw,68px);display:grid;align-content:start;gap:18px;overflow:hidden}
  #ledger .page.l{padding-right:clamp(24px,3.4vw,54px);grid-template-rows:auto 1fr auto;padding-bottom:clamp(64px,7vw,110px)}
  #ledger .page.r{padding-left:clamp(24px,3.4vw,54px)}
  #ledger .page::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(23,19,15,.05),transparent 14%)}
  #ledger .page.l::before{background:linear-gradient(270deg,rgba(23,19,15,.06),transparent 14%)}
  #ledger .folio{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-interface);display:flex;justify-content:space-between}
  #ledger .folio span:last-child{color:var(--mute)}
  #ledger .page.l .h{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.6vw,56px);letter-spacing:-.025em;line-height:1.02;color:var(--ink);margin:0;align-self:end;text-wrap:balance}
  #ledger .page.l .h i{font-style:italic}
  #ledger .page.l .sub{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--umber);margin-top:6px}
  #ledger .page.r .body{font-family:var(--sans);font-weight:300;font-size:clamp(13px,1.05vw,16px);line-height:1.75;color:var(--umber);max-width:42ch;display:grid;gap:14px}
  #ledger .page.r .body p{margin:0}
  #ledger .page.r .body strong{font-weight:500;color:var(--ink)}
  #ledger .page.r .body .rule{height:1px;background:var(--line-strong);width:44px;margin:4px 0}
  #ledger .page.r .body .fig{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.2vw,34px);letter-spacing:-.02em;color:var(--ink);line-height:1.1}
  #ledger .page.r .body .fig small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-interface);margin-top:8px}
  #ledger .spread{display:contents}

  /* the page-turn: a flap the size of one page, hinged at the spine, rotating over it in 3D */
  #ledger .flap{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;pointer-events:none;z-index:6;transition:transform .92s cubic-bezier(.4,.08,.2,1)}
  #ledger .flap .face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:linear-gradient(90deg,#F5F0E6,#F8F4EC)}
  #ledger .flap .face .page{position:absolute;inset:0;padding:clamp(28px,4.2vw,64px) clamp(28px,4.4vw,68px)}
  #ledger .flap.next{left:50%;transform-origin:0% 50%;transform:rotateY(0deg);box-shadow:-18px 0 40px -20px rgba(23,19,15,.3)}
  #ledger .flap.next .back{transform:rotateY(180deg)}
  #ledger .flap.next.go{transform:rotateY(-180deg)}
  #ledger .flap.prev{left:0;transform-origin:100% 50%;transform:rotateY(0deg);box-shadow:18px 0 40px -20px rgba(23,19,15,.3)}
  #ledger .flap.prev .back{transform:rotateY(-180deg)}
  #ledger .flap.prev.go{transform:rotateY(180deg)}
  #ledger .flap .sheen{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,19,15,.14),transparent 30%,transparent 70%,rgba(23,19,15,.1));opacity:0;transition:opacity .92s ease}
  #ledger .flap.go .sheen{opacity:1}
  #ledger .ctl{position:absolute;left:clamp(28px,4.4vw,68px);right:clamp(28px,4.4vw,68px);bottom:clamp(18px,2.4vw,34px);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--umber)}
  #ledger .ctl button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--umber);padding:8px 0;border-bottom:1px solid transparent;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
  #ledger .ctl button:hover{color:var(--gold-interface);border-color:var(--gold-interface)}
  #ledger .ctl button[disabled]{opacity:.3;pointer-events:none}
  #ledger .ctl .cnt{color:var(--mute)}
  #ledger .close{position:absolute;top:calc(clamp(16px,4vw,48px) - 4px);right:clamp(16px,4vw,48px);font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--umber);padding:10px 0;border-bottom:1px solid var(--line-strong);transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
  #ledger .close:hover{color:var(--gold-interface);border-color:var(--gold-interface)}
  #ledger .colophon{position:absolute;left:0;right:0;bottom:calc(clamp(16px,4vw,48px) - 6px);text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
  body.ledger-open{overflow:hidden}

  /* ---- The Reserve exhibition (pedestals) ---- */
  #tokenomics .plate{aspect-ratio:1672/941}
  /* the title is engraved into the rear marble panel (panel spans ~28%–71.5% × 4%–57% of the plate,
     centered — the new composition is fully symmetrical, so the title sits on true page-centre).
     Raised slightly from the original mapping to free up the mid-wall for the reserve meter below. */
  #tokenomics .walltitle{left:29%;width:42%;top:12%;display:grid;gap:18px;justify-items:center;text-align:center;pointer-events:none}
  #tokenomics .walltitle .t{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.2vw,68px);letter-spacing:-.025em;line-height:1;color:var(--ink);margin:0}
  #tokenomics .walltitle .t i{font-style:italic}
  #tokenomics .walltitle .s{font-family:var(--mono);font-weight:500;font-size:clamp(9px,.78vw,11px);letter-spacing:.24em;text-transform:uppercase;color:var(--umber)}
  /* the reserve meter: built as a small reserve *track* in the same visual language as the Roadmap
     rail (thin gold line + gold nodes) rather than a generic progress bar — a marker node sits at the
     available-supply position along a total-supply track, exactly like a season sitting on the rail. */
  /* the room's photograph (.plate) scales as one piece — full-bleed width, aspect-ratio height — so
     everything positioned as a % of it already tracks its size at any viewport. The one thing that
     didn't, here, was this block's own type: several of the lines below were set in fixed px, so as
     the plate itself shrunk at in-between (tablet/narrow-laptop) widths, this block kept its full
     pixel height while the pedestal cards beneath it (positioned as a % of the same plate) moved
     proportionally closer — the two would eventually collide. Every size in this block now tracks
     the plate the same way the rest of the room's type already does (clamp floor…vw…design ceiling,
     the ceiling matching the original fixed value exactly, so nothing changes at the design width). */
  #tokenomics .wallmeter{left:29%;width:42%;top:28.5%;display:grid;gap:clamp(5px,.6vw,8px);transition:opacity .5s var(--ease)}
  /* at tablet / narrow-laptop widths the room is still the full desktop composition (mobile's own
     purpose-built stacked layout doesn't start until 860px) — but the photograph itself has shrunk
     enough that, even at comfortably-legible type, this block's full four-line reading no longer
     leaves the pedestal cards below it their designed clearance, and the two boxes would collide.
     Dropping the two quietest lines (the "currently in the pool" detail sentence and the pool-status
     caption — already the bottom two tiers of this block's own stated hierarchy) recovers exactly
     that room, without touching the two figures that matter most (amount remaining, pool %), which
     stay put at every width. Both quiet lines return at 1081px+, where there's space for them again,
     and in mobile's own vertical flow below 861px, where space is no longer a constraint at all. */
  @media (min-width:861px) and (max-width:1080px){
    #tokenomics .wallmeter .wm-sub,#tokenomics .wallmeter .wm-note{display:none}
    #tokenomics .wallmeter{gap:4px}
    #tokenomics .wallmeter .wm-track{height:9px}
  }
  /* an open exhibit floats up into this same column — rather than collide, the meter steps back */
  #tokenomics.has-expanded .wallmeter{opacity:.1}
  #tokenomics .wallmeter .wm-top{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  #tokenomics .wallmeter .wm-label{font-family:var(--mono);font-weight:500;font-size:clamp(8.5px,.78vw,10.5px);line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:var(--umber)}
  #tokenomics .wallmeter .wm-top .m{font-size:clamp(7.5px,.65vw,9px);line-height:1.3;letter-spacing:.14em}
  #tokenomics .wallmeter .wm-track{position:relative;width:100%;height:12px;box-sizing:border-box;margin:0 auto;padding:0 6px}
  /* the inactive remainder reads as faint, warm gold — never neutral grey — so the whole line stays
     one material (a marble inlay dimmed vs. lit), not a bar-chart track with a gold overlay on it */
  #tokenomics .wallmeter .wm-line{position:absolute;left:0;right:0;top:50%;height:1px;transform:translateY(-50%);background:rgba(111,102,94,.26)}
  /* a plain left-to-right scale: 0% at the left end, 100% at the right */
  #tokenomics .wallmeter .wm-scale{width:100%;display:flex;align-items:center;gap:clamp(6px,.6vw,10px)}
  #tokenomics .wallmeter .wm-scale .wm-track{flex:1 1 auto;width:auto;margin:0;padding:0}
  #tokenomics .wallmeter .wm-end{flex:none;font-family:var(--mono);font-weight:500;font-size:clamp(6.5px,.56vw,8px);line-height:1;letter-spacing:.08em;color:var(--mute)}
  /* no reading yet: no fill and no end node at all — an empty bar must never read as "0% remaining" */
  #tokenomics .wallmeter.is-empty .wm-fill,#tokenomics .wallmeter.is-empty .wm-marker{display:none}
  /* the active (absorbed) portion — thin, warm gold. overflow:hidden keeps the travelling light and
     everything else strictly inside this element's own box: it cannot drift onto the inactive line,
     the track padding, or the wall beyond it. */
  #tokenomics .wallmeter .wm-fill{position:absolute;left:0;top:50%;height:2px;width:0;transform:translateY(-50%);border-radius:2px;overflow:hidden;
    background:linear-gradient(90deg,#C8A767,#A8894F);box-shadow:0 0 4px rgba(212,180,106,.4)}
  /* the travelling light: a narrow, soft highlight confined to the fill's own box by overflow:hidden
     above. One slow pass left→right, timed to arrive at the end node just as it beats (see wmarrive
     below — both animations share the same 6.4s clock so they stay in lockstep), then a quiet pause
     before the whole sequence resets. This replaces the old edge-to-edge "sweep", whose transform was
     computed against its own tiny width and could travel well past the visible bar. */
  #tokenomics .wallmeter .wm-fill::after{content:"";position:absolute;top:0;bottom:0;left:-22%;width:22%;
    background:linear-gradient(90deg,transparent,rgba(255,250,235,.8),transparent);
    animation:wmtravel 6.4s cubic-bezier(.45,.05,.55,.95) infinite}
  @keyframes wmtravel{
    0%{left:-22%}
    54%{left:100%}
    100%{left:100%}
  }
  /* small reference nodes along the track — quiet markers of the full range, echoing the roadmap rail */
  #tokenomics .wallmeter .wm-tick{position:absolute;top:50%;width:4px;height:4px;border-radius:50%;transform:translate(-50%,-50%);
    background:rgba(247,245,241,.9);box-shadow:inset 0 0 0 1px rgba(111,102,94,.38)}
  /* the end node: styled like the roadmap's current-season node, but its glow is deliberately tighter
     (smaller blur, smaller ring) so nothing spills past the meter's own thin footprint. It sits calm
     until the travelling light arrives (~54% of the shared 6.4s clock), gives one restrained two-beat
     "heartbeat", then settles again — never a continuous pulse. */
  #tokenomics .wallmeter .wm-marker{position:absolute;top:50%;left:0;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%) scale(1);
    background:radial-gradient(circle at 35% 30%,#FFF9E8,var(--gold-artifact) 45%,var(--gold-interface-deep) 100%);
    box-shadow:0 0 0 4px rgba(217,180,92,.16),0 0 8px rgba(217,180,92,.5);
    animation:wmheartbeat 6.4s cubic-bezier(.45,.05,.55,.95) infinite}
  #tokenomics .wallmeter .wm-marker::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(217,180,92,.4);opacity:0;
    animation:wmring 6.4s cubic-bezier(.45,.05,.55,.95) infinite}
  @keyframes wmheartbeat{
    0%,52%{transform:translate(-50%,-50%) scale(1)}
    55%{transform:translate(-50%,-50%) scale(1.22)}
    58%{transform:translate(-50%,-50%) scale(1)}
    61%{transform:translate(-50%,-50%) scale(1.14)}
    65%,100%{transform:translate(-50%,-50%) scale(1)}
  }
  @keyframes wmring{
    0%,52%{transform:scale(.8);opacity:0}
    58%{transform:scale(1.35);opacity:.55}
    68%{transform:scale(1.9);opacity:0}
    100%{transform:scale(.8);opacity:0}
  }
  #tokenomics .wallmeter .wm-bottom{width:100%;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
  #tokenomics .wallmeter .wm-stat{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
  /* hierarchy, strongest to quietest: the amount remaining (largest, ink serif) — its share of total
     supply (gold, clearly second) — the one-line explanation (wm-sub) — the fluctuation note (wm-note). */
  #tokenomics .wallmeter .wm-stat-main b{font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.72vw,27px);line-height:1;color:var(--ink);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
  #tokenomics .wallmeter .wm-stat span{font-family:var(--mono);font-weight:500;font-size:clamp(7px,.62vw,8.5px);line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--umber)}
  #tokenomics .wallmeter .wm-stat-main span{letter-spacing:.2em;color:var(--gold-interface-deep)}
  #tokenomics .wallmeter .wm-stat-pct b{color:var(--gold-interface-deep);font-family:var(--mono);font-weight:500;font-size:clamp(9.5px,.86vw,12.5px);line-height:1.3;letter-spacing:.04em;font-variant-numeric:tabular-nums}
  #tokenomics .wallmeter .wm-sub{width:100%;font-family:var(--mono);font-size:clamp(6.8px,.62vw,8.5px);line-height:1.35;letter-spacing:.06em;color:var(--umber);opacity:.85;text-align:center}
  #tokenomics .wallmeter .wm-sub b{color:var(--umber);font-weight:500;letter-spacing:0}
  #tokenomics .wallmeter .wm-note{width:100%;font-family:var(--mono);font-size:clamp(6.5px,.58vw,8px);line-height:1.3;letter-spacing:.1em;color:var(--mute);opacity:.9;text-align:center}
  @media (prefers-reduced-motion:reduce){ #tokenomics .wallmeter .wm-fill::after,#tokenomics .wallmeter .wm-marker,#tokenomics .wallmeter .wm-marker::after{animation:none} }
  /* a pedestal: an invisible hit area over the marble block; its exhibit card floats above it */
  .ped{position:absolute;display:block;cursor:default;text-align:center;border:0;background:none;padding:0;font:inherit;color:inherit}
  #tokenomics .ped2,#tokenomics .ped3,#tokenomics .ped4{cursor:pointer}
  /* the pedestal and its floating metric are one exhibit: the anchor sizes to the pedestal's own
     footprint so hit-testing and focus stay put, while the metric card is an anchored overlay that
     can grow on click without shifting anything else in the room. */
  .ped .exhibit{position:absolute;left:4%;right:4%;bottom:calc(100% + 1.8%);transform-origin:50% 100%;transition:transform .9s var(--ease),left .6s var(--ease),right .6s var(--ease);will-change:transform}
  .ped.expanded{z-index:5}
  .ped.expanded .exhibit{left:-42px;right:-42px}
  .ped .card{display:grid;gap:3px;justify-items:center;padding:8px 8px 9px;
    background:rgba(250,247,241,.3);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(185,155,98,.42);
    box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 22px -16px rgba(23,19,15,.18);
    transition:box-shadow .9s var(--ease),border-color .9s,background .9s;animation:drift var(--dur,7s) ease-in-out var(--delay,0s) infinite}
  @keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  .ped .card .k{font-family:var(--mono);font-weight:500;font-size:clamp(7.5px,.62vw,9.5px);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 8px rgba(250,247,241,.7)}
  .ped .card .v{font-family:var(--serif);font-weight:500;font-size:clamp(15px,1.5vw,25px);letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;text-shadow:0 1px 10px rgba(250,247,241,.75)}
  .ped .card .v.mono{font-family:var(--mono);font-weight:500;font-size:clamp(9.5px,.86vw,13px);letter-spacing:.08em;line-height:1.3;color:var(--ink);padding:3px 0 1px}
  #tokenomics .ped5 .card{padding:9px 10px 10px;gap:4px}
  .ped .card .m{font-family:var(--mono);font-size:clamp(7px,.56vw,8.5px);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-shadow:0 1px 6px rgba(250,247,241,.6)}
  .ped .glow{position:absolute;inset:-8% -10%;pointer-events:none;opacity:0;transition:opacity 1s var(--ease);
    background:radial-gradient(60% 70% at 50% 55%,rgba(212,180,106,.36),rgba(212,180,106,.12) 55%,transparent 75%);mix-blend-mode:multiply}
  .ped:hover .exhibit,.ped:focus-visible .exhibit,.ped.lit .exhibit{transform:translateY(-6px) scale(1.06)}
  .ped:hover .card,.ped:focus-visible .card,.ped.lit .card{background:rgba(250,247,241,.48);border-color:var(--gold-interface);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 22px 40px -20px var(--line-strong),0 0 0 1px rgba(200,167,103,.3),0 0 26px rgba(212,180,106,.28)}
  .ped:hover .glow,.ped:focus-visible .glow,.ped.lit .glow{opacity:1}
  .ped:hover .card .k,.ped.lit .card .k{color:var(--gold-deep)}
  .ped.copy{cursor:pointer}
  /* museum-style expansion: a second, longer label that unfurls beneath the card on click — not a modal */
  .ped .detail{justify-self:stretch;width:100%;box-sizing:border-box;max-height:0;opacity:0;overflow:hidden;margin-top:0;padding:0 10px;background:rgba(250,247,241,.94);border:1px solid transparent;
    font-family:var(--sans);font-weight:300;font-size:11px;line-height:1.55;color:var(--umber);text-align:left;
    transition:max-height .6s var(--ease),opacity .5s var(--ease),margin-top .6s var(--ease),padding .6s var(--ease),border-color .5s}
  .ped.expanded .detail{max-height:160px;opacity:1;margin-top:8px;padding:10px 10px 11px;border-color:var(--line-strong)}
  /* one status line per metric, never two competing indicators: a leading dot plus
     "LIVE · DEXSCREENER [· UPDATED …]" or "RECORDED · [DATE]" — color and motion carry the difference */
  .ped .card .m.status::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:middle}
  .ped .card .m.status.is-live{color:var(--gold-interface)}
  .ped .card .m.status.is-live::before{animation:pulse 2.4s ease-in-out infinite}
  /* placement: hit areas traced from the new symmetrical plate (percent of 1672×941). All four
     pedestals share the same footprint (width/height/top) — only their x position differs — so the
     row reads as evenly distributed and mathematically balanced, matching the architecture itself. */
  /* re-traced against the actual photographed cube fronts (not just an even mathematical spread):
     the two outer pedestals sit further inward than the room's symmetry suggests, so ped2/ped5 are
     re-centred on their real cube (23.5%/76.5%) rather than the evenly-spaced approximation used
     previously, which had visibly drifted them toward the side niches. Middle two were already
     accurate and are unchanged. */
  #tokenomics .ped2{left:17.1%;top:57.5%;width:12.8%;height:21%;--delay:0s;--dur:7.2s}
  #tokenomics .ped3{left:34%;top:57.5%;width:12.8%;height:21%;--delay:-2.1s;--dur:8.1s}
  #tokenomics .ped4{left:52.4%;top:57.5%;width:12.8%;height:21%;--delay:-4.4s;--dur:7.6s}
  #tokenomics .ped5{left:70.1%;top:57.5%;width:12.8%;height:21%;--delay:-1.3s;--dur:8.6s}
  #tokenomics .acts{position:absolute;left:var(--gutter);bottom:5%;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  #tokenomics .acts .btn{backdrop-filter:blur(3px)}
  #tokenomics .acts .sep{width:1px;height:18px;background:var(--line);margin:0 4px}
  @media (prefers-reduced-motion:reduce){.ped .card{animation:none}}

  /* ---- The Chart Room: the live market as a recessed wall display ---- */
  #chart{background:var(--marble)}
  #chart .wrap{padding:clamp(56px,8vh,110px) var(--gutter)}
  #chart .head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;margin-bottom:34px}
  #chart .head .engrave{font-size:clamp(28px,3.4vw,52px)}
  /* the recess: a shallow niche cut into the wall, with a champagne-gold frame around the glass */
  #chart .niche{padding:clamp(14px,1.6vw,26px);background:linear-gradient(180deg,#EDE8DF,#F1EDE6);box-shadow:inset 0 2px 6px rgba(23,19,15,.08),inset 0 -1px 0 rgba(255,255,255,.7)}
  #chart .frame{position:relative;padding:6px;background:linear-gradient(160deg,#D9C58F,#C8A767 40%,#A77B32 100%);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -1px 0 var(--line) inset,0 22px 40px -26px rgba(23,19,15,.35)}
  #chart .frame::before{content:"";position:absolute;inset:2px;border:1px solid rgba(255,250,240,.45);pointer-events:none;z-index:3}
  #chart .frame .glass{position:relative;aspect-ratio:16/8;background:#FBFAF7;overflow:hidden}
  #chart iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity 1.2s var(--ease);z-index:2}
  #chart .glass.live iframe{opacity:1}
  #chart .fallback{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:24px;
    background:linear-gradient(160deg,#F7F4EE,#EEE9E0)}
  #chart .fallback .t{font-family:var(--serif);font-weight:500;font-size:clamp(18px,1.8vw,26px);letter-spacing:-.015em;color:var(--ink)}
  #chart .fallback .l{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber)}
  #chart .fallback a{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line-strong);padding-bottom:3px;transition:color .5s,border-color .5s}
  #chart .fallback a:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
  #chart .glass.live .fallback{display:none}
  /* the plaque beneath the display */
  #chart .plate-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}
  #chart .wallplaque{display:grid;gap:5px;padding:12px 16px;background:rgba(251,250,247,.85);border:1px solid var(--line)}
  #chart .wallplaque .t{font-family:var(--serif);font-weight:500;font-size:clamp(16px,1.4vw,20px);letter-spacing:-.01em;color:var(--ink)}
  #chart .wallplaque .m{font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
  #chart .wallplaque .m i{font-style:normal;display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:middle;animation:pulse 3s ease-in-out infinite}
  #chart .open{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:8px 0;border-bottom:1px solid var(--line-strong);transition:color .5s,border-color .5s}
  #chart .open:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
  /* the compact record: shown in place of the full recessed display when the live feed can't be reached —
     the framed niche should never sit on screen mostly empty. */
  #chart .niche{display:none}
  #chart.has-live .niche{display:block}
  #chart .compact{display:grid;justify-items:center;text-align:center;gap:16px;padding:clamp(40px,6vh,64px) var(--gutter);background:linear-gradient(160deg,#F7F4EE,#EEE9E0);border:1px solid var(--line)}
  #chart.has-live .compact{display:none}
  #chart .compact .mk{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--umber)}
  #chart .compact .mk i{font-style:normal;display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mute)}
  #chart .compact .t{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2vw,28px);letter-spacing:-.015em;color:var(--ink)}
  #chart .compact .figs{display:flex;gap:clamp(22px,3vw,44px);flex-wrap:wrap;justify-content:center;padding-top:4px}
  #chart .compact .figs div{display:grid;gap:4px}
  #chart .compact .figs .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
  #chart .compact .figs .v{font-family:var(--serif);font-weight:500;font-size:clamp(16px,1.5vw,20px);color:var(--ink)}
  #chart .compact a{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line-strong);padding-bottom:3px;transition:color .5s,border-color .5s}
  #chart .compact a:hover{color:var(--gold-deep);border-color:var(--gold-deep)}

  /* ---- The Screening Room (how to buy) ---- */
  #howto{background:var(--marble-2)}
  #howto .wrap{padding:clamp(56px,8vh,110px) var(--gutter);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:start}
  #howto .screen{border:1px solid var(--line-strong);padding:1px;background:#FBFAF7;box-shadow:0 40px 60px -40px rgba(23,19,15,.35)}
  #howto .screen .glass{position:relative;aspect-ratio:16/9;background:linear-gradient(160deg,#F4F1EC,#E9E4DB);display:grid;place-items:center;overflow:hidden}
  #howto .screen video,#howto .screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;background:#F4F1EC}
  #howto .screen video::-webkit-media-controls{display:none!important}
  #howto .screen .soundctl{position:absolute;right:14px;bottom:12px;display:flex;align-items:center;gap:9px;
    padding:8px 12px;background:rgba(251,250,247,.82);border:1px solid var(--line-strong);opacity:0;transition:opacity .6s,background .6s}
  #howto .screen:hover .soundctl,#howto .screen .soundctl:focus-within,#howto .screen .soundctl.is-on{opacity:1}
  #howto .screen .soundctl:hover{background:var(--gold-pale)}
  #howto .screen .soundbtn{font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
  /* a thin gold-on-champagne track, no default OS chrome — matches the interface's restrained-metal language */
  #howto .screen .volslider{-webkit-appearance:none;appearance:none;width:0;opacity:0;height:2px;background:transparent;
    transition:width .35s var(--ease),opacity .3s var(--ease),margin .35s var(--ease);cursor:pointer;vertical-align:middle}
  #howto .screen .soundctl.is-on .volslider,#howto .screen:hover .volslider,#howto .screen .soundctl:focus-within .volslider{width:64px;opacity:1}
  #howto .screen .volslider::-webkit-slider-runnable-track{height:2px;background:var(--line-strong);border-radius:1px}
  #howto .screen .volslider::-moz-range-track{height:2px;background:var(--line-strong);border-radius:1px}
  #howto .screen .volslider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:-3.5px;box-shadow:0 0 0 2px rgba(251,250,247,.9)}
  #howto .screen .volslider::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(251,250,247,.9)}
  #howto .screen .poster{display:grid;gap:12px;justify-items:center;text-align:center}
  #howto .screen .poster .ring{width:64px;height:64px;border:1px solid rgba(153,111,38,.7);border-radius:50%;display:grid;place-items:center}
  #howto .screen .poster .ring i{display:block;width:0;height:0;border-left:14px solid var(--gold);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
  #howto .side{display:grid;gap:22px}
  #howto .side .engrave{font-size:clamp(28px,3.2vw,50px)}
  #howto .steps{display:grid;border-top:1px solid var(--line)}
  #howto .step{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
  #howto .step .n{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;color:var(--gold)}
  #howto .step .t{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.015em;color:var(--ink)}
  #howto .step p{margin:4px 0 0;font-size:13px;line-height:1.6;color:var(--umber)}
  #howto .acts{display:flex;gap:12px;flex-wrap:wrap}

  /* ---- Room 03 · Roadmap: four seasons on the gold timeline ---- */
  #roadmap .plate{aspect-ratio:1672/941}
  #roadmap .walltitle{left:19.25%;width:61.4%;top:9.5%;display:grid;gap:12px;justify-items:center;text-align:center;pointer-events:none}
  #roadmap .walltitle .t{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.7vw,42px);letter-spacing:-.025em;line-height:1;color:var(--ink);margin:0}
  #roadmap .walltitle .t i{font-style:italic}
  #roadmap .walltitle .s{font-family:var(--mono);font-weight:500;font-size:clamp(8.5px,.78vw,10.5px);letter-spacing:.24em;text-transform:uppercase;color:var(--umber)}
  /* activation layer drawn exactly over the plate's line and nodes (line y 31.88%; nodes x 19.25 / 39.74 / 60.11 / 80.68) */
  #roadmap .rail{left:19.25%;width:61.43%;top:31.88%;height:0;pointer-events:none}
  #roadmap .rail .seg{position:absolute;top:-1px;height:2px;background:linear-gradient(90deg,#D9C58F,#C8A767 50%,#D9C58F);transform-origin:left;transform:scaleX(0);box-shadow:0 0 6px rgba(212,180,106,.55)}
  #roadmap .rail .seg.s1{left:0;width:33.35%}#roadmap .rail .seg.s2{left:33.35%;width:33.15%}#roadmap .rail .seg.s3{left:66.5%;width:33.5%}
  #roadmap .node{position:absolute;top:0;width:1.55vw;height:1.55vw;max-width:26px;max-height:26px;min-width:14px;min-height:14px;transform:translate(-50%,-50%) scale(0);border-radius:50%;
    background:radial-gradient(circle at 35% 30%,rgba(255,246,220,.9),rgba(212,180,106,.45) 50%,rgba(167,123,50,0) 100%);mix-blend-mode:screen;
    animation:breathe 5.5s ease-in-out infinite;animation-play-state:paused;transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
  #roadmap .node.n1{left:0}#roadmap .node.n2{left:33.35%}#roadmap .node.n3{left:66.5%}#roadmap .node.n4{left:100%}
  @keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(212,180,106,.45),0 0 14px rgba(212,180,106,.35)}50%{box-shadow:0 0 0 6px rgba(212,180,106,0),0 0 24px rgba(212,180,106,.6)}}
  #roadmap .node.hot{transform:translate(-50%,-50%) scale(1.22)!important;box-shadow:0 0 0 7px rgba(212,180,106,.18),0 0 26px rgba(212,180,106,.7)!important;animation-play-state:paused}
  /* progression state — structured so a later status change only edits GOLDINU_ROADMAP, not this markup.
     current: filled artifact gold, brighter light. upcoming: a quieter outlined ring. completed (future):
     reserved here for when a season's segment can be shown fully gold. */
  #roadmap .node.st-current{background:radial-gradient(circle at 35% 30%,#FFF9E8,var(--gold-artifact) 45%,var(--gold-interface-deep) 100%);box-shadow:0 0 0 5px rgba(217,180,92,.22),0 0 20px rgba(217,180,92,.55)}
  #roadmap .node.st-upcoming{background:radial-gradient(circle at 35% 30%,rgba(255,246,220,.35),rgba(212,180,106,.16) 60%,transparent 100%);box-shadow:inset 0 0 0 1px rgba(185,155,98,.55)}
  #roadmap .node.st-completed{background:radial-gradient(circle at 35% 30%,#FFF6DC,var(--gold-artifact) 55%,var(--gold-interface-deep))}
  #roadmap .rail .seg.st-completed{background:linear-gradient(90deg,var(--gold-artifact),var(--gold-interface) 50%,var(--gold-artifact));opacity:1}
  #roadmap .rail .seg.st-upcoming{opacity:.55}
  #roadmap .season .current-tag{display:none;font-family:var(--mono);font-weight:500;font-size:clamp(6.5px,.5vw,8px);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-artifact);margin-top:2px}
  #roadmap .season.st-current .current-tag{display:block}
  #roadmap .season.st-upcoming .above .t{color:var(--umber);transition:color .6s var(--ease)}
  #roadmap .season.st-upcoming.hot .above .t,#roadmap .season.st-upcoming.selected .above .t{color:var(--ink)}
  /* the whole season region is one selectable exhibit — visible focus + pointer, not just the dot */
  #roadmap .hit{cursor:pointer;border-radius:2px}
  #roadmap .hit:focus-visible{outline:1px solid var(--gold-interface);outline-offset:3px}
  #roadmap.hover .season.selected:not(.hot){opacity:.75}
  #roadmap .season.selected .above{transform:translateY(-3px)}
  /* the four seasons: museum information around each node */
  .season{position:absolute;width:15.4%;top:41.5%;transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .season .above{position:absolute;left:0;right:0;bottom:calc(100% + 14.6cqh);display:grid;gap:3px;text-align:center;justify-items:center;transition:transform .9s var(--ease)}
  .season .n{font-family:var(--mono);font-weight:500;font-size:clamp(7.5px,.58vw,9px);letter-spacing:.24em;text-transform:uppercase;color:rgba(167,123,50,.85)}
  .season .t{font-family:var(--serif);font-weight:500;font-size:clamp(15px,1.45vw,24px);letter-spacing:-.02em;line-height:1;color:var(--ink)}
  .season .g{font-family:var(--mono);font-weight:500;font-size:clamp(7.5px,.58vw,9px);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:1px}
  .season .below{display:grid;gap:10px;text-align:center;justify-items:center}
  .season .line{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(12px,1vw,16px);letter-spacing:-.01em;color:var(--ink);line-height:1.2;min-height:2.4em;display:grid;align-content:end}
  .season ul{margin:0;padding:0 4%;list-style:none;display:grid;gap:4px;text-align:left;width:100%}
  .season li{font-family:var(--sans);font-weight:400;font-size:clamp(9px,.7vw,11.5px);line-height:1.4;color:var(--umber);padding-left:12px;position:relative}
  .season li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:1px;background:var(--gold)}
  #roadmap .s1{left:11.55%}#roadmap .s2{left:32.04%}#roadmap .s3{left:52.41%}#roadmap .s4{left:72.98%}
  #roadmap .hit{position:absolute;top:18%;height:70%;width:20.4%;cursor:default;background:none;border:0;padding:0}
  #roadmap .h1{left:9.05%}#roadmap .h2{left:29.54%}#roadmap .h3{left:49.91%}#roadmap .h4{left:70.48%}
  #roadmap.hover .season{opacity:.4}
  #roadmap.hover .season.hot{opacity:1;transform:translateY(-3px)}
  #roadmap.hover .season.hot .above{transform:translateY(-3px)}
  #roadmap .chapters{left:19.25%;width:61.4%;top:78%;text-align:center;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--umber)}
  #roadmap .note{position:absolute;left:var(--gutter);bottom:4%;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
  #roadmap .plate{container-type:size}
  /* mobile: a vertical timeline in the same language */
  #roadmap .vtl{display:none}

  /* ---- chapter activation: node tension, gold firework burst, Season Chamber (desktop only; see mobile note above) ---- */
  @keyframes nodeTension{
    0%{transform:translate(-50%,-50%) scale(1.22)}
    35%{transform:translate(-50%,-50%) scale(1.1)}
    50%{transform:translate(-52%,-49%) scale(1.3)}
    65%{transform:translate(-48%,-51%) scale(1.16)}
    100%{transform:translate(-50%,-50%) scale(1.22)}
  }
  #roadmap .node.tension{animation:nodeTension .3s cubic-bezier(.45,.05,.35,1) both}
  #roadmap .node.ignite{background:radial-gradient(circle at 40% 35%,#FFFFFF,#FFF3CE 35%,var(--gold-artifact) 70%)!important;box-shadow:0 0 0 14px rgba(255,246,222,.35),0 0 60px rgba(255,235,180,.95)!important;transition:box-shadow .1s,background .1s}

  /* the fine gold dust / firework canvas — self-cleaning, only ever active during a transition or while a Chamber is open */
  #rmParticles{position:fixed;inset:0;z-index:71;pointer-events:none;opacity:0;transition:opacity .2s linear}
  #rmParticles.on{opacity:1}

  /* ---- the Season Chamber: a deeper room inside the same institution, not a card layout ---- */
  #roadmap-showcase{position:fixed;inset:0;z-index:68;opacity:0;visibility:hidden;overflow-y:auto;
    background:
      radial-gradient(60% 50% at 22% 20%,var(--glow,rgba(224,186,124,.24)),rgba(247,245,241,0) 62%),
      radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.9),rgba(247,245,241,0) 55%),
      radial-gradient(140% 100% at 84% 100%,rgba(232,215,180,.32),rgba(247,245,241,0) 60%),
      linear-gradient(180deg,#FBF9F5,#F3F0E9 45%,#EFEBE2);
    transition:opacity .5s var(--ease);}
  #roadmap-showcase.open{opacity:1;visibility:visible}
  #roadmap-showcase::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    background:
      radial-gradient(120% 90% at 50% 10%,rgba(0,0,0,0) 40%,rgba(23,19,15,.1) 100%),
      radial-gradient(90% 70% at 50% 100%,rgba(23,19,15,.08),transparent 60%),
      var(--tint,transparent);
    mix-blend-mode:multiply}
  /* a whisper of marble grain so the chamber reads as stone, not a flat fill */
  #roadmap-showcase-grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")}
  /* barely-visible wall divisions + brass architectural lines, fixed to the viewport like real walls */
  #roadmap-showcase .sc-walls{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.7;
    background-image:
      linear-gradient(90deg,rgba(167,123,50,.11) 0,rgba(167,123,50,.11) 1px,transparent 1px,transparent 33.33%),
      linear-gradient(90deg,transparent 66.66%,rgba(167,123,50,.11) 66.66%,rgba(167,123,50,.11) calc(66.66% + 1px),transparent calc(66.66% + 1px)),
      linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0) 30%);
    background-size:100% 100%,100% 100%,100% 220px;background-repeat:no-repeat}
  #roadmap-showcase.season-1{--tint:linear-gradient(155deg,rgba(224,186,124,.18),transparent 58%);--glow:rgba(230,170,90,.3)}
  #roadmap-showcase.season-2{--tint:linear-gradient(155deg,rgba(255,251,238,.26),transparent 52%);--glow:rgba(250,240,215,.28)}
  #roadmap-showcase.season-3{--tint:radial-gradient(130% 110% at 50% 0%,rgba(220,200,158,.15),transparent 68%);--glow:rgba(216,190,135,.26)}
  #roadmap-showcase.season-4{--tint:linear-gradient(180deg,rgba(150,122,74,.24),transparent 74%);--glow:rgba(180,140,80,.32)}
  #scParticles{position:fixed;inset:0;z-index:2;pointer-events:none}
  #roadmap-showcase .sc-wrap{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:clamp(70px,9vh,120px) var(--gutter) 120px}
  #roadmap-showcase .sc-return{position:fixed;top:26px;right:var(--gutter);z-index:4;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--umber);padding:10px 0;border-bottom:1px solid var(--line-strong);background:transparent;transition:color .4s,border-color .4s}
  #roadmap-showcase .sc-return:hover{color:var(--gold-interface);border-color:var(--gold-interface)}
  /* upper-left metadata block */
  #roadmap-showcase .sc-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  #roadmap-showcase .sc-num{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-interface)}
  #roadmap-showcase .sc-status{font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--line-strong);color:var(--umber)}
  #roadmap-showcase .sc-status.st-current{color:var(--gold-interface-deep);border-color:var(--gold-artifact);background:rgba(217,180,92,.14)}
  /* monumental headline, deliberately off-grid */
  #roadmap-showcase .sc-name{font-family:var(--serif);font-weight:500;font-size:clamp(56px,8.4vw,124px);letter-spacing:-.03em;line-height:.94;color:var(--ink);margin:16px 0 0}
  #roadmap-showcase .sc-line{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(19px,2vw,26px);color:var(--umber);line-height:1.35;margin:26px 0 0;max-width:34ch}
  #roadmap-showcase .sc-vision{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-top:34px;padding-top:16px;border-top:1px solid var(--line-strong);display:inline-block}
  #roadmap-showcase .sc-vision b{color:var(--gold-interface-deep);font-weight:500}
  #roadmap-showcase .sc-vision em{display:block;font-style:normal;font-size:9px;letter-spacing:.16em;color:var(--mute);margin-top:5px}
  /* the chapter-objective progress track: 01—02—03… tiny gold markers, data-driven */
  #roadmap-showcase .sc-progress{display:flex;align-items:center;gap:0;margin-top:46px;flex-wrap:wrap}
  #roadmap-showcase .sc-pm{display:flex;align-items:center;gap:9px}
  #roadmap-showcase .sc-pm .d{width:7px;height:7px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;flex:none;transition:all .3s var(--ease)}
  #roadmap-showcase .sc-pm.is-completed .d{background:var(--gold-artifact);border-color:var(--gold-artifact)}
  #roadmap-showcase .sc-pm.is-progress .d{background:var(--gold-interface);border-color:var(--gold-interface);box-shadow:0 0 0 4px rgba(217,180,92,.28)}
  #roadmap-showcase .sc-pm .lbl{font-family:var(--mono);font-weight:500;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);max-width:11ch}
  #roadmap-showcase .sc-pm.is-completed .lbl,#roadmap-showcase .sc-pm.is-progress .lbl{color:var(--umber)}
  #roadmap-showcase .sc-pm-line{width:20px;height:1px;background:var(--line-strong);margin:0 9px}
  /* three exhibition areas, architectural / asymmetric — not cards */
  #roadmap-showcase .sc-halls{margin-top:min(14vh,120px);display:grid;grid-template-columns:.85fr 1.1fr 1fr;gap:0}
  #roadmap-showcase .hall{position:relative;padding:0 clamp(20px,3vw,44px) 10px 0;border-left:1px solid var(--line-strong)}
  #roadmap-showcase .hall:first-child{border-left:0;padding-left:0}
  #roadmap-showcase .hall:nth-child(2){padding-top:clamp(30px,6vh,64px)}
  #roadmap-showcase .hall:nth-child(3){padding-top:clamp(60px,11vh,110px)}
  #roadmap-showcase .hall .hn{font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin:0 0 4px;padding-left:20px}
  #roadmap-showcase .hall .hl{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-interface);margin:0 0 22px;padding-left:20px;position:relative}
  #roadmap-showcase .hall .hl::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:1px;background:var(--gold-interface)}
  #roadmap-showcase .hall ul{margin:0;padding:0 0 0 20px;list-style:none;display:grid;gap:12px}
  #roadmap-showcase .hall li{font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.55;color:var(--umber);padding-left:15px;position:relative}
  #roadmap-showcase .hall li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:1px;background:var(--gold)}
  #roadmap-showcase .hall.progression li.is-done{color:var(--ink)}
  #roadmap-showcase .hall.progression li.is-done::before{background:var(--gold-artifact)}
  #roadmap-showcase .hall .sc-empty{font-family:var(--sans);font-weight:300;font-style:italic;font-size:13px;color:var(--mute);padding-left:20px}
  @media (max-width:1180px){ #roadmap-showcase .sc-halls{grid-template-columns:1fr;gap:44px}
    #roadmap-showcase .hall{border-left:0;padding-left:0!important;padding-top:0!important;border-top:1px solid var(--line-strong);padding-top:28px!important} }
  /* the roadmap room itself, ready to fade back for the reveal */
  #roadmap .plate,#roadmap .vtl{transition:opacity .4s var(--ease),transform .4s var(--ease)}
  #roadmap.leaving .plate{opacity:0;transform:scale(.985)}
  @media (prefers-reduced-motion:reduce){
    #roadmap .rail .seg{transform:none}#roadmap .node{transform:translate(-50%,-50%) scale(1);animation:none}
    #roadmap .node.tension{animation:none}
    #roadmap .plate,#roadmap-showcase{transition:opacity .01s linear}
    #rmParticles,#scParticles{display:none!important}
  }

  /* ---- Room 04 · Community: the living gallery ---- */
  #community .plate{aspect-ratio:1672/941}
  #community .plate > img{object-position:center}
  /* the approved static frame stays underneath as the permanent fallback — the video is a layer of
     motion on top of it, opacity 0 until it can actually play, so a slow connection, a decode error,
     or reduced-motion never produces anything but that same approved image. */
  .room .plate > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
    transition:opacity 1.2s var(--ease);pointer-events:none}
  .room .plate > video.is-ready{opacity:1}
  #community .plate > video{object-position:center}
  @media (prefers-reduced-motion:reduce){ .room .plate > video{display:none} }
  /* the text sits directly on the marble, mid-left and vertically centered in the room — no card,
     just a very soft, localized ivory glow feathered well past the type on every side, so it reads
     as light on the floor rather than a panel laid over the scene. The video stays the dominant visual. */
  #community .panel{left:var(--gutter);top:50%;width:24%;transform:translateY(-50%);padding:clamp(22px,3vw,40px);display:grid;gap:9px;
    background:radial-gradient(ellipse 80% 85% at 34% 46%,rgba(250,247,241,.5),rgba(250,247,241,.16) 55%,transparent 78%);
    transition:transform .3s linear}
  #community .panel .t{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.05vw,33px);letter-spacing:-.025em;line-height:1;color:var(--ink);margin:0;text-shadow:0 1px 14px rgba(250,247,241,.9)}
  #community .panel .t i{font-style:italic}
  #community .panel .h2{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(13px,1.05vw,17px);letter-spacing:-.01em;color:var(--gold-deep);line-height:1.2;margin-top:2px;text-shadow:0 1px 12px rgba(250,247,241,.85)}
  #community .panel .rule{width:38px;height:1px;background:rgba(167,123,50,.6);margin:6px 0}
  /* museum directory: a full-width row of five substantial ivory plaques along the base of the room —
     a deliberate navigation element spanning the gallery, not a small centred group. The film stays the
     dominant, uninterrupted element above it. */
  .directory{left:var(--gutter);right:var(--gutter);bottom:3.4%;display:block}
  .directory .dir-note{position:absolute;left:0;right:0;bottom:100%;margin:0 0 12px;text-align:center;
    font-family:var(--sans);font-weight:400;font-size:clamp(11px,.8vw,13px);color:var(--umber);
    text-shadow:0 1px 10px rgba(250,247,241,.85),0 1px 20px rgba(250,247,241,.6)}
  .directory .dir-row{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.1vw,16px)}
  .directory a.card{display:flex;align-items:center;justify-content:center;gap:12px;padding:clamp(14px,1.5vw,19px) clamp(14px,1.8vw,22px);border-radius:2px;
    background:rgba(250,247,241,.88);border:1px solid rgba(167,123,50,.32);color:var(--ink);text-decoration:none;
    box-shadow:0 8px 26px -10px rgba(23,19,15,.32);transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
  .directory a.card:hover{background:rgba(250,247,241,.97);border-color:rgba(167,123,50,.55);transform:translateY(-1px)}
  .directory a.card .ic{width:clamp(17px,1.5vw,22px);height:clamp(17px,1.5vw,22px);flex:none;color:var(--gold-structural-deep);opacity:.82;
    transition:opacity .25s var(--ease),color .25s var(--ease)}
  .directory a.card:hover .ic{opacity:1;color:var(--gold-interface)}
  .directory a.card .t{font-family:var(--mono);font-weight:500;font-size:clamp(11px,.85vw,13.5px);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

  /* ---- The final wall ---- */
  #final{min-height:100svh;overflow-x:clip;display:grid;align-content:center;justify-items:center;text-align:center;gap:44px;padding:calc(120px + env(safe-area-inset-top,0px)) var(--gutter) calc(48px + env(safe-area-inset-bottom,0px));
    position:relative;background-color:#EFE8D9;background-image:url(img/gallery-wall.webp);background-size:cover;background-position:center top;background-repeat:no-repeat}
  #final > *{position:relative;z-index:1} /* keep the wordmark, collage and links above the wall image */
  #final .big{font-family:var(--serif);font-weight:500;font-size:clamp(72px,15vw,240px);line-height:.88;letter-spacing:-.035em;margin:0;color:var(--ink)}
  #final .dir{display:flex;gap:clamp(18px,3vw,48px);flex-wrap:wrap;justify-content:center}
  #final .dir a{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber);padding:6px 0;border-bottom:1px solid transparent;transition:color .5s,border-color .5s}
  #final .dir a:hover{color:var(--gold);border-color:var(--line-strong)}
  #final .rule{width:min(60vw,320px)}
  #final .disc{font-family:var(--sans);font-weight:300;font-size:12px;line-height:1.7;color:var(--mute);max-width:60ch;margin:0}
  #final .copy{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:30px}

  /* ---- The collector's board: the wordmark held at the centre of a private-museum hang, each
     piece with generous air around it — nothing touches its neighbour. Two small pieces ease onto
     the wordmark's own corners, kept behind it. See footer.html's header comment for the
     MuseumFrame component contract (frame variant + plaque are opt-in per piece; position below). */
  #final .stage{position:relative;width:min(1500px,94vw);min-height:clamp(620px,58vw,880px);display:grid;place-items:center}
  #final .stage .big{position:relative;z-index:5;opacity:1;transform:none} /* .stage itself carries the .reveal fade now */
  #final .collage{position:absolute;inset:0;pointer-events:none}
  .meme{position:absolute;margin:0;pointer-events:auto;transform:rotate(var(--r,0deg));transition:transform .4s var(--ease),filter .4s var(--ease)}
  .meme:hover{transform:rotate(var(--r,0deg)) translateY(-3px) scale(1.015);z-index:20}

  /* ---- Museum frame: the physical molding is the supplied PNG frame art itself (img/frames/
     frame-ornate.png, frame-standard.png), applied as a CSS border-image — never a CSS-drawn
     approximation. border-image slices the source into a fixed 9-patch: the four carved corners
     are copied at native proportions and never stretched or distorted, only the straight edge
     runs stretch to fit each piece's own width/height, so the ornamental carving survives at any
     aspect ratio (landscape, portrait or square) with no forcing or cropping of the art beneath.
     .mat is a small even ivory reveal between the artwork and the molding — every piece gets a
     comfortable, consistent frame no matter what its own composition looks like, and the molding
     never crops into a subject. A drop-shadow filter (which follows the ring's actual alpha
     silhouette, not a rectangle) supplies the "frame sits proud of the wall" cast shadow. */
  .meme .frame{display:block;position:relative;line-height:0}
  .meme .frame .mat{display:block;background:#FAF6EC;padding:clamp(4px,.7vw,8px)}
  .meme .frame .art{display:block;width:100%;height:auto;object-fit:cover;-webkit-user-drag:none;user-select:none}
  .meme .frame .ring{position:absolute;inset:0;pointer-events:none;
    border-style:solid;border-color:transparent;border-image-outset:0;border-image-repeat:stretch;
    filter:drop-shadow(0 3px 7px rgba(20,14,8,.3)) drop-shadow(0 14px 22px rgba(18,13,8,.4))}
  .meme:hover .frame .ring{filter:drop-shadow(0 5px 10px rgba(15,10,6,.36)) drop-shadow(0 20px 32px rgba(15,10,6,.48))}

  /* frame A — the ornate asset (corner scrollwork + centre fleur accents), for feature pieces */
  .frame-a .ring{border-image-source:url(img/frames/frame-ornate.png);border-image-slice:108;border-image-width:clamp(22px,2.6vw,38px)}
  /* frame B — the standard asset (corner scrollwork only), for secondary pieces */
  .frame-b .ring{border-image-source:url(img/frames/frame-standard.png);border-image-slice:118;border-image-width:clamp(16px,1.9vw,26px)}
  /* frame C — the same standard asset at a lighter weight, for small/archival pieces */
  .frame-c .ring{border-image-source:url(img/frames/frame-standard.png);border-image-slice:118;border-image-width:clamp(11px,1.3vw,17px)}

  /* understated brass museum plaque — a handful of pieces only, kept physically separate from the
     frame itself (a small standalone plate below it, not part of the molding) */
  .meme .plaque{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);z-index:1;
    padding:3px 11px;border-radius:1px;white-space:nowrap;pointer-events:none;
    background:linear-gradient(180deg,#e9d29c,#b3894c);
    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -1px 0 rgba(40,26,10,.5) inset,0 3px 8px -3px rgba(20,14,8,.5),0 0 0 1px rgba(60,40,15,.5)}
  .meme .plaque span{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#3a2a12}

  /* placement — three deliberate sizes (feature / standard / archive), spread across the wall in
     an organic top/mid/bottom rhythm with a clear margin between every piece and its neighbours,
     almost no rotation (real museum frames hang straight); m4 and m5 are the two pieces allowed
     to ease onto the wordmark's own corners, kept behind it (z-index below .big's 5) */
  .m1 {left:-2%; top:-2%;  width:clamp(205px,14.2vw,270px); --r:-1.2deg; z-index:4}
  .m6 {left:67%; top:-3%;  width:clamp(195px,13.6vw,258px); --r:1.3deg;  z-index:4}
  .m13{left:36%; top:75%;  width:clamp(210px,14.6vw,275px); --r:-.8deg; z-index:4}

  .m9 {left:-1%; top:26%;  width:clamp(140px,9.8vw,178px);  --r:-.9deg;  z-index:3}
  .m12{left:90%; top:28%;  width:clamp(138px,9.6vw,175px);  --r:1deg;    z-index:3}
  .m3 {left:-1%; top:66%;  width:clamp(145px,10.1vw,182px); --r:1.1deg;  z-index:3}
  .m8 {left:82%; top:62%;  width:clamp(140px,9.8vw,178px);  --r:-1.4deg; z-index:3}

  .m10{left:16%; top:0%;   width:clamp(100px,7vw,125px);  --r:.8deg;   z-index:2}
  .m11{left:85%; top:4%;   width:clamp(98px,6.9vw,122px); --r:-.7deg;  z-index:2}
  .m2 {left:4%;  top:48%;  width:clamp(96px,6.7vw,118px); --r:-1.1deg; z-index:2}
  .m7 {left:90%; top:44%;  width:clamp(94px,6.6vw,115px); --r:1deg;    z-index:2}

  .m4 {left:20%; top:20%;  width:clamp(95px,6.7vw,120px); --r:-1deg;   z-index:1}
  .m5 {left:62%; top:60%;  width:clamp(95px,6.7vw,120px); --r:1.1deg;  z-index:1}
  @media (prefers-reduced-motion:reduce){ .meme,.meme .frame .ring{transition:none} }

  .room .flow{display:contents} .works,.bays{display:contents}
  /* phone-framing scaffolding — inert on desktop: the frame wrapper is transparent to layout, and the
     camera stops, pan control and tap cues exist only in the portrait framing (see MOBILE SYSTEM) */
  .room > .scene{display:contents}
  .room .stop,.room .pan-ctl,#roadmap .season .open-cue,#tokenomics .acts-m{display:none}
  /* the Roadmap's frame-level signage steps back with the room when a Season Chamber takes over */
  #roadmap.leaving > .roomname,#roadmap.leaving > .walltitle,#roadmap.leaving > .chapters,#roadmap.leaving > .note{opacity:0}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    #hero .wall > *{opacity:1}
    .reveal{opacity:1;transform:none}
  }

  /* ================= DEDICATED-PAGE EXPANSION AREAS =================
     A structured, honestly-labeled placeholder beneath each dedicated page's
     signature room — architecture only, per this pass's scope. No new copy is
     invented here beyond naming the topic areas the brief itself lists; this
     section is deliberately quiet next to the room above it. */
  .expansion{background:var(--marble-2);border-top:1px solid var(--line)}
  .expansion-wrap{max-width:760px;margin:0 auto;padding:clamp(64px,10vh,120px) var(--gutter);display:grid;gap:20px}
  .expansion .roomname{position:static;margin-bottom:6px}
  .expansion .engrave{font-size:clamp(28px,3.2vw,46px)}
  .expansion-note{margin:0;font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.75;color:var(--umber);max-width:56ch}
  .expansion-list{margin:8px 0 0;padding:18px 0 0;border-top:1px solid var(--line);list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
  .expansion-list li{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--umber);padding-left:18px;position:relative}
  .expansion-list li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--gold)}

  /* ================= LARGE-DESKTOP SAFETY CAPS =================
     The art-directed room plates already scale fluidly via aspect-ratio + %
     positioning, and typography already ceilings via clamp(); the one thing
     that can still overgrow on very wide monitors is unconstrained line-length
     in the plain reading columns (Story's statement, Screening's steps). */
  @media (min-width:1800px){
    #story .statement p{max-width:44ch}
    #howto .side{max-width:640px}
  }

  /* =============================================================================================
     MOBILE SYSTEM  (≤ 860px — phones and portrait tablets)
     ---------------------------------------------------------------------------------------------
     The desktop gallery is the source of truth. On a phone every gallery room is the same room seen
     through a portrait camera: the photograph stays whole, and every label, figure and exhibit stays
     ON the architecture as live HTML — nothing is moved underneath the image.

       ROOMS   camera frame (section) → stage (.plate, the photograph at its own proportions) →
               overlays positioned in the stage's percentages, the same coordinate system desktop
               uses. Per room: --r (frame height ÷ width) and --cam (the x-point the frame centres
               on). Rooms wider than a portrait frame pan along the wall with snap stops. Type and
               spacing inside a room are in --u (1% of frame height) so each composition scales as
               one piece. Frame-level signage (room label, pan control) holds its place in the frame.
       EDGES   --gutter for frame signage; --m-inline for the imageless sections (Live Market,
               Screening, expansion areas), widening to a centred 600px column on larger screens.
       TYPE    one scale by role for the imageless sections (h1, h2, h3, lead, body, label, meta).
       CHROME  one header (solid, identical on every page), and one overlay bar shared by the
               Archive and the Season Chamber — both 64px, same hairline, same safe-area handling.

     Desktop rules above are untouched; nothing in this block applies at 861px and wider.
     ============================================================================================= */
  :root{
    --m-inline:max(var(--gutter),calc((100% - 600px) / 2));
    --m-s1:6px; --m-s2:10px; --m-s3:16px; --m-s4:24px; --m-s5:32px; --m-s6:48px;
    --m-section:56px;
    --m-bar:64px;                                          /* header + overlay bars */
    --m-fs-h1:clamp(34px,9.6vw,46px);                      /* room headline */
    --m-fs-h2:clamp(26px,7vw,32px);                        /* chapter title (season name) */
    --m-fs-h3:19px;                                        /* item title (step, directory, note) */
    --m-fs-lead:clamp(17px,4.6vw,19px);                    /* italic serif lead line */
    --m-fs-fig:clamp(28px,7.8vw,34px);                     /* exhibited figure */
    --m-fs-body:15px; --m-fs-read:16px; --m-fs-small:14px;
    --m-fs-label:10.5px;                                   /* mono eyebrow / key */
    --m-fs-meta:9.5px;                                     /* mono status / caption */
    --m-lh-body:1.65;
  }

  @media (max-width:860px){

    /* ---------- base ---------- */
    html,body{overflow-x:clip}                             /* belt-and-braces; causes are fixed below */
    .btn{min-height:48px;padding:0 20px;padding-left:calc(20px + .22em)}
    .reveal{transform:translateY(10px)}

    /* ---------- header: one implementation, identical on every page ---------- */
    #nav,#nav.scrolled{background:rgba(247,245,241,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
    #nav{padding-left:var(--gutter);padding-right:var(--gutter)}
    #nav .row{grid-template-columns:1fr auto auto;gap:6px;height:var(--m-bar)}
    #nav .links{display:none}
    #nav .brand{gap:9px;min-height:44px}
    #nav .brand .emblem{width:24px;height:24px}
    #nav .brand .wordmark{font-size:20px}
    #nav .cta-group{gap:8px}
    #nav .navcta-ca{display:none}   /* mobile keeps one CA shortcut, in the directory drawer below, not a second one here */
    #nav .cta{min-width:0;min-height:44px;padding:0 12px;font-size:10.5px;letter-spacing:.18em}
    /* Home: the header floats over the rooms instead of sitting on an opaque ivory bar — a feathered
       scrim (blur + tint that fades to nothing, no line, no slab) keeps the logo/menu readable, and
       it follows the room behind it: ivory over the bright rooms, deep umber over the Vault. */
    body[data-page="home"] #nav,body[data-page="home"] #nav.scrolled{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
    body[data-page="home"] #nav::before{height:calc(100% + 26px);background:linear-gradient(to bottom,rgba(247,245,241,.84),rgba(247,245,241,.55) 55%,rgba(247,245,241,0));
      -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent);transition:background .35s ease}
    body[data-page="home"] #nav.theme-ondark::before{background:linear-gradient(to bottom,rgba(18,13,8,.84),rgba(18,13,8,.55) 55%,rgba(18,13,8,0))}
    body[data-page="home"] #nav.theme-ondark .brand .wordmark{color:rgba(247,245,241,.96);text-shadow:0 1px 10px rgba(10,8,6,.6)}
    body[data-page="home"] #nav.theme-ondark .burger i{background:#F7F5F1}
    body[data-page="home"] #nav.open::before{background:linear-gradient(to bottom,rgba(247,245,241,.96),rgba(247,245,241,.9) 60%,rgba(247,245,241,0))}
    body[data-page="home"] #nav.open .brand .wordmark{color:var(--ink);text-shadow:none}
    body[data-page="home"] #nav.open .burger i{background:var(--ink)}
    /* the sound control is part of the header row on phones (see .gvol below), so leave it a slot */
    #nav .cta-group{margin-right:42px}
    #nav .burger{display:block;width:44px;height:44px;margin-right:-10px}   /* lines sit on the gutter */
    /* the directory drawer shares the header's gutter and starts beneath its bar */
    #menu .menu-panel{padding-top:calc(var(--m-bar) + env(safe-area-inset-top,0px) + var(--m-s3))}
    #menu .menu-head{padding:0 var(--m-s4) var(--m-s3)}
    #menu a{padding:16px var(--m-s4);min-height:56px;align-items:center}
    #menu .menu-cta{margin:var(--m-s4) var(--m-s4) 0;justify-self:stretch}

    /* ---------- hero (Home): a portrait crop of the desktop composition ----------
       the full-resolution photograph (never the old 1000px phone file), framed a step further back
       than a full-bleed cover so the sculpture keeps its detail and more of the room is in view. The
       photograph runs from beneath the header and its floor fades into the marble of the page; the
       typography is mounted on the upper wall, above the sculpture, as on desktop's wall. */
    #hero .scene{aspect-ratio:auto;height:100svh;min-height:600px;
      --hero-h:calc(100% - var(--m-bar) - env(safe-area-inset-top,0px) - 9svh)}
    #hero .scene img{top:calc(var(--m-bar) + env(safe-area-inset-top,0px));bottom:auto;height:var(--hero-h);object-fit:cover;object-position:74% 50%;
      -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
    #hero .line-top{display:none}
    #hero .wall{left:var(--gutter);right:var(--gutter);max-width:none;bottom:auto;transform:none;
      top:calc(var(--m-bar) + env(safe-area-inset-top,0px) + 7svh);gap:clamp(10px,1.8svh,16px)}
    #hero .wall .mark{font-size:clamp(58px,16.5vw,100px)}
    #hero .wall .acts{margin-top:clamp(2px,1svh,8px)}

    /* ---------- the gallery rooms: a portrait camera in the same room ---------- */
    .room{--r:1.75;--cam:.5;--frame-top:0px;
      --scene-h:min(calc(100vw * var(--r)),max(560px,calc(100vh - var(--m-bar) - env(safe-area-inset-top,0px))));
      --u:calc(var(--scene-h) / 100);
      --stage-w:calc(var(--scene-h) * 1.7768);             /* the photographs are 1672 × 941 */
      position:relative;overflow:hidden;padding-top:var(--frame-top)}
    /* a dedicated page opens on its room: the frame starts beneath the header, never under it */
    main > .room:first-child{--frame-top:calc(var(--m-bar) + env(safe-area-inset-top,0px))}
    .room > .scene{display:block;position:relative;height:var(--scene-h);overflow:hidden}
    .room .plate{position:absolute;top:0;left:calc(50% - var(--cam) * var(--stage-w));width:var(--stage-w);height:100%;aspect-ratio:auto}
    .room .plate > img,.room .plate > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    /* a wall wider than the frame: the camera pans along it, settling on authored framings */
    .room[data-pan] > .scene{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .room[data-pan] > .scene::-webkit-scrollbar{display:none}
    .room[data-pan] .plate{position:relative;left:0}
    .room .stop{display:block;position:absolute;top:0;width:1px;height:100%;scroll-snap-align:center;scroll-snap-stop:always;pointer-events:none}
    /* frame signage: the room label stays in the frame's corner while the camera moves */
    .room > .roomname,main > .room:first-child > .roomname{top:calc(var(--frame-top) + var(--u) * 3.2);left:var(--gutter);z-index:4;gap:4px}
    .room > .roomname .n,.room > .roomname .t{font-size:10px}
    .room .pan-ctl:not([hidden]){display:grid;grid-template-columns:44px 1fr 44px;grid-template-rows:auto auto;align-items:center;column-gap:var(--m-s2);row-gap:7px;
      position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--u) * 1.7);z-index:4}
    .pan-ctl button{grid-row:1 / 3;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font-family:var(--mono);font-size:15px;line-height:1;color:var(--gold-interface-deep);
      border:1px solid var(--line-strong);background:rgba(250,247,241,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .3s,background .3s}
    .pan-ctl button:active{background:var(--gold-pale)}
    .pan-ctl button[disabled]{opacity:.28}
    .pan-ctl .pan-next{grid-column:3}
    .pan-ctl .pan-label{grid-column:2;text-align:center;font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 8px rgba(250,247,241,.9)}
    .pan-ctl .pan-dots{grid-column:2;display:flex;justify-content:center;gap:7px}
    .pan-ctl .pan-dots i{width:5px;height:5px;border-radius:50%;border:1px solid var(--gold-structural);transition:background .3s,transform .3s}
    .pan-ctl .pan-dots i.on{background:var(--gold-interface);border-color:var(--gold-interface);transform:scale(1.3)}

    /* ---------- Room 01 · Story — the marble back wall is the canvas ----------
       the frame holds the back wall and, to its right, the gold sculpture on its plinth. Every line
       of type is composed on the wall's visible face (x 52.9–75% of the photograph, centred on 64%):
       the statement centred at its head, the inscription beneath, the two annotations mirrored
       to its left and right edges as on desktop, and the Archive plinth on the floor below. */
    #story{--r:1.6;--cam:.705}
    #story .artifact{display:none}
    #story .statement{left:53.6%;top:9.2%;width:20.7%;justify-items:center;text-align:center;gap:calc(var(--u) * 1.9)}
    #story .statement .engrave{font-size:calc(var(--u) * 4.9);line-height:1.04}
    #story .statement p{font-size:calc(var(--u) * 2.05);line-height:1.6;max-width:none}
    #story .inscription{left:53.6%;top:43.6%;width:20.7%;white-space:normal;text-align:center;font-size:calc(var(--u) * 1.4);letter-spacing:.2em;line-height:1.6}
    #story .note{gap:calc(var(--u) * .9);padding-top:calc(var(--u) * 1.2)}
    #story .note .k{font-size:calc(var(--u) * 1.4);letter-spacing:.2em;white-space:nowrap}
    #story .note .t{font-size:calc(var(--u) * 2.05);line-height:1.25}
    #story .n1{left:53.5%;top:53.2%;width:10.2%;justify-items:start;text-align:left}
    #story .n3{left:64.3%;top:53.2%;width:10.2%;justify-items:end;text-align:right}
    /* the Archive plinth stands on the gallery floor, centred under the wall */
    #story .archive{left:54%;top:63.6%;width:20%;gap:calc(var(--u) * 1.2)}
    #story .archive .stand{width:calc(var(--u) * 13.5)}
    #story .archive .cap{padding-top:calc(var(--u) * 1.2);gap:calc(var(--u) * .6)}
    #story .archive .cap .k{font-size:calc(var(--u) * 1.4)}
    #story .archive .cap .t{font-size:calc(var(--u) * 2.2)}
    #story .archive .cap .o{font-size:calc(var(--u) * 1.25);color:var(--gold-interface)}

    /* ---------- The Archive, opened: an editorial page designed for a phone ---------- */
    #ledger{display:block;padding:0;overflow-y:auto;overscroll-behavior:contain;background:#F8F4EC;backdrop-filter:none;-webkit-backdrop-filter:none}
    #ledger .book{display:flex;flex-direction:column;width:100%;min-height:100%;aspect-ratio:auto;background:none;box-shadow:none;overflow:visible;
      padding:calc(var(--m-bar) + env(safe-area-inset-top,0px)) 0 calc(var(--m-bar) + env(safe-area-inset-bottom,0px))}
    /* the leaf sits in the middle of its page — short leaves are balanced, long ones simply scroll */
    #ledger .spread{display:grid;gap:var(--m-s4);margin-block:auto;padding:var(--m-s6) var(--m-inline)}
    #ledger .page,#ledger .page.l,#ledger .page.r{padding:0;gap:var(--m-s3);overflow:visible;grid-template-rows:none}
    #ledger .page::before,#ledger .page.l::before{display:none}
    #ledger .page.l .folio{font-size:var(--m-fs-label)}
    #ledger .page.l .folio span:last-child{display:none}           /* the bar already names the archive */
    #ledger .page.r .folio{display:none}                           /* the bottom bar already counts leaves */
    #ledger .page.l .h{margin:0;font-size:var(--m-fs-h1);line-height:1.04;align-self:start}
    #ledger .page.l .sub{margin:0;font-size:var(--m-fs-label);letter-spacing:.22em}
    #ledger .page.r{padding-top:var(--m-s4);border-top:1px solid var(--line-strong)}
    #ledger .page.r .body{max-width:none;font-size:var(--m-fs-read);line-height:1.72;gap:var(--m-s3)}
    #ledger .page.r .body .fig{font-size:var(--m-fs-fig)}
    #ledger .page.r .body .fig small{font-size:var(--m-fs-meta);line-height:1.6}
    #ledger .flap{display:none}
    /* the overlay bars — same height, surface, hairline and gutter as the site header */
    #ledger::before,#ledger::after{content:"";position:fixed;left:0;right:0;z-index:7;background:rgba(248,244,236,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
    #ledger::before{top:0;height:calc(var(--m-bar) + env(safe-area-inset-top,0px));box-shadow:0 1px 0 var(--line)}
    #ledger::after{bottom:0;height:calc(var(--m-bar) + env(safe-area-inset-bottom,0px));box-shadow:0 -1px 0 var(--line)}
    #ledger .colophon{position:fixed;left:var(--m-inline);right:auto;top:env(safe-area-inset-top,0px);bottom:auto;z-index:8;height:var(--m-bar);display:flex;align-items:center;
      font-size:var(--m-fs-label);letter-spacing:.24em;color:var(--gold-interface);text-align:left}
    #ledger .colophon .cx,#ledger .close .cx{display:none}
    #ledger .close{position:fixed;top:env(safe-area-inset-top,0px);right:var(--m-inline);z-index:8;height:var(--m-bar);display:flex;align-items:center;padding:0 0 0 var(--m-s3);border-bottom:0;font-size:var(--m-fs-label)}
    #ledger .close::after{content:"\2715";margin-left:10px;font-size:12px;letter-spacing:0}
    #ledger .ctl{position:fixed;left:var(--m-inline);right:var(--m-inline);bottom:env(safe-area-inset-bottom,0px);z-index:8;height:var(--m-bar);font-size:var(--m-fs-label)}
    #ledger .ctl button{min-height:48px;padding:0;border-bottom:0}
    #ledger .ctl .cnt{font-size:var(--m-fs-meta)}

    /* ---------- Room 02 · The Reserve — one centred composition ----------
       the frame holds the gold-framed back panel (title + supply meter engraved on it) over the two
       middle pedestals, whose plaques stay live and expandable. The outer two pedestals sit outside
       a portrait frame, so the floor carries their functions instead: FIXED SUPPLY raises that
       plaque above the floor, COPY CA copies the contract. */
    #tokenomics .walltitle{left:34%;width:32%;top:8.6%;gap:calc(var(--u) * 1.3)}
    #tokenomics .walltitle .t{font-size:calc(var(--u) * 5.8)}
    #tokenomics .walltitle .s{font-size:calc(var(--u) * 1.4);letter-spacing:.2em}
    #tokenomics .wallmeter{left:35.3%;width:29.4%;top:22.4%;gap:calc(var(--u) * .9)}
    #tokenomics .wallmeter .wm-label{font-size:calc(var(--u) * 1.4)}
    #tokenomics .wallmeter .wm-top .m{font-size:calc(var(--u) * 1.25)}
    #tokenomics .wallmeter .wm-track{height:calc(var(--u) * 2)}
    #tokenomics .wallmeter .wm-bottom{flex-direction:column;align-items:center;gap:calc(var(--u) * .5)}
    #tokenomics .wallmeter .wm-stat-main b{font-size:calc(var(--u) * 3.7)}
    #tokenomics .wallmeter .wm-stat span{font-size:calc(var(--u) * 1.2)}
    #tokenomics .wallmeter .wm-stat-pct b{font-size:calc(var(--u) * 1.8)}
    #tokenomics .wallmeter .wm-end{font-size:calc(var(--u) * 1.15)}
    #tokenomics .wallmeter .wm-scale{gap:calc(var(--u) * .8)}
    #tokenomics .wallmeter .wm-sub{font-size:calc(var(--u) * 1.45);line-height:1.45}
    #tokenomics .wallmeter .wm-note{font-size:calc(var(--u) * 1.25);line-height:1.45}
    /* the meter only steps back when a plaque actually rises over it */
    #tokenomics.has-expanded .wallmeter{opacity:1}
    #tokenomics:has(.ped3.expanded,.ped4.expanded) .wallmeter{opacity:.1}
    .ped .card{padding:calc(var(--u) * 1.1) calc(var(--u) * .7) calc(var(--u) * 1.2);gap:calc(var(--u) * .4)}
    .ped .card .k{font-size:calc(var(--u) * 1.3);letter-spacing:.16em}
    .ped .card .v{font-size:calc(var(--u) * 2.75)}
    .ped .card .v.mono{font-size:calc(var(--u) * 1.7);letter-spacing:.04em}
    .ped .card .m{font-size:calc(var(--u) * 1.1);letter-spacing:.12em}
    /* a tap opens the longer label within the plaque's own width, rising above its pedestal */
    .ped.expanded .exhibit{left:0;right:0}
    .ped .detail{margin:0;padding:0 calc(var(--u) * 1);font-size:calc(var(--u) * 1.65);line-height:1.5}
    .ped.expanded .detail{max-height:calc(var(--u) * 42);margin-top:calc(var(--u) * .8);padding:calc(var(--u) * 1.1) calc(var(--u) * 1)}
    #tokenomics .ped3 .card .k::after,#tokenomics .ped4 .card .k::after{content:" +";color:var(--gold-interface);letter-spacing:0}
    #tokenomics .ped.expanded .card .k::after{content:" \2212"}
    /* Fixed Supply: its pedestal is off-frame, so its plaque is raised from the floor in the centre
       of the room — the same plaque, the same unfurling label — only when asked for */
    #tokenomics .ped2{left:35.3%;width:29.4%;top:88.6%;height:1%;opacity:0;visibility:hidden;transform:translateY(8px);
      transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s linear .45s}
    #tokenomics .ped2.expanded{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s}
    #tokenomics .ped2 .card{background:rgba(251,250,247,.9);border-color:var(--gold-interface);animation:none}
    #tokenomics .ped2 .card .v{font-size:calc(var(--u) * 3.1)}
    #tokenomics .ped2 .detail{font-size:calc(var(--u) * 1.55)}
    #tokenomics .ped2 .exhibit{bottom:calc(100% + var(--u) * .8)}
    #tokenomics .ped2:hover .exhibit,#tokenomics .ped2:focus-visible .exhibit{transform:none}
    #tokenomics .ped5,#tokenomics > .acts{display:none}
    /* the floor actions */
    #tokenomics > .acts-m{display:grid;grid-template-columns:1fr 1fr;gap:var(--m-s2);position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--u) * 2.6);z-index:4}
    #tokenomics > .acts-m .btn{min-height:44px;padding:0 10px;padding-left:calc(10px + .22em);font-size:10px;letter-spacing:.2em;gap:8px;
      background:rgba(250,247,241,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
    #tokenomics > .acts-m .m-supply i{font-style:normal;font-size:13px;letter-spacing:0;line-height:1;transition:transform .4s var(--ease)}
    #tokenomics > .acts-m .m-supply[aria-expanded="true"]{background:rgba(243,235,220,.92);border-color:var(--gold-interface);color:var(--gold-interface-deep)}
    #tokenomics > .acts-m .m-supply[aria-expanded="true"] i{transform:rotate(45deg)}
    #tokenomics > .acts-m .ca.done{border-color:var(--gold-interface);background:rgba(243,235,220,.92);color:var(--gold-interface-deep)}

    /* ---------- Room 02 · Annex: Live Market ---------- */
    #chart .wrap{display:grid;gap:var(--m-s5);padding:var(--m-section) var(--m-inline)}
    #chart .head{grid-template-columns:1fr;margin:0}
    #chart .head .engrave{font-size:var(--m-fs-h1)}
    #chart .frame .glass{aspect-ratio:4/5}
    #chart .compact{gap:var(--m-s3);padding:var(--m-s5) 20px}
    #chart .compact .mk{flex-wrap:wrap;justify-content:center;font-size:var(--m-fs-meta);line-height:1.6}
    #chart .compact .t{font-size:var(--m-fs-h3)}
    #chart .compact .figs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m-s3);width:100%}
    #chart .compact .figs .k{font-size:var(--m-fs-meta)}
    #chart .compact .figs .v{font-size:var(--m-fs-h3)}
    #chart .compact a,#chart .open{font-size:var(--m-fs-label);line-height:1.6;padding:12px 0}
    #chart .plate-row{display:grid;grid-template-columns:1fr;gap:var(--m-s3);margin:0}
    #chart .wallplaque .m{font-size:var(--m-fs-meta);line-height:1.6}

    /* ---------- Room 02 · Screening: eyebrow → heading → film → steps → actions ---------- */
    #howto .wrap{display:flex;flex-direction:column;align-items:stretch;gap:var(--m-s5);padding:var(--m-section) var(--m-inline)}
    #howto .side{display:contents}
    #howto .side > .roomname{order:1;margin:0 0 calc(var(--m-s3) - var(--m-s5))}
    #howto .side > .engrave{order:2;font-size:var(--m-fs-h1)}
    #howto .screen{order:3}
    #howto .steps{order:4}
    #howto .side > .acts{order:5}
    #howto .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--m-s2)}
    #howto .step{grid-template-columns:32px 1fr;padding:var(--m-s3) 0}
    #howto .step .n{font-size:var(--m-fs-label);padding-top:4px}
    #howto .step .t{font-size:var(--m-fs-h3)}
    #howto .step p{font-size:var(--m-fs-small);line-height:1.6;margin-top:var(--m-s1)}
    #howto .screen .soundctl{opacity:1;right:10px;bottom:10px}   /* no hover on touch: always offered */
    #howto .screen .soundbtn{min-height:32px}

    /* ---------- Room 03 · Roadmap — the camera pans along the four-season wall ----------
       each stop frames one marble panel: its node on the baked gold line, the season named above
       it, its philosophy and objectives engraved below. Tapping a panel opens its Season Chamber
       through the same node ignition as desktop. */
    #roadmap .vtl{display:none}
    #roadmap .stop.st1{left:19.25%}
    #roadmap .stop.st2{left:39.74%}
    #roadmap .stop.st3{left:60.11%}
    #roadmap .stop.st4{left:80.68%}
    #roadmap > .walltitle{left:var(--gutter);right:var(--gutter);width:auto;top:calc(var(--frame-top) + var(--u) * 9.4);z-index:4;justify-items:center}
    #roadmap > .walltitle .t{font-size:calc(var(--u) * 3.05);white-space:nowrap}
    #roadmap .season{width:21%;top:41.5%}
    #roadmap .s1{left:8.75%}
    #roadmap .s2{left:29.24%}
    #roadmap .s3{left:49.61%}
    #roadmap .s4{left:70.18%}
    #roadmap .season .above{gap:calc(var(--u) * .5)}
    #roadmap .season .n{font-size:calc(var(--u) * 1.4)}
    #roadmap .season .t{font-size:calc(var(--u) * 3.8)}
    #roadmap .season .g{font-size:calc(var(--u) * 1.3)}
    #roadmap .season .current-tag{font-size:calc(var(--u) * 1.2)}
    #roadmap .season .below{gap:calc(var(--u) * 1.5)}
    #roadmap .season .line{font-size:calc(var(--u) * 2.3);min-height:0;line-height:1.25;text-wrap:balance}
    #roadmap .season ul{gap:calc(var(--u) * .55);padding:0 2%}
    #roadmap .season li{font-size:calc(var(--u) * 1.78);line-height:1.4;padding-left:calc(var(--u) * 1.7)}
    #roadmap .season .open-cue{display:inline-flex;align-items:center;gap:6px;margin-top:calc(var(--u) * .4);padding-bottom:3px;border-bottom:1px solid var(--line-strong);
      font-family:var(--mono);font-weight:500;font-size:calc(var(--u) * 1.4);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-interface)}
    #roadmap .season .open-cue::after{content:"\2192"}
    #roadmap .node{width:calc(var(--u) * 2.3);height:calc(var(--u) * 2.3);min-width:0;min-height:0;max-width:none;max-height:none}
    /* the framed season is lit; the panels the camera has moved past fall back into the wall */
    #roadmap .season{transition:opacity .5s var(--ease),transform .9s var(--ease)}
    #roadmap[data-at] .season,#roadmap.hover[data-at] .season.hot{opacity:.14}
    #roadmap[data-at="0"] .season.s1,#roadmap[data-at="1"] .season.s2,#roadmap[data-at="2"] .season.s3,#roadmap[data-at="3"] .season.s4{opacity:1}
    #roadmap > .chapters{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:calc(var(--u) * 14.2);z-index:4;font-size:calc(var(--u) * 1.4);letter-spacing:.2em}
    #roadmap > .note{left:var(--gutter);right:var(--gutter);bottom:calc(var(--u) * 9.4);z-index:4;text-align:center;font-size:calc(var(--u) * 1.2);letter-spacing:.14em;line-height:1.6}

    /* ---------- Season Chamber: same overlay bar as the Archive ---------- */
    #roadmap-showcase .sc-return{top:0;left:0;right:0;height:calc(var(--m-bar) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--m-inline) 0;
      display:flex;align-items:center;text-align:left;font-size:var(--m-fs-label);border-bottom:0;background:rgba(248,244,236,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);z-index:6}
    #roadmap-showcase .sc-wrap{padding:calc(var(--m-bar) + env(safe-area-inset-top,0px) + var(--m-s6)) var(--m-inline) calc(var(--m-section) + env(safe-area-inset-bottom,0px))}
    #roadmap-showcase .sc-num{font-size:var(--m-fs-label)}
    #roadmap-showcase .sc-status{font-size:var(--m-fs-meta)}
    #roadmap-showcase .sc-name{font-size:clamp(46px,13.4vw,72px);margin-top:var(--m-s3)}
    #roadmap-showcase .sc-line{font-size:var(--m-fs-lead);margin-top:var(--m-s3)}
    #roadmap-showcase .sc-vision{margin-top:var(--m-s5);font-size:var(--m-fs-label)}
    #roadmap-showcase .sc-vision em{font-size:var(--m-fs-meta)}
    #roadmap-showcase .sc-progress{margin-top:var(--m-s5);flex-wrap:nowrap}
    #roadmap-showcase .sc-pm{gap:6px}
    #roadmap-showcase .sc-pm-line{flex:1 1 auto;width:auto;min-width:6px;margin:0 6px}
    #roadmap-showcase .sc-pm .lbl{font-size:var(--m-fs-meta)}
    #roadmap-showcase .sc-halls{margin-top:var(--m-s6);gap:var(--m-s5)}
    #roadmap-showcase .hall{padding-top:var(--m-s4)!important}
    #roadmap-showcase .hall .hn,#roadmap-showcase .hall .hl,#roadmap-showcase .hall ul,#roadmap-showcase .hall .sc-empty{padding-left:0}
    #roadmap-showcase .hall .hl{padding-left:20px;margin-bottom:var(--m-s3);font-size:var(--m-fs-label)}
    #roadmap-showcase .hall .hn{font-size:var(--m-fs-meta)}
    #roadmap-showcase .hall li{font-size:var(--m-fs-body)}

    /* ---------- Room 04 · Community — one moving artwork ----------
       the film is the room. It fills the whole frame (cover), framed wider than the other rooms so the
       vitrine has breathing room and the guests and architecture carry the "living" gallery; the
       vitrine sits right of centre. Only the identity/title sits over the upper footage, on its own soft
       ivory halo — there is no panel, band, veil or blur anywhere over the film. A compact column of five
       small ivory plaques sits under the title, on the left — clear of the vitrine — so all five channels
       are visible at once with no horizontal scrolling. */
    #community{--r:1.25;--cam:.44}
    #community > .roomname{top:calc(var(--frame-top) + var(--u) * 4.2);padding:0;margin:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
    #community > .roomname .n,#community > .roomname .t,#community > .panel .t,#community > .panel .h2{
      text-shadow:0 0 1px rgba(247,245,241,.9),0 0 3px rgba(247,245,241,.85),0 1px 12px rgba(247,245,241,.9),0 0 26px rgba(247,245,241,.65)}
    #community > .panel{left:var(--gutter);right:auto;width:min(66%,280px);top:calc(var(--frame-top) + var(--u) * 12.6);bottom:auto;z-index:4;transform:none!important;
      padding:0;gap:6px;background:none;pointer-events:none}
    #community > .panel .t{font-size:clamp(27px,7.6vw,33px)}
    #community > .panel .h2{font-size:clamp(14px,3.8vw,16px);margin:0}
    #community > .panel .rule{margin:3px 0;box-shadow:0 0 6px rgba(247,245,241,.9)}
    /* the directory: a compact vertical column of five equal-width plaques directly under the title,
       on the left — narrow enough to leave the vitrine and sculpture fully clear. No background panel,
       band or veil anywhere over the film — only the note and the cards themselves carry any fill. */
    #community > .directory{left:var(--gutter);right:auto;top:calc(var(--frame-top) + var(--u) * 26);bottom:auto;
      width:clamp(120px,36vw,152px);z-index:4;display:block;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0}
    #community > .directory .dir-note{position:static;display:block;margin:0 0 8px;text-align:left;pointer-events:none;
      font-family:var(--sans);font-weight:400;font-size:10.5px;line-height:1.32;max-width:30ch;
      color:var(--umber);text-shadow:0 0 2px rgba(247,245,241,.95),0 1px 8px rgba(247,245,241,.9),0 0 16px rgba(247,245,241,.6)}
    #community > .directory .dir-row{display:flex;flex-direction:column;flex-wrap:nowrap;gap:5px}
    #community > .directory a.card{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:6px;
      padding:7px 10px;border-radius:2px;background:rgba(250,247,241,.9);border:1px solid rgba(167,123,50,.32);
      box-shadow:0 4px 14px -6px rgba(23,19,15,.3);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
    #community > .directory a.card:active{background:rgba(250,247,241,1);border-color:rgba(167,123,50,.55)}
    #community > .directory a.card .ic{width:13px;height:13px;flex:none;color:var(--gold-structural-deep);opacity:.85}
    #community > .directory a.card .t{font-family:var(--mono);font-weight:500;font-size:8.8px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    /* ---------- the closing wall: the collector's board, recomposed for a portrait wall ----------
       a deliberate curated hang, not the desktop collage shrunk down: the six smallest archival
       frames (m2, m7, m9, m10, m11, m12) step aside so the remaining pieces stay large enough to
       actually read as artworks, flowing in a clean vertical sequence with GOLDINU held at centre;
       m4/m5 keep easing onto its corners, kept behind it, exactly as on desktop. */
    #final{min-height:0;gap:var(--m-s5);overflow-x:clip;padding:var(--m-section) var(--m-inline) calc(var(--m-s6) + env(safe-area-inset-bottom,0px))}
    #final .stage{width:100%;min-height:clamp(680px,205vw,960px)}
    .meme.m2,.meme.m7,.meme.m9,.meme.m10,.meme.m11,.meme.m12{display:none}
    .meme.m1{left:2%;  top:1%;  width:34%; --r:-1.3deg; z-index:4}
    .meme.m6{left:62%; top:0%;  width:32%; --r:1.2deg;  z-index:4}
    .meme.m4{left:29%; top:26%; width:20%; --r:-1deg;   z-index:1}
    .meme.m5{left:53%; top:32%; width:20%; --r:1.1deg;  z-index:1}
    .meme.m3{left:2%;  top:56%; width:32%; --r:1deg;    z-index:3}
    .meme.m8{left:64%; top:56%; width:31%; --r:-1.2deg; z-index:3}
    .meme.m13{left:16%;top:76%; width:44%; --r:-.8deg;  z-index:4}
    .meme:hover{transform:rotate(var(--r,0deg))}
    #final .stage .big{font-size:clamp(60px,18.6vw,112px)}
    #final .dir{gap:0 var(--m-s4);row-gap:0}
    #final .dir a{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:var(--m-fs-label)}
    #final .rule{width:64px}
    #final .disc{font-size:12.5px;line-height:1.7;max-width:36ch}
    #final .copy{margin-top:var(--m-s3);font-size:var(--m-fs-meta)}

    /* ---------- dedicated-page expansion areas ---------- */
    .expansion-wrap{max-width:none;gap:var(--m-s3);padding:var(--m-section) var(--m-inline)}
    .expansion .engrave{font-size:var(--m-fs-h1)}
    .expansion .roomname{margin:0}
    .expansion-note{font-size:var(--m-fs-body);line-height:var(--m-lh-body)}
    .expansion-list{margin-top:var(--m-s3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--m-s3) var(--m-s4)}
    .expansion-list li{font-size:var(--m-fs-label);line-height:1.5}
  }

/* =============================================================================================
   GVOL — the one persistent audio control, present on every page (markup in nav.html, logic in
   audio-controller.js). z-index sits above the Home intro overlay (#threshold is 999) as well as
   above ordinary page chrome (#nav is 50), so it's reachable throughout the whole experience the
   brief describes: the Sirens sequence, the TAKE A CHANCE screen, the transition, and every page
   of the site after that. Collapses to just the speaker glyph until opened. */
.gvol{
  position:fixed; right:calc(var(--gutter) / 1.4); bottom:calc(var(--gutter) / 1.4); z-index:1000;
  display:flex; align-items:center; gap:0;
  opacity:1; transform:translateY(0); pointer-events:auto;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
/* suppressed only while the Home intro's black "tap to begin" screen is showing — that screen
   stays deliberately bare; every other state (Sirens, Take a Chance, transition, and every page
   after) shows the control */
.gvol.gv-hide{opacity:0; transform:translateY(4px); pointer-events:none}
.gvol-btn{
  position:relative; z-index:1; width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; background:rgba(23,19,15,.55); border:1px solid rgba(217,180,92,.3); cursor:pointer;
  color:rgba(217,180,92,.8); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s, border-color .3s, color .3s;
}
.gvol-btn svg{width:17px; height:17px}
.gvol-btn:hover{background:rgba(23,19,15,.7); border-color:rgba(217,180,92,.55); color:var(--gold-artifact-hi)}
.gvol.gv-muted .gvol-btn{color:rgba(217,180,92,.42)}
.gvol-panel{
  overflow:hidden; width:0; max-width:0; margin-right:-8px; opacity:0;
  background:rgba(23,19,15,.6); border:1px solid rgba(217,180,92,.24); border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:width .38s var(--ease), max-width .38s var(--ease), opacity .3s var(--ease), margin-right .38s var(--ease);
  display:flex; align-items:center;
}
.gvol.open .gvol-panel{width:112px; max-width:112px; margin-right:10px; opacity:1}
.gvol-panel input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:26px; margin:0 14px; background:transparent; cursor:pointer;
}
.gvol-panel input[type="range"]::-webkit-slider-runnable-track{height:1px; background:rgba(217,180,92,.35)}
.gvol-panel input[type="range"]::-moz-range-track{height:1px; background:rgba(217,180,92,.35)}
.gvol-panel input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:11px; height:11px; margin-top:-5px; border-radius:50%;
  background:var(--gold-artifact-hi); box-shadow:0 0 6px rgba(217,180,92,.6); border:0;
}
.gvol-panel input[type="range"]::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; background:var(--gold-artifact-hi); box-shadow:0 0 6px rgba(217,180,92,.6); border:0;
}
@media (max-width:400px){
  /* narrowest phones: logo, How to Buy, sound and menu share one row without touching */
  #nav .brand{gap:7px}
  #nav .brand .wordmark{font-size:17.5px}
  #nav .cta{padding:0 10px;font-size:10px;letter-spacing:.14em;gap:6px}
  #nav .cta .arrow{display:none}
}
@media (max-width:860px){
  /* phones: the control sits IN the header row (between How to Buy and the menu), never floating
     over the page — so it can't cover a card's "+", card text, video controls, directory links or
     an open card's actions. Its slider still opens leftward from there. */
  .gvol{right:calc(var(--gutter) + 36px); top:calc((var(--m-bar,64px) - 38px) / 2 + env(safe-area-inset-top,0px)); bottom:auto; z-index:51}
  .gvol-btn{width:38px; height:38px}
}
@media (max-width:720px){
  .gvol.open .gvol-panel{width:96px; max-width:96px}
  .gvol-panel input[type="range"]{height:30px}
}

/* =============================================================================
   REFINEMENT LAYER — shared gold text, the directory pair, the header CTA and the
   homepage exhibit cards. Later in the cascade on purpose: it adjusts the rules above
   without rewriting them.
   ============================================================================= */
/* metallic gold text: solid colour first, the gradient only where clipping is supported */
.t-gold{color:var(--gold-interface-deep)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .t-gold{background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none}
}

/* ---------- the directory's two actions: one matched pair ---------- */
#menu .menu-ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;justify-self:stretch;margin:24px 28px 0;padding-top:20px;border-top:1px solid var(--line)}
#menu .menu-ctas .btn{box-sizing:border-box;width:100%;min-width:0;height:50px;min-height:50px;margin:0;padding:0 10px 0 calc(10px + .2em);
  display:flex;align-items:center;justify-content:center;gap:0;white-space:nowrap;overflow:hidden;
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;line-height:1;text-transform:uppercase;text-align:center;
  border:1px solid rgba(156,126,69,.6);border-radius:0;box-shadow:none;transition:background .3s ease,border-color .3s ease,color .3s ease}
#menu .menu-ctas .btn .l{display:block;line-height:1}
#menu .menu-ca{background:transparent;color:var(--gold-interface-deep)}
#menu .menu-cta{background:linear-gradient(180deg,rgba(243,235,220,.9),rgba(235,223,195,.75));color:var(--ink)}
#menu .menu-ctas .btn:hover{border-color:var(--gold-interface)}
#menu .menu-ca:hover{background:rgba(217,180,92,.1)}
#menu .menu-cta:hover{background:linear-gradient(180deg,rgba(243,235,220,1),rgba(229,214,180,.9))}
#menu .menu-ctas .btn:active{background:#EBDFC3}
#menu .menu-ca.done{background:rgba(217,180,92,.2);border-color:var(--gold-interface);color:var(--ink)}
#menu .menu-ca.fail{border-color:var(--umber);color:var(--umber)}
@media (max-width:860px){
  #menu .menu-ctas{margin:var(--m-s4) var(--m-s4) 0;padding-top:var(--m-s4)}
  #menu .menu-cta{margin:0;justify-self:stretch}
}
/* very narrow phones: stacked, the same size as each other */
@media (max-width:359px){
  #menu .menu-ctas{grid-template-columns:minmax(0,1fr)}
}

/* ---------- header "How to Buy" in the same button language ---------- */
@media (max-width:860px){
  #nav .cta{height:40px;min-height:40px;padding:0 12px 0 calc(12px + .18em);font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;line-height:1;white-space:nowrap;
    border:1px solid rgba(156,126,69,.6);background:linear-gradient(180deg,rgba(243,235,220,.72),rgba(235,223,195,.5));color:var(--ink)}
  #nav .cta .arrow{display:none}
}
@media (max-width:400px){
  #nav .cta{padding:0 10px 0 calc(10px + .14em);letter-spacing:.14em}
}

/* ---------- homepage exhibit cards: finish and reveal ---------- */
/* a fine metallic edge along the top of each card, brighter while it is hovered or open */
.cx-ex-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--gold-rule);opacity:.45;transition:opacity .5s ease;pointer-events:none;z-index:1}
.cx-vault .cx-ex-card::before{background:linear-gradient(90deg,rgba(217,180,92,0),#D9B45C 30%,#F2DFA3 50%,#D9B45C 70%,rgba(217,180,92,0))}
.cx-ex:hover .cx-ex-card::before,.cx-ex.open .cx-ex-card::before{opacity:1}
/* the detail's contents settle in just after the region opens, and leave first when it closes */
.cx-ex-inner>*{transition:opacity .3s ease .05s,transform .42s var(--ease) .03s}
.cx-ex:not(.open) .cx-ex-inner>*{opacity:0;transform:translateY(5px);transition-delay:0s;transition-duration:.14s}
.cx-ex-intro{color:var(--scene-ink)}
.cx-ex-points li{opacity:.84}
.cx-ex-act.done{color:var(--btn-ink)}
.cx-ex-act.fail{border-color:currentColor}
/* the label stays still while it is pressed, so a quick repeat press never jitters the card */
.cx-ex-head:active{transform:none}
@media (max-width:860px){
  /* breathing room between a room's action and the first card below it */
  .cx-scene-details{padding-top:18px}
  .cx-howto .cx-scene-details{padding-top:0}            /* its own label already separates the steps */
  .cx-ex-card::before{left:0;right:0}
}
@media (prefers-reduced-motion:reduce){
  .cx-ex-inner>*,.cx-ex:not(.open) .cx-ex-inner>*{transition:none;transform:none}
  .cx-ex-card::before{transition:none}
}
/* the narrowest phones: logo, How to Buy, sound and menu keep clear of one another */
@media (max-width:359px){
  #nav .brand{gap:6px}
  #nav .brand .emblem{width:22px;height:22px}
  #nav .brand .wordmark{font-size:15px}
  #nav .cta{padding:0 8px 0 calc(8px + .1em);font-size:9.5px;letter-spacing:.1em}
  #nav .cta-group{margin-right:40px}
}
/* How To Buy film: the whole tutorial frame is always visible (contain, never cropped), and the
   caption shade lifts once it plays so the on-screen steps are not dimmed */
.cx-howto .cx-video video{object-fit:contain;background:#0b0907}
.cx-howto .cx-video.playing::after{opacity:0}
/* Reserve: the figures that matter read in gold; their labels and notes stay quiet */
#tokenomics .wallmeter .wm-stat-main b,.ped .card .v:not(.mono){color:var(--gold-interface-deep)}
/* Community: the room's line sits on its own small ivory plaque so it reads over the crowd */
@media (min-width:861px){
  .directory .dir-note{width:max-content;max-width:calc(100% - 32px);margin:0 auto 14px;padding:7px 18px 6px;
    background:rgba(250,247,241,.88);border:1px solid rgba(167,123,50,.34);box-shadow:0 8px 22px -14px rgba(23,19,15,.4);
    font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(13px,.98vw,16px);letter-spacing:-.005em;color:var(--gold-interface-deep);text-shadow:none}
}
.directory a.card{position:relative}
.directory a.card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--gold-rule);opacity:0;transition:opacity .4s ease;pointer-events:none}
.directory a.card:hover::before,.directory a.card:focus-visible::before{opacity:1}
#community > .directory .dir-note{color:var(--gold-interface-deep);font-family:var(--serif);font-style:italic;font-size:11.5px}

/* ---------------------------------------------------------------------------
   SCROLLBAR — the gallery's own: a marble channel with a fine champagne edge, and a slim
   brushed-gold bar inset within it (the same metal as the GOLDINU Remaining meter). It warms on
   hover and deepens while dragged. Chromium, Edge and Safari use the ::-webkit-scrollbar rules;
   Firefox, which only accepts two colours, gets the same gold on marble. Phones keep their
   native overlay scrollbars, which disappear while not scrolling.
   --------------------------------------------------------------------------- */
html{scrollbar-gutter:stable}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:linear-gradient(90deg,#EFEAE1,#F7F4EE 45%,#F2EEE7);box-shadow:inset 1px 0 0 rgba(185,155,98,.38)}
::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:6px;background-clip:padding-box;
  background-color:#B99B62;
  background-image:linear-gradient(90deg,#A77B32 0%,#D9B45C 38%,#F2DFA3 52%,#C9A24A 68%,#8C6420 100%);
  box-shadow:inset 0 0 0 1px rgba(110,76,16,.25)}
::-webkit-scrollbar-thumb:hover{background-image:linear-gradient(90deg,#B08840 0%,#E3C473 38%,#F7E9BC 52%,#D2AC55 68%,#8C6420 100%)}
::-webkit-scrollbar-thumb:active{background-image:linear-gradient(90deg,#8C6420 0%,#B08840 45%,#C9A24A 60%,#8C6420 100%)}
::-webkit-scrollbar-corner{background:#F2EEE7}
/* small inner scroll areas (the directory panel, the observations table): a slimmer bar */
#menu .menu-panel::-webkit-scrollbar,.ax-table-scroll::-webkit-scrollbar{width:8px;height:8px}
#menu .menu-panel::-webkit-scrollbar-thumb,.ax-table-scroll::-webkit-scrollbar-thumb{border-width:2px}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-color:#B08840 #F1EEE8;scrollbar-width:thin}
  #menu .menu-panel,.ax-table-scroll{scrollbar-color:#B08840 transparent;scrollbar-width:thin}
}