/* =====================================================================
   Dream List Destination — Editorial redesign
   A well-edited travel essay that happens to be a website.
   Environment-first photography, fine editorial serif, rectilinear controls.
   ===================================================================== */

:root{
  /* ---- Type families ---- */
  --font-display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:"Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Colour: clean white field, near-black ink text, one gold accent ---- */
  --paper:#FFFFFF;          /* primary background (clean white) */
  --paper-2:#FCFCFA;        /* offset panels (very-near-white, faint warm) */
  --paper-3:#F1EFEA;        /* faint rule / ghost tint on white */
  --ink:#1B1712;            /* primary text (near-black warm) */
  --ink-soft:#4A443A;       /* secondary text */
  --ink-faint:#847C6F;      /* tertiary / captions */
  --forest:#20291F;         /* deep section + menu overlay + interlude */
  --forest-2:#171E16;       /* darkest */
  --gold:#A6742B;           /* warm accent: rules, active underline, CTA */
  --gold-deep:#8A5E1F;      /* CTA hover */
  --on-dark:#EDE6D6;        /* text on forest/photo */
  --on-dark-soft:#B8B1A0;   /* muted text on dark */
  --line:#E4E1DB;           /* hairline on white (cool light neutral) */
  --line-dark:#3A4436;      /* hairline on forest */

  /* atmospheric wash tuning — keep a hint of sky/ocean colour, bright and airy */
  --wash-opacity:.12;       /* effective image opacity for ghost washes */
  --wash-grey:saturate(.62) contrast(.9) brightness(1.12);

  /* aliases used by base.css */
  --color-bg:var(--paper);
  --color-surface:var(--paper-2);
  --color-surface-offset:var(--paper-2);
  --color-text:var(--ink);
  --color-primary:var(--gold);
  --radius-sm:2px;

  /* ---- Type scale (fluid, restrained) ---- */
  --text-xs:0.75rem;
  --text-sm:0.8125rem;
  --text-base:1.0625rem;
  --text-lg:clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --text-xl:clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
  --text-2xl:clamp(2.3rem, 1.7rem + 3vw, 4rem);
  --text-3xl:clamp(3rem, 2rem + 5.2vw, 6.5rem);
  --text-hero:clamp(3.2rem, 2rem + 6.5vw, 8rem);

  /* ---- Spacing ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-8:3rem; --space-10:4rem;
  --space-12:5rem; --space-16:7rem; --space-20:10rem; --space-24:13rem;

  --wrap:1280px;
  --wrap-text:760px;
  --gutter:clamp(1.25rem, 5vw, 5rem);

  --transition-interactive:.4s cubic-bezier(.22,1,.36,1);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* =====================================================================
   Base typography
   ===================================================================== */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  font-weight:400;
  line-height:1.65;
  letter-spacing:.005em;
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.04;letter-spacing:.002em}
h1{font-size:var(--text-2xl)}
h2{font-size:var(--text-xl)}
em,i{font-style:italic}

.serif{font-family:var(--font-display)}
.italic{font-style:italic}

/* Display sizes */
.h-hero{font-family:var(--font-display);font-size:var(--text-hero);line-height:.98;font-weight:400}
.h-xl{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.02}
.h-lg{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.06}
.h-md{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.15}

/* Micro utility label — uppercase letterspaced sans */
.eyebrow{
  display:inline-block;font-family:var(--font-body);
  font-size:var(--text-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:.22em;color:var(--gold);
}
.eyebrow--ink{color:var(--ink-faint)}
.eyebrow--dark{color:var(--on-dark-soft)}

.lead{font-family:var(--font-body);font-size:var(--text-lg);line-height:1.55;color:var(--ink-soft);font-weight:400;max-width:46ch}
.muted{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}

p{max-width:66ch}
a{color:inherit;text-decoration:none}

/* =====================================================================
   Layout primitives
   ===================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--text{max-width:calc(var(--wrap-text) + var(--gutter)*2)}
.wrap--wide{max-width:1600px}
.section{padding-block:clamp(4rem, 3rem + 8vw, 10rem)}
.section--tight{padding-block:clamp(3rem, 2rem + 5vw, 6rem)}
.section--flush-top{padding-top:0}
.stack{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.stack>*{margin:0}

.section--forest{background:var(--forest);color:var(--on-dark)}
.section--forest .lead{color:var(--on-dark-soft)}
.section--forest .muted{color:var(--on-dark-soft)}
.section--paper2{background:var(--paper-2)}

/* =====================================================================
   ATMOSPHERIC WASH — translucent photographic "ghosts" behind select
   sections. Large cropped travel imagery at very low effective opacity,
   desaturated, positioned asymmetrically. Body text always sits on the
   opaque white field; the wash lives on a pseudo-element beneath content.
   Applied to SELECT sections only, never behind every paragraph.
   ===================================================================== */
.wash{position:relative;isolation:isolate;overflow:hidden}
.wash>*{position:relative;z-index:1}
.wash::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;
  filter:var(--wash-grey);
  opacity:var(--wash-opacity);
}
/* a soft white veil fades the image toward the reading column so text keeps
   a fully opaque zone; the image survives only at the outer/quiet edge */
.wash::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 100% at var(--veil-x,85%) var(--veil-y,20%),
            rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.92) 78%);
}
.wash--dark::after{background:none}

/* Composition 1 — mountain + coastline (fjord). Anchored top-right. */
.wash--coast::before{
  inset:-8% -12% auto -6%;height:min(78%,760px);
  background-image:var(--img-coast);
  background-position:right 18%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
}
.wash--coast{--veil-x:82%;--veil-y:14%}

/* Composition 2 — aerial shore + boat. Anchored lower-left, cropped wide. */
.wash--aerial::before{
  inset:auto -6% -10% -14%;height:min(72%,680px);
  background-image:var(--img-aerial);
  background-position:left 60%;
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 58%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,#000 58%,transparent 100%);
}
.wash--aerial{--veil-x:22%;--veil-y:84%}

/* Composition 3 — plane above clouds (flyover). Anchored top spanning wide. */
.wash--sky::before{
  inset:-10% -10% auto -10%;height:min(64%,560px);
  background-image:var(--img-sky);
  background-position:center 30%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);
}
.wash--sky{--veil-x:50%;--veil-y:12%}

/* Image sources — set once; auto-prefixed variants for /pages/ set inline.
   Deliberately bright: turquoise lagoon (coast), boat wake on open sea
   (aerial), airliner in blue sky (sky). White, sunlit, optimistic. */
:root{
  --img-coast:url("assets/img/hero/hero-lagoon.webp");
  --img-aerial:url("assets/img/hero/hero-boat.webp");
  --img-sky:url("assets/img/hero/hero-plane.webp");
}

@media(max-width:640px){
  /* keep washes gentle and shallow on small screens */
  .wash::before{opacity:calc(var(--wash-opacity) * .82)}
  .wash--coast::before,.wash--aerial::before,.wash--sky::before{height:min(52%,420px)}
}
@media (prefers-reduced-motion:reduce){
  .wash::before,.wash::after{will-change:auto}
}

.rule{height:1px;background:var(--line);border:0;width:100%}
.rule--gold{background:var(--gold);height:1px;width:56px;border:0}
.rule--dark{background:var(--line-dark)}

/* =====================================================================
   Buttons & links — rectilinear, radius <= 2px
   ===================================================================== */
.btn{
  --btn-radius:0px;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  padding:1.05em 1.9em;border-radius:var(--btn-radius);
  border:1px solid transparent;line-height:1;white-space:nowrap;
}
.btn--primary{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn--primary:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--paper)}
.btn--outline-light{background:transparent;color:var(--on-dark);border-color:rgba(237,230,214,.55)}
.btn--outline-light:hover{background:var(--on-dark);color:var(--forest);border-color:var(--on-dark)}

/* Text action: uppercase micro-label with a thin underline */
.text-action{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink);
  padding-bottom:.5em;position:relative;
}
.text-action::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:2.2em;
  background:var(--gold);transition:width var(--transition-interactive);
}
.text-action:hover::after{width:100%}
.text-action--light{color:var(--on-dark)}
.text-action svg{width:1.15em;height:1.15em;stroke-width:1.5}

/* Serif inline link with arrow */
.link-arrow{
  display:inline-flex;align-items:baseline;gap:.5em;
  font-family:var(--font-display);font-size:var(--text-lg);color:var(--ink);
  position:relative;width:max-content;
}
.link-arrow svg{width:.85em;height:.85em;align-self:center;transition:transform var(--transition-interactive)}
.link-arrow::after{content:"";position:absolute;left:0;bottom:-.15em;height:1px;width:0;background:var(--gold);transition:width var(--transition-interactive)}
.link-arrow:hover::after{width:100%}
.link-arrow:hover svg{transform:translateX(.25em)}
.link-arrow--light{color:var(--on-dark)}

/* =====================================================================
   HEADER — thin architectural bar over the photo, no scrim
   ===================================================================== */
.skip-link{position:absolute;left:-999px;top:0;z-index:1000;background:var(--ink);color:var(--paper);padding:.6rem 1rem}
.skip-link:focus{left:1rem;top:1rem}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  color:var(--on-dark);
  transition:background var(--transition-interactive),color var(--transition-interactive),border-color var(--transition-interactive);
  border-bottom:1px solid transparent;
}
.site-header .bar{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-block:1.15rem;gap:1rem;
  max-width:1600px;margin-inline:auto;padding-inline:var(--gutter);
}
.hdr-left{justify-self:start}
.hdr-center{justify-self:center;text-align:center}
.hdr-right{justify-self:end}

/* wordmark */
.wordmark{display:inline-flex;flex-direction:column;align-items:center;line-height:1;gap:.28rem;color:inherit}
.wordmark .mark{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.02em;font-weight:400}
.wordmark .mark i{font-style:italic}
.wordmark .sub{font-family:var(--font-body);font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.42em;padding-left:.42em;opacity:.85}

/* menu trigger — uppercase text with tiny stacked rules */
.menu-trigger{
  display:inline-flex;align-items:center;gap:.7rem;color:inherit;
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;
}
.menu-trigger .lines{display:inline-flex;flex-direction:column;gap:4px;width:22px}
.menu-trigger .lines span{height:1px;background:currentColor;width:100%;transition:transform var(--transition-interactive)}
.menu-trigger .lines span:last-child{width:14px}
.menu-trigger:hover .lines span:last-child{width:22px}

.hdr-action{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:inherit;
  border:1px solid currentColor;padding:.8em 1.3em;
}
.hdr-action svg{width:18px;height:18px;flex:none}
.hdr-action{opacity:.92}
.hdr-action:hover{opacity:1;background:currentColor}
.site-header[data-state="light"] .hdr-action:hover{color:var(--ink)}
.site-header[data-state="ink"] .hdr-action:hover,
.site-header[data-state="solid"] .hdr-action:hover{color:var(--paper)}

/* scrolled / inner-page solid state */
.site-header[data-state="light"]{color:var(--on-dark)}
/* subtle top scrim keeps the thin bar legible over any hero, without a heavy full-image overlay */
.site-header[data-state="light"]::before{content:"";position:absolute;inset:0 0 -40px 0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,rgba(12,16,11,.45) 0%,rgba(12,16,11,.16) 55%,rgba(12,16,11,0) 100%)}
.site-header[data-state="solid"]{
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px) saturate(1.05);
  color:var(--ink);border-bottom-color:var(--line);
}
.site-header[data-state="ink"]{color:var(--ink)}
@supports not ((backdrop-filter:blur(10px))){
  .site-header[data-state="solid"]{background:var(--paper)}
}

/* =====================================================================
   FULL-SCREEN MENU OVERLAY — deep forest, big serif links
   ===================================================================== */
.menu-overlay{
  position:fixed;inset:0;z-index:200;background:var(--forest);color:var(--on-dark);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.menu-overlay[data-open="true"]{opacity:1;visibility:visible}
.menu-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.15rem var(--gutter);border-bottom:1px solid var(--line-dark);
}
.menu-close{
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--on-dark);
  display:inline-flex;align-items:center;gap:.7rem;
}
.menu-close .x{position:relative;width:16px;height:16px;display:inline-block}
.menu-close .x::before,.menu-close .x::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor}
.menu-close .x::before{transform:rotate(45deg)}
.menu-close .x::after{transform:rotate(-45deg)}

.menu-body{flex:1;overflow-y:auto;display:grid;grid-template-columns:1.4fr 1fr;gap:0}
.menu-primary{padding:clamp(2rem,5vw,5rem) var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:.1rem}
.menu-primary a{
  font-family:var(--font-display);font-size:clamp(2.2rem,5vw,4rem);line-height:1.1;
  color:var(--on-dark);width:max-content;max-width:100%;position:relative;
  opacity:0;transform:translateY(12px);
  transition:color .3s var(--ease);
}
.menu-overlay[data-open="true"] .menu-primary a{animation:menuIn .6s var(--ease) forwards}
.menu-primary a .idx{font-family:var(--font-body);font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--gold);vertical-align:super;margin-right:.6rem}
.menu-primary a:hover{color:#fff}
.menu-primary a:hover .lbl{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;text-decoration-color:var(--gold)}

.menu-secondary{
  background:var(--forest-2);padding:clamp(2rem,5vw,5rem) var(--gutter);
  display:flex;flex-direction:column;justify-content:center;gap:2.5rem;border-left:1px solid var(--line-dark);
}
.menu-secondary .grp h5{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:1rem}
.menu-secondary .grp a{display:block;color:var(--on-dark-soft);font-size:var(--text-base);padding:.28rem 0;transition:color var(--transition-interactive)}
.menu-secondary .grp a:hover{color:var(--on-dark)}

@keyframes menuIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .menu-primary a{opacity:1;transform:none;animation:none!important}
}

/* =====================================================================
   HERO — bright split editorial cover with a cinematic travel frame
   ===================================================================== */
body[data-page="home"] .site-header[data-state="ink"],
body[data-page="home"] .site-header[data-state="solid"]{
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px) saturate(1.04);
  color:var(--ink);border-bottom-color:var(--line);
}
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;background:var(--paper);
}
.hero-media{position:absolute;inset:0 0 0 min(44vw,1040px);z-index:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:56% 42%}
.hero::after{
  content:"";position:absolute;inset:0 auto 0 calc(min(44vw,1040px) - 1px);z-index:1;pointer-events:none;
  width:clamp(2.5rem,5vw,5.5rem);
  background:linear-gradient(to right,var(--paper) 0%,rgba(255,255,255,.72) 30%,rgba(255,255,255,0) 100%);
}
.hero-inner{
  position:relative;z-index:2;width:min(44vw,1040px);margin:0;
  padding:clamp(8rem,16vh,11rem) clamp(2rem,4.4vw,5.5rem) clamp(4rem,8vh,6rem) var(--gutter);
}
.hero-eyebrow{color:var(--gold-deep);opacity:1;margin-bottom:1.4rem}
.hero-title{
  font-family:var(--font-display);color:var(--ink);
  font-size:clamp(4.25rem,6.6vw,7.35rem);line-height:.91;font-weight:400;
  max-width:7.2ch;text-shadow:none;
}
.hero-title em{font-style:italic}
.hero-sub{color:var(--ink-soft);opacity:1;margin-top:1.6rem;max-width:34ch;font-size:var(--text-base);line-height:1.6;text-shadow:none}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.6rem;margin-top:2.2rem}

/* centred scroll cue with a thin vertical rule */
.scroll-cue{
  position:absolute;left:72%;transform:translateX(-50%);bottom:1.6rem;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;color:var(--on-dark);
}
.scroll-cue span{font-family:var(--font-body);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.32em;opacity:.85}
.scroll-cue .tick{width:1px;height:56px;background:linear-gradient(var(--on-dark),transparent);position:relative;overflow:hidden}
.scroll-cue .tick::after{content:"";position:absolute;top:-40%;left:0;width:1px;height:40%;background:var(--gold);animation:scrollTick 2.4s var(--ease) infinite}
@keyframes scrollTick{0%{top:-40%}60%,100%{top:100%}}
@media (prefers-reduced-motion:reduce){.scroll-cue .tick::after{animation:none;top:0;height:100%;opacity:.5}}

/* -------- Hero cinematic intro: slow drone-flyover glide + reveal --------
   The high-res still starts slightly scaled and offset, then eases forward
   to its resting composition over ~12s. Runs ONCE (forwards) and settles;
   no loop, no bounce, no controls. A brief clip reveal opens the frame. */
.hero-media img{
  transform-origin:58% 46%;
  transform:scale(1.035) translate(.5%, .35%);
  clip-path:none;
  will-change:transform;
}
.hero.is-ready .hero-media img{
  animation:heroFlyover 11s cubic-bezier(.16,.62,.24,1) forwards;
}
@keyframes heroFlyover{to{transform:scale(1) translate(0,0)}}

.hero-title,.hero-eyebrow,.hero-sub,.hero-actions{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hero-media img{transform:none;clip-path:none;animation:none!important}
  .hero.is-ready .hero-media img{animation:none!important;transform:none}
  .hero-title,.hero-eyebrow,.hero-sub,.hero-actions{opacity:1!important;transform:none!important}
}

/* =====================================================================
   MANIFESTO — huge serif statement, faint wordmark behind
   ===================================================================== */
.manifesto{position:relative;overflow:hidden}
.manifesto .ghost{
  position:absolute;top:-2vw;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-size:clamp(9rem,26vw,26rem);
  color:var(--paper-3);opacity:.5;line-height:1;white-space:nowrap;
  pointer-events:none;z-index:0;font-style:italic;
}
.manifesto .wrap{position:relative;z-index:1}
.manifesto-lead{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.8rem, 1.1rem + 2.8vw, 3.4rem);line-height:1.22;
  max-width:20ch;letter-spacing:.005em;color:var(--ink);
}
.manifesto-lead em{font-style:italic;color:var(--gold-deep)}
.manifesto-body{max-width:52ch;margin-top:2rem;color:var(--ink-soft);font-size:var(--text-lg)}

/* full-bleed image with a small serif caption */
.fullbleed{position:relative;margin-top:clamp(3rem,6vw,6rem)}
.fullbleed img{width:100%;height:clamp(340px,62vh,720px);object-fit:cover}
.fullbleed figcaption{
  margin-top:.9rem;padding-inline:var(--gutter);max-width:1600px;margin-inline:auto;
  font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--ink-faint);
  display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.fullbleed figcaption .idx{font-family:var(--font-body);font-style:normal;font-size:var(--text-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase}

/* =====================================================================
   EDITORIAL FEATURE — alternating 60/40 image + text, no card chrome
   ===================================================================== */
.feature{
  display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4.5rem);align-items:center;
}
@media(min-width:900px){
  .feature{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .feature--text-first .feature-text{order:-1}
  .feature--wide-media{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}
.feature + .feature{margin-top:clamp(4rem,9vw,9rem)}
.feature-media img{width:100%;height:clamp(360px,54vh,640px);object-fit:cover}
.feature-media figcaption{margin-top:.8rem;font-family:var(--font-display);font-style:italic;color:var(--ink-faint);font-size:var(--text-base)}
.feature-index{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.feature-title{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.02;margin-top:1rem}
.feature-title em{font-style:italic}
.feature-body{margin-top:1.4rem;color:var(--ink-soft);font-size:var(--text-lg);max-width:44ch}
.feature-meta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-size:var(--text-sm);color:var(--ink-faint)}
.feature-meta b{color:var(--ink);font-weight:500}
.feature-cta{margin-top:2rem}

/* asymmetric image pairing */
.pairing{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:800px){
  .pairing{grid-template-columns:1.35fr 1fr;align-items:end}
  .pairing .pair-b{margin-bottom:clamp(2rem,6vw,5rem)}
}
.pairing figure{margin:0}
.pairing img{width:100%;object-fit:cover}
.pairing .pair-a img{height:clamp(360px,62vh,700px)}
.pairing .pair-b img{height:clamp(260px,42vh,480px)}
.pairing figcaption{margin-top:.7rem;font-family:var(--font-display);font-style:italic;color:var(--ink-faint);font-size:var(--text-base)}

/* =====================================================================
   EXPERIENCE ROWS — four large serif text rows, not cards
   ===================================================================== */
.level-rows{border-top:1px solid var(--line-dark);margin-top:clamp(2rem,5vw,4rem)}
.section--forest .level-rows{border-top-color:var(--line-dark)}
.level-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem 2.5rem;align-items:baseline;
  padding-block:clamp(1.6rem,3.5vw,2.8rem);border-bottom:1px solid var(--line-dark);
  transition:padding-left var(--transition-interactive);
}
.level-row:hover{padding-left:.8rem}
.level-row .lr-num{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:.2em;color:var(--gold)}
.level-row .lr-name{font-family:var(--font-display);font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.02;color:var(--on-dark)}
.level-row .lr-name em{font-style:italic}
.level-row .lr-tag{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--on-dark-soft);grid-column:2;max-width:52ch}
.level-row .lr-go{align-self:center}
.level-row:hover .lr-name{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px;text-decoration-color:var(--gold)}
@media(max-width:720px){
  .level-row{grid-template-columns:auto 1fr;gap:.5rem 1.2rem}
  .level-row .lr-tag{grid-column:1 / -1}
  .level-row .lr-go{grid-column:1 / -1;justify-self:start;margin-top:.6rem}
}

/* light variant (on paper) */
.level-rows--paper{border-top-color:var(--line)}
.level-rows--paper .level-row{border-bottom-color:var(--line)}
.level-rows--paper .lr-name{color:var(--ink)}
.level-rows--paper .lr-tag{color:var(--ink-soft)}

/* =====================================================================
   TYPOGRAPHIC COUNTRY INDEX (destinations page)
   ===================================================================== */
.region-controls{display:flex;flex-wrap:wrap;gap:1.8rem;margin-block:2rem 1rem}
.region-btn{
  font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);
  padding-bottom:.4rem;position:relative;
}
.region-btn::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width var(--transition-interactive)}
.region-btn:hover{color:var(--ink)}
.region-btn[aria-pressed="true"]{color:var(--ink)}
.region-btn[aria-pressed="true"]::after{width:100%}

.country-index{border-top:1px solid var(--line);margin-top:1rem}
.country-row{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;
  gap:1rem 2.5rem;align-items:baseline;
  padding-block:clamp(1.5rem,3vw,2.6rem);border-bottom:1px solid var(--line);
  transition:padding-left var(--transition-interactive),background var(--transition-interactive);
}
.country-row:hover{padding-left:1rem}
.country-row .ci-idx{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:.2em;color:var(--gold)}
.country-row .ci-name{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1;color:var(--ink)}
.country-row .ci-name em{font-style:italic}
.country-row .ci-region{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-faint);grid-column:2;margin-top:.4rem}
.country-row .ci-tag{font-family:var(--font-display);font-style:italic;color:var(--ink-soft);font-size:var(--text-lg);grid-column:2;margin-top:.5rem;max-width:56ch}
.country-row .ci-go{align-self:center;color:var(--ink-faint);transition:color var(--transition-interactive),transform var(--transition-interactive)}
.country-row .ci-go svg{width:1.6rem;height:1.6rem;stroke-width:1.3}
.country-row:hover .ci-go{color:var(--gold);transform:translateX(.3rem)}
.country-row:hover .ci-name{text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:1px;text-decoration-color:var(--gold)}

/* hover image preview (desktop, pointer only) */
.ci-preview{
  position:fixed;top:0;left:0;width:340px;height:250px;z-index:90;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.96);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  overflow:hidden;box-shadow:0 30px 60px rgba(27,23,18,.28);
}
.ci-preview img{width:100%;height:100%;object-fit:cover}
.ci-preview.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(hover:none),(pointer:coarse){.ci-preview{display:none}}
.country-row[hidden]{display:none}
@media(max-width:720px){
  .country-row{grid-template-columns:auto 1fr;gap:.4rem 1.2rem}
  .country-row .ci-go{grid-column:1 / -1;justify-self:start;margin-top:.8rem}
}

/* =====================================================================
   PAGE HERO (inner pages: country / about) — 70-85vh photograph
   ===================================================================== */
.page-hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--forest)}
.page-hero.page-hero--short{min-height:60vh}
.page-hero .ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,14,9,.5) 0%,rgba(10,14,9,.1) 40%,rgba(10,14,9,.05) 100%)}
.page-hero .ph-inner{position:relative;z-index:2;width:100%;max-width:1600px;margin-inline:auto;padding:0 var(--gutter) clamp(3rem,7vh,6rem);color:var(--on-dark)}
.page-hero .crumbs{margin-bottom:1.4rem}
.page-hero .ph-eyebrow{color:var(--on-dark);opacity:.9}
.page-hero .ph-title{font-family:var(--font-display);font-size:var(--text-3xl);line-height:.98;margin-top:1rem;text-shadow:0 1px 40px rgba(10,14,9,.35)}
.page-hero .ph-title em{font-style:italic}
.page-hero .ph-tag{color:var(--on-dark);opacity:.92;margin-top:1.2rem;font-size:var(--text-lg);max-width:44ch;text-shadow:0 1px 20px rgba(10,14,9,.4)}

/* breadcrumb */
.crumbs{font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.crumbs a{color:inherit;transition:color var(--transition-interactive)}
.crumbs a:hover{color:var(--gold)}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--ink)}
.page-hero .crumbs{color:var(--on-dark-soft)}
.page-hero .crumbs a:hover{color:#fff}
.page-hero .crumbs [aria-current]{color:var(--gold)}

/* simple text page head (no photo) — destinations/levels/credits */
.page-head{padding-top:clamp(9rem,14vh,12rem)}
.page-head .h-xl{margin-top:1rem;max-width:16ch}
.page-head .lead{margin-top:1.6rem}

/* =====================================================================
   COUNTRY / LEVEL editorial sections
   ===================================================================== */
.facts{list-style:none;border-top:1px solid var(--line);margin:0;padding:0}
.facts li{display:flex;justify-content:space-between;gap:1.5rem;padding-block:1rem;border-bottom:1px solid var(--line)}
.facts .k{font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);font-weight:600}
.facts .v{font-family:var(--font-display);font-size:var(--text-lg);color:var(--ink);text-align:right}
.facts-note{margin-top:1.2rem;font-family:var(--font-body);font-size:var(--text-sm);line-height:1.55;color:var(--ink-faint);max-width:38ch}

.overview{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem)}
@media(min-width:900px){.overview{grid-template-columns:1.4fr .9fr}}
.overview .intro-body p{font-size:var(--text-lg);color:var(--ink-soft);margin-top:1.2rem;max-width:52ch}

/* highlights as editorial numbered entries, not cards */
.highlights{border-top:1px solid var(--line);margin-top:2rem}
.highlight{display:grid;grid-template-columns:auto 1fr;gap:1.5rem 2.5rem;padding-block:clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--line)}
.highlight .hi-idx{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:.2em;color:var(--gold)}
.highlight .hi-name{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.05}
.highlight .hi-text{color:var(--ink-soft);margin-top:.7rem;font-size:var(--text-lg);max-width:60ch}
@media(max-width:640px){.highlight{grid-template-columns:1fr;gap:.5rem}}

/* plain text tabs for levels (underline active) */
.level-tabs{display:flex;flex-wrap:wrap;gap:1.8rem;border-bottom:1px solid var(--line);padding-bottom:0;margin-top:1.5rem}
.level-tab{
  font-family:var(--font-display);font-size:var(--text-lg);color:var(--ink-faint);
  padding-bottom:1rem;position:relative;transition:color var(--transition-interactive);
}
.level-tab::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--gold);transition:width var(--transition-interactive)}
.level-tab:hover{color:var(--ink)}
.level-tab[aria-selected="true"]{color:var(--ink)}
.level-tab[aria-selected="true"]::after{width:100%}
.level-tab .tt-num{font-family:var(--font-body);font-size:.65rem;font-weight:600;letter-spacing:.15em;color:var(--gold);vertical-align:super;margin-right:.4rem}
.level-panel{padding-top:2rem}
.level-panel[hidden]{display:none}
.level-panel .lp-note{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.3;color:var(--ink);max-width:34ch}
.level-panel .lp-sum{color:var(--ink-soft);margin-top:1.4rem;font-size:var(--text-lg);max-width:56ch}

/* related countries as a compact typographic list */
.related-list{border-top:1px solid var(--line);margin-top:1.5rem}
.related-row{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding-block:1.3rem;border-bottom:1px solid var(--line);transition:padding-left var(--transition-interactive)}
.related-row:hover{padding-left:.6rem}
.related-row .rr-name{font-family:var(--font-display);font-size:var(--text-xl)}
.related-row .rr-region{font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-faint)}
.related-row:hover .rr-name{text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:1px;text-decoration-color:var(--gold)}

/* traits list */
.traits{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.section--forest .traits{border-top-color:var(--line-dark)}
.traits li{padding-block:.9rem;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:var(--text-lg);display:flex;gap:1rem;align-items:baseline}
.section--forest .traits li{border-bottom-color:var(--line-dark);color:var(--on-dark)}
.traits li::before{content:"";flex:0 0 auto;width:22px;height:1px;background:var(--gold);transform:translateY(-.4em)}

/* label / statement block */
.block-head{max-width:56ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.block-head .eyebrow{margin-bottom:1rem}
.block-head h2{margin-top:.4rem}
.block-head .lead{margin-top:1.2rem}

/* editorial preview note (honest, empty commerce slot) */
.note-slot{border:1px solid var(--line);padding:clamp(1.6rem,3vw,2.4rem)}
.section--forest .note-slot{border-color:var(--line-dark)}
.note-slot .eyebrow{margin-bottom:1rem}
.note-slot p{color:var(--ink-soft);margin-top:.8rem}
.section--forest .note-slot p{color:var(--on-dark-soft)}

/* pullquote */
.pullquote{font-family:var(--font-display);font-style:italic;font-size:clamp(1.6rem,1rem+2vw,2.6rem);line-height:1.25;color:var(--ink);border-left:2px solid var(--gold);padding-left:1.5rem;margin-block:2.5rem;max-width:24ch}

/* prose (about page) */
.prose h2{margin-bottom:1rem}
.prose p{font-size:var(--text-lg);color:var(--ink-soft);margin-top:1.2rem;max-width:60ch}

/* about "principles" as editorial rows */
.principles{border-top:1px solid var(--line);margin-top:1rem}
.principle{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 2.5rem;padding-block:clamp(1.4rem,2.5vw,2rem);border-bottom:1px solid var(--line)}
.principle .pr-idx{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:.2em;color:var(--gold)}
.principle .pr-name{font-family:var(--font-display);font-size:var(--text-xl)}
.principle .pr-text{color:var(--ink-soft);margin-top:.5rem;max-width:60ch}
@media(max-width:640px){.principle{grid-template-columns:1fr;gap:.4rem}}

/* two-way "start here" choice */
.choice{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media(min-width:800px){.choice{grid-template-columns:1fr 1fr}}
.choice a{padding:clamp(2rem,4vw,3rem) 0;border-bottom:1px solid var(--line);transition:padding-left var(--transition-interactive)}
@media(min-width:800px){.choice a:first-child{padding-right:3rem;border-right:1px solid var(--line)}.choice a:last-child{padding-left:3rem}}
.choice a:hover{padding-left:1rem}
@media(min-width:800px){.choice a:last-child:hover{padding-left:4rem}}
.choice .ch-name{font-family:var(--font-display);font-size:var(--text-xl);margin-top:.6rem}
.choice .ch-text{color:var(--ink-soft);margin-top:.8rem;max-width:42ch}
.choice .ch-go{margin-top:1.4rem}

/* =====================================================================
   TRANSPORT MOTION SEQUENCE — Fly / Sail / Ride
   Three full-width photographic panels lower on the homepage. Each holds
   a bright real photograph that drifts slowly in its own direction as it
   scrolls through view (scroll-linked where supported, otherwise a gentle
   one-shot ease on reveal). No loops, no scroll-jacking, no video.
   ===================================================================== */
.transport{border-top:1px solid var(--line)}
.transport-panel{
  position:relative;overflow:hidden;
  height:clamp(320px,64vh,640px);
  display:flex;align-items:flex-end;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.transport-panel .tp-img{
  position:absolute;inset:-8% -14%;width:128%;height:116%;
  object-fit:cover;z-index:0;will-change:transform;
}
/* soft white edge veil so the caption reads and the field stays bright */
.transport-panel::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,.82) 0%,rgba(255,255,255,.28) 34%,rgba(255,255,255,0) 62%);
}
.transport-panel .tp-copy{
  position:relative;z-index:2;width:100%;max-width:1600px;
  margin-inline:auto;padding:0 var(--gutter) clamp(2rem,5vh,3.5rem);
}
.transport-panel .tp-verb{
  font-family:var(--font-display);font-size:var(--text-3xl);line-height:.95;
  color:var(--ink);letter-spacing:.005em;
}
.transport-panel .tp-verb em{font-style:italic}
.transport-panel .tp-line{
  font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);
  color:var(--ink-soft);margin-top:.6rem;max-width:44ch;
}
.transport-panel .tp-num{
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;color:var(--gold);
  display:block;margin-bottom:1rem;
}

/* Directional drift. Scroll-linked when the browser supports scroll-driven
   animations; each motif moves along its own axis to echo the vehicle. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .transport-panel .tp-img{
      animation:linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    .tp-fly .tp-img{animation-name:driftFly}   /* plane: lateral drift + tiny lift */
    .tp-sail .tp-img{animation-name:driftSail} /* boat: slow glide + settle */
    .tp-ride .tp-img{animation-name:driftRide} /* train: horizontal travel */
  }
  /* Fallback for browsers without scroll timelines: gentle one-shot ease on reveal */
  @supports not (animation-timeline:view()){
    .tp-fly .tp-img{transform:translateX(-4%) scale(1.04)}
    .tp-sail .tp-img{transform:translateX(3%) scale(1.05)}
    .tp-ride .tp-img{transform:translateX(4%) scale(1.04)}
    .transport-panel.is-in .tp-img{transition:transform 6.5s cubic-bezier(.16,.62,.24,1);transform:none}
  }
}
@keyframes driftFly{from{transform:translateX(6%) translateY(2%) scale(1.06)}to{transform:translateX(-6%) translateY(-2%) scale(1.02)}}
@keyframes driftSail{from{transform:translateX(-5%) scale(1.07)}to{transform:translateX(5%) scale(1.01)}}
@keyframes driftRide{from{transform:translateX(8%) scale(1.05)}to{transform:translateX(-8%) scale(1.01)}}
@media (prefers-reduced-motion:reduce){
  .transport-panel .tp-img{transform:none!important;animation:none!important;transition:none!important}
}
@media(max-width:640px){
  .transport-panel{height:clamp(280px,52vh,420px)}
}

/* =====================================================================
   PERSPECTIVE TOGGLE — binary First-Time / Seasoned segmented control
   Square (radius 0), no pills, no shadow. Keyboard-accessible radiogroup.
   ===================================================================== */
.persp-toggle{
  display:inline-flex;border:1px solid var(--ink);
  margin-top:1.4rem;background:var(--paper);
}
.persp-toggle .pt-btn{
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);
  padding:.85em 1.4em;border:0;border-radius:0;background:transparent;
  cursor:pointer;transition:background var(--transition-interactive),color var(--transition-interactive);
  white-space:nowrap;
}
.persp-toggle .pt-btn + .pt-btn{border-left:1px solid var(--ink)}
.persp-toggle .pt-btn[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.persp-toggle .pt-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* toggle placed over the photographic country hero */
.page-hero .persp-toggle{border-color:var(--on-dark);background:rgba(17,22,15,.28)}
.page-hero .persp-toggle .pt-btn{color:var(--on-dark)}
.page-hero .persp-toggle .pt-btn + .pt-btn{border-left-color:var(--on-dark)}
.page-hero .persp-toggle .pt-btn[aria-checked="true"]{background:var(--on-dark);color:var(--forest)}
.ph-persp-label{margin-top:1rem;font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--on-dark);opacity:.85}

/* per-perspective content wrapper: cross-fade when the mode changes */
.persp-content{transition:opacity .32s var(--ease)}
.persp-content.is-swapping{opacity:0}
@media (prefers-reduced-motion:reduce){.persp-content{transition:none}}

/* route / logistics / pitfalls / deeper editorial blocks */
.pv-block{border-top:1px solid var(--line);margin-top:2rem;padding-top:2rem}
.pv-block:first-child{border-top:0;margin-top:0;padding-top:0}
.pv-block .pv-label{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:.9rem}
.pv-block .pv-text{font-size:var(--text-lg);color:var(--ink-soft);max-width:64ch;margin-top:.4rem}
.pv-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem)}
@media(min-width:900px){.pv-grid{grid-template-columns:1fr 1fr}}

/* binary split editorial choice — two confident columns, no cards */
.split{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media(min-width:820px){.split{grid-template-columns:1fr 1fr}}
.split .sp-col{padding:clamp(2rem,4vw,3.2rem) 0;border-bottom:1px solid var(--line)}
@media(min-width:820px){
  .split .sp-col:first-child{padding-right:clamp(2rem,4vw,3.2rem);border-right:1px solid var(--line)}
  .split .sp-col:last-child{padding-left:clamp(2rem,4vw,3.2rem)}
}
.split .sp-num{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:var(--gold)}
.split .sp-name{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.02;margin-top:.8rem}
.split .sp-name em{font-style:italic}
.split .sp-tag{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--ink-soft);margin-top:.8rem;max-width:40ch}
.split .sp-body{color:var(--ink-soft);margin-top:1.2rem;font-size:var(--text-base);max-width:46ch}
.split .sp-traits{list-style:none;padding:0;margin:1.4rem 0 0;border-top:1px solid var(--line)}
.split .sp-traits li{padding-block:.7rem;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:var(--text-base);display:flex;gap:.9rem;align-items:baseline}
.split .sp-traits li::before{content:"";flex:0 0 auto;width:18px;height:1px;background:var(--gold);transform:translateY(-.35em)}
.split .sp-go{margin-top:1.6rem}
/* dark variant of split (on forest) */
.section--forest .split,.section--forest .split .sp-col,
.section--forest .split .sp-traits,.section--forest .split .sp-traits li{border-color:var(--line-dark)}
@media(min-width:820px){.section--forest .split .sp-col:first-child{border-right-color:var(--line-dark)}}
.section--forest .split .sp-name{color:var(--on-dark)}
.section--forest .split .sp-tag,.section--forest .split .sp-body{color:var(--on-dark-soft)}
.section--forest .split .sp-traits li{color:var(--on-dark)}

/* =====================================================================
   CREDITS
   ===================================================================== */
.credits-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.credits-list li{padding-block:1.3rem;border-bottom:1px solid var(--line);max-width:80ch}
.credits-list strong{font-family:var(--font-display);font-weight:400;font-size:var(--text-lg);color:var(--ink)}
.credits-list li span.meta{display:block;margin-top:.4rem;font-size:var(--text-sm);color:var(--ink-faint)}
.credits-list a{color:var(--gold-deep);text-underline-offset:.15em}
.credits-list a:hover{text-decoration:underline}
.attrib{color:var(--ink-faint);font-size:var(--text-sm)}
.attrib a{color:var(--gold-deep)}

/* =====================================================================
   FOOTER — sparse, dark, editorial
   ===================================================================== */
.footer{background:var(--forest);color:var(--on-dark);padding-block:clamp(4rem,7vw,7rem) 2.5rem}
.footer .f-top{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem)}
@media(min-width:820px){.footer .f-top{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer .f-brand .mark{font-family:var(--font-display);font-size:1.9rem;line-height:1;color:var(--on-dark)}
.footer .f-brand .mark i{font-style:italic}
.footer .f-brand .sub{font-family:var(--font-body);font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.4em;color:var(--gold);margin-top:.5rem}
.footer .f-brand p{color:var(--on-dark-soft);margin-top:1.4rem;max-width:34ch;font-size:var(--text-base)}
.footer h5{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:1.2rem}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.footer a{color:var(--on-dark-soft);transition:color var(--transition-interactive)}
.footer a:hover{color:var(--on-dark)}
.footer .f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:clamp(3rem,6vw,5rem);padding-top:2rem;border-top:1px solid var(--line-dark);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint)}

/* =====================================================================
   Scroll reveal — opacity only, gated behind support + reduced-motion
   ===================================================================== */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;animation:revealIn linear forwards;animation-timeline:view();animation-range:entry 5% cover 22%}
  }
}
@keyframes revealIn{from{opacity:0}to{opacity:1}}

/* =====================================================================
   Responsive
   ===================================================================== */
@media(max-width:900px){
  .menu-body{grid-template-columns:1fr}
  .menu-secondary{border-left:0;border-top:1px solid var(--line-dark)}
  .hdr-action span.long{display:none}
  .hdr-action{padding:.6em;gap:0}
  .hero{min-height:auto;padding-top:4.6rem;justify-content:flex-start}
  .hero-media{position:relative;inset:auto;width:100%;height:54svh;min-height:380px;order:0}
  .hero-media img{object-position:center 44%}
  .hero::after{display:none}
  .hero-inner{
    order:1;width:100%;padding:clamp(3rem,10vw,5rem) var(--gutter) clamp(3.5rem,10vw,5.5rem);
  }
  .hero-title{font-size:clamp(4rem,15vw,6.6rem);max-width:8ch}
  .hero-sub{max-width:42ch}
  .scroll-cue{display:none}
}
@media(min-width:1800px){
  .hero-inner{padding-left:clamp(7rem,7.5vw,12rem)}
  .hero-title{font-size:clamp(7.35rem,6.4vw,8rem)}
}
@media(max-width:640px){
  .wordmark .mark{font-size:1.2rem}
  .wordmark .sub{font-size:.5rem;letter-spacing:.34em}
  .menu-trigger span.long{display:none}
  .hero-media{height:38svh;min-height:280px}
  .hero-inner{padding-block:2.5rem 3.5rem}
  .hero-title{font-size:clamp(3.5rem,14.4vw,4.25rem);max-width:9ch}
  .hero-eyebrow{margin-bottom:1rem}
  .hero-sub{margin-top:1.2rem}
  .hero-actions{margin-top:1.7rem}
  .hero-actions{align-items:flex-start;flex-direction:column}
  .feature-meta{gap:.3rem 1rem}
}

/* =====================================================================
   COUNTRY PAGE — editorial image rhythm (195-guide expansion)
   White/light overview, image-led must-sees, secondary interlude,
   paced recommendation blocks over a faint country wash. Square geometry.
   ===================================================================== */

/* hero photograph credit, low-key on the image */
.page-hero .ph-credit{color:var(--on-dark-soft);opacity:.72;margin-top:1.4rem;font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.04em}
.eyebrow--paper{color:var(--on-dark-soft)}
.text-action--paper{color:var(--on-dark)}
.text-action--paper:hover{color:#fff}

/* overview lives on clean white */
.c-overview{background:var(--paper)}

/* safety advisory — square, thin gold rule, never sensational */
.advisory{border:1px solid var(--line);border-left:2px solid var(--gold);background:var(--paper-2);padding:clamp(1.2rem,3vw,1.8rem) clamp(1.4rem,3vw,2rem);margin-bottom:clamp(2rem,4vw,3rem);max-width:70ch}
.advisory-label{font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:var(--gold-deep)}
.advisory-body{margin-top:.6rem;font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:var(--ink-soft)}

/* must-see rows — image-led, alternating, no rounded corners */
.ms-rows{border-top:1px solid var(--line);margin-top:1.5rem}
.ms-row{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center;padding-block:clamp(2rem,4vw,3.2rem);border-bottom:1px solid var(--line)}
@media(min-width:860px){
  .ms-row{grid-template-columns:1.05fr 1fr;gap:clamp(2rem,4vw,3.6rem)}
  .ms-row--flip .ms-figure{order:2}
  .ms-row--flip .ms-copy{order:1}
}
.ms-figure{margin:0;overflow:hidden;background:var(--paper-3);aspect-ratio:4/3}
.ms-figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
@media(hover:hover){.ms-row:hover .ms-figure img{transform:scale(1.03)}}
@media(prefers-reduced-motion:reduce){.ms-figure img{transition:none}.ms-row:hover .ms-figure img{transform:none}}
.ms-idx{font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;letter-spacing:.2em;color:var(--gold)}
.ms-name{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.05;margin-top:.5rem}
.ms-text{color:var(--ink-soft);margin-top:.8rem;font-size:var(--text-lg);line-height:1.55;max-width:52ch}

/* large secondary-image interlude — full-bleed asymmetric feature */
.interlude{position:relative;min-height:clamp(46vh,54vh,620px);display:flex;align-items:flex-end;overflow:hidden;background:var(--forest)}
.interlude .interlude-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.interlude::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(10,14,9,.6) 0%,rgba(10,14,9,.12) 55%,rgba(10,14,9,.04) 100%)}
.interlude-copy{position:relative;z-index:2;width:100%;max-width:1600px;margin-inline:auto;padding:0 var(--gutter) clamp(2.4rem,6vh,4.5rem);color:var(--on-dark)}
.interlude-line{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1;margin-top:.8rem;max-width:22ch;text-shadow:0 1px 30px rgba(10,14,9,.4)}
.interlude-credit{margin-top:1rem;font-family:var(--font-body);font-size:var(--text-xs);color:var(--on-dark-soft);opacity:.75}

/* recommendation blocks — paced editorial grid over a faint country wash */
.c-practice{position:relative;isolation:isolate;overflow:hidden;background:var(--paper-2)}
.c-practice::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--wash-img);background-size:cover;background-position:center;opacity:.07;filter:var(--wash-grey)}
.c-practice>*{position:relative;z-index:1}
.rec-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
@media(min-width:760px){.rec-grid{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem)}}
.rec-block{padding-block:clamp(1.5rem,3vw,2.2rem);border-bottom:1px solid var(--line)}
.rec-label{font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--gold-deep)}
.rec-text{margin-top:.7rem;font-family:var(--font-body);font-size:var(--text-base);line-height:1.62;color:var(--ink-soft);max-width:56ch}

/* sources + image credits disclosure — square summary, no default marker clutter */
.sources{margin-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid var(--line);padding-top:1.5rem;max-width:74ch}
.sources>summary{cursor:pointer;list-style:none;font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);display:inline-flex;align-items:center;gap:.6rem}
.sources>summary::-webkit-details-marker{display:none}
.sources>summary::before{content:"+";font-weight:600;color:var(--gold)}
.sources[open]>summary::before{content:"–"}
.sources>summary:hover{color:var(--ink)}
.sources-body{margin-top:1.4rem}
.sources-head{font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--ink-faint);margin-top:1.4rem}
.sources-head:first-child{margin-top:0}
.sources-list{list-style:none;margin:.6rem 0 0;padding:0}
.sources-list li{font-family:var(--font-body);font-size:var(--text-sm);line-height:1.55;color:var(--ink-soft);padding-block:.35rem;border-bottom:1px solid var(--paper-3)}
.sources-list a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.sources-list a:hover{text-decoration-color:var(--gold)}

/* =====================================================================
   CREDITS PAGE — A-Z grouped, searchable, square/text-only controls
   ===================================================================== */
.cr-controls{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;border-bottom:1px solid var(--line);padding-bottom:1.4rem}
.cr-search{display:block;flex:1 1 320px;max-width:460px}
.cr-search-label{display:block;font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--ink-faint);margin-bottom:.5rem}
.cr-search input{width:100%;font-family:var(--font-body);font-size:var(--text-base);color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:0;padding:.7rem .85rem}
.cr-search input:focus{outline:none;border-color:var(--gold)}
.cr-count{font-family:var(--font-body);font-size:var(--text-sm);color:var(--ink-faint);margin:0}
.cr-az{display:flex;flex-wrap:wrap;gap:.15rem;margin-top:1.5rem;border-bottom:1px solid var(--line);padding-bottom:1.2rem}
.az-item{font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:.04em;color:var(--ink);padding:.3rem .55rem;text-decoration:none;border:1px solid transparent}
a.az-item:hover{color:var(--gold-deep);border-color:var(--line)}
.az-item--off{color:var(--paper-3);pointer-events:none}
.cr-letter{margin-top:clamp(2.4rem,5vw,3.6rem);scroll-margin-top:90px}
.cr-letter-head{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:.4rem}
.cr-group{margin-top:clamp(1.6rem,3vw,2.4rem)}
.cr-group-name{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.05;color:var(--ink)}
.cr-items{list-style:none;margin:1rem 0 0;padding:0}
.cr-item{display:grid;grid-template-columns:1fr;gap:.3rem;padding-block:1rem;border-bottom:1px solid var(--paper-3)}
@media(min-width:720px){.cr-item{grid-template-columns:120px 1fr;gap:.3rem 1.5rem}}
.cr-kind{font-family:var(--font-body);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:var(--gold-deep)}
.cr-desc{font-family:var(--font-body);font-size:var(--text-base);color:var(--ink);line-height:1.5}
.cr-meta{grid-column:1/-1;font-family:var(--font-body);font-size:var(--text-sm);color:var(--ink-faint);line-height:1.5}
@media(min-width:720px){.cr-meta{grid-column:2/-1}}
.cr-meta a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.cr-meta a:hover{text-decoration-color:var(--gold)}
.cr-empty{font-family:var(--font-body);font-size:var(--text-lg);color:var(--ink-faint);margin-top:2.5rem}