/* ============================================================================
   Viviane Dias — V5 · Destinations
   The V2 map, living inside the V5 shell. Loaded AFTER site.css; it adds only
   what this page needs and never redefines a shell class.

   Three things had to be built here because the V5 shell does not have them:
     1. a --bw opt-out token, so one photograph (the Cappadocia balloon) can
        stay in colour while the rest of the site is black and white;
     2. the map itself — frame, world, clusters, inset, travel lights, the
        golden-hour to blue-hour rail;
     3. the chapters and the full-bleed place overlay.
   ========================================================================== */

/* ---------- 0. the colour opt-out ---------------------------------------
   The shell filters every <img> when the palette is black and white. A few
   photographs only mean anything in colour — a balloon over Göreme is the
   obvious one — so they carry .always-color and keep their own. The token is
   also read by the overlay, which composes grayscale with its own blur. */
:root{ --bw:1 }
html[data-palette="color"]{ --bw:0 }
.always-color{ --bw:0 }
html[data-palette] img.always-color,
html[data-palette] .always-color img{ filter:none !important }

/* a page is never a flat colour: the chapters ride on a paper grain at .04 */
.chapters{ position:relative }
.chapters::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background:url("../textures/paper-grain-2048.png?v=v5-1") center / 620px repeat;
}
.chapters > .wrap{ position:relative; z-index:1 }

/* ---------- 1. the map frame -------------------------------------------- */
.mapsec{ position:relative; padding:0 0 var(--gap) }
.map-frame{
  position:relative; background:var(--paper-2);
  border:1px solid var(--line); overflow:hidden;
  /* the sky — golden by default; destinations.js lerps the two vars to blue hour */
  background:linear-gradient(180deg, var(--sky1,#F9F3E6) 0%, var(--sky2,#F2E2C6) 100%);
}
/* topographic lines, so the sky is never a plain wash */
.map-frame::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background:url("../textures/topo-lines-2400.png?v=v5-1") center / 560px 560px repeat;
}
/* At night the map stays a print on a dark wall: inside the frame the light
   tokens are re-pinned, so every label keeps its measured contrast against the
   four sky states instead of turning pale-on-pale. */
html[data-theme="dark"] .map-frame{
  --paper:#FAF8F5; --paper-2:#F5F2ED; --mat:#FFFFFF;
  --ink:#1A1A1A; --ink-2:#484541; --ink-3:#6A645C;
  --line:#E2DCD2; --accent:#2E4547;
}
html[data-theme="dark"] .map-frame{ border-color:#3A362F }

.map-stage{ position:relative }
.map-frame svg.world{ position:relative; z-index:1; display:block; width:100%; height:auto }
.world .land{ fill:none; stroke:var(--ink); stroke-width:.75; stroke-linejoin:round; opacity:.55 }
/* the graticule is drawn in user units, so without this it fattens as you zoom */
.world .grat line{ vector-effect:non-scaling-stroke }
.world .grat{ stroke:var(--ink); stroke-width:.4; opacity:.10 }
.world .grat--fine{ opacity:0; transition:opacity .45s var(--ease); pointer-events:none }
.world .grat--fine line{ stroke:var(--ink); stroke-width:.35; vector-effect:non-scaling-stroke; opacity:.055 }
.map-frame svg.world{ cursor:grab; touch-action:pan-y }
.map-frame svg.world.is-dragging{ cursor:grabbing }
.map-frame svg.world:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px }

/* ---------- the zoom control ------------------------------------------- */
.mapzoom{
  position:absolute; z-index:5; top:clamp(.7rem,1.8vw,1.2rem); left:clamp(.7rem,1.8vw,1.2rem);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(255,252,246,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.mapzoom button{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--ink-2); cursor:pointer;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.mapzoom button + button{ border-top:1px solid var(--line) }
.mapzoom button:hover{ color:var(--ink); background:rgba(255,255,255,.75) }
.mapzoom button:disabled{ color:var(--ink-3); opacity:.4; cursor:default }
.mapzoom button:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px }
@media (max-width:719px){
  .mapzoom button{ width:44px; height:44px }
}

/* ---------- 2. session clusters (layer 1) -------------------------------- */
.cluster{ cursor:pointer }
.cluster .halo{
  fill:var(--accent); opacity:.16;
  transform-box:fill-box; transform-origin:center; animation:vd-pulse 3s ease-in-out infinite;
}
.cluster .dot{ fill:var(--accent); stroke:#FFFFFF; stroke-width:1.2; vector-effect:non-scaling-stroke }
.cluster .hit{ fill:transparent }
.cluster .clabel{
  font-family:var(--sans); letter-spacing:.16em; text-transform:uppercase; fill:var(--ink-2);
  paint-order:stroke; stroke:rgba(255,253,246,.72); stroke-width:2.4px; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.cluster:hover .clabel, .cluster:focus-visible .clabel{ fill:var(--ink) }
.cluster:hover .halo{ opacity:.3 }
.cluster:focus-visible{ outline:none }
.cluster:focus-visible .dot{ stroke:var(--ink); stroke-width:2; vector-effect:non-scaling-stroke }
@keyframes vd-pulse{ 0%,100%{ transform:scale(1); opacity:.16 } 50%{ transform:scale(1.15); opacity:.28 } }

/* ---------- 3. travel lights (layer 2 — "with my camera") ---------------- */
/* Dot colours measured for WCAG 1.4.11 (>=3:1 non-text) on every sky state:
   unlit #57534C @ .8 -> 4.2-5.6:1; lit #B26A1E -> 3.3-3.8:1 against all four
   sky ends. */
.wpin{ cursor:pointer }
.wpin .wdot{ fill:#57534C; opacity:.8; stroke:#FFFFFF; stroke-width:.8; vector-effect:non-scaling-stroke }
.wpin .wlit{
  fill:#B26A1E; stroke:#FFF6E6; stroke-width:.8; vector-effect:non-scaling-stroke;
  opacity:var(--on,0); transition:opacity .35s var(--ease);
}
.wpin .wglow{ opacity:calc(var(--on,0)*.85); transition:opacity .35s var(--ease) }
/* transparent, but painted — SVG only hit-tests what has a fill */
.wpin .whit{ fill:transparent }
.cluster .chit, .inset .pin .ihit{ fill:transparent }
.wpin .wlabel{
  font-family:var(--sans); letter-spacing:.13em; text-transform:uppercase;
  fill:var(--ink-2); opacity:0; transition:opacity .4s var(--ease); pointer-events:none;
  paint-order:stroke; stroke:rgba(255,253,246,.8); stroke-width:2.2px; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.wpin.is-labeled .wlabel{ opacity:1 }
.wpin .wlead{ stroke:var(--ink-3); stroke-width:1; opacity:0; transition:opacity .4s var(--ease) }
.wpin.is-labeled .wlead{ opacity:.55 }
.wpin:focus-visible{ outline:none }
.wpin:focus-visible .wdot{ opacity:1; stroke:var(--ink); stroke-width:1.6 }
.sessglow{ pointer-events:none }

/* the two legend chips actually filter */
.map-frame.v3-nopath .wpin{ display:none }
.map-frame.v3-nosess .cluster{ opacity:0 !important; pointer-events:none !important }
.map-frame.v3-nosess .inset{ opacity:0 !important; pointer-events:none !important }

/* ---------- 4. tooltip --------------------------------------------------- */
.wtip{
  position:absolute; z-index:6; transform:translate(-50%,-140%);
  font-family:var(--sans); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:#1A1A1A; background:rgba(255,253,248,.94); border:1px solid #D8D1C5;
  padding:.3rem .65rem; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .25s var(--ease);
  box-shadow:0 14px 28px -18px rgba(26,26,26,.45);
}
.wtip.is-on{ opacity:1 }

/* ---------- 5. the inset: Portugal · Centro ------------------------------ */
.inset{
  position:absolute; z-index:4; right:clamp(.7rem,1.8vw,1.5rem); top:clamp(.7rem,1.8vw,1.5rem);
  width:min(38%,300px);
  background:var(--mat); border:1px solid var(--line);
  padding:clamp(.7rem,1.4vw,1.1rem);
  box-shadow:0 26px 48px -32px rgba(26,26,26,.6);
  opacity:0; transform:translateY(-10px) scale(.96); pointer-events:none;
  transition:opacity .55s var(--ease) .25s, transform .55s var(--ease) .25s;
}
.inset.is-on{ opacity:1; transform:none; pointer-events:auto }
.inset h3{
  font-family:var(--sans); font-size:.6875rem; font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .55rem;
}
.inset svg{ display:block; width:100%; height:auto; color:var(--ink) }
.inset .coast{ fill:none; stroke:var(--ink); stroke-width:1.4; opacity:.6 }
.inset .landfill{ fill:var(--ink); opacity:.045 }
.inset .pin{ cursor:pointer; color:var(--ink) }
.inset .pin .dot{ fill:var(--mat); stroke:var(--ink); stroke-width:1.1; transition:fill .3s var(--ease), stroke .3s var(--ease) }
.inset .pin .hit{ fill:transparent }
.inset .pin:focus-visible .ihit{ outline:2px solid var(--accent); outline-offset:2px }
.inset .pin text{ font-family:var(--sans); font-size:8px; letter-spacing:.06em; fill:var(--ink-2); transition:fill .3s var(--ease) }
.inset .pin:hover .dot, .inset .pin:focus-visible .dot{ fill:var(--accent); stroke:var(--accent) }
.inset .pin:hover text, .inset .pin:focus-visible text{ fill:var(--ink) }

/* ---------- 6. the light rail (golden hour -> blue hour) ----------------- */
.lightbar{
  position:absolute; z-index:5;
  left:clamp(.7rem,1.8vw,1.5rem); bottom:clamp(.7rem,1.8vw,1.2rem);
  display:flex; align-items:center; gap:.7rem; padding:.5rem .95rem;
  background:rgba(255,252,246,.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:999px;
}
.lightbar__lab{
  font-family:var(--sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
}
.lightbar input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:clamp(110px,14vw,210px); height:18px; background:transparent; cursor:pointer; margin:0;
}
.lightbar input[type="range"]::-webkit-slider-runnable-track{
  height:2px; border-radius:2px; background:linear-gradient(90deg,#B07A2A,#5C6E9E);
}
.lightbar input[type="range"]::-moz-range-track{
  height:2px; border-radius:2px; background:linear-gradient(90deg,#B07A2A,#5C6E9E);
}
.lightbar input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%; margin-top:-7px;
  background:var(--thumbc,#E2A64F); border:2px solid #FFFFFF;
  box-shadow:0 0 0 1px #6F685E, 0 0 10px rgba(226,166,79,.55);
}
.lightbar input[type="range"]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background:var(--thumbc,#E2A64F); border:2px solid #FFFFFF;
  box-shadow:0 0 0 1px #6F685E, 0 0 10px rgba(226,166,79,.55);
}
.lightbar input[type="range"]:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:999px }

/* ---------- 7. the bar under the map ------------------------------------ */
.map-bar{
  position:relative; z-index:3;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; padding:.9rem clamp(.9rem,2vw,1.5rem);
  border-top:1px solid var(--line); background:rgba(255,255,255,.66);
}
.map-legend{ font-family:var(--sans); font-size:var(--t-micro); letter-spacing:.06em; color:var(--ink-3); margin:0 }
.map-back{ opacity:0; pointer-events:none; transition:opacity .45s var(--ease) }
.mapsec.is-zoomed .map-back{ opacity:1; pointer-events:auto }

.layerchips{ display:flex; align-items:center; gap:.5rem }
.lchip{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--sans); font-size:.6875rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:.4rem .85rem; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.lchip[aria-pressed="true"]{ color:var(--ink); border-color:var(--ink-2); background:rgba(255,255,255,.8) }
.lchip:hover{ color:var(--ink) }
.lchip__dot{ width:9px; height:9px; border-radius:50%; flex:none; transition:opacity .3s var(--ease) }
.lchip__dot--sess{ background:var(--accent) }
.lchip__dot--path{ background:radial-gradient(circle at 35% 35%, #F2B565, #C07C2A) }
.lchip[aria-pressed="false"] .lchip__dot{ opacity:.3 }

.maphint{
  position:relative; z-index:3; margin:.9rem 0 0;
  font-size:var(--t-micro); letter-spacing:.04em; color:var(--ink-3);
}

/* mobile: the travel names become a quiet chip row under the map */
.wchips{ display:none }

/* ---------- 8. the chapters --------------------------------------------- */
/* The section had no top padding, so this heading landed 1px under the map
   panel's own border and read as if it belonged to that card. */
.chapters{ padding:var(--gap-l) 0 }
.chapters__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,2.8vw,2.4rem); margin-top:var(--gap-s);
}
.chapter{
  display:block; text-align:left; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit;
}
/* the shell's .plate is used here on <span>s inside a <button>, so both halves
   have to be told they are blocks before aspect-ratio means anything */
.chapter .plate{ display:block; transition:transform .6s var(--ease), box-shadow .6s var(--ease) }
.chapter .plate__inner{ display:block; aspect-ratio:4/5 }
.chapter .plate img{
  width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  transition:transform .9s var(--ease);
}
.chapter:hover .plate{ transform:translateY(-5px); box-shadow:0 1px 0 rgba(26,26,26,.06), 0 40px 60px -40px rgba(26,26,26,.6) }
.chapter:hover .plate img{ transform:scale(1.035) }
.chapter__label{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:.9rem; padding-bottom:.55rem; border-bottom:1px solid var(--line);
}
.chapter__title{
  font-family:var(--serif); font-weight:400; line-height:1.06;
  font-size:clamp(1.25rem,1.9vw,1.6rem); color:var(--ink);
}
.chapter__where{
  font-family:var(--sans); font-size:var(--t-micro); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.chapter__promise{
  display:block; margin-top:.7rem; max-width:32ch;
  font-size:var(--t-body); line-height:1.5; color:var(--ink-2);
}
.chapter:focus-visible{ outline:2px solid var(--accent); outline-offset:6px }

/* ---------- 9. the place opens ------------------------------------------ */
.place-overlay{ position:fixed; inset:0; z-index:130; display:none; background:#0b0b0a }
.place-overlay.is-open{ display:block }
html[data-palette] .place-overlay__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:var(--focal,50% 42%);
  filter:grayscale(var(--bw)) contrast(calc(1 + .04 * var(--bw))) blur(8px);
  transform:scale(1.06);
  transition:filter .9s var(--ease), transform .9s var(--ease), opacity .35s var(--ease);
}
html[data-palette] .place-overlay.is-shown .place-overlay__img{
  filter:grayscale(var(--bw)) contrast(calc(1 + .04 * var(--bw))) blur(0); transform:scale(1);
}
/* Four scrims, and a reason for each: a bottom band under the writing, a top
   band under the close button, a pool under the name, and a vignette that
   stops the corners from competing. Measured on the composed page, not by eye. */
.place-overlay__shade{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.64) 22%, rgba(0,0,0,.34) 46%, rgba(0,0,0,.06) 70%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.44) 0%, rgba(0,0,0,.22) 12%, rgba(0,0,0,0) 28%),
    radial-gradient(120% 88% at 22% 88%, rgba(0,0,0,.50) 0%, rgba(0,0,0,.22) 46%, rgba(0,0,0,0) 78%),
    radial-gradient(150% 130% at 50% 50%, rgba(0,0,0,0) 44%, rgba(0,0,0,.36) 100%);
}
.place-overlay__chapter{
  position:absolute; z-index:4; left:var(--pad); bottom:clamp(2.4rem,7vh,4.4rem);
  max-width:min(30ch,74%);
}
.place-overlay__chapter h2{
  color:#FFFFFF; font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,5.2vw,4rem); line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.94), 0 2px 18px rgba(0,0,0,.86), 0 8px 56px rgba(0,0,0,.72);
}
.place-overlay__hair{ display:block; width:58px; height:1px; background:rgba(255,255,255,.85); margin:1.1rem 0 .85rem }
.place-overlay__promise{
  display:block; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.15rem,2.1vw,1.6rem); line-height:1.32; color:#FFFFFF;
  text-shadow:0 1px 3px rgba(0,0,0,.94), 0 2px 16px rgba(0,0,0,.86), 0 6px 44px rgba(0,0,0,.7);
  margin:0 0 .95rem;
}
.place-overlay__desc{
  display:block; font-family:var(--sans); font-size:.6875rem;
  letter-spacing:.3em; text-transform:uppercase; color:#FFFFFF;
  text-shadow:0 1px 3px rgba(0,0,0,.96), 0 2px 14px rgba(0,0,0,.88);
}
.place-overlay__pager{
  position:absolute; z-index:5; right:var(--pad); bottom:clamp(2.4rem,7vh,4.4rem);
  display:flex; align-items:center; gap:1.1rem;
}
.place-overlay__pager[hidden]{ display:none }
.place-overlay__pager button{
  background:rgba(10,10,10,.62); border:1px solid rgba(255,255,255,.5); border-radius:999px;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.place-overlay__pager button:hover{ background:rgba(24,24,24,.72); border-color:#fff }
.place-overlay__count{
  font-family:var(--sans); font-size:.6875rem; letter-spacing:.24em; color:#FFFFFF;
  background:rgba(10,10,10,.62); border:1px solid rgba(255,255,255,.4);
  border-radius:999px; padding:.42rem .85rem .38rem;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.place-overlay__close{
  position:absolute; z-index:6; top:clamp(1rem,3vh,1.9rem); right:clamp(1rem,3vw,1.9rem);
  width:44px; height:44px; border-radius:999px;
  background:rgba(10,10,10,.62); border:1px solid rgba(255,255,255,.5);
  color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.place-overlay__close:hover{ background:rgba(24,24,24,.72); border-color:#fff }
.place-overlay__hit{ position:absolute; inset:0; z-index:1 }

/* ---------- 9b. a travel frame is shown whole ----------------------------
   These are story frames — 750px on the long side at best, and no larger
   version of them exists. Filling a desktop screen with one would enlarge it
   past its own resolution, so it is contained inside the dark ground with the
   writing in the band below it. It also tells the two layers apart at a
   glance: a session fills the screen, a stop with my own camera does not. */
html[data-palette] .place-overlay.is-travel .place-overlay__img{
  /* scale-down, not contain: a 750px story frame is shown at its own size or
     smaller, never enlarged past the resolution that exists. */
  object-fit:scale-down;
  padding:clamp(3rem,7vh,5rem) var(--pad) clamp(11rem,27vh,15rem);
}
.place-overlay.is-travel .place-overlay__shade{
  background:
    linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.86) 18%, rgba(0,0,0,.45) 30%, rgba(0,0,0,0) 42%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 14%);
}
.place-overlay.is-travel .place-overlay__chapter{ max-width:min(40ch,80%) }
.place-overlay.is-travel .place-overlay__chapter h2{ font-size:clamp(1.7rem,3.6vw,2.6rem) }
.place-overlay.is-travel .place-overlay__promise{ font-size:clamp(1rem,1.7vw,1.3rem) }

/* ---------- 10. smaller screens ----------------------------------------- */
@media (max-width:1024px){
  .chapters__grid{ grid-template-columns:repeat(2,1fr) }
  .inset{ width:min(46%,260px) }
}
@media (max-width:860px){
  .chapters__grid{ grid-template-columns:1fr }
}
@media (max-width:719px){
  /* the inset becomes a block under the map, and the rail stops floating */
  .inset{
    position:static; width:auto; margin:.9rem clamp(.7rem,2vw,1.2rem) 0;
    opacity:1; transform:none; pointer-events:auto; display:none;
  }
  .inset.is-on{ display:block }
  .lightbar{
    position:static; width:auto; border:0; border-top:1px solid var(--line);
    border-radius:0; background:rgba(255,255,255,.5); justify-content:center;
  }
  .lightbar input[type="range"]{ flex:1; max-width:none; width:auto }
  .wchips.is-on{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem;
    padding:.7rem clamp(.9rem,3vw,1.5rem);
    border-top:1px solid var(--line); background:rgba(255,255,255,.6);
  }
  .wchips__t{
    font-family:var(--sans); font-size:.6875rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-3);
  }
  .wchip{ font-family:var(--sans); font-size:.6875rem; letter-spacing:.08em; color:var(--ink-2) }
  /* the svg labels stay hidden here — the chip row carries the names */
  .wpin .wlabel, .wpin .wlead{ display:none }
  /* tighter tracking so three country names fit on a phone-width map */
  .cluster .clabel{ letter-spacing:.06em }
  .map-bar{ justify-content:flex-start }
}
@media (max-width:520px){
  .place-overlay__pager{ bottom:auto; top:clamp(1rem,3vh,1.9rem); right:auto; left:var(--pad) }
  .place-overlay__chapter{ max-width:88% }
}

@media (prefers-reduced-motion:reduce){
  .wpin .wlit, .wpin .wglow, .wpin .wlabel, .wpin .wlead, .wtip, .lchip{ transition:none }
  .cluster .halo{ animation:none }
  html[data-palette] .place-overlay__img{
    filter:grayscale(var(--bw)) contrast(calc(1 + .04 * var(--bw))); transform:none;
  }
  .chapter .plate, .chapter .plate img{ transition:none }
}

/* ============================================================================
   11. THE CROSSING — the one thing this map can say that no other map can.
   Viviane's year happens on two sides of the Atlantic. The sun rail is not a
   toy: as it moves, the hairline between Portugal and Ontario carries the light
   across the ocean, and the line underneath says what the same hour is doing on
   each side. Never a session claim — a session pin is a filled dot on land, and
   this is a crossing.
   ========================================================================== */
.crossing{
  fill:none; stroke:var(--ink-3); stroke-width:1; vector-effect:non-scaling-stroke;
  stroke-dasharray:5 6; opacity:.3; pointer-events:none;
  transition:opacity .6s var(--ease);
}
.crossing-lit{
  fill:none; stroke:#B26A1E; stroke-width:1.7; vector-effect:non-scaling-stroke;
  stroke-linecap:round; pointer-events:none;
  opacity:calc(var(--cross,0) * .9);
  transition:opacity .5s var(--ease);
}
.mapsec.is-zoomed .crossing,
.mapsec.is-zoomed .crossing-lit{ opacity:0 }
.map-frame.v3-nosess .crossing,
.map-frame.v3-nosess .crossing-lit{ opacity:0 }

.twohomes{
  position:relative; z-index:3;
  padding:.95rem clamp(.9rem,2vw,1.5rem) .85rem;
  border-top:1px solid var(--line); background:rgba(255,255,255,.5);
}
.twohomes__line{
  margin:0 0 .28rem; max-width:58ch;
  font-family:var(--serif); font-size:clamp(1.05rem,1.7vw,1.35rem);
  line-height:1.36; color:var(--ink);
}
.twohomes__note{
  margin:0; font-family:var(--sans); font-size:var(--t-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- 12. her own words, under the place -------------------------- */
.chapter__quote{
  display:block; margin-top:.85rem; padding-top:.8rem;
  border-top:1px solid var(--line); max-width:34ch;
}
.chapter__quote[hidden]{ display:none }
.chapter__quote q{
  display:block; quotes:'“' '”' '‘' '’';
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:1.0625rem; line-height:1.42; color:var(--ink);
}
.chapter__quote .gloss{
  display:block; margin-top:.4rem;
  font-size:var(--t-micro); line-height:1.5; color:var(--ink-3);
}
.chapter__quote .when{
  display:block; margin-top:.45rem;
  font-family:var(--sans); font-size:.6875rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}

@media (max-width:719px){
  .twohomes__line{ font-size:1.05rem }
}
@media (prefers-reduced-motion:reduce){
  .crossing, .crossing-lit{ transition:none }
}

/* ============================================================================
   13. WHAT A PLACE CAN HOLD — her own words, at the size they deserve.
   ========================================================================== */
.thesis{ position:relative; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.thesis::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background:url("../textures/light-wash-2400x1600.png?v=v5-1") center / cover no-repeat;
}
.thesis > .wrap{ position:relative; z-index:1 }
.thesis__block{ margin:0; max-width:46rem }
.thesis__block blockquote{ margin:0; position:relative }
.thesis__block blockquote::before{
  content:"\201C"; position:absolute; left:-.62em; top:-.06em;
  font-family:var(--serif); font-size:3.4em; line-height:1; color:var(--ink-3); opacity:.28;
}
.thesis__block blockquote p{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.35rem,2.8vw,2.05rem); line-height:1.34; color:var(--ink);
}
.thesis__block figcaption{
  margin-top:1.1rem; font-family:var(--sans); font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.thesis__after{ margin-top:var(--gap-s); max-width:38rem }
@media (max-width:719px){
  /* the big quote mark needs room of its own before it touches the edge */
  .thesis__block{ padding-left:.85em }
  .thesis__block blockquote::before{ left:-.72em; font-size:2.6em }
}

/* an empty gloss must not leave a gap */
.chapter__quote .gloss:empty{ display:none }