/*
 * FØROYAR V2 — Creative Director Pass
 * Enhanced Stylesheet — extends and overrides main.css
 * =============================================================================
 */

/* ─── V2 DESIGN TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Extended palette */
  --village-dim: rgba(216, 164, 95, 0.15);
  --village-glow: rgba(216, 164, 95, 0.08);
  --moss-dim: rgba(94, 124, 85, 0.12);
  --ocean-dim: rgba(29, 76, 85, 0.15);
  --cream-ghost: rgba(242, 241, 232, 0.05);

  /* Duotone image treatment */
  --img-filter: brightness(0.82) saturate(0.6) contrast(1.08);
  --img-filter-warm: brightness(0.88) saturate(0.65) contrast(1.05);

  /* Topographic */
  --topo-stroke: rgba(94, 124, 85, 0.06);
  --topo-stroke-bright: rgba(94, 124, 85, 0.12);

  /* Animation speeds */
  --slow: 2s;
  --very-slow: 4s;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Atlas grid */
  --grid-color: rgba(29, 76, 85, 0.04);
}

/* ─── GLOBAL IMAGE TREATMENT ─────────────────────────────────────────────── */
/* Applies consistent cinematic color grade to all location/hero images */

.location-image-panel img,
.gallery-item img,
.ending-bg img,
.collage-img {
  filter: var(--img-filter);
  transition: filter 0.8s ease;
}

.hero-bg img {
  filter: brightness(0.75) saturate(0.55) contrast(1.12);
}

/* Color overlay system — each story gets its own atmosphere */
.location-image-panel {
  position: sticky;
}

.img-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Tórshavn — warm harbor amber */
.story-torshavn .img-grade {
  background: linear-gradient(
    180deg,
    rgba(15, 28, 35, 0.5) 0%,
    rgba(20, 50, 40, 0.3) 50%,
    rgba(7, 16, 19, 0.15) 100%
  );
  mix-blend-mode: multiply;
}

/* Gásadalur — cold Atlantic blue */
.story-gasadalur .img-grade {
  background: linear-gradient(
    180deg,
    rgba(7, 20, 35, 0.55) 0%,
    rgba(10, 35, 50, 0.3) 60%,
    rgba(7, 16, 19, 0.1) 100%
  );
  mix-blend-mode: multiply;
}

/* Saksun — earthy valley green */
.story-saksun .img-grade {
  background: linear-gradient(
    180deg,
    rgba(15, 30, 20, 0.45) 0%,
    rgba(20, 40, 25, 0.25) 50%,
    rgba(7, 16, 19, 0.1) 100%
  );
  mix-blend-mode: multiply;
}

/* Gjógv — deep ocean blue-green */
.story-gjogv .img-grade {
  background: linear-gradient(
    180deg,
    rgba(7, 16, 30, 0.5) 0%,
    rgba(10, 30, 45, 0.3) 60%,
    rgba(7, 16, 19, 0.2) 100%
  );
  mix-blend-mode: multiply;
}

/* Kalsoy — dark moody grey */
.story-kalsoy .img-grade {
  background: linear-gradient(
    180deg,
    rgba(10, 14, 18, 0.6) 0%,
    rgba(12, 18, 22, 0.4) 60%,
    rgba(7, 16, 19, 0.2) 100%
  );
  mix-blend-mode: multiply;
}

/* Mykines — ocean fog */
.story-mykines .img-grade {
  background: linear-gradient(
    180deg,
    rgba(12, 25, 32, 0.5) 0%,
    rgba(8, 20, 30, 0.35) 60%,
    rgba(7, 16, 19, 0.15) 100%
  );
  mix-blend-mode: multiply;
}

/* Trælanípa — steel grey blue */
.story-traelaniipa .img-grade {
  background: linear-gradient(
    180deg,
    rgba(10, 22, 32, 0.55) 0%,
    rgba(7, 20, 35, 0.35) 60%,
    rgba(7, 16, 19, 0.2) 100%
  );
  mix-blend-mode: multiply;
}

/* ─── HERO V2 — TOPOGRAPHIC BACKGROUND ──────────────────────────────────── */

.hero-topo-bg {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.hero-topo-svg {
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.topo-ring {
  fill: none;
  stroke: var(--topo-stroke-bright);
  stroke-width: 0.8;
  transition: stroke-opacity 1s ease;
}

/* ─── HERO V2 — ENHANCED META BAR ───────────────────────────────────────── */

.hero-meta-bar {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.hero-data-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-left: 1px solid rgba(94, 124, 85, 0.3);
  padding-left: 1rem;
}

.hero-data-label {
  font-family: var(--font-sans);
  font-size: 0.5rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--moss);
  opacity: 0.8;
}

.hero-data-value {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--cream-dim);
  letter-spacing: 0.08em;
}

/* Atlas stamp */
.atlas-stamp {
  position: absolute;
  bottom: 3.5rem;
  left: clamp(1.5rem, 5vw, 6rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0.45;
}

.atlas-stamp-map {
  width: 36px;
  height: 40px;
  opacity: 0.8;
}

.atlas-stamp-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Chapter label in hero */
.hero-chapter-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.hero-chapter-line {
  width: 24px;
  height: 1px;
  background: var(--moss);
}

/* Coastline stroke in hero */
.hero-coastline-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 5;
  pointer-events: none;
  opacity: 0.3;
}

/* ─── MAP DRAWER ─────────────────────────────────────────────────────────── */

.map-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(440px, 92vw);
  background: #0c1614;
  border-left: 1px solid rgba(94, 124, 85, 0.2);
  z-index: 7000;
  transform: translateX(100%);
  transition: transform 0.6s var(--ease-out-expo);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--moss) transparent;
}

.map-drawer.is-open {
  transform: translateX(0);
}

.map-drawer-image-wrap {
  position: relative;
  height: 260px;
  overflow: hidden;
  flex-shrink: 0;
}

.map-drawer-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-filter);
}

.map-drawer-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(12, 22, 20, 0.8) 100%
  );
}

.map-drawer-content {
  padding: 2rem 2.5rem 3rem;
  flex: 1;
}

.map-drawer-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(242, 241, 232, 0.15);
  background: rgba(7, 16, 19, 0.5);
  color: var(--cream-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(4px);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.map-drawer-close:hover {
  border-color: rgba(94, 124, 85, 0.6);
  background: rgba(29, 76, 85, 0.3);
}

.map-drawer-close:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}

.map-drawer-coord {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ocean);
  margin-bottom: 0.6rem;
}

.map-drawer-name {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 200;
  color: var(--cream);
  line-height: 1.05;
  margin-bottom: 0.25rem;
}

.map-drawer-known {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--village);
  margin-bottom: 1.25rem;
}

.map-drawer-divider {
  width: 32px;
  height: 1px;
  background: linear-gradient(to right, var(--moss), transparent);
  margin-bottom: 1.5rem;
}

.map-drawer-desc {
  font-family: var(--font-sans);
  font-size: 0.83rem;
  color: var(--cream-dim);
  line-height: 1.9;
  margin-bottom: 2rem;
}

.map-drawer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--village);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 164, 95, 0.3);
  padding-bottom: 0.2rem;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.map-drawer-cta:hover {
  color: var(--cream);
  border-color: var(--cream);
}

.map-drawer-cta:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 4px;
}

/* Drawer overlay backdrop */
.map-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 16, 19, 0.6);
  z-index: 6900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(2px);
}

.map-drawer-backdrop.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* ─── MAP PIN — V2 FOCUS STATES ─────────────────────────────────────────── */

.map-pin-group:focus {
  outline: none;
}

.map-pin-group:focus-visible .pin-focus-ring {
  display: block;
  opacity: 1;
}

.pin-focus-ring {
  display: none;
  fill: none;
  stroke: var(--village);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
  opacity: 0;
}

/* ─── LOCATION STORIES V2 — UNIQUE CHAPTER ACCENTS ──────────────────────── */

/* Shared section border */
.location-story + .location-story {
  border-top: 1px solid rgba(94, 124, 85, 0.07);
}

/* Chapter label style */
.location-chapter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(94, 124, 85, 0.2);
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 1.5rem;
  width: fit-content;
}

/* Field note block within stories */
.story-field-note {
  border-left: 1px solid rgba(216, 164, 95, 0.25);
  padding: 1rem 1.25rem;
  margin-top: 2rem;
  position: relative;
  background: rgba(216, 164, 95, 0.03);
}

.story-field-note::before {
  content: 'Field Note';
  position: absolute;
  top: -0.55rem;
  left: 1rem;
  font-family: var(--font-sans);
  font-size: 0.48rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--village);
  background: var(--atlantic);
  padding: 0 0.4rem;
}

.story-field-note p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.83rem;
  color: var(--cream-dim);
  line-height: 1.7;
}

/* ─── TÓRSHAVN — Harbor warmth effect ───────────────────────────────────── */

.torshavn-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.harbor-light {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(216, 164, 95, 0.25) 0%,
    transparent 70%
  );
  animation: harborGlow var(--very-slow) ease-in-out infinite;
  filter: blur(8px);
}

.harbor-light:nth-child(2) { animation-delay: -1.2s; }
.harbor-light:nth-child(3) { animation-delay: -2.5s; }
.harbor-light:nth-child(4) { animation-delay: -0.8s; }
.harbor-light:nth-child(5) { animation-delay: -3s; }

@keyframes harborGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.15); }
}

/* ─── GÁSADALUR — Waterfall animation ───────────────────────────────────── */

.waterfall-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.waterfall-stream {
  position: absolute;
  top: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(216, 221, 216, 0.55) 30%,
    rgba(216, 221, 216, 0.35) 70%,
    transparent 100%
  );
  animation: waterfall 3.2s ease-in infinite;
  transform: translateY(-100%);
}

.waterfall-stream:nth-child(1) { left: 47%; height: 35%; animation-delay: 0s; }
.waterfall-stream:nth-child(2) { left: 49%; height: 28%; animation-delay: 0.4s; width: 0.6px; opacity: 0.7; }
.waterfall-stream:nth-child(3) { left: 51%; height: 32%; animation-delay: 0.8s; width: 0.8px; opacity: 0.6; }
.waterfall-stream:nth-child(4) { left: 45%; height: 20%; animation-delay: 1.2s; width: 0.5px; opacity: 0.5; }
.waterfall-stream:nth-child(5) { left: 53%; height: 25%; animation-delay: 1.6s; width: 0.5px; opacity: 0.45; }

@keyframes waterfall {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

.waterfall-mist {
  position: absolute;
  bottom: 0;
  left: 30%;
  right: 30%;
  height: 30%;
  background: radial-gradient(
    ellipse at center bottom,
    rgba(216, 221, 216, 0.1) 0%,
    transparent 70%
  );
  filter: blur(20px);
  animation: mistPulse 4s ease-in-out infinite;
}

@keyframes mistPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
  50% { opacity: 0.9; transform: scaleY(1.1); }
}

/* ─── GJÓGV — Ocean strokes animation ───────────────────────────────────── */

.gorge-strokes-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.gorge-strokes-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
}

.gorge-wave-path {
  fill: none;
  stroke: rgba(29, 76, 85, 0.5);
  stroke-width: 1;
  stroke-linecap: round;
  animation: gorgeWave 3s ease-in-out infinite;
  transform-origin: right;
}

.gorge-wave-path:nth-child(2) { animation-delay: -0.8s; stroke-opacity: 0.7; }
.gorge-wave-path:nth-child(3) { animation-delay: -1.6s; stroke-opacity: 0.5; }
.gorge-wave-path:nth-child(4) { animation-delay: -2.2s; stroke-opacity: 0.35; }

@keyframes gorgeWave {
  0% { stroke-dashoffset: 400; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 0.8; }
  100% { stroke-dashoffset: -400; opacity: 0; }
}

/* ─── KALSOY — Tunnel reveal ─────────────────────────────────────────────── */

.tunnel-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: none; /* GSAP controls this */
}

.tunnel-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tunnel-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(7, 16, 19, 0.98) 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ─── MYKINES — Bird silhouettes ─────────────────────────────────────────── */

.bird-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.bird-silhouette {
  position: absolute;
  opacity: 0;
  color: rgba(216, 221, 216, 0.35);
}

.bird-silhouette:nth-child(1) { top: 22%; animation: birdFly1 14s ease-in-out infinite 0s; }
.bird-silhouette:nth-child(2) { top: 30%; animation: birdFly1 18s ease-in-out infinite -5s; width: 20px; }
.bird-silhouette:nth-child(3) { top: 18%; animation: birdFly1 22s ease-in-out infinite -9s; width: 16px; }
.bird-silhouette:nth-child(4) { top: 35%; animation: birdFly1 16s ease-in-out infinite -3s; width: 14px; }
.bird-silhouette:nth-child(5) { top: 26%; animation: birdFly1 20s ease-in-out infinite -12s; width: 18px; }

@keyframes birdFly1 {
  0% { transform: translateX(-120px); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 0.6; }
  100% { transform: translateX(calc(100vw + 120px)); opacity: 0; }
}

/* ─── TRÆLANÍPA — Lake/ocean perspective reveal ──────────────────────────── */

.perspective-mask-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.lake-ocean-divide {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(216, 221, 216, 0.4) 20%,
    rgba(216, 221, 216, 0.6) 50%,
    rgba(216, 221, 216, 0.4) 80%,
    transparent
  );
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out-expo);
  top: 54%;
}

.lake-ocean-divide.revealed {
  transform: scaleX(1);
}

.lake-label, .ocean-label {
  position: absolute;
  font-family: var(--font-sans);
  font-size: 0.5rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.8s ease 0.8s;
  white-space: nowrap;
}

.lake-label {
  top: calc(54% - 1.2rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(216, 221, 216, 0.6);
}

.ocean-label {
  top: calc(54% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(29, 76, 85, 0.8);
}

.lake-ocean-divide.revealed + .lake-label,
.lake-ocean-divide.revealed ~ .ocean-label {
  opacity: 1;
}

/* ─── SAKSUN — Valley parallax layers ───────────────────────────────────── */

.valley-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.valley-mist-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    to top,
    rgba(216, 221, 216, 0.08) 0%,
    transparent 100%
  );
  filter: blur(15px);
  animation: valleyMist 8s ease-in-out infinite;
}

@keyframes valleyMist {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 0.8; transform: translateY(-8px); }
}

/* ─── WEATHER SECTION V2 — SVG ICONS ────────────────────────────────────── */

.weather-icon-svg {
  width: 36px;
  height: 28px;
  display: block;
  margin-bottom: 1.5rem;
  color: var(--fog);
  opacity: 0.6;
  transition: opacity 0.4s ease, color 0.4s ease;
}

.weather-card:hover .weather-icon-svg,
.weather-card.active .weather-icon-svg {
  opacity: 1;
  color: var(--cream);
}

/* Animated SVG icon strokes */
.weather-icon-fog line {
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  animation: fogLineAnim var(--very-slow) ease-in-out infinite;
}

.weather-icon-fog line:nth-child(2) { animation-delay: -1.3s; }
.weather-icon-fog line:nth-child(3) { animation-delay: -2.6s; }

@keyframes fogLineAnim {
  0%, 100% { opacity: 0.4; transform: translateX(-4px); }
  50% { opacity: 1; transform: translateX(4px); }
}

.weather-icon-wind path {
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  fill: none;
  animation: windPathAnim 2s ease-in-out infinite;
}

.weather-icon-wind path:nth-child(2) { animation-delay: -0.5s; }
.weather-icon-wind path:nth-child(3) { animation-delay: -1s; }

@keyframes windPathAnim {
  0%, 100% { stroke-dashoffset: 60; opacity: 0.5; }
  50% { stroke-dashoffset: -60; opacity: 1; }
}

/* Initialize dash arrays for wind via JS */
.weather-icon-wind path {
  stroke-dasharray: 60;
}

.weather-icon-rain line {
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  animation: rainDropAnim 1.6s linear infinite;
}

.weather-icon-rain line:nth-child(2) { animation-delay: -0.3s; }
.weather-icon-rain line:nth-child(3) { animation-delay: -0.6s; }
.weather-icon-rain line:nth-child(4) { animation-delay: -0.9s; }
.weather-icon-rain line:nth-child(5) { animation-delay: -1.2s; }
.weather-icon-rain line:nth-child(6) { animation-delay: -1.5s; }

@keyframes rainDropAnim {
  0% { transform: translateY(-8px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { transform: translateY(8px); opacity: 0; }
}

.weather-icon-aurora path {
  stroke: currentColor;
  stroke-width: 0.8;
  fill: none;
  stroke-linecap: round;
  animation: auroraWaveAnim 4s ease-in-out infinite;
}

.weather-icon-aurora path:nth-child(2) { animation-delay: -1s; opacity: 0.7; }
.weather-icon-aurora path:nth-child(3) { animation-delay: -2s; opacity: 0.5; }
.weather-icon-aurora path:nth-child(4) { animation-delay: -3s; opacity: 0.35; }

@keyframes auroraWaveAnim {
  0%, 100% { d: path("M4,28 Q9,20 12,12 Q15,4 18,2"); opacity: 0.6; }
  50% { d: path("M4,28 Q7,18 14,10 Q17,5 18,2"); opacity: 1; }
}

/* ─── MAP SECTION V2 — ATLAS STYLING ────────────────────────────────────── */

.map-atlas-header {
  border-top: 1px solid rgba(94, 124, 85, 0.12);
  border-bottom: 1px solid rgba(94, 124, 85, 0.12);
  padding: 0.75rem 0;
  margin-bottom: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-atlas-label {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--moss);
  opacity: 0.7;
}

.map-scale-text {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: rgba(216, 221, 216, 0.35);
}

/* Improved map SVG container */
.map-wrapper {
  border: 1px solid rgba(94, 124, 85, 0.1);
  padding: 2rem;
  background: rgba(7, 16, 19, 0.6);
  position: relative;
}

/* Atlas corner marks */
.map-wrapper::before,
.map-wrapper::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(94, 124, 85, 0.3);
  border-style: solid;
}

.map-wrapper::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.map-wrapper::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

/* ─── SOURCES / FIELD NOTES SECTION ─────────────────────────────────────── */

#sources-section {
  padding: clamp(5rem, 10vh, 8rem) 0;
  background: #070f0d;
  border-top: 1px solid rgba(94, 124, 85, 0.1);
}

.sources-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 4rem;
}

.sources-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 200;
  color: var(--cream);
  line-height: 1.2;
}

.sources-intro {
  font-size: 0.8rem;
  color: var(--cream-dim);
  line-height: 1.9;
  max-width: 480px;
  border-left: 1px solid rgba(94, 124, 85, 0.2);
  padding-left: 2rem;
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(94, 124, 85, 0.08);
  margin-bottom: 3rem;
}

.source-card {
  background: #070f0d;
  padding: 2rem 1.75rem;
  transition: background 0.4s ease;
  position: relative;
}

.source-card:hover {
  background: rgba(29, 76, 85, 0.08);
}

.source-card-num {
  font-family: var(--font-serif);
  font-size: 0.7rem;
  color: var(--moss);
  opacity: 0.5;
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
}

.source-card-topic {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--village);
  margin-bottom: 1rem;
}

.source-card-content {
  font-size: 0.78rem;
  color: var(--cream-dim);
  line-height: 1.85;
}

.source-card-ref {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(216, 221, 216, 0.25);
  margin-top: 1rem;
  font-style: italic;
}

@media (max-width: 900px) {
  .sources-grid { grid-template-columns: repeat(2, 1fr); }
  .sources-header { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 480px) {
  .sources-grid { grid-template-columns: 1fr; }
}

/* ─── FOCUS STATES (Accessibility V2) ───────────────────────────────────── */

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

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--village);
  outline-offset: 4px;
}

.map-pin-group:focus-visible {
  outline: none; /* handled via SVG focus ring */
}

/* Skip to content link */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 20000;
  background: var(--village);
  color: var(--atlantic);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ─── INTRO V2 — Map texture overlay improvement ────────────────────────── */

.map-texture-bg {
  background-image:
    radial-gradient(ellipse 120% 80% at 50% 50%, rgba(29,76,85,0.04) 0%, transparent 100%),
    repeating-linear-gradient(
      0deg, transparent, transparent 59px,
      rgba(94,124,85,0.025) 59px, rgba(94,124,85,0.025) 60px
    ),
    repeating-linear-gradient(
      90deg, transparent, transparent 59px,
      rgba(94,124,85,0.025) 59px, rgba(94,124,85,0.025) 60px
    );
}

/* ─── GALLERY V2 — Stronger art direction ───────────────────────────────── */

.gallery-item {
  position: relative;
}

/* Gallery image grade */
.gallery-item img {
  filter: var(--img-filter);
}

/* Gallery number label */
.gallery-num {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--font-sans);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: rgba(242, 241, 232, 0.35);
  z-index: 2;
}

/* ─── FOOTER V2 ──────────────────────────────────────────────────────────── */

footer {
  position: relative;
}

.footer-topo-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(94, 124, 85, 0.2) 30%,
    rgba(216, 164, 95, 0.1) 50%,
    rgba(94, 124, 85, 0.2) 70%,
    transparent
  );
}

/* ─── HANDCRAFTED DETAILS ────────────────────────────────────────────────── */

/* Coordinate badge style */
.coord-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(29, 76, 85, 0.9);
  border: 1px solid rgba(29, 76, 85, 0.3);
  padding: 0.3rem 0.7rem;
}

.coord-badge::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ocean);
}

/* Nature card V2 — museum label style */
.nature-card-content {
  background: linear-gradient(
    to top,
    rgba(7, 16, 19, 0.98) 0%,
    rgba(7, 16, 19, 0.85) 60%,
    transparent 100%
  );
  padding: 2rem 1.5rem 1.25rem;
}

/* Responsible travel V2 — icon replacement */
.responsible-icon-svg {
  width: 28px;
  height: 28px;
  color: var(--moss);
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.responsible-card:hover .responsible-icon-svg {
  opacity: 1;
  color: var(--village);
}

/* ─── REDUCED MOTION V2 ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body { cursor: auto !important; }
  .cursor, .cursor-trail { display: none !important; }

  .fog-layer { animation: none !important; opacity: 0.3; }
  .grain-overlay { display: none !important; }
  .waterfall-stream { display: none !important; }
  .harbor-light { animation: none !important; opacity: 0.4; }
  .bird-silhouette { display: none !important; }
  .gorge-wave-path { animation: none !important; opacity: 0.3; }
  .valley-mist-layer { animation: none !important; }
  .weather-icon-fog line,
  .weather-icon-wind path,
  .weather-icon-rain line,
  .weather-icon-aurora path { animation: none !important; }

  /* Ensure all content remains visible */
  .reveal-up, .reveal-fade { opacity: 1 !important; transform: none !important; }
  .location-chapter-num, .location-name, .location-subtitle,
  .location-divider, .location-copy, .location-detail { opacity: 1 !important; transform: none !important; }
  .map-drawer { transition: none !important; }
}

/* ─── MOBILE V2 IMPROVEMENTS ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .waterfall-stream { display: none; }
  .bird-layer { display: none; }

  .location-story {
    /* Ensure mobile stack is clean */
    display: flex;
    flex-direction: column;
  }

  .map-wrapper {
    padding: 1rem;
  }

  .map-wrapper::before,
  .map-wrapper::after { display: none; }
}

@media (max-width: 480px) {
  .map-drawer {
    width: 100vw;
    border-left: none;
  }
}


/* =============================================================================
 * V3 FINAL POLISH - cinematic atlas/editorial layer
 * ============================================================================= */

:root {
  --chart-line: rgba(126, 154, 138, 0.12);
  --chart-line-soft: rgba(126, 154, 138, 0.055);
  --ink-shadow: rgba(0, 0, 0, 0.45);
  --field-paper: rgba(239, 234, 215, 0.035);
  --cold-grade: sepia(0.08) saturate(0.58) contrast(1.14) brightness(0.78) hue-rotate(162deg);
}

body {
  background:
    radial-gradient(circle at 8% 12%, rgba(216,164,95,0.035), transparent 28rem),
    radial-gradient(circle at 85% 28%, rgba(29,76,85,0.085), transparent 34rem),
    var(--atlantic);
}

.hero-bg img,
.location-image-panel img,
.gallery-item img,
.ending-bg img,
.collage-img,
.map-drawer-image-wrap img {
  filter: var(--cold-grade);
}

.story-torshavn .location-image-panel img,
.story-torshavn .map-drawer-image-wrap img {
  filter: brightness(0.82) saturate(0.7) contrast(1.1) sepia(0.12) hue-rotate(150deg);
}

/* Hero: heavier first impression, chart details, calmer premium motion */
#hero {
  min-height: 760px;
  isolation: isolate;
  background: #050b0d;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(7,16,19,0.55) 0%, transparent 42%, rgba(7,16,19,0.22) 100%),
    linear-gradient(to bottom, rgba(7,16,19,0.08) 0%, rgba(7,16,19,0.18) 43%, rgba(7,16,19,0.82) 78%, rgba(7,16,19,1) 100%);
}

.hero-content {
  max-width: 1720px;
}

.hero-content::before {
  content: 'FIELD ATLAS 001 / NORTH ATLANTIC / 18 ISLANDS';
  display: block;
  width: fit-content;
  margin-bottom: 1.15rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(216,221,216,0.14);
  background: rgba(7,16,19,0.22);
  color: rgba(216,221,216,0.52);
  font-family: var(--font-sans);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.hero-title {
  font-size: clamp(6.2rem, 18vw, 18.5rem);
  letter-spacing: 0;
  line-height: 0.78;
  text-shadow: 0 1rem 5rem rgba(0,0,0,0.62);
}

.hero-title-wrapper {
  max-width: 100%;
}

.hero-subtitle {
  margin-top: 1.1rem;
  max-width: 760px;
  color: rgba(242,241,232,0.74);
  text-shadow: 0 0.75rem 2rem rgba(0,0,0,0.5);
}

.hero-topo-bg {
  opacity: 0.72;
  mix-blend-mode: screen;
}

.hero-topo-bg::before,
.hero-topo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-topo-bg::before {
  background-image:
    linear-gradient(var(--chart-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-line-soft) 1px, transparent 1px);
  background-size: 9.5rem 9.5rem;
  mask-image: radial-gradient(circle at 48% 48%, black, transparent 76%);
}

.hero-topo-bg::after {
  background: linear-gradient(110deg, transparent 10%, rgba(216,221,216,0.06) 45%, transparent 70%);
  transform: translateX(-28%);
  animation: v3FogSweep 18s ease-in-out infinite;
}

@keyframes v3FogSweep {
  0%, 100% { transform: translateX(-32%); opacity: 0.22; }
  50% { transform: translateX(18%); opacity: 0.46; }
}

.hero-meta-bar,
.hero-weather-badge,
.atlas-stamp {
  backdrop-filter: blur(14px);
}

.atlas-stamp {
  z-index: 12;
  border: 1px solid rgba(94,124,85,0.18);
  padding: 0.8rem 0.9rem;
  background: rgba(7,16,19,0.24);
}

.btn-primary,
.btn-secondary,
.map-drawer-cta {
  transition: transform 0.55s var(--ease-out-expo), border-color 0.45s ease, background 0.45s ease, color 0.45s ease;
}

.btn-primary:hover,
.btn-secondary:hover,
.map-drawer-cta:hover {
  transform: translateY(-3px);
}

/* Map: dominant handcrafted navigation chart */
#map-section {
  padding: clamp(6rem, 13vh, 12rem) 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(29,76,85,0.18), transparent 34rem),
    linear-gradient(180deg, #071013 0%, #0b1412 48%, #071013 100%);
}

#map-section .container {
  max-width: 1680px;
}

.map-atlas-header {
  margin-bottom: clamp(2rem, 4vw, 4.5rem);
  background: linear-gradient(90deg, transparent, rgba(94,124,85,0.035), transparent);
}

.map-section-header {
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.map-section-title {
  font-size: clamp(3rem, 6.4vw, 7rem);
  letter-spacing: 0;
  line-height: 0.98;
}

.map-section-copy {
  max-width: 520px;
  background: var(--field-paper);
  border-left-color: rgba(216,164,95,0.32);
  padding: 1.15rem 0 1.15rem 1.5rem;
}

.map-wrapper {
  width: min(1180px, 100%);
  min-height: 720px;
  margin: 0 auto;
  align-items: center;
  overflow: visible;
  padding: clamp(2rem, 5vw, 5rem);
  border: 1px solid rgba(126,154,138,0.18);
  background:
    linear-gradient(var(--chart-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-line-soft) 1px, transparent 1px),
    radial-gradient(circle at 48% 45%, rgba(216,221,216,0.055), transparent 21rem),
    radial-gradient(circle at 32% 58%, rgba(216,164,95,0.04), transparent 18rem),
    linear-gradient(135deg, rgba(8,19,20,0.96), rgba(8,14,13,0.98));
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
  box-shadow:
    inset 0 0 0 1px rgba(242,241,232,0.025),
    inset 0 0 8rem rgba(0,0,0,0.34),
    0 3rem 7rem rgba(0,0,0,0.34);
}

.map-wrapper::before {
  width: auto;
  height: auto;
  inset: 1.25rem;
  border: 1px solid rgba(126,154,138,0.11);
  background:
    linear-gradient(90deg, transparent 0 49.85%, rgba(216,164,95,0.12) 49.85% 50.15%, transparent 50.15%),
    linear-gradient(0deg, transparent 0 49.85%, rgba(216,164,95,0.1) 49.85% 50.15%, transparent 50.15%);
  pointer-events: none;
}

.map-wrapper::after {
  width: auto;
  height: auto;
  inset: 0;
  border: 0;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(216,221,216,0.09), transparent 24rem),
    linear-gradient(110deg, transparent, rgba(216,221,216,0.035), transparent 64%);
  filter: blur(0.5px);
  opacity: 0.75;
  animation: v3MapFog 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes v3MapFog {
  0%, 100% { transform: translate3d(-1.5%, 0, 0); opacity: 0.45; }
  50% { transform: translate3d(2%, -1%, 0); opacity: 0.86; }
}

.faroe-map-svg {
  width: min(980px, 100%);
  max-height: 760px;
  z-index: 2;
  filter: drop-shadow(0 2rem 3rem rgba(0,0,0,0.35));
}

.island-path {
  fill: rgba(48, 72, 50, 0.92);
  stroke: rgba(166, 188, 160, 0.28);
  stroke-width: 1;
}

.island-path:hover {
  fill: rgba(68, 94, 64, 0.96);
}

.contour-path {
  stroke: rgba(216,221,216,0.14);
  stroke-dasharray: 2 4;
}

.map-route-path {
  stroke: rgba(216,164,95,0.72);
  stroke-width: 1.25;
  stroke-dasharray: 7 7;
  filter: drop-shadow(0 0 0.55rem rgba(216,164,95,0.22));
}

.map-pin-group {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out-expo);
}

.map-pin-group:hover,
.map-pin-group:focus-visible,
.map-pin-group.is-active {
  transform: scale(1.12);
}

.map-pin-group text {
  paint-order: stroke;
  stroke: rgba(7,16,19,0.88);
  stroke-width: 2.5px;
  letter-spacing: 0.08em;
}

.map-pin-group.is-active text,
.map-pin-group:hover text {
  fill: var(--village);
  opacity: 1;
}

.pin-circle-outer {
  stroke: rgba(216,164,95,0.78);
  animation-duration: 4.8s;
}

.pin-focus-ring {
  stroke: var(--village);
  filter: drop-shadow(0 0 0.45rem rgba(216,164,95,0.36));
}

.map-tooltip {
  background: rgba(8, 18, 17, 0.9);
  border-color: rgba(216,164,95,0.24);
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.38);
  backdrop-filter: blur(16px);
}

.map-tooltip::before {
  content: 'Field report';
  display: block;
  margin-bottom: 0.55rem;
  color: rgba(216,164,95,0.68);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.map-drawer {
  width: min(520px, 94vw);
  background:
    linear-gradient(var(--chart-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-line-soft) 1px, transparent 1px),
    #0a1412;
  background-size: 64px 64px;
  box-shadow: -2rem 0 5rem rgba(0,0,0,0.42);
}

.map-drawer::before {
  content: 'FIELD REPORT / SELECTED LOCATION';
  display: block;
  padding: 1rem 2.5rem 0;
  color: rgba(216,164,95,0.48);
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.map-drawer-image-wrap {
  height: 310px;
  margin: 1rem 1rem 0;
  border: 1px solid rgba(242,241,232,0.08);
}

.map-drawer-content {
  padding-top: 1.65rem;
}

.map-drawer-name {
  letter-spacing: 0;
}

.map-drawer-desc {
  font-size: 0.9rem;
  color: rgba(242,241,232,0.66);
}

.map-drawer-backdrop.is-visible {
  background: rgba(3, 8, 9, 0.72);
}

/* Location stories: more editorial and less card-like */
.location-story {
  isolation: isolate;
}

.location-story::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(242,241,232,0.018), transparent 38%),
    radial-gradient(circle at 72% 32%, rgba(29,76,85,0.08), transparent 28rem);
  z-index: 0;
}

.location-image-panel {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
  box-shadow: inset -1px 0 0 rgba(242,241,232,0.06);
}

.location-image-panel::after {
  content: '';
  position: absolute;
  inset: clamp(0.75rem, 1.5vw, 1.25rem);
  border: 1px solid rgba(242,241,232,0.08);
  pointer-events: none;
  z-index: 5;
}

.location-content-panel {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(7,16,19,0.72), transparent),
    radial-gradient(circle at 10% 20%, rgba(216,164,95,0.035), transparent 17rem);
}

.location-name {
  letter-spacing: 0;
  text-shadow: 0 1rem 4rem rgba(0,0,0,0.42);
}

.story-field-note {
  border-color: rgba(216,164,95,0.34);
  background:
    linear-gradient(90deg, rgba(216,164,95,0.055), transparent),
    rgba(242,241,232,0.018);
}

.story-torshavn .torshavn-lights::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 18%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(216,164,95,0.58) 0 10px, transparent 10px 34px);
  filter: blur(0.5px) drop-shadow(0 0 0.6rem rgba(216,164,95,0.34));
  opacity: 0.58;
}

.story-gasadalur .waterfall-stream {
  box-shadow: 0 0 0.75rem rgba(216,221,216,0.2);
}

.story-saksun .valley-layers::before,
.story-saksun .valley-layers::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  height: 26%;
  background: linear-gradient(90deg, transparent, rgba(216,221,216,0.08), transparent);
  filter: blur(18px);
  animation: valleyMist 11s ease-in-out infinite;
}

.story-saksun .valley-layers::before { bottom: 18%; animation-delay: -4s; }
.story-saksun .valley-layers::after { bottom: 34%; opacity: 0.45; animation-delay: -8s; }

.story-kalsoy .location-image-panel {
  clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 100%);
}

/* Weather: four moods with atmospheric stage */
#weather-section {
  isolation: isolate;
  transition: background 1.2s ease;
}

#weather-section::before,
#weather-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.9s ease, background 0.9s ease, filter 0.9s ease;
}

#weather-section::before {
  z-index: 0;
  opacity: 0.76;
}

#weather-section::after {
  z-index: 1;
  opacity: 0.42;
  mix-blend-mode: screen;
}

#weather-section .container {
  position: relative;
  z-index: 2;
}

#weather-section.fog-mode::before {
  background: radial-gradient(ellipse at 50% 38%, rgba(216,221,216,0.11), transparent 34rem);
  filter: blur(10px);
}

#weather-section.wind-mode::before {
  background: repeating-linear-gradient(-18deg, transparent 0 28px, rgba(216,221,216,0.035) 28px 29px);
  animation: v3WindField 2.8s linear infinite;
}

#weather-section.rain-mode::before {
  background: repeating-linear-gradient(92deg, transparent 0 18px, rgba(98,141,150,0.095) 18px 19px);
  animation: v3RainField 1.8s linear infinite;
}

#weather-section.aurora-mode::before {
  background: linear-gradient(115deg, transparent 12%, rgba(94,124,85,0.15), rgba(29,76,85,0.16), transparent 72%);
  animation: v3AuroraField 10s ease-in-out infinite;
}

@keyframes v3WindField { to { background-position: -160px 0; } }
@keyframes v3RainField { to { background-position: 0 150px; } }
@keyframes v3AuroraField {
  0%, 100% { transform: translateX(-4%) skewX(-5deg); opacity: 0.48; }
  50% { transform: translateX(6%) skewX(5deg); opacity: 0.86; }
}

.weather-cards-grid {
  gap: 1px;
  background: rgba(126,154,138,0.13);
  border: 1px solid rgba(126,154,138,0.12);
}

.weather-card {
  border: 0;
  background: rgba(6,14,15,0.72);
  min-height: 310px;
  backdrop-filter: blur(12px);
}

.weather-card::after {
  content: attr(data-weather);
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  color: rgba(242,241,232,0.18);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.weather-card:hover,
.weather-card.active {
  background: rgba(16,32,31,0.82);
}

.weather-card:focus-visible {
  outline: 2px solid var(--village);
  outline-offset: -6px;
}

.weather-card-name {
  letter-spacing: 0;
}

.weather-icon-svg {
  width: 44px;
  height: 36px;
}

/* Gallery and mobile polish */
.gallery-track-wrapper {
  overflow: hidden;
}

.gallery-item {
  box-shadow: 0 2rem 4rem rgba(0,0,0,0.22);
}

.gallery-caption {
  backdrop-filter: blur(10px);
}

.chapter-nav-item.active .chapter-nav-line,
.chapter-nav-item:hover .chapter-nav-line {
  box-shadow: 0 0 0.75rem rgba(216,164,95,0.24);
}

@media (max-width: 1024px) {
  .hero-title { font-size: clamp(5rem, 20vw, 10rem); }
  .map-wrapper { min-height: 620px; }
}

@media (max-width: 768px) {
  #hero { min-height: 680px; }

  .hero-content::before {
    font-size: 0.48rem;
    max-width: 92%;
    line-height: 1.5;
  }

  .hero-title {
    font-size: clamp(4.2rem, 21vw, 7.4rem);
    line-height: 0.86;
  }

  .hero-top-meta {
    gap: 0.75rem;
  }

  .hero-weather-badge {
    display: none;
  }

  .atlas-stamp {
    display: none;
  }

  .map-section-header {
    grid-template-columns: 1fr;
  }

  .map-section-title {
    font-size: clamp(2.55rem, 13vw, 4.4rem);
  }

  .map-atlas-header {
    align-items: flex-start;
    gap: 1rem;
    flex-direction: column;
  }

  .map-wrapper {
    width: 100%;
    min-height: 560px;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.25rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .faroe-map-svg {
    min-width: 680px;
    scroll-snap-align: center;
  }

  .map-tooltip {
    display: none;
  }

  .map-drawer-image-wrap {
    height: 240px;
  }

  .location-image-panel {
    clip-path: none;
    position: relative;
  }

  .location-content-panel {
    background: linear-gradient(180deg, rgba(7,16,19,0.92), rgba(7,16,19,1));
  }

  .weather-cards-grid {
    grid-template-columns: 1fr 1fr;
  }

  .weather-card {
    min-height: 250px;
  }

  .gallery-track-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
  }

  .gallery-track {
    width: max-content;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    width: 100%;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    padding-inline: 1rem;
  }

  .map-wrapper {
    min-height: 500px;
  }

  .faroe-map-svg {
    min-width: 620px;
  }

  .weather-cards-grid {
    grid-template-columns: 1fr;
  }

  .weather-card {
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-topo-bg::after,
  .map-wrapper::after,
  #weather-section::before,
  .story-saksun .valley-layers::before,
  .story-saksun .valley-layers::after {
    animation: none !important;
  }

  .map-pin-group,
  .btn-primary,
  .btn-secondary,
  .map-drawer-cta {
    transition: none !important;
  }
}


/* V3 overflow containment */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.map-wrapper,
.gallery-track-wrapper {
  overscroll-behavior-inline: contain;
}


/* V3 drawer overflow fix */
.map-drawer {
  right: -540px;
  transform: none;
  transition: right 0.6s var(--ease-out-expo);
}

.map-drawer.is-open {
  right: 0;
  transform: none;
}

@media (max-width: 560px) {
  .map-drawer { right: -100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .map-drawer { transition: none !important; }
}


/* V3 closed drawer layout removal */
.map-drawer[aria-hidden="true"] {
  display: none;
}

.map-drawer.is-open {
  display: flex;
}


/* V3 mobile paint containment */
#hero,
.hero-topo-bg,
.fog-container,
.ocean-wave-line,
.map-wrapper,
.gallery-track-wrapper {
  contain: paint;
}

.hero-coastline-svg {
  width: 100%;
}

@media (max-width: 768px) {
  .hero-topo-svg,
  .hero-coastline-svg {
    max-width: 100%;
  }

  .map-wrapper {
    contain: layout paint;
  }
}


/* V3 mobile decorative number containment */
@media (max-width: 768px) {
  .location-number-large {
    display: none;
  }

  .location-image-panel img,
  .tunnel-frame img {
    max-width: 100%;
  }
}


/* V3 story paint containment */
.location-story,
#ending {
  contain: paint;
}


/* =============================================================================
 * V4 POLISH - atmosphere, screen-edge fix, living documentary details
 * ============================================================================= */

:root {
  --v4-atmo-a: rgba(17, 45, 62, 0.30);
  --v4-atmo-b: rgba(216, 221, 216, 0.08);
  --v4-atmo-c: rgba(94, 124, 85, 0.10);
  --v4-ocean-bright: #2f7881;
  --v4-moss-bright: #7f9b70;
  --v4-aurora: #73a879;
  --v4-violet: #7560a0;
  --v4-amber: #e0b06d;
}

/* Fix: the old viewport-sized grain layer translated by percentages and could flicker at the screen edge. */
.grain-overlay {
  inset: -18% !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  opacity: 0.026;
  transform: none !important;
  animation: v4GrainDrift 9s steps(2, end) infinite !important;
  background-size: 240px 240px;
  will-change: background-position;
}

@keyframes v4GrainDrift {
  0%, 100% { background-position: 0 0; }
  25% { background-position: 34px -21px; }
  50% { background-position: -18px 28px; }
  75% { background-position: 22px 13px; }
}

.v4-atmosphere {
  position: fixed;
  inset: -12vh -12vw;
  pointer-events: none;
  z-index: 45;
  opacity: 0.42;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 18% 22%, var(--v4-atmo-a), transparent 34rem),
    radial-gradient(circle at 78% 18%, var(--v4-atmo-b), transparent 28rem),
    radial-gradient(circle at 58% 82%, var(--v4-atmo-c), transparent 38rem);
  filter: blur(0.5px) saturate(1.1);
  transition: opacity 1.4s ease;
}

body.atmo-culture .v4-atmosphere,
body.atmo-ending .v4-atmosphere,
body.atmo-weather .v4-atmosphere { opacity: 0.52; }

body.atmo-map .v4-atmosphere { opacity: 0.48; }

/* Focus remains limited to interactive elements; no full viewport focus frame. */
body:focus,
html:focus,
main:focus,
section:focus {
  outline: none !important;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.map-pin-group:focus-visible .pin-focus-ring {
  outline-color: var(--v4-amber);
}

/* Section-specific life and color without breaking the Nordic grade. */
#intro {
  background:
    radial-gradient(circle at 18% 10%, rgba(126,155,112,0.16), transparent 26rem),
    radial-gradient(circle at 86% 76%, rgba(216,164,95,0.08), transparent 20rem),
    linear-gradient(180deg, #071013 0%, #0b1712 100%);
}

#map-section {
  background:
    radial-gradient(circle at 52% 48%, rgba(42,113,124,0.26), transparent 38rem),
    radial-gradient(circle at 18% 70%, rgba(216,221,216,0.065), transparent 22rem),
    linear-gradient(180deg, #061115 0%, #0a1818 48%, #071013 100%);
}

#location-stories {
  background:
    linear-gradient(180deg, #071013 0%, #091512 42%, #061012 100%);
}

#weather-section {
  background:
    radial-gradient(circle at 50% 25%, rgba(73,112,119,0.18), transparent 34rem),
    #081114;
}

#nature-section {
  background:
    radial-gradient(circle at 18% 28%, rgba(92,128,77,0.24), transparent 29rem),
    radial-gradient(circle at 78% 82%, rgba(29,76,85,0.14), transparent 30rem),
    linear-gradient(180deg, #071013 0%, #0b1710 100%);
}

#culture-section {
  background:
    radial-gradient(circle at 22% 18%, rgba(216,164,95,0.16), transparent 26rem),
    radial-gradient(circle at 75% 72%, rgba(104,61,38,0.18), transparent 26rem),
    linear-gradient(180deg, #10140f 0%, #16150f 100%);
}

#responsible-travel {
  background:
    radial-gradient(circle at 50% 15%, rgba(94,124,85,0.12), transparent 26rem),
    #060c0f;
}

#gallery-section {
  background:
    radial-gradient(circle at 20% 35%, rgba(31,95,105,0.22), transparent 30rem),
    radial-gradient(circle at 78% 68%, rgba(94,124,85,0.14), transparent 32rem),
    #0b1213;
}

#ending {
  background: #061014;
}

#ending::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.55;
  background:
    linear-gradient(115deg, transparent 20%, rgba(111,168,116,0.13), rgba(117,96,160,0.14), transparent 70%),
    radial-gradient(circle at 50% 18%, rgba(216,164,95,0.08), transparent 22rem);
  animation: v4EndingAurora 18s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes v4EndingAurora {
  0%, 100% { transform: translateX(-4%) skewX(-4deg); opacity: 0.36; }
  50% { transform: translateX(5%) skewX(4deg); opacity: 0.68; }
}

/* Documentary stamps and line fragments. */
section[id] > .container > .section-label-wrapper::after,
.weather-header .section-label-wrapper::after {
  content: 'FIELD / 62N';
  margin-left: auto;
  color: rgba(216,164,95,0.34);
  font-family: var(--font-sans);
  font-size: 0.48rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#map-section .map-section-header::before,
#nature-section .nature-section-header::before,
#culture-section .culture-left::before,
#gallery-section .gallery-intro::before {
  content: '';
  position: absolute;
  width: min(34vw, 420px);
  height: min(18vw, 220px);
  pointer-events: none;
  opacity: 0.28;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(126,154,138,0.16) 19px 20px, transparent 21px 36px);
  mask-image: linear-gradient(90deg, transparent, black 20%, black 70%, transparent);
}

#map-section .map-section-header,
#nature-section .nature-section-header,
#culture-section .culture-left,
#gallery-section .gallery-intro { position: relative; }

#map-section .map-section-header::before { right: 3%; top: -12%; }
#nature-section .nature-section-header::before { right: 0; top: -40%; }
#culture-section .culture-left::before { left: -12%; top: 6%; }
#gallery-section .gallery-intro::before { right: 8%; bottom: -14%; }

.section-label-line {
  background: linear-gradient(90deg, var(--v4-amber), rgba(126,155,112,0.28));
}

.reveal-up {
  clip-path: inset(0 0 100% 0);
  transform: translateY(22px);
  transition:
    clip-path 1.05s var(--ease-expo),
    opacity 1.05s var(--ease-expo),
    transform 1.05s var(--ease-expo);
}

.reveal-up.visible {
  clip-path: inset(0 0 0% 0);
}

/* Hero gains color without becoming bright. */
.hero-overlay {
  background:
    radial-gradient(circle at 72% 28%, rgba(47,120,129,0.18), transparent 30rem),
    radial-gradient(circle at 18% 78%, rgba(216,164,95,0.07), transparent 22rem),
    linear-gradient(90deg, rgba(7,16,19,0.55) 0%, transparent 42%, rgba(7,16,19,0.24) 100%),
    linear-gradient(to bottom, rgba(7,16,19,0.05) 0%, rgba(7,16,19,0.22) 44%, rgba(7,16,19,0.84) 78%, rgba(7,16,19,1) 100%);
}

.hero-title {
  color: #f5f0df;
  text-shadow:
    0 1.2rem 5rem rgba(0,0,0,0.68),
    0 0 2.8rem rgba(47,120,129,0.12);
}

.hero-weather-badge {
  border-color: rgba(126,155,112,0.34);
  box-shadow: inset 0 0 1.2rem rgba(47,120,129,0.08);
}

.weather-dot {
  background: var(--v4-aurora);
  box-shadow: 0 0 12px rgba(115,168,121,0.45);
  animation: none;
}

/* Map: more sea/fog movement, calmer pin pulse. */
.map-wrapper {
  overflow: hidden;
  border-color: rgba(126,154,138,0.24);
  background:
    linear-gradient(var(--chart-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-line-soft) 1px, transparent 1px),
    radial-gradient(circle at 52% 44%, rgba(47,120,129,0.12), transparent 28rem),
    radial-gradient(circle at 28% 64%, rgba(216,164,95,0.055), transparent 18rem),
    linear-gradient(135deg, rgba(8,22,24,0.98), rgba(7,13,13,0.99));
}

.map-wrapper::after {
  background:
    linear-gradient(105deg, transparent 10%, rgba(216,221,216,0.045) 45%, transparent 72%),
    repeating-linear-gradient(172deg, transparent 0 34px, rgba(47,120,129,0.045) 35px 36px);
  animation: v4MapSeaFog 22s ease-in-out infinite;
}

@keyframes v4MapSeaFog {
  0%, 100% { transform: translate3d(-3%, 1%, 0); opacity: 0.42; }
  50% { transform: translate3d(3%, -1%, 0); opacity: 0.82; }
}

.map-route-path {
  stroke: rgba(224,176,109,0.82);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.65rem rgba(224,176,109,0.26));
}

@keyframes pinPulse {
  0%, 100% { r: 8; opacity: 0.18; }
  45% { r: 15; opacity: 0.02; }
}

.pin-circle-inner,
.map-pin-group circle:nth-of-type(3) {
  filter: drop-shadow(0 0 0.42rem rgba(224,176,109,0.55));
}

.map-drawer {
  background:
    linear-gradient(var(--chart-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--chart-line-soft) 1px, transparent 1px),
    radial-gradient(circle at 20% 18%, rgba(224,176,109,0.08), transparent 16rem),
    #081411;
  border-left-color: rgba(224,176,109,0.24);
}

.map-drawer::after {
  content: 'observed conditions / wind / tide / basalt';
  display: block;
  margin: auto 2.5rem 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(126,154,138,0.14);
  color: rgba(216,221,216,0.25);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Location stories: richer tint per chapter and warmer village detail. */
.location-story::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.52;
  mix-blend-mode: screen;
}

.story-torshavn::after { background: radial-gradient(circle at 24% 54%, rgba(224,176,109,0.11), transparent 22rem); }
.story-gasadalur::after { background: radial-gradient(circle at 22% 45%, rgba(98,141,150,0.13), transparent 24rem); }
.story-saksun::after { background: radial-gradient(circle at 28% 58%, rgba(126,155,112,0.13), transparent 24rem); }
.story-gjogv::after { background: radial-gradient(circle at 24% 54%, rgba(47,120,129,0.15), transparent 24rem); }
.story-kalsoy::after { background: radial-gradient(circle at 24% 44%, rgba(216,221,216,0.08), transparent 20rem); }
.story-mykines::after { background: radial-gradient(circle at 22% 38%, rgba(98,141,150,0.12), transparent 24rem); }
.story-traelaniipa::after { background: radial-gradient(circle at 24% 52%, rgba(47,120,129,0.16), transparent 26rem); }

.location-content-panel {
  background:
    linear-gradient(90deg, rgba(7,16,19,0.70), transparent),
    radial-gradient(circle at 10% 22%, rgba(224,176,109,0.05), transparent 18rem),
    radial-gradient(circle at 80% 78%, rgba(47,120,129,0.07), transparent 22rem);
}

.story-field-note::before {
  color: var(--v4-amber);
}

/* Weather: each mode has a stronger living atmosphere. */
#weather-section.fog-mode::before {
  background:
    radial-gradient(ellipse at 42% 30%, rgba(216,221,216,0.20), transparent 34rem),
    linear-gradient(100deg, transparent, rgba(216,221,216,0.06), transparent 72%);
  filter: blur(15px);
  animation: v4WeatherMist 16s ease-in-out infinite;
}

#weather-section.wind-mode::before {
  background:
    repeating-linear-gradient(-14deg, transparent 0 22px, rgba(216,221,216,0.065) 23px 24px),
    radial-gradient(circle at 72% 34%, rgba(47,120,129,0.12), transparent 24rem);
  animation: v4WindLines 3.8s linear infinite;
}

#weather-section.rain-mode::before {
  background:
    repeating-linear-gradient(98deg, transparent 0 14px, rgba(98,141,150,0.12) 15px 16px),
    linear-gradient(180deg, rgba(47,120,129,0.10), transparent 70%);
  animation: v4RainStreaks 2.4s linear infinite;
}

#weather-section.aurora-mode::before {
  background:
    linear-gradient(115deg, transparent 8%, rgba(115,168,121,0.22), rgba(117,96,160,0.17), transparent 72%),
    radial-gradient(circle at 50% 18%, rgba(216,164,95,0.07), transparent 24rem);
  animation: v4AuroraCurtain 12s ease-in-out infinite;
}

@keyframes v4WeatherMist {
  0%, 100% { transform: translateX(-2%) scale(1); opacity: 0.58; }
  50% { transform: translateX(3%) scale(1.04); opacity: 0.88; }
}

@keyframes v4WindLines { to { background-position: -220px 0, 0 0; } }
@keyframes v4RainStreaks { to { background-position: 0 180px, 0 0; } }
@keyframes v4AuroraCurtain {
  0%, 100% { transform: translateX(-5%) skewX(-5deg); filter: hue-rotate(0deg); }
  50% { transform: translateX(6%) skewX(5deg); filter: hue-rotate(18deg); }
}

.weather-card {
  background:
    linear-gradient(180deg, rgba(242,241,232,0.018), transparent 38%),
    rgba(6,14,15,0.72);
}

.weather-card:hover,
.weather-card.active {
  background:
    linear-gradient(180deg, rgba(224,176,109,0.045), transparent 42%),
    rgba(16,32,31,0.86);
}

.weather-card-active-indicator {
  height: 2px;
  background: linear-gradient(90deg, var(--v4-ocean-bright), var(--v4-amber), var(--v4-aurora));
}

/* Nature, culture, gallery: lift the plain areas with restrained light. */
.nature-card {
  background: #0a1510;
  box-shadow: inset 0 0 0 1px rgba(126,155,112,0.08);
}

.nature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(126,155,112,0.14), transparent 38%, rgba(47,120,129,0.08));
  opacity: 0;
  transition: opacity 0.7s ease;
}

.nature-card:hover::after { opacity: 1; }

.culture-collage::after {
  content: '';
  position: absolute;
  inset: 8% 3% 0 7%;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 24%, rgba(224,176,109,0.18), transparent 6rem),
    radial-gradient(circle at 72% 58%, rgba(224,176,109,0.10), transparent 8rem);
  filter: blur(12px);
  opacity: 0.65;
  mix-blend-mode: screen;
}

.culture-item:hover .culture-item-title {
  color: var(--v4-amber);
}

.gallery-item {
  background: #071013;
  border: 1px solid rgba(126,154,138,0.08);
}

.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(47,120,129,0.10), transparent 42%),
    radial-gradient(circle at 72% 18%, rgba(224,176,109,0.08), transparent 11rem);
  opacity: 0;
  transition: opacity 0.7s ease;
}

.gallery-item:hover::after { opacity: 1; }

.gallery-sound-indicator .sound-bar {
  background: linear-gradient(180deg, var(--v4-amber), var(--v4-ocean-bright));
}

.ending-title em {
  color: var(--v4-aurora);
  text-shadow: 0 0 2rem rgba(115,168,121,0.18);
}

@media (max-width: 768px) {
  .v4-atmosphere { opacity: 0.30; }

  section[id] > .container > .section-label-wrapper::after,
  .weather-header .section-label-wrapper::after {
    display: none;
  }

  .map-wrapper::after,
  #ending::before {
    animation-duration: 28s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grain-overlay,
  .v4-atmosphere,
  #ending::before,
  .map-wrapper::after,
  #weather-section::before,
  .weather-card-bg,
  .gallery-scroll-arrow span,
  .sound-bar {
    animation: none !important;
  }

  .reveal-up {
    clip-path: none !important;
  }
}


/* V4 mobile map scroll restore */
@media (max-width: 768px) {
  .map-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
  }
}