:root{
    --bg:#0a0a0a;
    --bg2:#0d0d0d;
    --fg:#eaeaea;
    --muted:#8a8a8a;
    --gold:#c9a227;
    --gold-dim:#8f7419;
    --warn:#c05a3a;
    --line: rgba(234,234,234,0.18);
  }
  @font-face{ font-family:"Orbitron"; font-weight:900; font-style:normal; font-display:swap; src:url(/assets/fonts/orbitron-900.woff2) format("woff2"); }
  @font-face{ font-family:"JetBrains Mono"; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/jetbrains-mono-400.woff2) format("woff2"); }
  @font-face{ font-family:"JetBrains Mono"; font-weight:700; font-style:normal; font-display:swap; src:url(/assets/fonts/jetbrains-mono-700.woff2) format("woff2"); }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{
    background:var(--bg);
    color:var(--fg);
    font-family: ui-sans-serif, "Segoe UI", Arial, sans-serif;
    overflow-x:hidden;
    width:100%;
  }
  ::selection{ background:var(--gold); color:#111; }

  .display{
    font-family: "Orbitron", "Segoe UI", Arial, sans-serif;   /* wide, squared techno face — closest open-licence match to the reference's Xirod */
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.02em;
  }
  .mono{
    font-family: "JetBrains Mono", ui-monospace, "Consolas", "SF Mono", "Courier New", monospace;
    text-transform:uppercase;
    letter-spacing:0.12em;
  }

  /* ---------- grain overlay ---------- */
  .grain{
    position:absolute; inset:0;
    pointer-events:none;
    opacity:0.5;
    mix-blend-mode:overlay;
  }
  .grain svg{ width:100%; height:100%; }

  /* ---------- preloader ---------- */
  #preloader{
    position:fixed; inset:0; z-index:1000;
    background:#050505;
    display:flex; align-items:center; justify-content:center;
    transition: opacity .8s ease, visibility .8s ease;
  }
  #preloader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .pl-geo{
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; transition:opacity 1.2s ease;
  }
  .pl-geo.show{ opacity:1; }
  .tc-geo{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .pl-geo circle{ fill:none; stroke:rgba(234,234,234,0.16); stroke-width:0.5; }
  .pl-geo .cross{ stroke:rgba(234,234,234,0.14); stroke-width:0.4; stroke-dasharray:1.5 2.5; }
  .pl-geo .dot{ fill:rgba(234,234,234,0.35); stroke:none; }
  .pl-counter{
    position:absolute; top:28px; right:32px;
    font-size:13px; color:var(--muted);
    text-align:right;
  }
  .pl-counter .bar{
    margin-top:6px; width:140px; height:1px; background:rgba(255,255,255,0.15);
  }
  .pl-counter .bar-fill{ height:100%; width:0%; background:var(--gold); }
  .pl-log{
    position:absolute; bottom:34px; left:32px;
    font-size:12px; line-height:1.9; color:var(--muted);
  }
  .pl-log div{ opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease; }
  .pl-log div.show{ opacity:1; transform:none; }
  .pl-log span.ok{ color:var(--fg); }
  #enterBtn{
    font-family:inherit;
    background:var(--gold);
    color:#141005;
    border:1px solid var(--gold);
    border-radius:999px;
    padding:16px 40px;
    font-size:13px;
    letter-spacing:0.18em;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity .5s ease, transform .2s ease;
    position:relative;
    overflow:hidden;
  }
  #enterBtn.ready{ opacity:1; pointer-events:auto; }
  #enterBtn:hover{ transform:scale(1.04); }
  #enterBtn::after{
    content:""; position:absolute; inset:0;
    background:repeating-radial-gradient(circle at 20% 30%, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 3px);
    mix-blend-mode:multiply;
  }

  /* ---------- accessibility: real controls, visible focus, a skip link, calmer motion on request ---------- */
  button.corner-box, button.orb, button.rl, button.pin{ appearance:none; -webkit-appearance:none; font:inherit; color:inherit; background:none; border:0; margin:0; padding:0; text-align:left; letter-spacing:inherit; line-height:inherit; }
  button.corner-box{ display:flex; }
  .region-list button.rl, .region-list a.rl{ display:flex; width:calc(100% + 8px); }
  .region-list a.rl{ text-decoration:none; color:inherit; }
  .crumb a{ color:inherit; text-decoration:none; }
  .crumb a:hover{ color:var(--gold); }
  a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
  .orb:focus-visible{ outline-offset:6px; border-radius:50%; }
  #rvTitle:focus, #lvTitle:focus{ outline:none; }   /* the dialog title takes focus so it is announced; a ring around a display heading is not needed */
  .rv-map .pin:focus-visible{ outline-offset:4px; border-radius:50%; }
  .skip{ position:absolute; left:20px; top:-60px; z-index:1200; background:#050505; color:var(--gold); border:1px solid var(--gold); padding:10px 14px; font-size:10px; letter-spacing:.16em; text-decoration:none; transition:top .15s; }
  .skip:focus{ top:20px; }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
    .compass .rot, .compass .sweep{ transform:rotate(45deg); }
  }

  /* ---------- persistent corner chrome ---------- */
  #chrome{
    position:fixed; inset:0; z-index:200; pointer-events:none;
    opacity:0; transition:opacity .8s ease;
  }
  #chrome.show{ opacity:1; }
  .corner-box{
    position:absolute; pointer-events:auto;
    display:flex; align-items:center; gap:10px;
    border:1px solid var(--line);
    padding:8px 12px;
    background:rgba(10,10,10,0.4);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    font-size:10px; color:var(--muted);
    cursor:pointer;
  }
  #soundToggle{ top:22px; left:22px; }
  #menuToggle{
    top:22px; right:22px;
    width:44px; height:44px; padding:0;
    align-items:center; justify-content:center;
  }
  #emblem{
    top:20px; left:50%; transform:translateX(-50%);
    width:46px; height:46px; border-radius:50%;
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    animation: spin 18s linear infinite;
  }
  @keyframes spin{ to{ transform:translateX(-50%) rotate(360deg); } }

  /* ---------- section frame (dashed viewport bracket, per-section) ---------- */
  .frame{
    position:absolute; inset:14px;
    border:1px dashed var(--line);
    pointer-events:none;
  }
  .frame i{
    position:absolute; width:8px; height:8px;
    border:1px solid var(--fg); opacity:.6;
  }
  .frame i.tl{ top:-4px; left:-4px; border-right:none; border-bottom:none; }
  .frame i.tr{ top:-4px; right:-4px; border-left:none; border-bottom:none; }
  .frame i.bl{ bottom:-4px; left:-4px; border-right:none; border-top:none; }
  .frame i.br{ bottom:-4px; right:-4px; border-left:none; border-top:none; }

  section{
    position:relative;
    min-height:100vh;
    width:100%;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }

  .scroll-down{
    position:absolute; right:34px; bottom:34px;
    font-size:11px; color:var(--muted); letter-spacing:0.15em;
    display:flex; align-items:center; gap:8px;
  }
  .scroll-down .dot{
    width:14px; height:14px; border:1px solid var(--muted); border-radius:50%;
    position:relative;
  }
  .scroll-down .dot::after{
    content:""; position:absolute; top:1px; left:6px; width:1px; height:5px; background:var(--gold);
    transform-origin: bottom center;
    animation: tick 2s linear infinite;
  }
  @keyframes tick{ to{ transform:rotate(360deg); } }

  /* ---------- motif clusters (grape / bottle / glass rings, scroll-rotated) ---------- */
  .motif-cluster{
    position:absolute;
    pointer-events:none;
    opacity:1;
    will-change: transform;
  }
  .motif-cluster svg{ width:100%; height:100%; overflow:visible; }
  .motif-ring-line, .motif-tick, .motif-cross{ fill:none; vector-effect:non-scaling-stroke; }
  .motif-ring-line{ stroke:rgba(234,234,234,0.16); stroke-width:0.6px; }
  .motif-tick{ stroke:rgba(234,234,234,0.45); stroke-width:0.7px; }
  .motif-cross{ stroke:rgba(234,234,234,0.14); stroke-width:0.5px; stroke-dasharray:1.5 2.5; }

  /* ---------- HERO ---------- */
  #hero{ background:#000; }
  #particleCanvas{
    position:absolute; inset:0; width:100%; height:100%;
    z-index:2;
  }
  #hero .hero-inner{
    position:absolute; z-index:5;
    left:40px; top:clamp(110px, 19vh, 190px);
    width:auto; padding:0;
  }
  #hero h1{
    font-size:clamp(40px, 7.4vw, 112px);
    line-height:0.92;
    color:#dedede;
    filter:url(#titleGrain);
    text-shadow: 0 0 30px rgba(234,234,234,0.35), 0 0 2px rgba(234,234,234,0.6);
  }
  #hero .byline{
    margin-top:18px; font-size:11px; color:var(--muted); display:inline-block; background:rgba(0,0,0,0.62); padding:6px 8px; margin-left:-8px;
  }
  #hero .byline b{ color:var(--fg); font-weight:600; letter-spacing:.06em; }
  .caption-box{
    position:absolute; right:34px; bottom:80px; z-index:6;
    max-width:340px;
    border:1px solid var(--line);
    background:rgba(5,5,5,0.72);
    padding:20px 22px;
    font-size:14px; line-height:1.6; color:#d8d8d8;
  }
  .caption-box .cursor{ color:var(--gold); animation: blink 1s step-end infinite; }
  @keyframes blink{ 50%{ opacity:0; } }

  /* ---------- TITLE CARD ---------- */
  #title-card{ background:var(--bg); text-align:center; }
  #title-card .tc-inner{ max-width:640px; padding:0 30px; }
  #title-card h2{
    font-size:clamp(34px,6vw,64px);
    color:#dedede;
    text-shadow:0 0 24px rgba(234,234,234,0.3);
    margin-bottom:26px;
  }
  #title-card p{
    font-size:17px; line-height:1.7; color:#c9c9c9; min-height:5.4em;
    text-align:left;
  }
  #title-card p .cursor{ color:var(--gold); animation: blink 1s step-end infinite; }

  /* ---------- TERMINAL ---------- */
  #terminal{ background:var(--bg); }
  .term-window{
    width:min(740px,90vw);
    border:1px solid var(--line);
    background:rgba(255,255,255,0.02);
    opacity:0; transform:translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .term-window.visible{ opacity:1; transform:none; }
  .term-titlebar{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-bottom:1px solid var(--line);
    font-size:11px; color:var(--muted);
  }
  .term-dots{ display:flex; gap:5px; }
  .term-dots span{ width:6px; height:6px; border-radius:50%; background:var(--muted); display:block; }
  .term-body{ padding:20px 22px; font-size:12.5px; line-height:2; color:#bcbcbc; min-height:290px; }
  .term-body .tl{ opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease; }
  .term-body .tl.show{ opacity:1; transform:none; }
  .term-body .cursor{ animation:blink 1s step-end infinite; margin-left:4px; }
  .pl-log .g{ color:var(--gold); }
  .term-body .grey{ color:var(--muted); }
  .term-body .warn{ color:var(--warn); }
  .term-body .gold{ color:var(--gold); }

  /* ---------- FOOTER (gold, grain, HUD frame, hidden-halftone pixel reveal) ---------- */
  #footer{
    min-height:100vh;
    background:#d9b400;
    color:#171204;
    align-items:stretch; justify-content:flex-start;
    text-align:right;
    cursor:crosshair;
  }
  #footer .grain{ opacity:.72; mix-blend-mode:multiply; z-index:2; }
  #footerPix{ position:absolute; inset:0; width:100%; height:100%; z-index:1; mix-blend-mode:multiply; pointer-events:none; }
  /* dashed HUD frame with corner + mid-edge markers, drawn on as the footer scrolls in */
  .f-frame{ position:absolute; inset:16px; z-index:3; pointer-events:none; }
  .f-frame .edge{ position:absolute; background:transparent; }
  .f-frame .edge.h{ left:0; right:0; height:0; border-top:1px dashed rgba(20,16,4,0.55); transform:scaleX(0); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
  .f-frame .edge.v{ top:0; bottom:0; width:0; border-left:1px dashed rgba(20,16,4,0.55); transform:scaleY(0); transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .25s; }
  .f-frame .edge.top{ top:0; transform-origin:center; } .f-frame .edge.bottom{ bottom:0; transform-origin:center; }
  .f-frame .edge.left{ left:0; transform-origin:center; } .f-frame .edge.right{ right:0; transform-origin:center; }
  .f-frame .mk{ position:absolute; width:7px; height:7px; border-radius:50%; background:#f1e6a8; box-shadow:0 0 0 1px rgba(20,16,4,0.5); transform:translate(-50%,-50%) scale(0); transition:transform .5s cubic-bezier(.3,1.6,.4,1); }
  .f-frame .ret{ position:absolute; width:28px; height:28px; transform:translate(-50%,-50%); opacity:0; transition:opacity .8s ease; }
  .f-frame .ret svg{ width:100%; height:100%; overflow:visible; }
  .f-frame .ret circle, .f-frame .ret line{ fill:none; stroke:rgba(20,16,4,0.55); stroke-width:1; }
  #footer.visible .f-frame .edge{ transform:none; }
  #footer.visible .f-frame .mk{ transform:translate(-50%,-50%) scale(1); }
  #footer.visible .f-frame .ret{ opacity:1; }

  #footer .footer-inner{
    position:relative; z-index:4; flex:1;
    display:flex; flex-direction:column; justify-content:space-between;
    padding:56px 60px 44px;
  }
  .f-top{ display:flex; flex-direction:column; align-items:flex-end; }
  .f-contact{ text-align:right; }
  .f-h{ font-size:clamp(22px,3vw,34px); color:#0b0a06; letter-spacing:.04em; margin-bottom:10px; opacity:0; transform:translateY(14px); transition:opacity .5s ease .45s, transform .5s ease .45s, color .22s ease; }
  .f-mail{ display:inline-block; font-size:13px; letter-spacing:.16em; color:#0b0a06; text-decoration:none; border-bottom:1px solid rgba(20,16,4,0.6); padding-bottom:2px; margin-bottom:14px; opacity:0; transform:translateY(14px); transition:opacity .5s ease .58s, transform .5s ease .58s, color .22s ease; }
  .f-mail:hover{ color:#fff; border-color:#fff; }
  .f-mid{ max-width:640px; margin:0 auto; text-align:center; padding:0 20px; opacity:0; transform:translateY(20px); transition:opacity .7s ease .9s, transform .7s ease .9s; }
  .f-mid p{ font-size:14px; line-height:1.8; color:rgba(20,16,4,0.88); margin-bottom:14px; }
  .f-mid .f-h{ opacity:1; transform:none; transition:color .22s ease; margin-bottom:16px; }
  .f-line{ display:flex; justify-content:center; gap:26px; flex-wrap:wrap; font-size:9.5px; letter-spacing:.16em; color:rgba(20,16,4,0.75); margin-top:18px; }
  #footer.visible .f-h, #footer.visible .f-mail, #footer.visible .f-mid{ opacity:1; transform:none; }
  .f-stamp{ font-size:10px; letter-spacing:.16em; color:rgba(20,16,4,0.85); margin-bottom:8px; opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease, color .22s ease; }
  #footer.visible .f-stamp{ opacity:1; transform:none; transition-delay:.7s; }
  .f-contact .f-stamp{ line-height:1.7; }
  /* where the halftone reveal darkens the gold, the text under it turns pale so it still reads */
  .f-mid p, .f-line span, .f-bottom .l, .f-bottom .r, .f-bottom .c .display{ transition:color .22s ease; }
  #footer .lit{ color:#fff4cf !important; text-shadow:0 0 10px rgba(20,16,4,.55); }
  #footer .lit a, #footer a.lit{ color:#fff4cf; border-color:rgba(255,244,207,.7); }
  .cta-wrap{ display:flex; align-items:center; gap:0; margin-bottom:26px; }
  .cta-wrap svg{ width:46px; height:46px; overflow:visible; opacity:0; transition:opacity .5s ease .55s; }
  .cta-wrap svg path{ fill:none; stroke:rgba(20,16,4,0.85); stroke-width:1.4; stroke-dasharray:3 2.5; }
  .cta-wrap svg circle{ fill:#f1e6a8; stroke:rgba(20,16,4,0.5); stroke-width:1; }
  .cta-wrap svg.l{ margin-right:-7px; } .cta-wrap svg.r{ margin-left:-7px; }
  .cta-pill{
    display:inline-block; position:relative; z-index:1;
    background:#0b0a06; color:#eaeaea;
    border-radius:999px; padding:16px 36px;
    font-size:12px; letter-spacing:.18em;
    box-shadow:0 0 14px rgba(0,0,0,0.25);
    cursor:default;
    transform:scaleX(0); opacity:0; transition:transform .45s cubic-bezier(.2,.7,.2,1) .35s, opacity .3s ease .35s;
  }
  .cta-pill:hover{ background:var(--gold); color:#0b0a06; }
  #footer.visible .cta-pill{ transform:none; opacity:1; }
  #footer.visible .cta-wrap svg{ opacity:1; }
  .social-list a{
    display:block; color:#171204; text-decoration:none;
    font-size:13px; letter-spacing:.16em; margin-top:12px;
    opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;
  }
  .social-list a:hover{ text-decoration:line-through; font-weight:700; }
  #footer.visible .social-list a:nth-child(1){ opacity:.9; transform:none; transition-delay:.7s; }
  #footer.visible .social-list a:nth-child(2){ opacity:.9; transform:none; transition-delay:.8s; }
  #footer.visible .social-list a:nth-child(3){ opacity:.9; transform:none; transition-delay:.9s; }
  .f-bottom{
    display:grid; grid-template-columns:max-content auto max-content; justify-content:space-between; align-items:end; gap:20px;
    font-size:10.5px; letter-spacing:.14em; color:rgba(20,16,4,0.8);
    opacity:0; transform:translateY(24px); transition:opacity .5s ease 1.15s, transform .5s ease 1.15s;
  }
  #footer.visible .f-bottom{ opacity:1; transform:none; }
  .f-bottom .l{ text-align:left; }
  .f-bottom .l, .f-bottom .r{ line-height:1.6; white-space:nowrap; }
  @media (max-width:1000px){ .f-bottom{ grid-template-columns:1fr; justify-items:center; text-align:center; } .f-bottom .l, .f-bottom .r{ text-align:center; white-space:normal; } }
  .f-line .credit{ flex-basis:100%; opacity:.7; } .f-bottom .r{ text-align:right; }
  .f-bottom .c{ text-align:center; }
  .f-bottom .c .display{ display:block; font-size:clamp(18px,2.6vw,30px); color:#0b0a06; letter-spacing:.04em; margin-bottom:6px; }
  .f-bottom .c .line{ width:min(360px,50vw); height:1px; background:rgba(20,16,4,0.5); margin:0 auto 4px; transform:scaleX(0); transition:transform .6s ease 1.45s; }
  #footer.visible .f-bottom .c .line{ transform:none; }


  /* ---------- EXPLORE (3D terroir map with pulsing gold markers) ---------- */
  #explore{ background:var(--bg); flex-direction:column; align-items:stretch; justify-content:flex-start; padding:0; }
  .ex-head{ position:relative; z-index:5; display:flex; align-items:flex-start; justify-content:space-between; padding:96px 40px 0; }
  .ex-title{
    font-size:clamp(28px, 4.8vw, 72px); line-height:1; color:#dedede; filter:url(#titleGrain);
    text-shadow:0 0 28px rgba(234,234,234,0.35), 0 0 2px rgba(234,234,234,0.6);
  }   /* set flat, like every other page heading */
  .compass{ width:150px; height:150px; margin-top:-20px; opacity:.85; }
  .compass svg{ width:100%; height:100%; overflow:visible; }
  .compass circle{ fill:none; stroke:rgba(234,234,234,0.35); stroke-width:0.8; }
  .compass .needle{ stroke:var(--gold); stroke-width:1.2; }
  .compass .rot{ transform-origin:50% 50%; animation:radarSweep 14s linear infinite; }
  .compass .sweep{ transform-origin:50% 50%; animation:radarSweep 14s linear infinite; opacity:.55; }
  @keyframes radarSweep{ to{ transform:rotate(360deg); } }
  .compass .blip{ transform-box:fill-box; transform-origin:center; animation:blipWake 14s linear infinite; }
  @keyframes blipWake{ 0%{ opacity:.18; transform:scale(1) } 2%{ opacity:1; transform:scale(2.2); fill:#ffe600 } 12%{ opacity:.85; transform:scale(1.4) } 45%{ opacity:.3; transform:scale(1) } 100%{ opacity:.18; transform:scale(1) } }
  .map-stage{
    position:relative; flex:1; min-height:60vh; margin:-30px 0 0;
    perspective:1100px; perspective-origin:50% 35%;
    overflow:visible;
  }
  .map-plane{
    position:absolute; left:calc(50% - 90px); top:-16%; width:min(84vw, 1200px, calc((100vh - 360px) * 2.2)); aspect-ratio:1100/816;   /* the projected chart is about half its width tall: on a short laptop screen it shrinks to fit under the title */
    transform-origin:50% 50%;
    transform:translateX(-50%) rotateX(62deg) rotateZ(-3deg) scale(1);
    transform-style:preserve-3d;
    opacity:0; transition:opacity 1.2s ease;
  }
  #explore.visible .map-plane{ opacity:1; }
  #mapCanvas{ position:absolute; inset:0; width:100%; height:100%; }
  .map-plane .edge{ position:absolute; inset:-1px; border:1px dashed rgba(234,234,234,0.16); pointer-events:none; }
  .orb{
    position:absolute; width:46px; height:46px; transform:translate(-50%,-50%) scale(var(--sc,1));
    cursor:pointer; opacity:0; transition:opacity .6s ease;
  }
  #explore.visible .orb{ opacity:1; }
  .orb::before{ content:""; position:absolute; inset:-18px; border-radius:50%; }   /* generous hit area — the marker is easy to hold */
  .orb i{
    pointer-events:none;
    position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%);
    border:1.5px solid #ffe600; box-shadow:0 0 6px rgba(255,230,0,0.6), inset 0 0 4px rgba(255,230,0,0.4);
    animation:orbPulse 2.4s ease-in-out infinite;
  }
  .orb i:nth-child(1){ width:10px; height:10px; background:rgba(255,230,0,0.9); border:none; box-shadow:0 0 10px #ffe600, 0 0 22px rgba(255,230,0,0.5); }
  .orb i:nth-child(2){ width:22px; height:22px; animation-delay:.2s; }
  .orb i:nth-child(3){ width:34px; height:34px; opacity:.75; animation-delay:.4s; }
  .orb i:nth-child(4){ width:46px; height:46px; opacity:.45; animation-delay:.6s; border-style:dashed; }
  .orb:hover i{ animation-duration:1.1s; }
  @keyframes orbPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); filter:brightness(1); } 50%{ transform:translate(-50%,-50%) scale(1.14); filter:brightness(1.5); } }
  .map-card{
    position:absolute; z-index:6; right:40px; top:38%; width:300px;
    border:1px solid var(--line); background:rgba(6,6,6,0.86); padding:22px 24px;
    opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .35s ease; pointer-events:none;
  }
  .map-card.show{ opacity:1; transform:none; }
  .map-card .eyebrow{ font-size:10px; color:var(--gold); letter-spacing:.2em; margin-bottom:8px; }
  .map-card .name{ font-size:20px; color:#eaeaea; margin-bottom:12px; letter-spacing:.02em; }
  .map-card .txt{ font-size:13px; line-height:1.6; color:#cfcfcf; }
  .map-card .tags{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; }
  .map-card .tags span{ font-size:9px; letter-spacing:.14em; border:1px solid var(--line); padding:4px 7px; color:var(--muted); }
  .map-card .corner{ position:absolute; width:8px; height:8px; border:1px solid var(--gold); }
  .map-card .corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
  .map-card .corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
  .map-hint{ position:absolute; left:40px; bottom:34px; z-index:5; font-size:10px; color:var(--muted); letter-spacing:.16em; }
  .map-hint span{ opacity:1 !important; color:#8a8a8a; }
  @media (max-width:760px){ .ex-head{ padding-top:90px; } .compass{ width:90px; height:90px; } .map-card{ right:20px; left:20px; width:auto; top:auto; bottom:70px; } }


  /* ---------- EXPLORE: region index list + dormant markers ---------- */
  .region-list{
    position:absolute; right:40px; top:250px; z-index:6; width:236px; background:rgba(6,6,6,0.72); padding:6px 8px; border:1px solid rgba(234,234,234,0.06);
    font-size:9.5px; letter-spacing:.12em; color:var(--muted); line-height:1.75;
    opacity:0; transition:opacity .8s ease .4s; pointer-events:none;
    max-height:calc(100vh - 290px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#333 transparent;   /* 31 rows do not fit a short laptop screen: the index scrolls rather than running under the footer line */
  }
  @media (max-height:820px) and (min-width:901px){ .region-list{ top:215px; line-height:1.55; } .ex-head{ padding-top:80px; } }
  #explore.visible .region-list{ opacity:1; pointer-events:auto; }
  .region-list .rl-head{ color:#bdbdbd; border-bottom:1px dashed var(--line); padding-bottom:6px; margin-bottom:6px; display:flex; justify-content:space-between; }
  .region-list .rl{ display:flex; justify-content:space-between; gap:8px; cursor:default; padding:0 4px; margin:0 -4px; }
  .region-list .rl .n{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .region-list .rl .c{ color:#8a8a8a; }
  .region-list .rl{ cursor:pointer; }
  .region-list .rl:hover, .region-list .rl.hi{ color:var(--gold); background:rgba(201,162,39,0.07); }
  .region-list .rl:hover .c, .region-list .rl.hi .c{ color:var(--gold); }
  .region-list .rl.live{ color:var(--gold); cursor:pointer; }
  .region-list .rl.live .c{ color:var(--gold); }
  .region-list .rl.live::after{ content:"LIVE"; font-size:8px; border:1px solid var(--gold); padding:0 4px; margin-left:6px; line-height:1.5; align-self:center; }
  .orb.dormant{ width:30px; height:30px; }
  .orb.dormant i{ border-color:rgba(234,234,234,0.55); box-shadow:none; animation-duration:4s; }
  .orb.dormant i:nth-child(1){ width:6px; height:6px; background:rgba(234,234,234,0.7); box-shadow:0 0 6px rgba(234,234,234,0.5); }
  .orb.dormant i:nth-child(2){ width:16px; height:16px; }
  .orb.dormant i:nth-child(3){ width:24px; height:24px; opacity:.6; }
  .orb.dormant i:nth-child(4){ width:30px; height:30px; opacity:.35; }
  .orb.hi i, .orb.dormant.hi i{ border-color:#ffe600; animation-duration:1.1s; }
  .orb.live{ cursor:pointer; }
  .orb.live::after{ content:"OPEN ▸"; position:absolute; left:calc(100% + 4px); top:50%; transform:translateY(-50%) scaleY(1.9); font:9px "JetBrains Mono", monospace; letter-spacing:.14em; color:var(--gold); white-space:nowrap; opacity:0; transition:opacity .3s; }
  .orb.live:hover::after, .orb.live.hi::after{ opacity:1; }
  .map-card{ right:auto; left:40px; top:26%; bottom:auto; pointer-events:auto; width:auto; min-width:340px; max-width:min(460px, 40vw); padding:16px 20px; }   /* sized to its text */
  .map-card .eyebrow{ white-space:nowrap; }
  .map-card .stat .wide{ grid-column:1 / -1; }   /* the status is a phrase, not a figure: it takes its own line under its label */
  .map-card .stat b.wide{ text-align:left; white-space:normal; margin:-2px 0 2px; }
  .map-card .stat span.wide{ margin-top:6px; }
  .map-card .name{ font-size:17px; margin-bottom:6px; }
  .map-card .stat{ margin-top:8px; line-height:1.5; }
  .map-card .cta{ margin-top:10px; }
  .map-card .stat{ grid-template-columns:auto 1fr; }
  .map-card .stat span{ white-space:nowrap; }
  .map-card .stat{ display:grid; grid-template-columns:1fr auto; gap:2px 14px; font-size:10px; letter-spacing:.12em; color:var(--muted); margin-top:12px; }
  .map-card .stat b{ color:#eaeaea; font-weight:400; text-align:right; }
  .map-card .cta{ margin-top:14px; font-size:10px; letter-spacing:.18em; color:var(--gold); }
  .map-card .cta.off{ color:var(--muted); }

  /* ---------- REGION VIEW (full-screen data readout) ---------- */
  #regionView{
    position:fixed; inset:0; z-index:900; background:#060606;
    display:none; flex-direction:column;
  }
  #regionView.open{ display:flex; }
  #regionView .frame{ z-index:2; }
  .rv-boot{ position:absolute; inset:0; z-index:5; background:#060606; display:flex; align-items:flex-end; padding:0 0 70px 40px; transition:opacity .5s ease; }
  .rv-boot .lines{ font-size:11px; letter-spacing:.12em; color:var(--muted); line-height:2; }
  .rv-boot .lines div{ opacity:0; transform:translateY(4px); transition:opacity .25s, transform .25s; }
  .rv-boot .lines div.show{ opacity:1; transform:none; }
  .rv-boot .lines .g{ color:var(--gold); }
  .rv-boot.done{ opacity:0; pointer-events:none; }
  .rv-top{
    position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center;
    padding:22px 40px 0; font-size:10px; letter-spacing:.16em; color:var(--muted);
  }
  .rv-top .crumb b{ color:#eaeaea; font-weight:400; }
  .rv-top .crumb span{ margin:0 6px; color:#555; }
  #rvClose{ background:none; border:1px solid var(--line); color:#eaeaea; font:inherit; letter-spacing:.16em; padding:8px 12px; cursor:pointer; }
  #rvClose:hover{ border-color:var(--gold); color:var(--gold); }
  .rv-scroll{ position:relative; z-index:1; flex:1; overflow-y:auto; padding:30px 40px 60px; scrollbar-width:thin; scrollbar-color:#333 transparent; }
  .rv-head{ display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start; margin-top:20px; }
  .rv-eyebrow{ font-size:10px; letter-spacing:.2em; color:var(--gold); margin-bottom:14px; }
  .rv-head h2{ font-size:clamp(40px,7vw,104px); line-height:.95; color:#dedede; filter:url(#titleGrain); text-shadow:0 0 28px rgba(234,234,234,0.35), 0 0 2px rgba(234,234,234,0.6); margin-bottom:18px; }
  .rv-lede{ font-size:15px; line-height:1.7; color:#cfcfcf; max-width:560px; min-height:5em; }
  .rv-lede .cursor{ color:var(--gold); animation:blink 1s step-end infinite; }
  .rv-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px; max-width:620px; }
  .rv-stats div{ background:#080808; padding:12px 12px 10px; }
  .rv-stats .v{ font-size:22px; color:#eaeaea; display:block; }
  .rv-stats .v.g{ color:var(--gold); }
  .rv-stats .k{ font-size:9px; letter-spacing:.14em; color:var(--muted); display:block; margin-top:4px; }
  .rv-map{ position:relative; border:1px solid var(--line); background:#000; aspect-ratio:760/915; max-height:74vh; justify-self:end; width:100%; max-width:440px; }
  .rv-map canvas{ position:absolute; inset:0; width:100%; height:100%; }
  .rv-map .pin{ position:absolute; width:18px; height:18px; transform:translate(-50%,-50%); cursor:pointer; }
  .rv-map .pin i{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid #ffe600; box-shadow:0 0 5px rgba(255,230,0,.5); animation:orbPulse 2.6s ease-in-out infinite; }
  .rv-map .pin i:nth-child(1){ width:5px; height:5px; background:#ffe600; border:none; }
  .rv-map .pin i:nth-child(2){ width:12px; height:12px; }
  .rv-map .pin i:nth-child(3){ width:18px; height:18px; opacity:.5; border-style:dashed; }
  .rv-map .pin b.l{ left:auto; right:14px; }
  .rv-map .pin b{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font:9px "JetBrains Mono", monospace; letter-spacing:.1em; color:#cfcfcf; white-space:nowrap; background:rgba(0,0,0,.6); padding:1px 4px; font-weight:400; }
  .rv-map .pin:hover b, .rv-map .pin.hi b{ color:var(--gold); }
  .rv-map .hud{ position:absolute; left:10px; top:10px; font-size:9px; letter-spacing:.14em; color:var(--muted); line-height:1.7; }
  .rv-map .hud b{ color:#cfcfcf; font-weight:400; }
  .rv-map .scale{ position:absolute; right:12px; bottom:12px; font-size:9px; letter-spacing:.14em; color:var(--muted); }
  .rv-map .scale i{ display:block; height:1px; background:#8a8a8a; margin-bottom:4px; position:relative; }
  .rv-map .scale i::before, .rv-map .scale i::after{ content:""; position:absolute; top:-3px; width:1px; height:7px; background:#8a8a8a; }
  .rv-map .scale i::before{ left:0; } .rv-map .scale i::after{ right:0; }
  .rv-map .nopins{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:10px; letter-spacing:.16em; color:var(--muted); text-align:center; line-height:1.8; border:1px dashed var(--line); padding:12px 16px; }
  .rv-map .corner{ position:absolute; width:10px; height:10px; border:1px solid var(--gold); opacity:.8; }
  .rv-map .corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
  .rv-map .corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

  .rv-withheld{ margin-top:14px; font-size:10px; letter-spacing:.14em; color:var(--muted); max-width:620px; line-height:1.7; }
  .rv-block{ margin-top:56px; display:block; min-height:0; overflow:visible; }
  .rv-block.rv-two{ display:grid; align-items:start; }
  .rv-block > h3{ font-size:11px; letter-spacing:.2em; color:#bdbdbd; border-bottom:1px dashed var(--line); padding-bottom:10px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-weight:400; }
  .h3r{ display:flex; gap:14px; align-items:center; }
  #recFilter{ background:transparent; border:1px solid var(--line); color:#eaeaea; font:inherit; font-size:10px; letter-spacing:.14em; padding:7px 10px; width:230px; text-transform:uppercase; }
  #recFilter:focus{ outline:none; border-color:var(--gold); }
  .h3r label{ font-size:10px; letter-spacing:.14em; display:flex; gap:6px; align-items:center; color:var(--muted); cursor:pointer; }
  .h3r input[type=checkbox]{ accent-color:#c9a227; }
  .rv-empty{ font-size:11px; letter-spacing:.16em; color:var(--muted); padding:30px 0; text-align:center; }
  .rv-map .pin.quiet{ width:12px; height:12px; }
  .rv-map .pin.quiet b{ display:none; }
  .rv-map .pin.quiet:hover b, .rv-map .pin.quiet.hi b{ display:block; }
  .rv-block > h3 span{ color:var(--muted); }
  .rv-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:18px; }
  .rec{ border:1px solid var(--line); background:rgba(255,255,255,0.015); display:flex; flex-direction:column; transition:border-color .3s; }
  .rec.hi, .rec:hover{ border-color:rgba(201,162,39,.6); }
  .rec-bar{ display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-bottom:1px solid var(--line); font-size:10px; color:var(--muted); letter-spacing:.12em; }
  .rec-body{ padding:16px 18px 18px; font-size:12.5px; line-height:1.6; color:#c9c9c9; }
  .rec-name{ font-size:19px; color:#eaeaea; letter-spacing:.02em; margin-bottom:6px; }
  .rec-meta{ font-size:9.5px; letter-spacing:.14em; color:var(--muted); margin-bottom:12px; display:flex; flex-wrap:wrap; gap:4px 10px; }
  .rec-meta .ok{ color:#9ec97a; } .rec-meta .gold{ color:var(--gold); }
  .rec-hist{ font-size:12.5px; color:#bdbdbd; margin-bottom:12px; }
  .rec-row{ display:grid; grid-template-columns:78px 1fr; gap:10px; margin-top:8px; font-size:12px; }
  .rec-row .k{ font-size:9px; letter-spacing:.14em; color:var(--muted); padding-top:3px; }
  .rec-row .tags{ display:flex; flex-wrap:wrap; gap:4px; }
  .rec-row .tags span{ font-size:9px; letter-spacing:.12em; border:1px solid var(--line); padding:3px 6px; color:#bdbdbd; text-transform:uppercase; }
  .rec-awards{ margin-top:14px; border-top:1px dashed var(--line); padding-top:10px; }
  .aw{ display:grid; grid-template-columns:36px 1fr; gap:8px; font-size:11.5px; margin-bottom:8px; }
  .aw .y{ color:var(--gold); font-size:10px; letter-spacing:.08em; padding-top:2px; }
  .aw b{ color:#eaeaea; font-weight:400; }
  .aw .w{ color:#9a9a9a; }
  .aw{ min-width:0; }
  .aw > span{ min-width:0; overflow-wrap:anywhere; }
  .aw .src{ display:inline-block; max-width:100%; font-size:9px; letter-spacing:.12em; color:var(--muted); text-decoration:none; border:1px solid var(--line); padding:1px 5px; margin:3px 6px 0 0; white-space:normal; line-height:1.5; vertical-align:top; }
  .rec{ overflow:hidden; }
  .aw .src:hover{ color:var(--gold); border-color:var(--gold); }
  .aw .corr{ display:inline-block; font-size:9px; letter-spacing:.12em; color:var(--gold); margin-top:3px; white-space:nowrap; vertical-align:top; }
  .flag{ display:inline-block; font-size:9px; letter-spacing:.14em; padding:3px 7px; border:1px solid; margin:2px 4px 2px 0; }
  .flag.warn{ color:var(--warn); border-color:rgba(192,90,58,.6); }
  .flag.gold{ color:var(--gold); border-color:rgba(201,162,39,.6); }
  .flag.dim{ color:var(--muted); border-color:var(--line); }
  .rec-contact{ margin-top:12px; font-size:10px; letter-spacing:.1em; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 14px; }
  .rec-contact a{ color:#bdbdbd; text-decoration:none; border-bottom:1px dotted #555; }
  .rec-contact a:hover{ color:var(--gold); }
  .rv-two{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
  .rv-two h4, #licenceView .rv-two h3{ font-size:10px; letter-spacing:.18em; color:var(--gold); margin-bottom:12px; font-weight:400; }
  .rv-two p{ font-size:12.5px; line-height:1.7; color:#bdbdbd; margin-bottom:10px; }
  .tour{ border-top:1px dashed var(--line); padding:9px 0; font-size:12px; color:#c9c9c9; }
  .tour b{ font-weight:400; color:#eaeaea; }
  .tour .t{ font-size:9.5px; letter-spacing:.12em; color:var(--muted); display:block; margin-top:2px; }
  .tour a{ color:var(--muted); text-decoration:none; font-size:9.5px; letter-spacing:.12em; }
  .tour a:hover{ color:var(--gold); }
  .rv-note{ border:1px solid var(--line); padding:14px 16px; font-size:11.5px; line-height:1.7; color:#a8a8a8; }
  .rv-note b{ color:#eaeaea; font-weight:400; }
  .rv-foot{ margin-top:50px; font-size:9.5px; letter-spacing:.14em; color:var(--muted); border-top:1px dashed var(--line); padding-top:14px; display:flex; flex-wrap:wrap; gap:6px 24px; }
  @media (max-width:900px){
    .rv-head{ grid-template-columns:1fr; } .rv-map{ justify-self:stretch; max-width:none; }
    .rv-two{ grid-template-columns:1fr; } .region-list{ display:none; } .rv-stats{ grid-template-columns:repeat(2,1fr); }
  }


  /* ---------- LICENCE & CREDITS VIEW ---------- */
  #licenceView{ position:fixed; inset:0; z-index:910; background:#060606; display:none; flex-direction:column; }
  #licenceView.open{ display:flex; }
  #licenceView .frame{ z-index:2; }
  #lvClose{ background:none; border:1px solid var(--line); color:#eaeaea; font:inherit; letter-spacing:.16em; padding:8px 12px; cursor:pointer; }
  #lvClose:hover{ border-color:var(--gold); color:var(--gold); }
  .lv-head{ margin-top:20px; max-width:760px; }
  .lv-head h2{ font-size:clamp(36px,6vw,84px); line-height:.95; color:#dedede; filter:url(#titleGrain); text-shadow:0 0 28px rgba(234,234,234,0.35), 0 0 2px rgba(234,234,234,0.6); margin-bottom:18px; }
  .lv-lede{ font-size:15px; line-height:1.7; color:#cfcfcf; }
  .lv-lede b, .lv-body b, .rv-two b{ color:#eaeaea; font-weight:400; }
  .lv-grid{ display:block; columns:2; column-gap:18px; margin-top:40px; min-height:0; }
  .lv-grid .lv-card{ display:inline-block; width:100%; break-inside:avoid; margin-bottom:18px; vertical-align:top; }
  @media (max-width:900px){ .lv-grid{ columns:1; } }
  .lv-card{ border:1px solid var(--line); background:rgba(255,255,255,0.015); display:flex; flex-direction:column; }
  .lv-tag{ color:var(--gold); }
  .lv-body{ padding:18px 20px 20px; font-size:12.5px; line-height:1.65; color:#c9c9c9; }
  .lv-body h3, .lv-body h4{ font-size:10px; letter-spacing:.18em; color:var(--gold); margin-bottom:12px; font-weight:400; }
  .lv-body p{ margin-bottom:10px; }
  .lv-body .rv-note{ margin:12px 0; }
  .lv-small{ font-size:11.5px; color:#a8a8a8; }
  .lv-credit{ display:grid; grid-template-columns:86px 1fr; gap:10px; margin-top:10px; font-size:12px; }
  .lv-credit .k{ font-size:9px; letter-spacing:.14em; color:var(--muted); padding-top:3px; }
  .lv-link{ color:var(--gold); text-decoration:none; border-bottom:1px dotted var(--gold); }
  .lv-attrib{ color:#eaeaea; font-size:12.5px; }
  .lv-full{ border:1px solid var(--line); margin-bottom:10px; }
  .lv-full summary{ cursor:pointer; padding:12px 16px; font-size:10px; letter-spacing:.16em; color:#bdbdbd; list-style:none; }
  .lv-full summary::before{ content:"▸ "; color:var(--gold); }
  .lv-full[open] summary::before{ content:"▾ "; }
  .lv-full pre{ white-space:pre-wrap; font-size:10.5px; line-height:1.6; color:#9a9a9a; padding:0 18px 18px; text-transform:none; letter-spacing:0; max-height:60vh; overflow:auto; }
  .f-lic{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(20,16,4,0.5); }
  .f-lic:hover{ color:#fff; border-color:#fff; }

  .reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
  .reveal.visible{ opacity:1; transform:none; }

  @media (max-width:640px){
    .caption-box{ left:20px; right:20px; max-width:none; bottom:60px; }
    #menuToggle, #soundToggle{ padding:6px 10px; font-size:9px; }
  }

  /* ---------- LENSES: the chart weighted by one attribute at a time ---------- */
  .lens-rail{ position:relative; z-index:6; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:12px 40px 0; font-size:9.5px; letter-spacing:.16em; color:var(--muted); }
  .lens-rail .lk{ margin-right:8px; color:#bdbdbd; }
  .lens-rail button{ appearance:none; -webkit-appearance:none; font:inherit; letter-spacing:inherit; color:var(--muted); background:rgba(6,6,6,0.5); border:1px solid var(--line); padding:6px 10px; cursor:pointer; transition:color .2s, border-color .2s; }
  .lens-rail button:hover{ color:#eaeaea; border-color:rgba(234,234,234,0.4); }
  .lens-rail button.on{ color:var(--gold); border-color:var(--gold); }
  .lens-rail .grapes{ display:none; flex-basis:100%; flex-wrap:wrap; gap:6px 8px; padding-left:52px; max-width:min(100%, 820px); }
  .lens-rail .grapes.show{ display:flex; }
  .lens-rail .grapes button{ padding:4px 8px; font-size:9px; }
  .lens-legend{ color:var(--gold); }
  .lens-legend .n{ color:#eaeaea; }
  #explore.lensed .orb:not(.lens-hit){ opacity:.55; }
  .orb{ transition:opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
  .region-list .rl .c{ transition:color .3s; }
  .region-list .rl.lens-zero{ color:#555; }
  .region-list .rl.lens-zero .c{ color:#444; }
  .rv-lens{ margin:-6px 0 18px; font-size:10px; letter-spacing:.16em; color:var(--gold); }
  .rv-lens .n{ color:#eaeaea; }
  .rv-lens a{ color:inherit; }
  .rv-map .pin.lens-off{ opacity:.28; }
  .rv-map .pin.lens-off b{ display:none; }
  .rec.lens-off{ display:none; }

  /* ---------- SEARCH: a strip on the chart page, and a corner control that works on every page ---------- */
  .atlas-search{ position:relative; z-index:7; display:flex; align-items:center; gap:10px; font-size:9.5px; letter-spacing:.16em; color:var(--muted); }
  .atlas-search .lk{ color:#bdbdbd; }
  .atlas-search .box{ position:relative; width:100%; }
  .atlas-search input{ width:100%; box-sizing:border-box; background:rgba(6,6,6,0.6); border:1px solid var(--line); color:#eaeaea; font:inherit; letter-spacing:.14em; padding:9px 12px; text-transform:uppercase; }
  .atlas-search input::placeholder{ color:#5c5c5c; text-transform:none; letter-spacing:.12em; }
  .atlas-search input:focus{ outline:none; border-color:var(--gold); }
  .atlas-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
  .atlas-search .results{ background:rgba(6,6,6,0.96); border:1px solid var(--line); display:none; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#333 transparent; }
  .atlas-search .results.show{ display:block; }
  .atlas-search .res{ display:grid; grid-template-columns:78px 1fr auto; gap:12px; align-items:baseline; padding:8px 12px; cursor:pointer; border-bottom:1px dashed rgba(234,234,234,0.08); }
  .atlas-search .res:last-child{ border-bottom:0; }
  .atlas-search .res .t{ font-size:8.5px; color:var(--muted); }
  .atlas-search .res .l{ color:#eaeaea; letter-spacing:.08em; text-transform:none; font-size:11px; }
  .atlas-search .res .l mark{ background:none; color:var(--gold); }
  .atlas-search .res .s{ color:var(--muted); font-size:9px; white-space:nowrap; }
  .atlas-search .res:hover, .atlas-search .res.sel{ background:rgba(201,162,39,0.08); }
  .atlas-search .res:hover .l, .atlas-search .res.sel .l{ color:var(--gold); }
  .atlas-search .fuzzy-note{ padding:7px 12px; font-size:8.5px; color:var(--gold); border-bottom:1px dashed rgba(234,234,234,0.08); }
  .atlas-search .none{ padding:10px 12px; color:var(--muted); }
  .atlas-search .hint{ margin-top:6px; font-size:8.5px; letter-spacing:.16em; color:var(--muted); text-align:right; }
  #searchStrip{ padding:18px 40px 0; }
  #searchStrip .box{ width:min(560px, 100%); }
  #searchStrip .results{ position:absolute; left:0; right:0; top:calc(100% + 4px); max-height:340px; }
  #searchToggle{ position:fixed; top:22px; left:22px; z-index:1100; width:44px; height:44px; padding:0; align-items:center; justify-content:center; opacity:0; transition:opacity .8s ease; pointer-events:none; }
  #searchToggle.show{ opacity:1; pointer-events:auto; }
  #searchToggle:hover, #searchToggle.on{ border-color:var(--gold); }
  #searchToggle.on svg *{ stroke:var(--gold); }
  #searchPanel{ position:fixed; top:78px; left:50%; transform:translateX(-50%); width:min(640px, calc(100vw - 32px)); z-index:1100; }
  #searchPanel input{ background:rgba(6,6,6,0.94); padding:12px 14px; font-size:11px; }
  #searchPanel .results{ margin-top:4px; max-height:min(52vh, 420px); }
  .rec.search-hit{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(201,162,39,.35), 0 0 24px rgba(201,162,39,.18); }
  .rv-top{ padding-left:84px; }   /* room for the search control beside the breadcrumb */
  /* with the strip and the rail under the title, the chart sits up and to the right, into the ground below the radar */
  @media (min-width:901px){
    .ex-head{ padding-top:84px; }
    .map-stage{ margin-top:-70px; }
    .map-plane{ width:min(86vw, 1240px, calc((100vh - 380px) * 2.25)); left:calc(50% - 30px); top:-22%; }
    .region-list{ max-height:calc(100vh - 300px); }
  }
  @media (max-width:900px){
    #searchStrip{ padding:14px 20px 0; }
    .lens-rail{ padding:10px 20px 0; }
    .lens-rail .grapes{ padding-left:0; max-width:none; }
  }
  @media (max-width:760px){
    #searchToggle{ left:16px; top:22px; }
    #searchPanel{ top:74px; }
    .atlas-search .res{ grid-template-columns:62px 1fr; }
    .atlas-search .res .s{ display:none; }
    .rv-top{ padding-left:70px; }
  }

  /* ---------- HUD geometry on small and short screens ----------
     The hairline rings, crosses and section frames are drawn at 14–16 % white: right on a large monitor,
     lost on a phone in daylight or a 13-inch laptop. The weight stays hairline; only the tone lifts. */
  @media (max-width:900px), (max-height:820px){
    .motif-ring-line{ stroke:rgba(234,234,234,0.24); }
    .motif-cross{ stroke:rgba(234,234,234,0.21); }
    .pl-geo circle{ stroke:rgba(234,234,234,0.24); }
    .pl-geo .cross{ stroke:rgba(234,234,234,0.21); }
    .frame{ border-color:rgba(234,234,234,0.24); }
  }
  @media (max-width:640px){
    .motif-ring-line{ stroke:rgba(234,234,234,0.32); stroke-width:0.7px; }
    .motif-cross{ stroke:rgba(234,234,234,0.28); }
    .motif-tick{ stroke:rgba(234,234,234,0.6); }
    .pl-geo circle{ stroke:rgba(234,234,234,0.32); stroke-width:0.6; }
    .pl-geo .cross{ stroke:rgba(234,234,234,0.28); }
    .pl-geo .dot{ fill:rgba(234,234,234,0.55); }
    .frame{ border-color:rgba(234,234,234,0.3); }
  }

  /* ---------- PHONES & SMALL TABLETS ---------- */
  /* Everything above is the desktop composition; these rules re-stack it for a hand-held screen without
     changing the look: same type, same geometry, same gold — just one column and reachable targets. */
  @media (max-width:900px){
    /* explore: title, then the chart, then the full index beneath it */
    #explore{ min-height:100vh; overflow:hidden; padding-bottom:64px; }
    .ex-head{ padding:84px 20px 0; align-items:flex-start; }
    .ex-title{ font-size:clamp(26px, 8vw, 72px); }
    .compass{ width:64px; height:64px; margin-top:0; flex:none; }
    .map-stage{ flex:none; min-height:0; height:50vw; margin:0; perspective:900px; perspective-origin:50% 30%; }
    .map-plane{ left:49%; top:-8vw; width:92vw; transform:translateX(-50%) rotateX(56deg) rotateZ(-3deg); }
    .orb{ transform:translate(-50%,-50%) scale(calc(var(--sc,1) * .72)); }
    .orb.live::after{ display:none; }
    .map-card{ display:none; }
    .region-list{ display:block; position:static; width:auto; margin:0 20px; padding:8px 10px; font-size:10px; line-height:2.3; background:rgba(6,6,6,0.5); max-height:none; overflow:visible; }
    .region-list .rl{ padding:1px 6px; margin:0 -6px; }
    .map-hint{ position:static; margin:14px 20px 0; font-size:9px; line-height:1.8; }
  }

  @media (max-width:760px){
    /* boot screen: counter top right, the log in the lower half with each result on its own line,
       the button as a full-width pill along the bottom — nothing overlaps */
    .pl-counter{ top:22px; right:20px; font-size:11px; }
    .pl-log{ left:20px; right:20px; bottom:100px; font-size:10px; line-height:1.7; }
    .pl-log .ld{ display:none; }
    .pl-log .g{ display:block; padding-left:1.9em; margin-bottom:5px; }
    #enterBtn{ position:absolute; left:20px; right:20px; bottom:28px; padding:15px 20px; }
    #hero .hero-inner{ left:20px; right:20px; top:clamp(88px, 14vh, 160px); }
    #hero h1{ font-size:clamp(38px, 11vw, 112px); }
    #hero .byline{ font-size:9.5px; line-height:1.7; letter-spacing:.1em; }
    .caption-box{ font-size:12px; line-height:1.55; padding:12px 14px; bottom:48px; }
    #title-card .tc-inner{ padding:0 22px; }
    #title-card p{ font-size:15px; }
    #terminal{ padding:84px 0 60px; align-items:flex-start; }
    .term-window{ width:min(740px, calc(100vw - 32px)); }
    .term-body{ padding:16px 14px; font-size:11px; line-height:1.9; min-height:0; }
    .scroll-down{ right:20px; bottom:22px; font-size:10px; }

    /* footer: everything on the centre line, like the provenance block */
    #footer .footer-inner{ padding:84px 22px 40px; gap:36px; }
    .f-top{ align-items:center; }
    .f-contact{ text-align:center; }
    .f-stamp br{ display:none; }
    .f-mid{ padding:0; }
    .f-mid p{ font-size:13px; }
  }

  @media (max-width:640px){
    /* region readout */
    .rv-boot{ padding:0 16px 40px 16px; }
    .rv-boot .lines{ font-size:10px; }
    .rv-top{ padding:16px 16px 0 70px; gap:12px; }
    .rv-top .crumb{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #rvClose, #lvClose{ white-space:nowrap; flex:none; padding:8px 10px; }
    .rv-scroll{ padding:20px 16px 48px; }
    .rv-head{ grid-template-columns:minmax(0,1fr); gap:24px; margin-top:12px; }
    .rv-head h2, .lv-head h2{ font-size:clamp(28px, 8.4vw, 104px); overflow-wrap:anywhere; }
    .rv-lede, .lv-lede{ font-size:14px; min-height:0; }
    .rv-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:none; }
    .rv-map{ max-width:none; max-height:none; aspect-ratio:1/1; justify-self:stretch; }
    .rv-block{ margin-top:40px; }
    .rv-block > h3{ flex-direction:column; align-items:stretch; }
    .h3r{ flex-wrap:wrap; }
    #recFilter{ width:100%; }
    .rv-grid{ grid-template-columns:minmax(0,1fr); gap:14px; }
    .rec-body{ padding:14px 14px 16px; }
    .rec-row{ grid-template-columns:60px minmax(0,1fr); }
    .rv-two{ gap:28px; }
    .lv-credit{ grid-template-columns:72px minmax(0,1fr); }
    .lv-full pre{ font-size:10px; padding:0 12px 14px; }
  }

  /* ---------- THE PRODUCER RECORD — the third level: chart → region → producer ---------- */
  .rec-bar .rec-open{ margin-left:auto; margin-right:10px; font-size:9px; letter-spacing:.16em; color:var(--gold); text-decoration:none; opacity:.85; white-space:nowrap; }
  .rec-bar .rec-open:hover, .rec-bar .rec-open:focus-visible{ opacity:1; }
  .rec-name[data-open]{ cursor:pointer; }
  .rec-name[data-open]:hover{ color:var(--gold); }
  .rec-sum{ font-size:9.5px; letter-spacing:.12em; color:var(--muted); line-height:1.8; margin-bottom:8px; }
  .rec-sum .g{ color:var(--gold); }
  #producerView{ position:fixed; inset:0; z-index:920; background:#060606; display:none; flex-direction:column; }
  #producerView.open{ display:flex; }
  #producerView .frame{ z-index:2; }
  #producerView .rv-top{ padding-left:84px; }
  #producerView .rv-top .btns{ display:flex; gap:8px; flex:none; }
  #pvBack, #pvClose{ background:none; border:1px solid var(--line); color:#eaeaea; font:inherit; letter-spacing:.16em; padding:8px 12px; cursor:pointer; white-space:nowrap; }
  #pvBack:hover, #pvClose:hover{ border-color:var(--gold); color:var(--gold); }
  #pvTitle:focus{ outline:none; }
  .pv-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start; margin-top:20px; }
  .pv-head.nomap{ grid-template-columns:minmax(0,1fr); }
  .pv-head h2{ font-size:clamp(34px,5.6vw,84px); line-height:.95; color:#dedede; filter:url(#titleGrain); text-shadow:0 0 28px rgba(234,234,234,0.35), 0 0 2px rgba(234,234,234,0.6); margin-bottom:18px; overflow-wrap:anywhere; }
  .pv-lede{ font-size:15px; line-height:1.7; color:#cfcfcf; max-width:600px; }
  .pv-people{ margin-top:12px; font-size:12.5px; line-height:1.7; color:#bdbdbd; }
  .pv-people .k{ font-size:9px; letter-spacing:.14em; color:var(--muted); margin-right:10px; }
  .pv-flags{ margin-top:16px; display:flex; flex-wrap:wrap; gap:6px; }
  .pv-map{ position:relative; border:1px solid var(--line); background:#000; aspect-ratio:1/1; width:100%; max-width:440px; justify-self:end; }
  .pv-map canvas{ position:absolute; inset:0; width:100%; height:100%; }
  .pv-map .hud{ position:absolute; left:10px; top:10px; font-size:9px; letter-spacing:.14em; color:var(--muted); line-height:1.7; }
  .pv-map .hud b{ color:#cfcfcf; font-weight:400; }
  .pv-map .scale{ position:absolute; right:12px; bottom:12px; font-size:9px; letter-spacing:.14em; color:var(--muted); }
  .pv-map .scale i{ display:block; height:1px; background:#8a8a8a; margin-bottom:4px; position:relative; }
  .pv-map .scale i::before, .pv-map .scale i::after{ content:""; position:absolute; top:-3px; width:1px; height:7px; background:#8a8a8a; }
  .pv-map .scale i::before{ left:0; } .pv-map .scale i::after{ right:0; }
  .pv-map .corner{ position:absolute; width:10px; height:10px; border:1px solid var(--gold); opacity:.8; }
  .pv-map .corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
  .pv-map .corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
  .pv-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px; max-width:620px; }
  .pv-stats div{ background:#080808; padding:12px 12px 10px; }
  .pv-stats .v{ font-size:20px; color:#eaeaea; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pv-stats .v.g{ color:var(--gold); }
  .pv-stats .v.dim{ color:var(--muted); }
  .pv-stats .k{ font-size:9px; letter-spacing:.14em; color:var(--muted); display:block; margin-top:4px; }
  .pv-three{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px; align-items:start; }
  .pv-three > div{ min-width:0; }
  .pv-three h3, .pv-prov-block h3{ font-size:11px; letter-spacing:.2em; color:#bdbdbd; border-bottom:1px dashed var(--line); padding-bottom:10px; margin:0 0 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-weight:400; }
  .pv-three h3 .h3l, .pv-prov-block h3 .h3l{ color:#bdbdbd; }
  .pv-row{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; margin-top:10px; font-size:12.5px; line-height:1.6; color:#c9c9c9; }
  .pv-row .k{ font-size:9px; letter-spacing:.14em; color:var(--muted); padding-top:3px; }
  .pv-row a{ color:#eaeaea; text-decoration:none; border-bottom:1px dotted #555; }
  .pv-row a:hover{ color:var(--gold); }
  .pv-row .tags{ display:flex; flex-wrap:wrap; gap:4px; }
  .pv-row .tags span{ font-size:9px; letter-spacing:.12em; border:1px solid var(--line); padding:3px 6px; color:#bdbdbd; text-transform:uppercase; }
  .pv-neigh{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 14px; font-size:11px; color:#bdbdbd; align-items:baseline; }
  .pv-neigh .d{ font-size:9.5px; letter-spacing:.12em; color:var(--muted); white-space:nowrap; }
  .pv-neigh a{ color:#eaeaea; text-decoration:none; }
  .pv-neigh a:hover{ color:var(--gold); }
  .pv-wines{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
  .pv-wine{ border:1px solid var(--line); background:rgba(255,255,255,0.015); padding:14px 16px; min-width:0; }
  .pv-wine .n{ font-size:15px; color:#eaeaea; letter-spacing:.02em; overflow-wrap:anywhere; }
  .pv-wine .m{ font-size:9.5px; letter-spacing:.14em; color:var(--muted); margin-top:4px; }
  .pv-wine .m .g{ color:var(--gold); }
  .pv-wine ul{ list-style:none; margin:10px 0 0; padding:0; }
  .pv-wine li{ font-size:11.5px; color:#bdbdbd; line-height:1.6; display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; }
  .pv-wine li .y{ color:var(--gold); font-size:10px; letter-spacing:.12em; padding-top:2px; }
  .pv-wine li b{ color:#eaeaea; font-weight:400; }
  .pv-wine .vint{ color:var(--muted); }
  .pv-ranges{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:14px; }
  .pv-ranges .k{ font-size:9px; letter-spacing:.14em; color:var(--muted); margin-right:6px; }
  .pv-ranges span:not(.k){ font-size:9.5px; letter-spacing:.12em; border:1px solid var(--line); padding:3px 8px; color:#bdbdbd; text-transform:uppercase; }
  .pv-wine .note{ margin-top:8px; font-size:11.5px; line-height:1.6; color:#a8a8a8; font-style:italic; }
  .pv-wine .note .mono{ font-style:normal; font-size:8.5px; letter-spacing:.12em; color:var(--muted); white-space:nowrap; }
  .pv-soon a{ color:#cfcfcf; text-decoration:none; border-bottom:1px dotted #555; }
  .pv-soon a:hover{ color:var(--gold); }
  .pv-soon{ border:1px dashed var(--line); padding:12px 14px; font-size:10px; letter-spacing:.14em; color:var(--muted); line-height:1.7; margin-top:12px; }
  .pv-ledger .yr{ margin-top:18px; font-size:10px; letter-spacing:.2em; color:var(--gold); border-bottom:1px dashed var(--line); padding-bottom:6px; margin-bottom:8px; }
  .pv-ledger-grid{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px 24px; }
  .aw.pv-aw{ grid-template-columns:minmax(0,1fr); gap:2px; font-size:12px; color:#c9c9c9; margin-bottom:0; }
  .aw.pv-aw .w{ color:#bdbdbd; }
  .pv-prov{ font-size:11.5px; line-height:1.8; color:#a8a8a8; }
  .pv-prov b{ color:#eaeaea; font-weight:400; }
  @media (max-width:900px){
    .pv-head{ grid-template-columns:minmax(0,1fr); }
    .pv-map{ justify-self:stretch; max-width:none; }
    .pv-three{ grid-template-columns:minmax(0,1fr); gap:28px; }
  }
  @media (max-width:640px){
    #producerView .rv-top{ padding:16px 16px 0 70px; gap:12px; }
    #producerView .rv-top .crumb{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    #pvBack .long, #pvClose .long{ display:none; }
    #pvCrumb > b:first-child, #pvCrumb > span:first-of-type{ display:none; }   /* the atlas name is the emblem's; the crumb keeps region / producer */
    #pvBack, #pvClose{ padding:8px 10px; }
    .pv-head h2{ font-size:clamp(28px, 8.4vw, 84px); }
    .pv-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:none; }
    .pv-row{ grid-template-columns:72px minmax(0,1fr); }
    .pv-wines, .pv-ledger-grid{ grid-template-columns:minmax(0,1fr); }
    .rec-bar .rec-open{ margin-right:8px; }
  }

  /* ---------- the shelf: a holding area with no position on the chart ---------- */
  .rl.nochart{ margin-top:10px; border-top:1px dashed var(--line); padding-top:12px; }
  .rl.nochart .n{ color:#9a9a9a; }
  .region-list .rl.nochart{ flex-wrap:wrap; }
  .rl .nc{ flex-basis:100%; font-style:normal; font-size:8px; letter-spacing:.18em; color:var(--muted); margin-top:2px; }
  .rv-map.nochart{ display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px), #000; }
  .rv-map.nochart .nopins{ position:static; transform:none; }

  /* ---------- tour operators: the whole roster on one page ---------- */
  #toursView{ position:fixed; inset:0; z-index:915; background:#060606; display:none; flex-direction:column; }
  #toursView.open{ display:flex; }
  #toursView .frame{ z-index:2; }
  #toursView .rv-top{ padding-left:84px; }
  .tv-head{ max-width:820px; }
  .tv-note{ margin-top:22px; max-width:760px; }
  .op-group{ display:block; min-height:0; width:auto; overflow:visible; margin:44px 0 0; padding:0; }
  .op-group h2{ font-size:11px; letter-spacing:.2em; color:#bdbdbd; border-bottom:1px dashed var(--line); padding-bottom:10px; margin-bottom:18px; font-weight:400; display:flex; justify-content:space-between; gap:16px; }
  .op-group h2 .h3l span{ color:var(--muted); font-size:10px; margin-left:10px; }
  .op-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; }
  .op{ border:1px solid var(--line); background:rgba(255,255,255,0.015); display:flex; flex-direction:column; transition:border-color .3s; overflow:hidden; }
  .op:hover{ border-color:rgba(201,162,39,.6); }
  .op-bar{ display:flex; justify-content:space-between; align-items:center; padding:8px 14px; border-bottom:1px solid var(--line); font-size:9.5px; color:var(--muted); letter-spacing:.12em; }
  .op h3{ font-size:18px; color:#eaeaea; letter-spacing:.02em; margin:14px 16px 4px; font-weight:400; }
  .op-type{ font-size:9.5px; letter-spacing:.14em; color:var(--muted); margin:0 16px 10px; }
  .op-detail{ font-size:12.5px; line-height:1.6; color:#c9c9c9; margin:0 16px 12px; }
  .op-row{ display:grid; grid-template-columns:72px 1fr; gap:10px; margin:0 16px 8px; font-size:12px; line-height:1.55; color:#c9c9c9; }
  .op-row .k{ font-size:9px; letter-spacing:.14em; color:var(--muted); padding-top:3px; }
  .op-row a{ color:#eaeaea; text-decoration:none; border-bottom:1px dotted #555; }
  .op-row a:hover{ color:var(--gold); }
  .op-regions{ font-size:9.5px; letter-spacing:.12em; line-height:1.9; }
  .op-regions a{ border-bottom:none; }
  .op-row .dim{ color:var(--muted); }
  .op-foot{ margin:auto 16px 0; padding:12px 0 14px; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin-top:10px; }
  .op-foot .src{ display:inline-block; font-size:9px; letter-spacing:.12em; color:var(--muted); text-decoration:none; border:1px solid var(--line); padding:3px 7px; line-height:1.5; }
  .op-foot .src:hover{ color:var(--gold); border-color:rgba(201,162,39,.6); }
  .tour.tour-all a{ color:var(--gold); text-decoration:none; font-size:10px; letter-spacing:.16em; }
  .tour.tour-all a:hover{ text-decoration:underline; }
  @media (max-width:640px){ #toursView .rv-top{ padding-left:70px; } .op-grid{ grid-template-columns:minmax(0,1fr); } #tvClose .long{ display:none; } }