/* ============================================================================
   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 ---- */
.nav{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; 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{
  margin-right: auto;
  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{ display: flex; align-items: center; gap: clamp(.9rem,2.2vw,1.6rem); }
.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); }

@media (max-width: 700px){
  .nav{ flex-wrap: wrap; gap: .7rem 1.1rem; padding-inline: 18px; }
  .nav__brand{ width: 100%; margin-right: 0; }
  .nav__links{ width: 100%; 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; }

/* 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; }
.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; }

.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__cap a{
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(.86rem, .78rem + .32vw, 1.12rem); line-height:1.2;
  color: var(--text-bright); text-decoration:none;
}
.film__cap a:hover{ color: var(--gold); }
.film__where{ color: var(--faint); }

.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;
  transition: background .25s ease, border-color .25s ease, scale .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__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; }
  .film__play{ width: 2.8rem; height: 2.8rem; }
  .film__tile--lead .film__play{ width: 3.2rem; height: 3.2rem; }
}

/* --------------------------------------------------------------- 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; }
}

/* 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; }

/* --------------------------------------------------------------- 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__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; }

/* --------------------------------------------------------------- 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; }