/* =========================================================
   PASSPORT ENGLISH v2: editorial design
   Ported from Ksawery's own design (Newsreader + paper/terracotta/
   forest palette, hairline rules, no radius, no shadows).
   Markup: ../index.html   Data: ../js/data.js
   ========================================================= */

:root{
  /* paper */
  --paper:      #f3efe6;
  --ink:        #15130f;
  --body:       #3f3a31;
  --muted:      #7d7566;
  --rule:       #d9d2c2;
  /* accent */
  --terra:      #d4622e;
  --terra-pale: #f8ddd0;
  /* forest band */
  --teal:       #12695f;   /* secondary accent: photo interaction */
  --forest:     #1f3b31;
  --forest-2:   #2c4c40;
  --forest-3:   #33564a;
  --forest-rule:#35544a;
  --pale:       #b7c9bf;
  --pale-2:     #dfe6e1;
  --apricot:    #e8b98a;
  /* sand band */
  --sand:       #e9dcc3;
  --sand-ink:   #7d6a4a;
  --sand-rule:  #cdbc99;

  --maxw: 1120px;
  --pad: 32px;
  --serif: "Newsreader", Georgia, serif;
  --sans: Helvetica, Arial, system-ui, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.015em; }
em{ font-style:normal; }

/* ---------- layout primitives ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
section{ padding:0; }

/* the signature motif: hairline rule, small caps label left, content right */
.ruled{ border-top:1px solid var(--ink); padding-top:16px; display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:40px; }
.label{
  font-family:var(--sans); font-size:13px; font-weight:400; line-height:1.4;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0;
}
.block{ padding:0 0 80px; }
/* rule + label on its own line, so the map and strip below get the full width */
.ruled-head{
  border-top:1px solid var(--ink); padding-top:16px; margin-bottom:22px;
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
}
.years{ display:flex; }
.year-btn{
  background:none; border:0; border-left:1px solid var(--rule); cursor:pointer;
  padding:.2em .9em; font:400 13px var(--sans); letter-spacing:.06em; color:var(--muted);
  transition:color .15s;
}
.year-btn:first-child{ border-left:0; padding-left:0; }
.year-btn:hover{ color:var(--ink); }
.year-btn.active{ color:var(--terra); font-weight:700; }
.year-btn:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }

/* ---------- header ---------- */
header{ background:var(--paper); }
.nav{
  max-width:var(--maxw); margin:0 auto; padding:28px var(--pad) 0;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  border-bottom:1px solid var(--ink);
}
/* Logotype: the site's own rule-and-label device turned into the mark itself,
   so the name is built from the same object as every section heading. */
.brand{
  text-decoration:none; color:var(--ink); white-space:nowrap;
  display:flex; align-items:stretch; gap:12px; padding-bottom:15px;
}
.brand .rule{ width:1px; background:var(--ink); flex:none; }
.brand .stack{ display:flex; flex-direction:column; justify-content:center; }
.brand .a{ font:500 9.5px/1.1 var(--sans); letter-spacing:.3em;
           text-transform:uppercase; color:var(--ink); }
.brand .b{ font:300 28px/1.02 var(--serif); font-style:italic; color:var(--terra); }
.brand:hover .b{ color:var(--forest); }
@media(max-width:560px){
  .brand{ gap:10px; }
  .brand .a{ font-size:8.25px; letter-spacing:.26em; }
  .brand .b{ font-size:23px; }
}
.nav-links{ display:flex; gap:26px; font-size:14px; padding-bottom:15px; }
.nav-links a{ text-decoration:none; color:var(--body); }
.nav-links a:hover{ color:var(--terra); }
.nav-links a[aria-current="page"]{ color:var(--terra); border-bottom:1px solid var(--terra); }
.nav-right{ display:flex; align-items:center; gap:14px; padding-bottom:15px; }

.lang{ display:flex; align-items:baseline; gap:6px; font-size:13px; letter-spacing:.05em; }
.lang a{ color:var(--muted); text-decoration:none; }
.lang a:hover{ color:var(--terra); }
.lang .lang-on{ color:var(--terra); font-weight:700; }
.lang .lang-sep{ color:var(--rule); }

.menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:32px; border:1px solid var(--ink); background:transparent;
  cursor:pointer; color:var(--ink);
}
.menu-btn svg{ width:18px; height:18px; }
.mobile-menu{ display:none; flex-direction:column; border-bottom:1px solid var(--ink); }
.mobile-menu a{
  padding:.85em var(--pad); text-decoration:none; color:var(--body);
  border-top:1px solid var(--rule); font-size:15px;
}
.mobile-menu a[aria-current="page"]{ color:var(--terra); }
.mobile-menu.open{ display:flex; }
@media(min-width:900px){ .menu-btn,.mobile-menu{ display:none !important; } }

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:64px var(--pad) 72px;
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:64px; align-items:center;
}
.hero h1{ font-size:clamp(2.4rem,5.4vw,64px); line-height:1.05; text-wrap:balance; margin:0 0 22px; }
.hero h1 em{ font-weight:300; color:var(--terra); }
.hero-eyebrow{
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--terra); margin:0 0 18px;
}
.hero-side{ font-size:17px; color:var(--body); text-wrap:pretty; }
.hero-side p{ margin:0 0 18px; }
.hero-side .go{ font-weight:700; text-decoration:none; }
.hero-side .go:hover{ color:var(--terra); }

/* actions: one real button, one quiet way to browse instead of commit */
.hero-actions{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin:26px 0 0; }
.hero-actions .go{ font-weight:700; text-decoration:none; color:var(--ink); }
.hero-actions .go:hover{ color:var(--terra); }

/* every item here is checkable: certificates he holds, trip facts from the photo EXIF */
.hero-creds{
  list-style:none; display:flex; flex-wrap:wrap; margin:34px 0 0; padding:14px 0 0;
  border-top:1px solid var(--rule); gap:0;
}
.hero-creds li{
  font-family:var(--sans); font-size:12.5px; color:var(--muted);
  padding-right:16px; margin-right:16px; border-right:1px solid var(--rule);
}
.hero-creds li:last-child{ border-right:0; padding-right:0; margin-right:0; }

.hero-shot{ margin:0; }
.hero-shot .frame{
  aspect-ratio:3/4; overflow:hidden; background:var(--sand);
  outline:1px solid var(--rule); outline-offset:9px;
}
.hero-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-shot figcaption{ margin:26px 0 0; font-size:13px; color:var(--muted); }

@media(max-width:900px){
  .hero{ grid-template-columns:minmax(0,1fr); gap:40px; padding-top:44px; }
  .hero-shot{ order:-1; }
  .hero-shot .frame{ aspect-ratio:4/3; outline-offset:6px; }
}

/* ---------- forest band (photos / journey rows) ---------- */
.forest{ background:var(--forest); color:var(--paper); }
.forest .label{ color:var(--pale); }
.forest-inner{
  max-width:var(--maxw); margin:0 auto; padding:48px var(--pad);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr); gap:20px; align-items:end;
}
.forest figure{ margin:0; }
.forest figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot-43{ aspect-ratio:4/3; overflow:hidden; background:var(--forest-2); }
.shot-34{ aspect-ratio:3/4; overflow:hidden; background:var(--forest-2); }
.forest figcaption{ font-size:13px; color:var(--pale); margin-top:8px; }
.forest-aside{ font-size:15px; color:var(--pale-2); line-height:1.6; padding-bottom:28px; }
.forest-aside p{ margin:0 0 12px; }
.forest-aside .warm{ color:var(--apricot); margin:0; }

/* journey rows inside a forest band */
.jrow{
  display:grid; grid-template-columns:110px 1fr 2fr; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--forest-rule); font-size:15px;
}
.jrow .jwhen{ font-family:var(--serif); font-size:20px; color:var(--apricot); }
.jrow .jwhere{ font-weight:700; }
.jrow .jwhat{ color:var(--pale-2); }

/* ---------- lesson rows ---------- */
.lrow{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px;
  padding:22px 0 26px; border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit;
}
.lrow h3{ margin:0; font-size:34px; line-height:1.1; }
.lrow:hover h3{ color:var(--terra); }
.lrow p{ margin:0 0 8px; color:var(--body); text-wrap:pretty; }
.lrow .for{ margin:0; font-size:13px; color:var(--muted); }
.more{ margin:20px 0 0; font-size:14px; }
.more a{ font-weight:700; text-decoration:none; }
.more a:hover{ color:var(--terra); }

/* ---------- numbered steps ---------- */
.steps{ margin:0; padding:8px 0 0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.steps .n{ font-family:var(--serif); font-size:32px; line-height:1; color:var(--terra); margin-bottom:12px; }
.steps h3{ margin:0 0 8px; font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:0; }
.steps p{ margin:0; color:var(--body); font-size:15px; }

/* ---------- terracotta CTA band ---------- */
.cta{ background:var(--terra); color:var(--paper); }
.cta-inner{
  max-width:var(--maxw); margin:0 auto; padding:72px var(--pad);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:start;
}
.cta h2{ margin:0; font-size:clamp(2rem,4vw,48px); line-height:1.1; letter-spacing:-.01em; text-wrap:balance; }
.cta .sub{ margin:0 0 14px; color:var(--terra-pale); }
.cta .go{ font-weight:700; color:var(--paper); text-decoration:none; }
.cta .go:hover{ color:var(--ink); }

/* ---------- sand band ---------- */
.sand{ background:var(--sand); }
.sand .label{ color:var(--sand-ink); }
.sand-inner{
  max-width:var(--maxw); margin:0 auto; padding:64px var(--pad);
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:40px;
}
.prow{
  display:grid; grid-template-columns:2fr 3fr 1fr; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--sand-rule); align-items:baseline;
}
.prow .pname{ font-weight:700; }
.prow .pdesc{ color:var(--body); font-size:15px; }
.prow .pprice{ font-family:var(--serif); font-size:26px; text-align:right; color:var(--terra); }
.pnote{ margin:16px 0 0; font-size:13px; color:var(--sand-ink); }

/* ---------- buttons / forms ---------- */
.btn{
  display:inline-block; background:var(--terra); color:var(--paper);
  border:0; padding:14px 24px; font:700 15px var(--sans); cursor:pointer;
  text-decoration:none; transition:background .15s;
}
.btn:hover{ background:var(--forest); }
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.field{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.field input, .field textarea, .field select{
  border:0; border-bottom:1px solid var(--ink); background:transparent;
  padding:8px 0; font:18px var(--sans); color:var(--ink); outline:none;
}
.field textarea{ resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ border-bottom-color:var(--terra); }

.defs{ margin:0; font-size:15px; }
.defs > div{ display:grid; grid-template-columns:110px 1fr; gap:16px; padding:12px 0; border-top:1px solid var(--rule); }
.defs > div:last-child{ border-bottom:1px solid var(--rule); }
.defs dt{ color:var(--muted); }
.defs dd{ margin:0; }

.creds{ margin:0; padding:0; list-style:none; }
.creds li{
  padding:15px 0; border-bottom:1px solid var(--rule);
}
.creds li:first-child{ border-top:1px solid var(--rule); }
.creds .c-name{ font-family:var(--serif); font-size:22px; line-height:1.15; }
.creds .c-where{ display:block; font-family:var(--sans); font-size:13px; color:var(--muted); margin-top:.25em; }
.cred-note{ margin:18px 0 0; font-size:14px; color:var(--muted); max-width:60ch; }

/* ---------- FAQ ---------- */
.faq{ margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 48px; padding-top:8px; }
.faq dt{ font-weight:700; margin-bottom:6px; }
.faq dd{ margin:0; color:var(--body); font-size:15px; text-wrap:pretty; }

/* =========================================================
   Interactive pieces carried over from v1, restyled flat
   ========================================================= */

/* ---------- journey map ---------- */
.mapwrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; padding-top:8px; }
.mapcol{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.mapbox{ background:var(--forest); overflow:hidden; }
.mapbox svg{ width:100%; height:auto; display:block; }
.svg-ocean{ fill:url(#ocean); }
.svg-land{ fill:#2c4c40; opacity:1; stroke:rgba(243,239,230,.14); stroke-width:.8; }
.svg-grid{ stroke:rgba(255,255,255,.06); stroke-width:1; }
.route{ fill:none; stroke:var(--apricot); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:1 12; opacity:.9; }
.plane{ fill:#fff; }
.pin{ cursor:pointer; }
.pin .hit{ fill:transparent; }
.pin .dot{ fill:var(--paper); stroke:var(--terra); stroke-width:3; transition:transform .2s ease;
  transform-box:fill-box; transform-origin:center; }
.pin .halo{ fill:var(--terra); opacity:0; transform-box:fill-box; transform-origin:center; }
.pin.home .dot{ fill:var(--terra); stroke:var(--paper); }
.pin.active .dot{ transform:scale(1.55); fill:var(--terra); stroke:var(--paper); }
.pin.active .halo{ animation:halo 1.7s ease-out infinite; }
@keyframes halo{ 0%{opacity:.5; transform:scale(1)} 100%{opacity:0; transform:scale(3.4)} }
.pinlabel{ font:400 15px var(--sans); fill:var(--paper); opacity:0; pointer-events:none;
  transition:opacity .2s; paint-order:stroke; stroke:rgba(21,19,15,.8); stroke-width:4px; }
.pin.active .pinlabel{ opacity:1; }
@media (hover:hover) and (pointer:fine){
  .pin:hover .dot{ transform:scale(1.25); }
  .pin:hover .pinlabel{ opacity:1; }
}
.pin:focus-visible .dot{ transform:scale(1.55); }

.mapchips{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none; min-width:0; border-top:1px solid var(--rule); }
.mapchips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; white-space:nowrap; cursor:pointer; background:none; border:0;
  border-right:1px solid var(--rule); padding:.7em 1.1em;
  font:400 13px var(--sans); letter-spacing:.03em; color:var(--muted);
}
.chip:hover{ color:var(--ink); }
.chip.active{ color:var(--terra); font-weight:700; }
.chip:focus-visible{ outline:2px solid var(--terra); outline-offset:-2px; }

.mapdetail{ display:flex; flex-direction:column; }
.md-photo{
  width:100%; aspect-ratio:4/3; margin-bottom:16px; position:relative; overflow:hidden;
  background:var(--forest-2); cursor:zoom-in;
}
.md-photo .layer{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .35s ease; }
.md-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; pointer-events:none;
  padding:26px 12px 9px; font:400 13px var(--sans); color:#fff;
  background:linear-gradient(transparent, rgba(21,19,15,.85));
}
.md-count{
  position:absolute; top:8px; right:10px; z-index:2; pointer-events:none;
  padding:.2em .55em; background:rgba(21,19,15,.6);
  font:700 12px var(--sans); color:#fff; letter-spacing:.04em;
}
.md-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; cursor:pointer; border:1px solid rgba(255,255,255,.8);
  background:rgba(21,19,15,.35); color:#fff; font-size:1.2rem; line-height:1; padding:0 0 .1em;
  display:flex; align-items:center; justify-content:center;
}
.md-nav:hover{ background:var(--teal); border-color:var(--teal); }
.md-nav--prev{ left:10px; }
.md-nav--next{ right:10px; }
.md-photo.single .md-nav, .md-photo.single .md-count{ display:none; }
.md-step{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--terra); }
.mapdetail h3{ font-size:30px; margin:.15em 0 .05em; }
.md-country{ font-size:14px; color:var(--muted); margin-bottom:.7em; }
.mapdetail p{ color:var(--body); font-size:15px; }
.map-hint{ font-size:13px; color:var(--muted); margin-top:10px; }
@media(min-width:900px){
  .mapwrap{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); align-items:start; gap:30px; }
}

/* ---------- snapshots strip ---------- */
.snaps-wrap{
  position:relative; min-width:0; max-width:100%;
  /* first/last card line up with the text column, but the row runs to both
     screen edges so it visibly continues past them */
  --strip-pad: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
}
.snaps{
  display:flex; gap:12px; overflow-x:auto; scrollbar-width:none;
  /* vertical room so the hover scale and the outline mat are not clipped */
  padding:16px var(--strip-pad);
  -webkit-overflow-scrolling:touch; min-width:0; max-width:100%;
  cursor:grab; scroll-behavior:auto; scrollbar-width:none;
}
.snaps::-webkit-scrollbar{ display:none; }
.snaps.dragging{ cursor:grabbing; }
.snaps.dragging .snap{ pointer-events:none; }
.snap{
  flex:none; width:200px; height:150px; background-size:cover; background-position:center;
  position:relative; cursor:zoom-in; user-select:none; -webkit-user-drag:none;
}
.snap span{
  position:absolute; left:0; right:0; bottom:0; padding:20px 10px 8px; pointer-events:none;
  font:400 12px var(--sans); color:#fff; background:linear-gradient(transparent, rgba(21,19,15,.85));
}
.snaps-wrap::before, .snaps-wrap::after{
  content:""; position:absolute; top:0; bottom:0; z-index:2;
  pointer-events:none; opacity:0; transition:opacity .2s ease;
}
.snaps-wrap::before{ left:0;  width:calc(var(--strip-pad) + 40px); background:linear-gradient(90deg, var(--paper) 55%, transparent); }
.snaps-wrap::after { right:0; width:calc(var(--strip-pad) + 40px); background:linear-gradient(270deg, var(--paper) 55%, transparent); }
.snaps-wrap.can-prev::before{ opacity:1; }
.snaps-wrap.can-next::after { opacity:1; }
.snap-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:36px; height:36px; border:0; cursor:pointer;
  background:var(--ink); color:var(--paper); font-size:1rem; line-height:1;
  display:none; align-items:center; justify-content:center; transition:background .15s, opacity .15s;
}
.snap-arrow:hover{ background:var(--teal); }
.snap-arrow[disabled]{ opacity:0; pointer-events:none; }
.snap-arrow--prev{ left:calc(var(--strip-pad) - 18px); }
.snap-arrow--next{ right:calc(var(--strip-pad) - 18px); }
@media (hover:hover) and (pointer:fine){ .snap-arrow{ display:inline-flex; } }

/* ---------- gallery grid ---------- */
.gallery-city{ padding:44px 0 8px; }
.gallery-city h2{ font-size:clamp(1.7rem,4vw,34px); }
.gallery-city .country{ color:var(--muted); font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-top:.3em; }
.gallery-grid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-top:18px; }
@media(min-width:760px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
.gallery-item{
  position:relative; overflow:hidden; cursor:zoom-in; aspect-ratio:4/3;
  background:var(--rule); border:0; padding:0; display:block;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item .gcap{
  position:absolute; left:0; right:0; bottom:0; padding:22px 12px 8px; text-align:left;
  font:400 12px var(--sans); color:#fff;
  background:linear-gradient(transparent, rgba(21,19,15,.85));
  opacity:0; transition:opacity .18s ease;
}
@media (hover:hover) and (pointer:fine){ .gallery-item:hover .gcap{ opacity:1; } }
@media (hover:none){ .gallery-item .gcap{ opacity:1; } }
.gallery-item:focus-visible{ outline:2px solid var(--terra); outline-offset:2px; }

.more-photos{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:34px; padding:24px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  text-decoration:none; color:inherit;
}
.more-photos .mp-label{ display:block; font-family:var(--serif); font-size:30px; line-height:1.1; }
.more-photos .mp-sub{ display:block; color:var(--muted); font-size:14px; margin-top:.3em; }
.more-photos .mp-arrow{ flex:none; font-size:26px; color:var(--terra); }
.more-photos:hover .mp-label{ color:var(--terra); }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; flex-direction:column;
  background:rgba(21,19,15,.95); padding:20px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(1200px,94vw); max-height:78vh; }
.lb-cap{ color:var(--paper); font:400 14px var(--sans); margin-top:14px; text-align:center; }
.lb-count{ color:var(--muted); font-size:12px; margin-top:4px; letter-spacing:.06em; }
.lb-btn{
  position:absolute; border:1px solid rgba(243,239,230,.5); cursor:pointer;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--paper); font-size:1.1rem; transition:background .15s;
}
.lb-btn:hover{ background:var(--teal); border-color:var(--teal); }
.lb-close{ top:18px; right:18px; }
.lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lb-next{ right:16px; top:50%; transform:translateY(-50%); }

/* ---------- footer ---------- */
footer{ background:var(--forest); color:var(--pale); }
.foot{
  max-width:var(--maxw); margin:0 auto; padding:28px var(--pad) 36px;
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:13px;
}
.foot a{ color:var(--paper); text-decoration:none; }
.foot a:hover{ color:var(--apricot); }
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- page head (subpages) ---------- */
.page-head{
  max-width:var(--maxw); margin:0 auto; padding:72px var(--pad) 56px;
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:center;
}
.page-head h1{ margin:0; font-size:clamp(2.1rem,4.6vw,56px); line-height:1.05; text-wrap:balance; }
.page-head p{ margin:0; font-size:17px; color:var(--body); text-wrap:pretty; }

/* ---------- responsive ---------- */
@media(max-width:900px){
  :root{ --pad:20px; }
  .hero, .cta-inner, .page-head{ grid-template-columns:1fr; gap:24px; align-items:start; }
  .ruled, .sand-inner{ grid-template-columns:1fr; gap:14px; }
  .forest-inner{ grid-template-columns:1fr 1fr; gap:16px; }
  .forest-aside{ grid-column:1 / -1; padding-bottom:0; }
  .steps{ grid-template-columns:1fr; gap:26px; }
  .lrow{ grid-template-columns:1fr; gap:10px; }
  .lrow h3{ font-size:28px; }
  .faq{ grid-template-columns:1fr; }
  .jrow{ grid-template-columns:80px 1fr; gap:8px 16px; }
  .jrow .jwhat{ grid-column:1 / -1; }
  .prow{ grid-template-columns:1fr auto; gap:6px 16px; }
  .prow .pdesc{ grid-column:1 / -1; }
  .nav-links{ display:none; }
}

/* ---------- entrance ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(14px); }
  .reveal.in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
  .route-mask{ stroke-dashoffset:1; transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1) .25s; }
  .mapwrap.in .route-mask{ stroke-dashoffset:0; }
}

/* =========================================================
   PHOTO FRAMING
   A hairline mat set off from the image, like a print mount.
   Uses outline (not border) so it never affects layout, and
   outline-offset for the gap. Sized to sit inside each gap.
   ========================================================= */
.shot-43, .shot-34{ outline:1px solid rgba(183,201,191,.45); outline-offset:8px; }
.forest figure:hover .shot-43, .forest figure:hover .shot-34{ outline-color:var(--pale); }

.md-photo{ outline:1px solid var(--rule); outline-offset:6px; transition:outline-color .18s ease; }
.md-photo:hover{ outline-color:var(--teal); }
.md-photo:focus-visible{ outline:2px solid var(--terra); outline-offset:6px; }

.snap{
  outline:1px solid var(--rule); outline-offset:4px;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), outline-color .18s ease;
}
.snap:hover{ transform:scale(1.07); z-index:3; outline-color:var(--teal); }
.snap:focus-visible{ outline:2px solid var(--terra); outline-offset:4px; }
.snaps.dragging .snap:hover{ transform:none; }   /* don't fight a drag */
@media (prefers-reduced-motion:reduce){
  .snap:hover{ transform:none; }
  .pin.active .halo{ animation:none; }
  .plane{ display:none; }
}

.gallery-item{ outline:1px solid var(--rule); outline-offset:4px; transition:outline-color .18s ease; }
.gallery-item:hover{ outline-color:var(--teal); }
/* keyboard focus must still win over the decorative mat */
.gallery-item:focus-visible{ outline:2px solid var(--terra); outline-offset:4px; }

.lightbox img{ outline:1px solid rgba(243,239,230,.35); outline-offset:10px; }
.lb-btn:focus-visible{ outline:2px solid var(--apricot); outline-offset:3px; }


/* =========================================================
   SUBPAGE COMPONENTS
   gallery / extended / lessons / book still use the earlier
   markup; these give those classes the v2 look (flat, hairline
   rules, no radius) rather than rewriting four pages of HTML.
   ========================================================= */
.eyebrow{ font-size:13px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--terra); }
.btn--big{ padding:16px 28px; font-size:16px; }
.arrow{ display:inline-block; transition:transform .18s ease; }
.btn:hover .arrow, .go:hover .arrow{ transform:translateX(3px); }

/* closing call to action */
.cta-final{ background:var(--terra); color:var(--paper); padding:56px var(--pad); }
.cta-final h2{ margin:0 0 12px; font-size:clamp(1.8rem,3.6vw,42px); line-height:1.1; text-wrap:balance; }
.cta-final h2 em{ font-weight:300; }
.cta-final p{ margin:0 0 22px; color:var(--terra-pale); max-width:52ch; }
.cta-final .btn{ background:var(--ink); }
.cta-final .btn:hover{ background:var(--forest); }
.cta-final .reassure{ margin:16px 0 0; font-size:13px; color:var(--terra-pale); }

/* lessons */
.lesson-detail{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) 56px; }
.lesson-grid{
  border-top:1px solid var(--ink); padding-top:16px; display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:start;
}
.lesson-detail h2{ margin:.12em 0 .45em; font-size:clamp(1.8rem,4vw,36px); line-height:1.1; }
.lead{ font-size:17px; color:var(--body); text-wrap:pretty; margin:0 0 16px; }
.lesson-detail ul{ margin:0; padding:0; list-style:none; }
.lesson-detail li{ padding:11px 0; border-bottom:1px solid var(--rule); color:var(--body); font-size:15px; }
.price-card{ border:1px solid var(--ink); padding:24px; }
.price-card.dark{ background:var(--forest); color:var(--paper); border-color:var(--forest); }
.plabel{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.price-card.dark .plabel{ color:var(--pale); }
.price{ font-family:var(--serif); font-size:40px; line-height:1; margin:.14em 0; color:var(--terra); }
.price-card.dark .price{ color:var(--apricot); }
.per{ font-size:14px; color:var(--muted); }
.eur{ font-family:var(--sans); font-size:16px; color:var(--muted); white-space:nowrap; }
.price-card.dark .eur{ color:var(--pale); }
.price-card.dark .per{ color:var(--pale); }
.price-card .pnote{ color:var(--muted); }
.price-card.dark .pnote{ color:var(--pale); }
.price-card .btn{ margin-top:18px; width:100%; text-align:center; }

/* booking */
.book-grid{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) 72px;
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:start;
}
/* the flex container is the <form>, not its wrapper, or the fields stay inline */
.form-card form{ display:flex; flex-direction:column; }
.form-card label{ display:block; margin:22px 0 6px; font-size:13px; color:var(--muted); }
.form-card label:first-child{ margin-top:0; }
.form-card label span{ color:var(--muted); font-weight:400; }
.form-card input, .form-card select, .form-card textarea{
  border:0; border-bottom:1px solid var(--ink); background:transparent; padding:9px 0;
  font:18px var(--sans); color:var(--ink); outline:none;
}
.form-card textarea{ resize:vertical; min-height:100px; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{ border-bottom-color:var(--terra); }
.form-card .btn{ align-self:flex-start; margin-top:30px; }
.form-hint{ margin:12px 0 0; font-size:13px; color:var(--muted); max-width:46ch; }
.contact-alt{ display:flex; flex-direction:column; }
.alt-card{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start;
  padding:16px 0; border-top:1px solid var(--rule); text-decoration:none; color:inherit;
}
.alt-card:last-child{ border-bottom:1px solid var(--rule); }
.alt-card .ic{ color:var(--terra); line-height:0; padding-top:2px; }
.alt-card .ic svg{ width:22px; height:22px; }
.alt-card .t{ font-weight:700; }
.alt-card .d{ font-size:14px; color:var(--body); }
a.alt-card:hover .t{ color:var(--terra); }

@media(max-width:900px){
  .lesson-grid, .book-grid{ grid-template-columns:1fr; gap:26px; }
}