/* ============================================================================
   VAELDROS — site styles
   One committed visual world: warm dark ground, aged paper map.
   ========================================================================= */

:root{
  /* --- the page --- */
  --ground:      #12100D;
  --ground-2:    #171410;
  --panel:       #1A1611;
  --panel-2:     #211C15;
  --line:        #2E2820;
  --line-2:      #3D3529;
  --text:        #EDE2CC;
  --dim:         #A79876;
  --faint:       #7A6C52;
  --gold:        #C9A05A;
  --gold-deep:   #8A6B32;
  --rust:        #9C3B22;
  --rust-light:  #C2593B;

  /* --- the paper map --- */
  --paper-hi:    #F3E9D5;
  --paper-lo:    #DCCCA8;
  --m-land:      #D8C7A2;
  --m-edge:      #6B5433;
  --m-river:     #8A7245;
  --m-peak:      #6B5433;
  --m-grid:      #B7A47C;
  --m-label:     #3A2E1C;
  --m-pin:       #6B5433;
  --m-hot:       #9C3B22;

  /* --- pieces the Appearance settings drive (see assets/js/theme.js) --- */
  --shade-rgb:   18,16,13;        /* the page ground, in rgb, for fades   */
  --text-rgb:    237,226,204;
  --accent-rgb:  201,160,90;
  --marker-rgb:  156,59,34;
  --ink-rgb:     107,84,51;       /* the map's drawing ink                */
  --text-bright: #F7EFDC;
  --on-accent:   #17130D;         /* text sitting on the accent colour    */
  --on-marker:   #F6E7DF;
  --gold-light:  #DDB673;
  --tint-warm:   #52412C;         /* the glow behind the hero clip        */
  --tint-deep:   #1D1811;
  --clip-a:      #3B3020;         /* the three clip-card tints            */
  --clip-b:      #2E3428;
  --clip-c:      #34262A;
  --stripe-a:    #2C2519;         /* the "no photo yet" hatching          */
  --stripe-b:    #241E15;
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Spectral", Georgia, "Times New Roman", serif;
  --hero-ratio:  9 / 4;          /* four 9:16 clips side by side */
  --grain:       1;               /* paper texture on the map, 0 turns off */

  --radius:      3px;
  --maxw:        1180px;
  --gutter:      clamp(18px, 4vw, 44px);

  --t--1: clamp(.78rem, .755rem + .11vw, .85rem);
  --t-0:  clamp(1rem,   .97rem + .16vw,  1.09rem);
  --t-1:  clamp(1.18rem, 1.09rem + .38vw, 1.38rem);
  --t-2:  clamp(1.45rem, 1.25rem + .8vw,  1.95rem);
  --t-3:  clamp(1.9rem, 1.5rem + 1.7vw,  2.9rem);
  --t-4:  clamp(2.3rem, 1.6rem + 3.2vw,  4.3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-0);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--gold-deep); color: var(--ground); }

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

.wrap{ max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide{ max-width: 1560px; margin-inline: auto; padding-inline: var(--gutter); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background: var(--gold); color: var(--ground);
  padding:.7rem 1.1rem; font-family:"JetBrains Mono",monospace; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:.6rem; top:.6rem; }

/* ---------------------------------------------------------------- type --- */
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.015em;
}
p { margin: 0; }

.mono{
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow{ color: var(--gold); }
.eyebrow--quiet{ color: var(--faint); }
.dim{ color: var(--dim); }
.measure{ max-width: 62ch; }

/* ---------------------------------------------------------------- nav ---- */
/* Three columns, not a row: the name on the left, the social logos in the
   middle, the page links on the right. The outer two columns are told to
   share whatever is left over equally, which is what puts the logos on the
   true centre line of the bar rather than merely between their neighbours. */
.nav{
  position: sticky; top: 0; z-index: 40;
  display: grid; align-items: center;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  grid-template-areas: "brand social links";
  gap: clamp(.9rem, 2.4vw, 1.7rem);
  padding: .9rem var(--gutter);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)){ .nav{ background: var(--ground); } }

.nav__brand{
  grid-area: brand; justify-self: start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.nav__links{ grid-area: links; justify-self: end;
  display: flex; align-items: center; gap: clamp(.9rem,2.2vw,1.6rem); white-space: nowrap; }
.nav__links a{
  font-family: "JetBrains Mono", monospace;
  font-size: .66rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ color: var(--text); border-bottom-color: var(--gold-deep); }
.nav__shop{
  border: 1px solid var(--gold-deep) !important;
  color: var(--gold) !important;
  padding: .34rem .85rem !important;
  border-radius: var(--radius);
}
.nav__shop:hover{ background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* the social logos, in the bar and in the footer.
   Each logo is drawn at the size of the text around it, so it sits on the
   same line as a name without being measured by hand. In "site" mode the
   drawing has no colour of its own and takes whatever colour it lands in. */
.soc{ display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--dim); }
.soc__ico{ display: block; flex: 0 0 auto; }
.nav__social{ grid-area: social; justify-self: center;
  display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, .95rem); }
.nav__social .soc{ font-size: 2.04rem; opacity: .82; transition: opacity .2s ease, color .2s ease; }
.nav__social .soc:hover{ opacity: 1; color: var(--gold); }


@media (max-width: 860px){
  /* Below this the three columns can no longer hold the logos on the centre
     line without squeezing the page links, so the bar stacks: the name, then
     the logos across the middle, then the page links.

     The logos get a line of their own rather than sharing one with the name.
     Sharing only works while the list is short — every link added eats into
     the same line, and on a phone that runs off the edge. Here they wrap onto
     a second line instead, however many there are. */
  .nav{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "social" "links";
    gap: .5rem 1.1rem; padding-inline: 18px; padding-block: .65rem;
  }
  .nav__social{ flex-wrap: wrap; justify-content: center; }
  .nav__social .soc{ font-size: 1.5rem; }
  .nav__links{ justify-self: stretch; overflow-x: auto; scrollbar-width: none; }
  .nav__links::-webkit-scrollbar{ display:none; }
}

/* ------------------------------------------------------------- dispatch --
   The banner is a ROW OF FOUR PORTRAIT CLIPS, not one widescreen one.
   Four 9:16 tiles side by side make a band of exactly 9:4, which is what
   --hero-ratio is tuned around (the three heights live in theme.js).
   ------------------------------------------------------------------------ */
.film{
  position: relative;
  background:
    radial-gradient(78% 120% at 30% 26%, var(--tint-warm) 0%, var(--tint-deep) 58%, var(--ground) 100%);
  isolation: isolate;
}

.film__strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
  aspect-ratio: var(--hero-ratio);
  /* on a short window, trim the clips rather than shove the page under it */
  max-height: 70vh;
}
@media (min-height: 900px){ .film__strip{ max-height: none; } }

.film__tile{
  position: relative;
  overflow: hidden;
  background: linear-gradient(200deg, var(--clip-a), var(--ground) 74%);
}
.film__tile:nth-child(2){ background: linear-gradient(165deg, var(--clip-b), var(--ground) 74%); }
.film__tile:nth-child(3){ background: linear-gradient(220deg, var(--clip-c), var(--ground) 74%); }
.film__tile:nth-child(4){ background: linear-gradient(190deg, var(--clip-a), var(--ground) 74%); }
.film__tile--lead::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--gold-deep);
}

.film__media{ position:absolute; inset:0; z-index:0; }
.film__media img,
.film__media video,
.film__media iframe{ width:100%; height:100%; object-fit: cover; border:0; }

/* the player itself, and the still frame that covers it until it starts */
/* The clips are scenery, not a video player: nothing about them answers to a
   click, so they cannot be paused, scrubbed or stopped. The title link and
   the sound button sit above and still work.                              */
.film__frame,
.film__media iframe{ pointer-events: none; }
.film__frame{ position:absolute; inset:0; z-index:0; }
.film__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.film__poster{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit: cover;
  transition: opacity .7s ease;
}
.film__tile.is-playing .film__poster{ opacity:0; }
/* a clip that would not start: the still covers the player entirely, so no
   dead play button is left showing through */
.film__tile.is-still .film__poster{ opacity:1; }
.film__tile.is-still .film__frame,
.film__tile.is-still .film__media iframe{ visibility:hidden; }

/* while a clip is playing, get out of its way — the writing comes back
   when you point at the tile (it is also YouTube's rule: do not cover a
   player that is running) */
.film__tile.is-playing .film__shade,
.film__tile.is-playing .film__cap,
.film__tile.is-playing .film__no,
.film__tile.is-playing .film__lead{
  opacity: 0;
  transition: opacity .45s ease;
}
.film__tile.is-playing:hover .film__shade,
.film__tile.is-playing:hover .film__cap,
.film__tile.is-playing:hover .film__no,
.film__tile.is-playing:hover .film__lead,
.film__tile.is-playing:focus-within .film__shade,
.film__tile.is-playing:focus-within .film__cap,
.film__tile.is-playing:focus-within .film__no,
.film__tile.is-playing:focus-within .film__lead{ opacity: 1; }
/* the sound button, only drawn when the settings ask for one */
.film__play{
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 4;
  width: 3.2rem; height: 3.2rem;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--text) 58%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ground) 42%, transparent);
  color: var(--text); font-size: .82rem; cursor: pointer; padding: 0;
  transition: background .25s ease, border-color .25s ease, scale .25s ease, opacity .25s ease;
}
.film__tile--lead .film__play{ width: 3.9rem; height: 3.9rem; font-size: .95rem; }
.film__play:hover{ background: color-mix(in srgb, var(--gold) 22%, transparent); border-color: var(--gold); scale: 1.07; }
.film__tile.is-playing .film__play{ opacity: .3; }
.film__tile.is-playing:hover .film__play,
.film__tile .film__play:focus-visible{ opacity: 1; }
.film__tile.is-loud .film__play{ border-color: var(--gold); color: var(--gold); opacity: 1; }
/* the volume mark.

   A click anywhere on the clip works the volume; this shows where that is and
   whether the sound is on. It keeps out of the way until you point at the
   tile, and stays lit on whichever clip is being heard. Crossed out while
   silent, waves once you can hear it. */
.film__tile--switch{ cursor: pointer; }
.film__sound{
  position: absolute; right: .7rem; top: .7rem; z-index: 4;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--text) 45%, transparent);
  border-radius: 50%;
  background: rgba(var(--shade-rgb), .55);
  color: var(--text); cursor: pointer; padding: 0;
  opacity: 0;
  transition: opacity .25s ease, border-color .25s ease, color .25s ease, background .25s ease;
}
.film__sound svg{ width: 1.05rem; height: 1.05rem; display: block; }
.film__tile:hover .film__sound,
.film__tile:focus-within .film__sound,
.film__tile.is-loud .film__sound{ opacity: 1; }
.film__sound:hover{ border-color: var(--gold); color: var(--gold); }
.film__sound:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.film__tile.is-loud .film__sound{
  border-color: var(--gold); color: var(--gold);
  background: rgba(var(--shade-rgb), .75);
}
.film__wave{ opacity: 0; transition: opacity .2s ease; }
.film__hush{ opacity: .95; transition: opacity .2s ease; }
.film__tile.is-loud .film__wave{ opacity: 1; }
.film__tile.is-loud .film__hush{ opacity: 0; }

a.film__name{ text-decoration: none; }
a.film__name:hover{ color: var(--gold); }
@media (max-width: 760px){
  .film__play{ width: 2.8rem; height: 2.8rem; }
  .film__tile--lead .film__play{ width: 3.2rem; height: 3.2rem; }
}

/* on a touch screen there is no pointing at a tile, so the writing stays */
@media (hover: none){
  .film__tile.is-playing .film__shade,
  .film__tile.is-playing .film__cap,
  .film__tile.is-playing .film__no,
  .film__tile.is-playing .film__lead{ opacity: 1; }
}

.film__scan{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.030) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.film__shade{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(var(--shade-rgb),.92) 4%, rgba(var(--shade-rgb),.28) 46%, transparent 74%);
}

.film__no{
  position:absolute; left:.7rem; top:.7rem; z-index:3;
  color: var(--gold); background: rgba(var(--shade-rgb),.6);
  padding:.16rem .45rem; border-radius: 2px;
}
.film__lead{
  position:absolute; left:.7rem; top:.7rem; z-index:3;
  display:flex; align-items:center; gap:.45rem;
  color: var(--gold); background: rgba(var(--shade-rgb),.66);
  padding:.16rem .55rem .16rem .45rem; border-radius: 2px;
}
.film__lead .dot{
  width:6px; height:6px; border-radius:50%; background: var(--rust-light);
  box-shadow: 0 0 0 0 rgba(var(--marker-rgb),.6);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(var(--marker-rgb),.55); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--marker-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--marker-rgb),0); }
}

.film__cap{
  position:absolute; left:.85rem; right:.85rem; bottom:.8rem; z-index:3;
  display:grid; gap:.18rem;
}
.film__name{
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(.86rem, .78rem + .32vw, 1.12rem); line-height:1.2;
  color: var(--text-bright);
}
.film__where{ color: var(--faint); }

.film__body{
  position: relative; z-index: 2;
  padding: clamp(1.2rem, 3vw, 2.1rem) var(--gutter) clamp(1.5rem, 3.4vw, 2.4rem);
}
.film__body .inner{
  max-width: var(--maxw); margin-inline: auto;
  display: grid; gap: .9rem 2.6rem;
}
@media (min-width: 900px){
  .film__body .inner{ grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: end; }
  .film__actions{ margin-top: .9rem; }
}
.film__tag{ display:flex; align-items:center; gap:.55rem; color: var(--gold); }
.film__tag .dot{
  width:6px; height:6px; border-radius:50%; background: var(--rust-light);
  box-shadow: 0 0 0 0 rgba(var(--marker-rgb),.6);
  animation: pulse 2.6s ease-out infinite;
}
.film__title{
  font-size: var(--t-3); line-height: 1.0;
  margin: .45rem 0 .5rem;
  color: var(--text-bright);
  max-width: 20ch;
}
.film__blurb{ max-width: 52ch; color: var(--dim); font-size: var(--t-0); line-height: 1.55; }
.film__actions{ display:flex; flex-wrap: wrap; gap:.7rem; margin-top: 1.1rem; }

/* on a phone four across would be 90px wide, so the strip swipes sideways */
@media (max-width: 760px){
  .film__strip{
    aspect-ratio: auto; max-height: none;
    grid-template-columns: repeat(4, 74%);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .film__strip::-webkit-scrollbar{ display:none; }
  .film__tile{ aspect-ratio: 9 / 16; scroll-snap-align: start; }
}

/* --------------------------------------------------------------- buttons - */
.btn{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .72rem 1.25rem;
  border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--solid{ background: var(--gold); color: var(--on-accent); font-weight: 600; }
.btn--solid:hover{ background: var(--gold-light); }
.btn--ghost{ border-color: var(--line-2); color: var(--text); background: transparent; }
.btn--ghost:hover{ border-color: var(--gold-deep); color: var(--gold); }
.btn--rust{ background: var(--rust); color: var(--on-marker); }
.btn--rust:hover{ background: var(--rust-light); }

/* --------------------------------------------------------------- bridge -- */
.bridge{
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: clamp(1.6rem, 4vw, 2.6rem) var(--gutter) 1.1rem;
  max-width: var(--maxw); margin-inline: auto;
}
.bridge h2{ font-size: var(--t-2); }
.bridge .aside{ margin-left: auto; color: var(--faint); }

/* ------------------------------------------------------------------ map -- */
.sheet{
  position: relative;
  border-block: 1px solid var(--m-edge);
  background: linear-gradient(172deg, var(--paper-hi), var(--paper-lo));
  isolation: isolate;
}
.sheet::before{           /* paper tooth */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity: var(--grain);
  background:
    repeating-linear-gradient(58deg, rgba(var(--ink-rgb),.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-31deg, rgba(var(--ink-rgb),.035) 0 1px, transparent 1px 6px);
}
.sheet::after{            /* aged edges */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 52%, rgba(var(--ink-rgb),.20) 100%),
    linear-gradient(90deg, rgba(var(--ink-rgb),.22), transparent 9%, transparent 91%, rgba(var(--ink-rgb),.22));
}

.map{ position: relative; z-index: 2; }
.map__art{ display:block; width:100%; height:auto; }
.map__photo{ display:block; width:100%; height:auto; }

.map__pins{ position:absolute; inset:0; }
.map__pin{
  position: absolute;
  translate: -50% -50%;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--m-edge);
}
.map__pin::before{
  content:""; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper-hi) 70%, transparent);
  transition: scale .2s ease, background .2s ease;
}
.map__pin:hover::before,
.map__pin:focus-visible::before,
.map__pin[aria-expanded="true"]::before{ scale: 1.45; background: var(--m-hot); }
.map__pin--hot{ color: var(--m-hot); }
.map__pin--hot::before{ animation: pin 3s ease-out infinite; }
@keyframes pin{
  0%,100%{ box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper-hi) 70%, transparent); }
  50%    { box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper-hi) 70%, transparent), 0 0 0 11px rgba(var(--marker-rgb),.16); }
}
.map__label{
  position: absolute; left: 1.55rem; top: 50%; translate: 0 -50%;
  font-family: var(--font-body);
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--m-label); white-space: nowrap;
  text-shadow: 0 0 6px var(--paper-hi), 0 0 3px var(--paper-hi);
  pointer-events: none;
}
.map__pin--flip .map__label{ left: auto; right: 1.55rem; }
@media (max-width: 760px){ .map__label{ display:none; } }

.map__card{
  position: absolute; z-index: 12;
  width: min(17rem, 74vw);
  background: color-mix(in srgb, var(--ground) 96%, transparent);
  border: 1px solid var(--gold-deep);
  padding: .95rem 1.05rem 1rem;
  box-shadow: 0 22px 48px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity .18s ease, translate .18s ease, visibility .18s;
}
.map__card[data-open="true"]{ opacity: 1; visibility: visible; translate: 0 0; }
.map__card .k{ color: var(--gold); }
.map__card h3{ font-size: 1.12rem; margin: .3rem 0 .35rem; color: var(--text-bright); }
.map__card p{ font-size: .84rem; color: var(--dim); line-height: 1.5; }
.map__card .go{
  display:inline-block; margin-top:.7rem;
  font-family:"JetBrains Mono",monospace; font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color: var(--rust-light);
  text-decoration:none;
}
.map__card .go:hover{ color: var(--gold); }

.map__meta{
  position:absolute; z-index: 3; right: 1.2rem; top: 1.1rem;
  text-align: right; color: color-mix(in srgb, var(--m-label) 62%, transparent);
  line-height: 1.9; font-size: .56rem;
}
@media (max-width: 760px){ .map__meta{ display: none; } }

.sheet__foot{
  position: relative; z-index: 3;
  display:flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem var(--gutter);
  border-top: 1px solid color-mix(in srgb, var(--m-edge) 45%, transparent);
  color: color-mix(in srgb, var(--m-label) 70%, transparent);
}

/* on phones the map would be a postage stamp, so make it pannable */
@media (max-width: 760px){
  .sheet{ overflow-x: auto; overscroll-behavior-x: contain; }
  .sheet > div:first-child{ min-width: 800px; }
  .sheet__foot{ min-width: 800px; }
}

/* --- the live map: the real Vaeldros, framed from its own address ------- */
.map--live{ position: relative; z-index: 2; }

/* The frame is held inside a window that clips it, so the map can be started
   part-way down its own picture rather than in the middle. The window keeps
   the height; the frame floats inside it and is moved by script. */
.live__clip{
  position: relative; overflow: hidden;
  height: clamp(24rem, 68vh, 46rem);
  background: linear-gradient(172deg, var(--paper-hi), var(--paper-lo));
}
.live__frame{
  position: absolute; left: 0; top: 0;
  display: block; width: 100%; height: 100%; border: 0;
}

/* a frame that big swallows the first scroll or swipe, so it stays behind a
   sheet of glass until someone actually asks to use it */
.live__veil{
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(var(--ink-rgb), .34));
}
.map--live.is-on .live__veil{ display: none; }
.live__hint{
  padding: .6rem 1rem;
  border: 1px solid var(--m-edge);
  background: color-mix(in srgb, var(--ground) 78%, transparent);
  color: var(--gold);
  text-transform: uppercase; letter-spacing: .14em; font-size: .62rem;
}
.live__out{
  position: absolute; right: .75rem; bottom: .75rem; z-index: 4;
  padding: .45rem .7rem;
  border: 1px solid var(--m-edge);
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  color: var(--gold); text-decoration: none;
  letter-spacing: .1em; font-size: .62rem;
}
.live__out:hover{ background: var(--gold); color: var(--ground); }

/* only while the map has the wheel: the way back out */
.live__done{
  position: absolute; left: .75rem; bottom: .75rem; z-index: 4;
  display: none;
  padding: .45rem .7rem;
  border: 1px solid var(--m-edge);
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  color: var(--gold); cursor: pointer;
  letter-spacing: .1em; font-size: .62rem;
}
.map--live.is-on .live__done{ display: block; }
.live__done:hover{ background: var(--gold); color: var(--ground); }
.map--noaddress{
  display: grid; place-items: center; min-height: 12rem;
  color: var(--faint); padding: 2rem;
}

/* the live map pans by itself, so the sideways-scrolling trick is undone */
.sheet--live{ overflow-x: hidden; }
@media (max-width: 760px){
  .sheet--live > div:first-child,
  .sheet--live .sheet__foot{ min-width: 0; }
  .sheet--live .live__clip{ height: clamp(20rem, 74vh, 34rem); }
}

/* region list under the map — also the whole map experience on phones */
.regionlist{
  display: grid; gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px){ .regionlist{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px){ .regionlist{ grid-template-columns: repeat(6, 1fr); } }
.regionlist a{
  background: var(--ground); padding: 1.05rem 1rem;
  display: grid; gap: .25rem; text-decoration: none;
  transition: background .2s ease;
}
.regionlist a:hover{ background: var(--panel); }
.regionlist h3{ font-size: .96rem; color: var(--text); }
.regionlist span{ color: var(--faint); }
.regionlist a[aria-current="page"]{ background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--rust); }

/* --------------------------------------------------------------- section - */
.section{ padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.section--tight{ padding-block: clamp(1.8rem, 4vw, 3rem); }
.section__head{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin-bottom: 1.5rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.section__head h2{ font-size: var(--t-2); }
.section__head .aside{ margin-left:auto; color: var(--faint); }

/* --------------------------------------------------------------- relics -- */
.relics{ display:grid; gap: clamp(.9rem, 2vw, 1.4rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px){ .relics{ grid-template-columns: repeat(4, 1fr); } }

.relic{
  border: 1px solid var(--line);
  background: var(--panel);
  padding: .7rem .7rem 1rem;
  display: flex; flex-direction: column;
  transition: border-color .2s ease, background .2s ease;
}
.relic:hover{ border-color: var(--line-2); background: var(--panel-2); }
.relic__img{
  aspect-ratio: 1; margin-bottom: .75rem;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(var(--accent-rgb),.10), transparent 70%),
    repeating-linear-gradient(45deg, var(--stripe-a) 0 7px, var(--stripe-b) 7px 14px);
  color: color-mix(in srgb, var(--gold) 62%, transparent);
  text-align: center; padding: .5rem;
  overflow: hidden;
}
.relic__img img{ width:100%; height:100%; object-fit: cover; }
.relic__kind{ color: var(--faint); }
.relic h3{ font-size: .98rem; margin: .3rem 0 .15rem; }
.relic__note{ font-size: .78rem; color: var(--dim); line-height:1.5; margin-bottom:.6rem; }
.relic__row{ display:flex; align-items:center; gap:.8rem; margin-top:auto; padding-top:.4rem; }
.relic__price{ font-family:"JetBrains Mono",monospace; font-size:.78rem; color: var(--gold); }
.relic__buy{
  margin-left:auto;
  font-family:"JetBrains Mono",monospace; font-size:.58rem;
  letter-spacing:.15em; text-transform:uppercase;
  border:1px solid var(--rust); color: var(--rust-light);
  padding:.3rem .7rem; border-radius: var(--radius); text-decoration:none;
  transition: background .2s ease, color .2s ease;
}
.relic__buy:hover{ background: var(--rust); color: var(--on-marker); }
.relic__buy[data-soon]{ border-color: var(--line-2); color: var(--faint); cursor: default; }

/* ------------------------------------------------------------ dispatches - */
.clips{ display:grid; gap: clamp(.9rem,2vw,1.3rem); grid-template-columns: repeat(2,1fr); }
@media (min-width: 720px){ .clips{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1000px){ .clips--four{ grid-template-columns: repeat(4,1fr); } }

.clip{
  position: relative; display: block; text-decoration: none;
  border: 1px solid var(--line);
  aspect-ratio: 9 / 13;
  overflow: hidden;
  background: linear-gradient(200deg, var(--clip-a), var(--ground) 74%);
  transition: border-color .25s ease;
}
.clip:nth-child(3n+2){ background: linear-gradient(165deg, var(--clip-b), var(--ground) 74%); }
.clip:nth-child(3n+3){ background: linear-gradient(220deg, var(--clip-c), var(--ground) 74%); }
.clip:hover{ border-color: var(--gold-deep); }
.clip__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; }
.clip__shade{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(var(--shade-rgb),.92) 6%, rgba(var(--shade-rgb),.25) 52%, transparent 78%);
}
.clip__no{
  position:absolute; left:.7rem; top:.7rem;
  color: var(--gold); background: rgba(var(--shade-rgb),.6);
  padding:.16rem .42rem; border-radius: 2px;
}
.clip__title{
  position:absolute; left:.8rem; right:.8rem; bottom:.75rem;
  font-family:var(--font-display); font-weight:400; font-size:.94rem;
  line-height:1.2; color:var(--text-bright);
}
.clip__where{
  position:absolute; left:.8rem; right:.8rem; bottom:.75rem;
  translate: 0 1.6rem; opacity: 0;
  color: var(--dim);
  transition: translate .25s ease, opacity .25s ease;
}
.clip:hover .clip__title, .clip:focus-visible .clip__title{ translate: 0 -1.1rem; }
.clip:hover .clip__where, .clip:focus-visible .clip__where{ translate: 0 0; opacity: 1; }
.clip__play{
  position:absolute; left:50%; top:44%; translate:-50% -50%;
  width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid rgba(var(--text-rgb),.55); display:grid; place-items:center;
  color:var(--text-bright); font-size:.62rem;
  opacity:.75; transition: opacity .25s ease, scale .25s ease;
}
.clip:hover .clip__play{ opacity:1; scale:1.1; }

/* ------------------------------------------------------------ region page  */
.regionhead{
  display:grid; gap: 1.4rem;
  padding-block: clamp(2rem, 5vw, 3.4rem);
}
@media (min-width: 860px){
  .regionhead{ grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(2rem,5vw,4rem); align-items:start; }
}
.regionhead h1{ font-size: var(--t-3); line-height: 1.02; margin: .45rem 0 .8rem; }
.regionhead .lore p{ color: var(--dim); margin-bottom: .9rem; max-width: 58ch; }
.regionhead .blurb{
  font-family:var(--font-body); font-style: italic;
  font-size: var(--t-1); color: var(--gold); line-height:1.4; margin-bottom: 1.1rem;
}
.factlist{ display:grid; gap:0; border:1px solid var(--line); }
.factlist div{
  display:grid; grid-template-columns: 7.5rem 1fr; gap:1rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--line);
}
.factlist div:last-child{ border-bottom:0; }
.factlist dt{ color: var(--faint); }
.factlist dd{ margin:0; color: var(--dim); font-size:.9rem; }

.minimap{ position:relative; border:1px solid var(--m-edge); background: linear-gradient(172deg, var(--paper-hi), var(--paper-lo)); }
.minimap .map__label,
.minimap .map__meta{ display:none; }
.minimap .map__pin{ width:1.8rem; height:1.8rem; }
.minimap .map__pin::before{ width:7px; height:7px; }
.minimap .live__clip{ height: 20rem; }
.minimap .live__hint{ padding: .45rem .7rem; font-size: .55rem; }
.minimap .live__out{ right: .5rem; bottom: .5rem; }
.minimap .live__done{ left: .5rem; bottom: .5rem; }

/* --------------------------------------------------------------- notice -- */
.notice{
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-deep);
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.06), transparent 62%);
  padding: 1rem 1.3rem;
  color: var(--dim);
  font-size: var(--t--1);
  line-height: 1.7;
  max-width: 74ch;
}
.notice strong{ color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------- footer -- */
.foot{
  border-top: 1px solid var(--line);
  background: var(--ground-2);
  padding-block: clamp(2.2rem, 5vw, 3.4rem) 2.6rem;
}
.foot__grid{ display:grid; gap: 1.8rem; }
@media (min-width: 780px){ .foot__grid{ grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; } }
.foot h2{ font-family:var(--font-display); font-weight:700; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; }
.foot p{ color: var(--dim); font-size:.88rem; margin-top:.6rem; max-width: 34ch; }
.foot h3{ color: var(--faint); font-family:"JetBrains Mono",monospace; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.7rem; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.foot ul a{ color: var(--dim); text-decoration:none; font-size:.9rem; }
.foot ul a:hover{ color: var(--gold); }
.foot__social .soc{ font-size: .9rem; }
.foot__social .soc .soc__ico{ font-size: 1.05rem; opacity: .9; }
.foot__social .soc:hover .soc__ico{ opacity: 1; }
.foot__base{
  margin-top: 2.2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display:flex; gap:1rem; flex-wrap:wrap;
  color: var(--faint);
}
.foot__base .right{ margin-left:auto; }

/* ----------------------------------------------------------- shop strip - */
/* A band of products drifting sideways above the footer, on every page.
   The lane holds two copies of the same list, so sliding it exactly half its
   width and starting over lands on an identical picture: the loop has no
   seam. It stops the moment a pointer or the tab key lands on it, and it
   never moves at all for anyone who has asked their computer for less
   motion.                                                                  */
.strip{
  border-top: 1px solid var(--line);
  background: var(--ground-2);
  padding-block: 1.5rem 1.7rem;
  overflow: hidden;
}
.strip__head{
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 1rem;
}
.strip__head p{ color: var(--faint); }
.strip__all{
  margin-left: auto;
  font-family: "JetBrains Mono", monospace; font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
}
.strip__all:hover{ color: var(--gold-light); }

.strip__track{
  overflow: hidden;
  /* let the ends fade into the page rather than stop dead */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.strip__lane{
  display: flex; gap: .5rem; width: max-content;
  animation-name: strip-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* one copy's worth of travel, whatever number of copies it took to cover the
   screen: the lane is --copies wide, so a single copy is that fraction of it */
@keyframes strip-drift{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(calc(-100% / var(--copies, 2)),0,0); }
}
.strip__track:hover .strip__lane,
.strip__lane:focus-within{ animation-play-state: paused; }

.strip__item{
  flex: 0 0 auto; width: clamp(186px, 22vw, 258px);
  text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: .4rem;
}
.strip__img{
  display: block; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--panel);
  transition: border-color .2s ease;
}
.strip__img img{ width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease, opacity .2s ease; }
.strip__item:hover .strip__img{ border-color: var(--gold-deep); }
.strip__item:hover .strip__img img{ transform: scale(1.05); }
.strip__item:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.strip__name{
  font-size: .82rem; line-height: 1.35; color: var(--dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.strip__item:hover .strip__name{ color: var(--text); }
.strip__price{ font-size: .74rem; color: var(--gold); }


/* Nothing moves for anyone who has asked their computer for less motion.
   The repeats stay: dropping them would leave the right hand side of a wide
   screen empty, which is the one thing this band must never look like. It
   becomes an ordinary row you push sideways yourself. */
@media (prefers-reduced-motion: reduce){
  .strip__lane{ animation: none; }
  .strip__track{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .strip__item:hover .strip__img img{ transform: none; }
}

/* --------------------------------------------------------------- utility - */
.hide{ display: none !important; }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------- chips - */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  font-family:"JetBrains Mono", monospace;
  font-size:.62rem; letter-spacing:.15em; text-transform:uppercase;
  padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--line-2);
  background: var(--panel);
  color: var(--dim);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover{ border-color: var(--gold-deep); color: var(--text); }
.chip[aria-pressed="true"]{
  background: var(--gold); border-color: var(--gold);
  color: var(--on-accent); font-weight: 600;
}

/* the map starts centred on the land when it has to be panned */
.sheet{ scroll-behavior: auto; }