*, *::before, *::after { box-sizing: border-box; }
:root { --shell:#16181A; --shell-2:#1E2124; --shell-line:#2C3033;
        --shell-ink:#E8E6E1; --shell-dim:#8B9298; --shell-live:#9FB2AE; }
.frame { width:1440px; max-width:100%; box-shadow:0 22px 70px rgba(0,0,0,.45); overflow:clip; background:var(--ground); }
.frame.phone { width:390px; }
/* palettes */
.frame { --ground:#FFFFFF; --ink:#1C2821; --accent:#2D6B50; --footer:#1C2821;
         --scrim:18,26,21; --line:rgba(28,40,33,.14); --line-soft:rgba(28,40,33,.09);
         --muted:rgba(28,40,33,.86); --faint:rgba(28,40,33,.64); --tint:rgba(28,40,33,.035); }
.frame[data-pal="cream"] { --ground:#F7F7F3; --line:rgba(28,40,33,.13); --line-soft:rgba(28,40,33,.08); }
.frame[data-pal="major"] { --ground:#FFFFFF; --ink:#16202A; --accent:#146AFF; --footer:#16202A;
                           --scrim:12,20,28; --line:rgba(22,32,42,.14); --line-soft:rgba(22,32,42,.09);
                           --muted:rgba(22,32,42,.86); --faint:rgba(22,32,42,.64); --tint:rgba(22,32,42,.035); }
.frame[data-pal="sand"] { --ground:#F8F6F0; --ink:#23201C; --accent:#B8683F; --footer:#23201C;
                           --scrim:28,22,16; --line:rgba(35,32,28,.14); --line-soft:rgba(35,32,28,.09);
                           --muted:rgba(35,32,28,.86); --faint:rgba(35,32,28,.64); --tint:rgba(35,32,28,.035); }
.frame[data-pal="ink"] { --ground:#1D2A33; --ink:#ECEFF1; --accent:#9BBF8F; --footer:#141E25;
                           --scrim:8,14,18; --line:rgba(236,239,241,.16); --line-soft:rgba(236,239,241,.10);
                           --muted:rgba(236,239,241,.88); --faint:rgba(236,239,241,.68); --tint:rgba(236,239,241,.05); }
/* type */
.frame { --display:'Newsreader',Georgia,serif; --body:'Hanken Grotesk',-apple-system,sans-serif; --dw:300; --dls:-.012em; }
.frame[data-type="caslon"] { --display:'Libre Caslon Display',Georgia,serif; --body:'Archivo',sans-serif; --dw:400; --dls:-.005em; }
.frame[data-type="spectral"] { --display:'Spectral',Georgia,serif; --body:'Public Sans',sans-serif; --dw:300; --dls:-.01em; }
.frame[data-type="current"] { --display:'Fraunces',Georgia,serif; --body:'Jost',sans-serif; --dw:300; --dls:-.015em; }
.mk { background:var(--ground); color:var(--ink); font-family:var(--body); }
.mk a { color:inherit; text-decoration:none; }
.serif { font-family:var(--display); font-weight:var(--dw); letter-spacing:var(--dls); }
.kick { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.pad { padding-left:64px; padding-right:64px; }
.phone .pad { padding-left:20px; padding-right:20px; }
.frame { --navh:68px; }
.nav { position:relative; z-index:3; display:flex; align-items:center;
       justify-content:space-between; padding:20px 64px; min-height:var(--navh); }
.phone .nav { padding:14px 20px; min-height:56px; }
.frame.phone { --navh:56px; }
.nav-links { display:flex; gap:34px; align-items:center; }
.phone .nav-links { display:none; }
.burger { display:none; width:44px; height:44px; align-items:center; justify-content:flex-end; }
.phone .burger { display:flex; }
.nav-links a { font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; }
.navdark .nav-links a { color:rgba(255,255,255,.92); }
.navlight { border-bottom:1px solid var(--line-soft); padding-top:18px; padding-bottom:18px; }
.navlight .nav-links a { color:var(--muted); }
/* hero carousel */
.hero { position:relative; height:700px; overflow:hidden; }
.phone .hero { height:540px; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.slide[data-on="1"] { opacity:1; }
.slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slide .veil { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--scrim),.5) 0%, rgba(var(--scrim),.1) 36%, rgba(var(--scrim),.78) 100%); }
.hero-copy { position:absolute; left:64px; bottom:96px; width:700px; }
.phone .hero-copy { left:20px; right:20px; bottom:62px; width:auto; }
.hero-h { font-size:58px; line-height:1.07; color:#fff; }
.phone .hero-h { font-size:32px; line-height:1.13; }
.cta { display:flex; align-items:center; gap:12px; margin-top:24px; min-height:44px; }
.cta span { font-size:13px; letter-spacing:.13em; text-transform:uppercase; color:#fff;
            border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:5px; }
.dots { position:absolute; z-index:3; left:64px; bottom:54px; display:flex; gap:8px; }
.phone .dots { left:20px; bottom:26px; }
.dots button { width:32px; height:3px; background:rgba(255,255,255,.34); padding:0; transition:background .25s; }
.dots button[aria-current="true"] { background:#fff; }
.sec { padding-top:88px; }
.phone .sec { padding-top:42px; }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:30px; }
.phone .sec-head { display:block; margin-bottom:18px; }
.sec-h { font-size:38px; }
.phone .sec-h { font-size:28px; }
.more { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
        border-bottom:1px solid var(--line); padding-bottom:4px; }
.tiles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.tiles.four { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.phone .tiles, .phone .tiles.four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tile { position:relative; display:block; aspect-ratio:3/4; overflow:hidden; }
.tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile .veil { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--scrim),0) 46%, rgba(var(--scrim),.78) 100%); }
.tile .lab { position:absolute; left:18px; right:18px; bottom:18px; }
.tile .nm { font-size:23px; color:#fff; }
.phone .tile .nm { font-size:18px; }
.tile .sub { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:4px; }
.tile.map-tile { background:var(--footer); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.phone .cards { grid-template-columns:1fr; gap:30px; }
.card-img { aspect-ratio:3/2; overflow:hidden; margin-bottom:16px; }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.card-h { font-size:24px; line-height:1.24; margin:9px 0 10px; }
.card-p { font-size:15px; line-height:1.66; color:var(--muted); font-weight:400; }
.legend { display:flex; gap:24px; margin:20px 0 12px; flex-wrap:wrap; }
.legend div { display:flex; align-items:center; gap:8px; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.map-wrap { position:relative; border-top:1px solid var(--line-soft); padding-top:16px; }
.map-wrap img { width:100%; display:block; }
.chip { font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; padding:8px 15px;
        border:1px solid var(--line); color:var(--muted); }
.chip.on { background:var(--ink); border-color:var(--ink); color:var(--ground); }
.measure { max-width:729px; margin:0 auto; }
/* two photos side by side, the site's img-pair, kept inside the reading measure */
.pair img { width:100%; height:100%; object-fit:cover; display:block; }
.phone .measure { max-width:none; padding:0 20px; }
.copy { font-size:17px; line-height:1.85; color:var(--muted); font-weight:400; margin:0 0 24px; }
.copy a { color:var(--accent); border-bottom:1px solid color-mix(in oklab, var(--accent) 35%, transparent); }
.foot { background:var(--footer); padding:48px 64px; display:flex; align-items:center;
        justify-content:space-between; margin-top:90px; }
.phone .foot { padding:32px 20px; display:block; margin-top:42px; }
.foot .w { font-size:20px; font-style:italic; color:#fff; }
.foot .lk { display:flex; gap:26px; }
.phone .foot .lk { margin-top:14px; gap:18px; }
.foot a { color:rgba(255,255,255,.6); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; }
[hidden] { display:none !important; }
.slide { transition:none; }
/* ---------- ARTICLE HERO OPTIONS ---------- */
.ah { display:none; }
.frame[data-ahero="banner"] .ah-banner, .frame[data-ahero="quiet"]  .ah-quiet, .frame[data-ahero="split"]  .ah-split { display:block; }
.ah-banner .band { position:relative; height:560px; overflow:hidden; }
.phone .ah-banner .band { height:420px; }
.ah-banner .band img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ah-banner .band .veil { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(var(--scrim),.42) 0%, rgba(var(--scrim),.08) 40%, rgba(var(--scrim),.8) 100%); }
.ah-banner .cpy { position:absolute; left:64px; right:64px; bottom:60px; }
.phone .ah-banner .cpy { left:20px; right:20px; bottom:34px; }
.ah-banner h1 { font-size:52px; line-height:1.1; color:#fff; margin:14px 0 0; font-weight:var(--dw); }
.phone .ah-banner h1 { font-size:30px; }
.ah-quiet .cpy { padding:72px 0 40px; text-align:center; }
.phone .ah-quiet .cpy { padding:32px 20px 24px; text-align:left; }
.ah-quiet h1 { font-size:52px; line-height:1.1; max-width:900px; margin:16px auto 0; font-weight:var(--dw); }
.phone .ah-quiet h1 { font-size:31px; }
.ah-quiet .lead { aspect-ratio:3/2; overflow:hidden; }
.ah-quiet .lead img { width:100%; height:100%; object-fit:cover; display:block; }
.ah-split { display:none; }
.frame[data-ahero="split"] .ah-split { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:520px; }
.frame.phone[data-ahero="split"] .ah-split { grid-template-columns:1fr; min-height:0; }
.frame.phone[data-ahero="split"] .ah-split > .pic { aspect-ratio:3/2; }
.frame.phone[data-ahero="split"] .ah-split .pic { min-height:0; }
.frame.phone .ah-split .txt { padding:30px 20px 26px; }
.frame.phone .ah-split h1 { font-size:30px; }
.ah-split .txt { padding:80px 56px; display:flex; flex-direction:column; justify-content:center; }
.ah-split h1 { font-size:46px; line-height:1.12; margin:16px 0 0; font-weight:var(--dw); }
.ah-split .pic { position:relative; overflow:hidden; min-height:420px; }
.ah-split .pic img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.artsub { font-size:18px; line-height:1.62; color:var(--muted); font-weight:400; max-width:620px; margin:20px auto 0; }
.ah-banner .artsub { color:rgba(255,255,255,.82); margin-left:0; }
.ah-split .artsub { margin-left:0; }
.phone .artsub { font-size:16px; margin-left:0; }
/* ---------- COMPONENT OPTIONS ---------- */
.comp { padding:56px 64px 0; }
.phone .comp { padding:32px 20px 0; }
.comp-h { font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint);
          padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.phone .opts, .phone .opts.two { grid-template-columns:minmax(0,1fr); gap:26px; }
.opt-l { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.opt-n { font-size:12.5px; line-height:1.55; color:var(--faint); font-weight:400; margin-top:12px; }
/* TOC variants */
.toc-a .r { display:flex; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-soft); align-items:baseline; }
.toc-a .n { font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; min-width:18px; }
.toc-a .t { font-size:15px; font-weight:400; }
.toc-b { border-left:2px solid var(--accent); padding-left:18px; }
.toc-b .r { padding:7px 0; font-size:15px; font-weight:400; }
.toc-c .r { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.toc-c .p { font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
/* header variants */
.h-a { font-size:29px; padding-bottom:11px; border-bottom:1px solid var(--line); }
.h-b .e { font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; }
.h-b .t { font-size:29px; }
.h-c { display:flex; gap:16px; align-items:baseline; }
.h-c .n { font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums; }
.h-c .t { font-size:29px; }
/* bullet variants */
.b-a ul { margin:0; padding-left:20px; }
.b-a li { font-size:16px; line-height:1.8; color:var(--muted); font-weight:400; margin-bottom:6px; }
.b-b .r { display:flex; gap:13px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.b-b .m { width:5px; height:5px; border-radius:50%; background:var(--accent); margin-top:9px; flex:none; }
.b-b .t { font-size:16px; line-height:1.72; color:var(--muted); font-weight:400; }
.b-c .r { padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:16px; line-height:1.72;
          color:var(--muted); font-weight:400; }
.b-c .r b { color:var(--ink); font-weight:500; }
/* table variants */
.tb { width:100%; border-collapse:collapse; font-size:14px; }
.tb th { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
         text-align:left; font-weight:500; padding:0 12px 9px 0; border-bottom:1px solid var(--line); }
.tb td { padding:11px 12px 11px 0; border-bottom:1px solid var(--line-soft); color:var(--muted);
         font-weight:400; font-variant-numeric:tabular-nums; }
.tb.banded td { border-bottom:0; }
.tb.banded tbody tr:nth-child(odd) { background:var(--tint); }
.tb.banded td, .tb.banded th { padding-left:12px; }
.tb .num { text-align:right; color:var(--ink); }
/* callout variants */
.co-a { border:1px solid var(--line); padding:20px 22px; }
.co-b { border-left:2px solid var(--accent); padding:4px 0 4px 20px; }
.co-c { background:var(--tint); padding:20px 22px; }
.co-t { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:9px; }
.co-x { font-size:15px; line-height:1.72; color:var(--muted); font-weight:400; }
/* ---------- live component variants: one shown, chosen from the toolbar ---------- */
.v { display:none; }
.frame[data-toc="a"]   .v-toc[data-v="a"], .frame[data-toc="b"]   .v-toc[data-v="b"], .frame[data-toc="c"]   .v-toc[data-v="c"], .frame[data-head="a"]  .v-head[data-v="a"], .frame[data-head="b"]  .v-head[data-v="b"], .frame[data-head="c"]  .v-head[data-v="c"], .frame[data-list="a"]  .v-list[data-v="a"], .frame[data-list="b"]  .v-list[data-v="b"], .frame[data-list="c"]  .v-list[data-v="c"], .frame[data-table="a"] .v-table[data-v="a"], .frame[data-table="b"] .v-table[data-v="b"], .frame[data-call="a"]  .v-call[data-v="a"], .frame[data-call="b"]  .v-call[data-v="b"], .frame[data-call="c"]  .v-call[data-v="c"], .frame[data-facts="a"] .v-facts[data-v="a"], .frame[data-facts="b"] .v-facts[data-v="b"], .frame[data-days="a"]  .v-days[data-v="a"], .frame[data-days="b"]  .v-days[data-v="b"] { display:block; }
/* key facts */
.f-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.phone .f-grid { grid-template-columns:1fr; }
.f-card { background:var(--ground); padding:18px 20px; }
.f-t { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
.f-b { font-size:15px; line-height:1.6; color:var(--muted); font-weight:400; }
.f-list .f-row { display:grid; grid-template-columns:190px minmax(0,1fr); gap:20px;
                 padding:13px 0; border-bottom:1px solid var(--line-soft); align-items:baseline; }
.phone .f-list .f-row { grid-template-columns:1fr; gap:4px; }
.f-list .f-t { margin-bottom:0; }
/* day-by-day */
.d-a .d-row { display:grid; grid-template-columns:96px minmax(0,1fr); gap:26px; align-items:baseline;
              padding:16px 0; border-bottom:1px solid var(--line-soft); }
.d-a .d-n { font-size:30px; color:var(--accent); font-style:italic; }
.d-a .d-t { font-size:20px; line-height:1.32; }
.d-b .d-row2 { padding:15px 0; border-bottom:1px solid var(--line-soft); }
.d-b .d-n2 { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.d-b .d-t2 { font-size:20px; line-height:1.32; }
.phone .d-a .d-row { grid-template-columns:64px minmax(0,1fr); gap:16px; }
.phone .d-a .d-n { font-size:24px; }
.phone .d-a .d-t, .phone .d-b .d-t2 { font-size:18px; }
/* about: portrait beside the copy, stacked once there is no room for both */
.about-grid { display:grid; grid-template-columns:360px minmax(0,1fr); gap:64px; align-items:start; }
.phone .about-grid { grid-template-columns:1fr; gap:26px; }
/* wide tables scroll inside their own box rather than pushing the page sideways */
.tb-wrap { overflow-x:auto; }
.phone .tb { min-width:480px; }
/* ================= CONTENTS, compact options ================= */
/* D, two columns: 13 sections in half the height, the shape the live page uses */
.toc-d { column-count:2; column-gap:44px; }
.phone .toc-d { column-count:1; }
.toc-d .r { display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--line-soft);
            align-items:baseline; break-inside:avoid; }
.toc-d .n { font-size:10.5px; color:var(--faint); font-variant-numeric:tabular-nums; min-width:16px; }
.toc-d .t { font-size:14px; font-weight:400; }
/* E, chips: the whole contents in three lines */
.toc-e { display:flex; flex-wrap:wrap; gap:7px; }
.toc-e .ch { display:inline-flex; align-items:baseline; gap:7px; padding:6px 12px;
             border:1px solid var(--line); font-size:13px; font-weight:400; color:var(--muted); }
.toc-e .ch:hover { border-color:var(--accent); color:var(--ink); }
.toc-e .n { font-size:9.5px; letter-spacing:.08em; color:var(--accent); font-variant-numeric:tabular-nums; }
/* F, folded: one line until you want it, then two columns */
.toc-f { border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.toc-f summary { display:flex; align-items:center; gap:12px; padding:14px 0; cursor:pointer; list-style:none; }
.toc-f summary::-webkit-details-marker { display:none; }
.toc-f .lb { font-size:12px; letter-spacing:.15em; text-transform:uppercase; }
.toc-f .ct { font-size:12px; color:var(--faint); font-weight:400; }
.toc-f .cv { margin-left:auto; width:9px; height:9px; border-right:1.2px solid var(--faint);
             border-bottom:1.2px solid var(--faint); transform:rotate(45deg) translate(-3px,-3px);
             transition:transform .18s; }
.toc-f[open] .cv { transform:rotate(225deg) translate(-2px,-2px); }
.toc-f .cols { column-count:2; column-gap:44px; padding:2px 0 16px; }
.phone .toc-f .cols { column-count:1; }
.toc-f .cols .r { display:flex; gap:12px; padding:6px 0; align-items:baseline; break-inside:avoid; }
.toc-f .cols .n { font-size:10.5px; color:var(--accent); font-variant-numeric:tabular-nums; min-width:16px; }
.toc-f .cols .t { font-size:14px; font-weight:400; color:var(--muted); }
.toc-f .cols .r:hover .t { color:var(--ink); }
/* ================= KEY FACTS, options with a focal point ================= */
.ic { display:block; }
.ig { color:var(--accent); display:block; }
/* C, icon cards: an anchor per fact so the eye has somewhere to land */
.f-icons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
           background:var(--line-soft); border:1px solid var(--line-soft); }
.phone .f-icons { grid-template-columns:repeat(2,minmax(0,1fr)); }
.f-ic { background:var(--ground); padding:20px 18px 22px; }
.f-ic .ig { margin-bottom:13px; }
.f-ic .f-t { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
             margin-bottom:7px; font-weight:500; }
.f-ic .f-b { font-size:13.5px; line-height:1.62; color:var(--muted); font-weight:400; }
/* D, headline numbers: the four figures people actually came for, set loud */
.f-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
           border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.phone .f-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.f-stat { padding:22px 20px 20px; border-left:1px solid var(--line-soft); }
.f-stat:first-child { border-left:0; }
.phone .f-stat:nth-child(3) { border-left:0; }
.f-stat .ig { margin-bottom:12px; }
.f-stat .f-v { font-size:30px; line-height:1.05; color:var(--ink); }
.phone .f-stat .f-v { font-size:23px; }
.f-stat .f-t { font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-top:9px; }
.f-rest { margin-top:2px; }
.f-rest .r { display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; padding:11px 0;
             border-bottom:1px solid var(--line-soft); align-items:baseline; }
.phone .f-rest .r { grid-template-columns:1fr; gap:3px; }
.f-rest .k { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.f-rest .s { font-size:14.5px; line-height:1.62; color:var(--muted); font-weight:400; }
/* E, panel: one tinted block, label left, figure right, nothing to scan past */
.f-panel { background:var(--tint); border-left:2px solid var(--accent); padding:8px 24px 12px; }
.phone .f-panel { padding:6px 18px 10px; }
.f-ph { font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
        padding:14px 0 10px; }
.f-prow { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:14px; align-items:center;
          padding:11px 0; border-top:1px solid var(--line-soft); }
.f-prow .f-t { font-size:14.5px; color:var(--muted); font-weight:400; }
.f-prow .f-v { font-size:17px; color:var(--ink); text-align:right; }
/* ================= BUDGET, options that are worth stopping on ================= */
.tb .sub { font-size:12.5px; color:var(--faint); }
/* C, two priced cards, the shape the live article already uses */
.b-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.phone .b-cards { grid-template-columns:1fr; }
.bc { border:1px solid var(--line); padding:24px 24px 10px; }
.bc.two { background:var(--tint); border-color:transparent; }
.bc-h { font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); }
.bc-tot { font-size:38px; line-height:1.05; color:var(--ink); margin-top:12px; }
.phone .bc-tot { font-size:32px; }
.bc-per { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:5px; }
.bc-li { margin-top:20px; border-top:1px solid var(--line-soft); }
.bc .li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 14px; padding:12px 0;
          border-bottom:1px solid var(--line-soft); align-items:baseline; }
.bc .li:last-child { border-bottom:0; }
.bc .c { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
         grid-column:1; grid-row:1; }
.bc .n { font-size:13.5px; color:var(--muted); font-weight:400; grid-column:1; grid-row:2; }
.bc .p { font-size:19px; color:var(--ink); grid-column:2; grid-row:1 / span 2; align-self:center;
         font-variant-numeric:tabular-nums; }
/* D, one ledger, prices carrying the accent, a weighted total */
.b-led { border-top:1px solid var(--ink); }
.b-led .lr { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr) 92px minmax(0,1.1fr) 92px;
             gap:16px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line-soft); }
.b-led .c { font-size:15px; color:var(--ink); font-weight:400; }
.b-led .d { font-size:12.5px; color:var(--faint); font-weight:400; }
.b-led .p { font-size:18px; color:var(--accent); text-align:right; font-variant-numeric:tabular-nums; }
.b-led .lh { padding:0 0 9px; }
.b-led .lh .p { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
                font-family:var(--body); }
.b-led .lt { background:var(--tint); padding:16px 14px; margin:0 -14px; border-bottom:0; }
.b-led .lt .p { font-size:22px; color:var(--ink); }
.phone .b-led .lr { grid-template-columns:minmax(0,1fr) 84px; gap:4px 12px; }
.phone .b-led .d { grid-column:1; }
.phone .b-led .lh { display:none; }
/* ================= HERO: text over photos that fight back ================= */
/* the home band was 700px, which ate the whole fold on a laptop */
.hero { height:600px; }
.phone .hero { height:470px; }
.on-ph { color:rgba(255,255,255,.78); }
.cta span, .hero-copy .cta { color:#fff; }
/* which of the three test photos the banner shows */
.ah-banner .band .hp { display:none; }
.frame[data-hp="dark"]   .hp[data-hp="dark"], .frame[data-hp="mid"]    .hp[data-hp="mid"], .frame[data-hp="bright"] .hp[data-hp="bright"] { display:block; }
/* MID: a third of the way from soft to deep, which is where the eyebrow starts holding */
.frame[data-scrim="mid"] .slide .veil, .frame[data-scrim="mid"] .ah-banner .band .veil {
  background:linear-gradient(180deg, rgba(var(--scrim),.46) 0%, rgba(var(--scrim),.16) 38%,
                                     rgba(var(--scrim),.86) 100%); }
/* SOFT is the default already in .veil. DEEP adds weight where the words are. */
.frame[data-scrim="deep"] .slide .veil, .frame[data-scrim="deep"] .ah-banner .band .veil {
  background:linear-gradient(180deg, rgba(var(--scrim),.52) 0%, rgba(var(--scrim),.26) 38%,
                                     rgba(var(--scrim),.90) 100%); }
/* PLATE puts the copy on its own ground, so no photo can reach it */
.frame[data-scrim="plate"] .slide .veil, .frame[data-scrim="plate"] .ah-banner .band .veil {
  background:linear-gradient(180deg, rgba(var(--scrim),.20) 0%, rgba(var(--scrim),.32) 100%); }
.frame[data-scrim="plate"] .hero-copy, .frame[data-scrim="plate"] .ah-banner .cpy {
  background:rgba(var(--scrim),.88); padding:30px 34px 32px; right:auto; max-width:680px; }
.phone .frame[data-scrim="plate"] .hero-copy { padding:22px; }
.frame.phone[data-scrim="plate"] .hero-copy, .frame.phone[data-scrim="plate"] .ah-banner .cpy { padding:20px 22px 22px; right:20px; max-width:none; }
/* BELOW takes the copy off the photo entirely: nothing left to go wrong */
.frame[data-scrim="under"] .slide .veil, .frame[data-scrim="under"] .ah-banner .band .veil { display:none; }
.frame[data-scrim="under"] .slide img { bottom:186px; }
.frame[data-scrim="under"] .hero-copy {
  left:0; right:0; bottom:0; width:auto; height:186px; padding:26px 64px 0; background:var(--ground); }
.frame[data-scrim="under"] .hero-h { color:var(--ink); font-size:40px; }
.frame[data-scrim="under"] .on-ph { color:var(--faint); }
.frame[data-scrim="under"] .cta { color:var(--ink); margin-top:16px; }
.frame[data-scrim="under"] .cta span { color:var(--ink); border-bottom-color:var(--line); }
.frame[data-scrim="under"] .dots { bottom:206px; }
.frame.phone[data-scrim="under"] .slide img { bottom:150px; }
.frame.phone[data-scrim="under"] .hero-copy { height:150px; padding:18px 20px 0; }
.frame.phone[data-scrim="under"] .hero-h { font-size:25px; }
.frame.phone[data-scrim="under"] .dots { bottom:164px; }
.frame[data-scrim="under"] .ah-banner .band { height:auto; }
.frame[data-scrim="under"] .ah-banner .band .hp { position:relative; height:520px; }
.frame.phone[data-scrim="under"] .ah-banner .band .hp { height:300px; }
.frame[data-scrim="under"] .ah-banner .cpy { position:static; padding:32px 64px 0; }
.frame.phone[data-scrim="under"] .ah-banner .cpy { padding:22px 20px 0; }
.frame[data-scrim="under"] .ah-banner h1 { color:var(--ink); }
.frame[data-scrim="under"] .ah-banner .on-ph { color:var(--faint); }
.frame[data-scrim="under"] .ah-banner .artsub { color:var(--muted); }
/* ================= MAP LEGEND OPTIONS ================= */
.lg-pale { background:#C8DDD5; }
.frame[data-pal="major"] .lg-pale { background:#CFE0F7; }
.frame[data-pal="sand"]  .lg-pale { background:#E7D3C6; }
.frame[data-pal="ink"]   .lg-pale { background:#4A5F55; }
/* A, two dots, what the site has */
.lg-a { display:flex; gap:24px; margin:20px 0 12px; flex-wrap:wrap; }
.lg-a > div { display:flex; align-items:center; gap:8px; }
/* B, counted key: the swatch earns its place by carrying a number */
.lg-b { display:flex; gap:44px; margin:22px 0 14px; flex-wrap:wrap; align-items:flex-start; }
.lg-b .k { display:grid; grid-template-columns:auto auto auto; gap:0 12px; align-items:center; }
.lg-b .sw { width:13px; height:13px; grid-row:1 / span 1; }
.lg-b .n { font-size:31px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.lg-b .l { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); line-height:1.5; }
.lg-b .tot { padding-left:44px; border-left:1px solid var(--line-soft); }
.lg-b .tot .n { color:var(--accent); grid-column:1; }
/* C, a card on the map, in the empty Pacific */
.map-wrap { position:relative; }
.lg-c { position:absolute; left:16px; bottom:16px; z-index:2; background:var(--ground);
        border:1px solid var(--line); padding:16px 18px 14px; max-width:250px; }
.frame[data-pal="ink"] .lg-c { background:var(--footer); }
.lg-c .h { font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-bottom:11px; }
.lg-c .r { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted);
           font-weight:400; padding:3px 0; }
.lg-c .hint { font-size:11px; color:var(--faint); font-weight:400; margin-top:10px;
              padding-top:9px; border-top:1px solid var(--line-soft); }
.phone .lg-c { position:static; max-width:none; margin-top:14px; }
/* D, a stat rail: three numbers first, the key underneath */
.lg-d { display:flex; align-items:flex-end; gap:52px; margin:22px 0 16px; flex-wrap:wrap;
        border-bottom:1px solid var(--line); padding-bottom:18px; }
.lg-d .st .n { font-size:40px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.phone .lg-d { gap:26px; }
.phone .lg-d .st .n { font-size:30px; }
.lg-d .st .l { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:8px; }
.lg-d .keys { margin-left:auto; display:flex; gap:20px; flex-wrap:wrap; }
.lg-d .keys > div { display:flex; align-items:center; gap:8px; }
/* ================= MENU AND SEARCH ================= */
.ms { padding:44px 64px 0; }
.phone .ms { padding:26px 20px 0; }
.ms-l { font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint);
        margin:34px 0 12px; }
.ms-l:first-child { margin-top:0; }
.ms-box { border:1px solid var(--line); background:var(--ground); }
.ms-box .nav { padding-left:34px; padding-right:34px; }
.mm-under { height:26px; }
.megam { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:44px;
         padding:30px 34px 34px; border-top:1px solid var(--line-soft); }
.phone .megam { grid-template-columns:1fr; gap:26px; padding:22px; }
.mm-cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; }
.phone .mm-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mm-h { font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
        margin-bottom:13px; }
.mm-col a { display:block; font-size:14.5px; font-weight:400; color:var(--muted); padding:5px 0; }
.mm-col a:hover { color:var(--ink); }
.mm-feat { border-left:1px solid var(--line-soft); padding-left:34px; }
.phone .mm-feat { border-left:0; padding-left:0; border-top:1px solid var(--line-soft); padding-top:22px; }
.mm-f { display:block; margin-bottom:20px; }
.mm-fi { aspect-ratio:3/2; overflow:hidden; margin-bottom:10px; }
.mm-fi img { width:100%; height:100%; object-fit:cover; display:block; }
.mm-ft { font-size:17px; line-height:1.3; margin-top:5px; }
.srch { padding:0; }
.sr-bar { display:flex; align-items:center; gap:13px; padding:22px 30px; color:var(--faint);
          border-bottom:1px solid var(--line); }
.sr-q { font-size:22px; color:var(--ink); font-weight:400; }
.sr-cur { width:1.5px; height:22px; background:var(--accent); animation:bl 1.05s step-end infinite; }
50% { opacity:0; }
.sr-cur { animation:none; }
.sr-esc { margin-left:auto; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
          border:1px solid var(--line); padding:4px 8px; }
.sr-res { padding:8px 30px 14px; }
.sr-g { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
        padding:18px 0 8px; border-bottom:1px solid var(--line-soft); }
.sr-r { display:flex; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.sr-r:hover { background:var(--tint); }
.sr-i { width:64px; height:44px; flex:none; overflow:hidden; }
.sr-i img { width:100%; height:100%; object-fit:cover; display:block; }
.sr-none { border:1px solid var(--line-soft); }
.sr-t { font-size:15.5px; line-height:1.35; color:var(--ink); font-weight:400; }
.sr-s { font-size:13px; line-height:1.55; color:var(--muted); font-weight:400; margin-top:3px; }
.sr-s mark { background:none; color:var(--accent); font-weight:500; }
.sr-foot { padding:14px 30px 20px; font-size:11.5px; color:var(--faint); font-weight:400;
           border-top:1px solid var(--line-soft); }
.ms-two { display:grid; grid-template-columns:390px 390px; gap:26px; }
.phone .ms-two { grid-template-columns:1fr; }
.ms-ph { border:1px solid var(--line); overflow:hidden; }
.dr { background:var(--ground); min-height:520px; }
.dr-top { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; }
.dr-top .w { font-size:19px; font-style:italic; }
.dr-main { padding:14px 22px 6px; }
.dr-main a { display:block; font-size:31px; line-height:1.5; color:var(--ink); }
.dr-h { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
        padding:22px 22px 8px; border-top:1px solid var(--line-soft); margin-top:18px; }
.dr-c { padding:0 22px 26px; }
.dr-c a { display:block; font-size:14.5px; font-weight:400; color:var(--muted); padding:6px 0;
          border-bottom:1px solid var(--line-soft); }
.sr-bar.ph { padding:18px 20px; }
.sr-bar.ph .sr-q { font-size:18px; }
.sr-res.ph { padding:0 20px 16px; }
.sr-res.ph .sr-i { width:52px; height:36px; }
.sr-res.ph .sr-t { font-size:14px; }
.sr-res.ph .sr-s { font-size:12px; }
/* --- fixes from the visual pass --- */
/* panel rows: the label is a label, not a headline */
.f-prow .f-t.plain { text-transform:none; letter-spacing:0; font-size:15px; }
/* the ledger's widest figure is $70-$120; give it room and never break it */
.b-led .lr { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 108px minmax(0,1fr) 108px; }
.b-led .p { white-space:nowrap; }
.phone .b-led .lr { grid-template-columns:minmax(0,1fr) 96px; }
/* mega menu: three compact rows instead of two tall cards */
.mm-f { display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center;
        margin-bottom:0; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.mm-f:last-child { border-bottom:0; }
.mm-fi { aspect-ratio:3/2; margin-bottom:0; }
.mm-ft { font-size:15px; line-height:1.32; margin-top:4px; }
/* an excerpt hit has no photo, so the slot says why */
.sr-none { display:flex; align-items:center; justify-content:center; font-family:var(--display);
           font-size:30px; line-height:1; color:var(--faint); padding-bottom:12px; }
/* ================= CONTENTS: two columns, with something to hold on to ================= */
/* C, grouped: three labelled parts, which is what actually breaks the grey block */
.toc-g { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.phone .toc-g { grid-template-columns:1fr; }
.toc-g .g { padding:0 22px; border-left:1px solid var(--line-soft); }
.toc-g .g:first-child { padding-left:0; border-left:0; }
.toc-g .g:last-child { padding-right:0; }
.phone .toc-g .g { padding:0 0 14px; border-left:0; }
.toc-g .gh { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
             padding-bottom:9px; margin-bottom:6px; border-bottom:1px solid var(--accent); }
.toc-g .r { display:flex; gap:11px; align-items:baseline; padding:7px 0; }
.toc-g .n { font-size:10.5px; color:var(--faint); font-variant-numeric:tabular-nums; min-width:16px; }
.toc-g .t { font-size:14.5px; color:var(--muted); }
.toc-g .r:hover .t { color:var(--accent); }
/* D, serif numerals: the figure carries the accent and the display face */
.toc-h { column-count:2; column-gap:40px; }
.phone .toc-h { column-count:1; }
.toc-h .r { display:flex; gap:14px; align-items:baseline; padding:9px 0;
            border-bottom:1px solid var(--line-soft); break-inside:avoid; }
.toc-h .n { font-size:17px; color:var(--accent); font-variant-numeric:tabular-nums;
            min-width:24px; font-style:italic; }
.toc-h .t { font-size:15px; color:var(--ink); }
.toc-h .r:hover .t { color:var(--accent); }
/* the plain two column list keeps its own hover now that it is an option in its own right */
.toc-d .r:hover .t { color:var(--accent); }
/* ================= KEY FACTS: variations on the icon grid ================= */
/* D, figure first */
.f-lead .f-v { font-size:25px; line-height:1.05; color:var(--ink); margin:12px 0 6px; }
.f-lead .f-t { font-size:10px; letter-spacing:.15em; color:var(--faint); font-weight:500; margin-bottom:8px; }
.f-lead .f-b { font-size:13px; }
.phone .f-lead .f-v { font-size:21px; }
/* E, icon to the left, two across, so the sentence gets a proper measure */
.f-sides { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 34px; }
.phone .f-sides { grid-template-columns:1fr; }
.f-side { display:grid; grid-template-columns:21px minmax(0,1fr); gap:15px; align-items:start;
          padding:16px 0; border-bottom:1px solid var(--line-soft); }
.f-side .ig { margin-top:2px; }
.f-side .f-t { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
               font-weight:500; margin-bottom:5px; }
.f-side .f-b { font-size:14px; line-height:1.62; color:var(--muted); }
/* F, separated cards, tinted icon chip, figure top right */
.f-boxes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.phone .f-boxes { grid-template-columns:repeat(2,minmax(0,1fr)); }
.f-box { border:1px solid var(--line); padding:16px 16px 18px; }
.f-bh { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.f-chip { display:flex; align-items:center; justify-content:center; width:32px; height:32px;
          background:var(--tint); color:var(--accent); flex:none; }
.f-box .f-v { font-size:19px; color:var(--ink); }
.f-box .f-t { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
              margin-bottom:6px; }
.f-box .f-b { font-size:13px; line-height:1.6; color:var(--muted); }
/* ================= THE TOOLBAR STAYS PUT ================= */
/* sticky was losing its containing block inside the artifact frame, so: fixed, with the stage padded by the header's measured height on load and on resize */
.head { position:fixed; top:0; left:0; right:0; z-index:60; }
/* ================= FLAGS ================= */
.fl { width:16px; height:12px; display:block; flex:none; object-fit:cover;
      box-shadow:0 0 0 1px rgba(0,0,0,.10); }
.mm-col a, .fg a, .dr-c a { display:flex; align-items:center; gap:9px; }
/* ================= THE MAP CALLOUT, AS THE LIVE NAV HAS IT ================= */
.mapcard { display:block; border:1px solid var(--line); background:var(--tint); }
.mapcard:hover { border-color:var(--accent); }
.mc-img { height:96px; overflow:hidden; display:flex; align-items:center; justify-content:center;
          padding:8px 14px; }
.mc-img img { width:100%; height:100%; object-fit:contain; display:block; }
.mc-b { padding:12px 16px 14px; border-top:1px solid var(--line-soft); }
.mc-h { font-size:13px; letter-spacing:.02em; color:var(--ink); font-weight:500; }
.mc-s { font-size:11.5px; color:var(--faint); margin-top:4px; }
/* ================= MENU LAYOUTS ================= */
/* B, a continent rail: one region at a time, so nothing is a wall */
.megab { display:grid; grid-template-columns:212px minmax(0,1fr) 300px; gap:0;
         border-top:1px solid var(--line-soft); }
.phone .megab { grid-template-columns:1fr; }
.mm-rail { border-right:1px solid var(--line-soft); padding:22px 0; }
.phone .mm-rail { border-right:0; border-bottom:1px solid var(--line-soft); }
.mm-rail .rl { display:flex; width:100%; align-items:center; justify-content:space-between;
               padding:11px 34px; font-size:15px; color:var(--muted); text-align:left; }
.mm-rail .rl .ct { font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.mm-rail .rl.on { color:var(--ink); background:var(--tint);
                  box-shadow:inset 2px 0 0 var(--accent); }
.mm-pane { padding:24px 30px 30px; }
.mm-side { padding:24px 30px 30px; border-left:1px solid var(--line-soft); }
.phone .mm-side { border-left:0; }
.fg { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 22px; }
.phone .fg { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fg a { font-size:14px; color:var(--muted); padding:6px 0; }
.fg a:hover { color:var(--accent); }
/* C, everything at once, grouped by continent */
.megac { display:grid; grid-template-columns:minmax(0,1fr) 300px;
         border-top:1px solid var(--line-soft); }
.phone .megac { grid-template-columns:1fr; }
.mm-all { padding:22px 30px 30px; }
.fg-h { display:flex; align-items:baseline; gap:10px; font-size:10px; letter-spacing:.16em;
        text-transform:uppercase; color:var(--accent); margin:20px 0 8px;
        padding-bottom:7px; border-bottom:1px solid var(--line-soft); }
.fg-h:first-child { margin-top:0; }
.fg-h span { color:var(--faint); letter-spacing:.08em; }
.megac .fg { grid-template-columns:repeat(4,minmax(0,1fr)); }
.phone .megac .fg { grid-template-columns:repeat(2,minmax(0,1fr)); }
.dr-map { padding:14px 22px 4px; }
/* ================= DISPATCHES LAYOUTS ================= */
/* A, rows */
.pl-r { display:flex; gap:26px; padding:24px 0; border-bottom:1px solid var(--line-soft); }
.phone .pl-r { gap:16px; }
.pl-i { width:220px; flex:none; aspect-ratio:3/2; overflow:hidden; }
.phone .pl-i { width:118px; }
.pl-i img { width:100%; height:100%; object-fit:cover; display:block; }
.pl-t { font-size:24px; line-height:1.26; margin:8px 0; }
.phone .pl-t { font-size:17px; }
/* B, an index: the titles do the work, no pictures at all */
.px { border-top:1px solid var(--ink); }
.px-r { display:grid; grid-template-columns:104px minmax(0,1fr) 160px; gap:26px;
        align-items:baseline; padding:19px 0; border-bottom:1px solid var(--line-soft); }
.phone .px-r { grid-template-columns:1fr; gap:5px; padding:15px 0; }
.px-r .d { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
           font-variant-numeric:tabular-nums; }
.px-r .t { font-size:23px; line-height:1.3; color:var(--ink); }
.phone .px-r .t { font-size:18px; }
.px-r .c { display:flex; align-items:center; gap:9px; justify-content:flex-end;
           font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); }
.phone .px-r .c { justify-content:flex-start; }
.px-r:hover .t { color:var(--accent); }
/* C, a card grid */
.pg { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px 32px; }
.phone .pg { grid-template-columns:1fr; gap:28px; }
.pg-i { aspect-ratio:3/2; overflow:hidden; margin-bottom:14px; }
.pg-i img { width:100%; height:100%; object-fit:cover; display:block; }
.pg-t { font-size:21px; line-height:1.28; margin:8px 0 9px; }
/* D, grouped by country, which is how the archive actually reads */
.pd-g { margin-bottom:34px; }
.pd-h { display:flex; align-items:baseline; gap:11px; padding-bottom:10px;
        border-bottom:1px solid var(--ink); }
.pd-h .fl { align-self:center; }
.pd-h .n { font-size:22px; color:var(--ink); }
.pd-h .ct { font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
            margin-left:auto; }
.pd-r { display:grid; grid-template-columns:104px minmax(0,1fr) 130px; gap:22px;
        align-items:baseline; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.phone .pd-r { grid-template-columns:1fr; gap:4px; }
.pd-r .d { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
           font-variant-numeric:tabular-nums; }
.pd-r .t { font-size:16px; color:var(--muted); }
.pd-r .k { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
           text-align:right; }
.phone .pd-r .k { text-align:left; }
.pd-r:hover .t { color:var(--accent); }
/* ================= ABOUT ================= */
.ab-stats { display:flex; gap:44px; margin-top:32px; padding-top:26px;
            border-top:1px solid var(--line); flex-wrap:wrap; }
.ab-s .n { font-size:38px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.ab-s .l { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
           margin-top:8px; }
.ab-quick { border-top:1px solid var(--ink); }
.ab-q { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; padding:15px 0;
        border-bottom:1px solid var(--line-soft); align-items:baseline; }
.phone .ab-q { grid-template-columns:1fr; gap:4px; }
.ab-q .k { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.ab-q .v2 { font-size:16px; color:var(--muted); }
/* A: the long region spans two tracks rather than towering over the short ones */
.mm-col.wide { grid-column:span 2; }
.mm-col.wide .lst { column-count:2; column-gap:26px; }
.mm-col .lst a { break-inside:avoid; }
.phone .mm-col.wide { grid-column:span 2; }
.megam { align-items:start; }
/* the contextual options get one row, scrolled sideways rather than wrapped, so pinning the toolbar costs the page a fixed 120px and never more */
.ctx { flex-basis:100%; display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
       overflow-x:auto; scrollbar-width:thin; padding-top:8px; margin-top:2px;
       border-top:1px solid var(--shell-line); }
/* ================= THE REAL ARTICLE ================= */
.artbody > .measure + .measure { margin-top:0; }
.artbody .measure { padding-top:0; }
.artbody > .measure > .copy { margin:0 0 22px; }
.artbody > .measure > .h-a { margin:46px 0 20px; }
.artbody > .measure > .comp-h { margin-top:44px; }
.artbody > .measure > .b-a { margin:0 0 22px; }
.artbody > .measure > .v-toc, .artbody > .measure > .v-facts, .artbody > .measure > .v-table { margin-bottom:30px; }
.artbody { padding-top:44px; padding-bottom:10px; }
.toc-sub { font-size:22px; line-height:1.25; margin:6px 0 18px; }
.phone .toc-sub { font-size:19px; }
/* photographs, at the shapes the article uses */
.wide-shot { padding-top:8px; padding-bottom:8px; }
.ls { aspect-ratio:3/2; overflow:hidden; }
.ls img { width:100%; height:100%; object-fit:cover; display:block; }
.one-shot, .day-shot { max-width:520px; margin:22px auto 26px; }
.day-shot { max-width:430px; }
.one-shot img, .day-shot img { width:100%; display:block; }
/* day by day: the label row he picked, then the day's own paragraphs */
.day-head { margin:40px 0 4px; }
.day-head .d-row2 { border-bottom:1px solid var(--ink); padding-bottom:12px; }
.day-copy { margin:0 0 18px; }
.artbody > .measure > .day-copy:first-child { margin-top:16px; }
/* the route map is an inline svg, so it just needs a box */
.route-map { margin:34px auto 30px; }
.route-map svg { width:100%; height:auto; display:block; margin-top:12px; }
/* when to visit, the live page's season matrix */
.whm2 { margin:6px 0 28px; }
.wrow { display:grid; grid-template-columns:180px minmax(0,1fr); gap:18px; align-items:center;
        padding:14px 0; border-bottom:1px solid var(--line-soft); }
.phone .wrow { grid-template-columns:1fr; gap:10px; }
.wlbl { display:grid; grid-template-columns:20px minmax(0,1fr); gap:4px 11px; align-items:center; }
.wlbl .ig { grid-row:1 / span 2; }
.wlbl .wt { font-size:15px; color:var(--ink); }
.wlbl .rec { grid-column:2; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
             color:var(--accent); }
.wlbl .ws { grid-column:2; font-size:11.5px; color:var(--faint); }
.wcells { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; }
.wc { padding:9px 6px 10px; text-align:center; background:var(--tint); }
.wc .mn { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); }
.wc .tc { font-size:12px; color:var(--muted); margin-top:4px; font-variant-numeric:tabular-nums; }
.wc .tf { font-size:10px; color:var(--faint); font-variant-numeric:tabular-nums; }
.wh0 { background:color-mix(in oklab, var(--accent) 7%, transparent); }
.wh1 { background:color-mix(in oklab, var(--accent) 13%, transparent); }
.wh2 { background:color-mix(in oklab, var(--accent) 20%, transparent); }
.wh3 { background:color-mix(in oklab, var(--accent) 28%, transparent); }
.wh4 { background:color-mix(in oklab, var(--accent) 36%, transparent); }
.wh5 { background:color-mix(in oklab, var(--accent) 44%, transparent); }
.phone .wc { padding:7px 2px 8px; }
.phone .wc .tc, .phone .wc .tf { font-size:9px; }
.phone .wc .mn { font-size:9px; letter-spacing:.06em; }
/* ================= COUNTRY CARD: the proposal, or what the site has ================= */
.tile .rn { display:none; }
.frame[data-cards="b"] .tile { aspect-ratio:2/3; }
.frame[data-cards="b"] .tile .veil {
  background:linear-gradient(180deg, rgba(var(--scrim),.15) 0%, rgba(var(--scrim),.62) 100%); }
.frame[data-cards="b"] .tile .lab { left:0; right:0; bottom:0; top:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; }
.frame[data-cards="b"] .tile .nm { font-family:var(--body); font-size:21px; font-weight:400;
  letter-spacing:.01em; text-align:center; }
.frame[data-cards="b"] .tile .sub { display:none; }
.frame[data-cards="b"] .tile .rn { display:inline-block; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.7); padding:7px 15px; }
.frame[data-cards="b"] .tile.map-tile .lab { display:none; }
.tile { transition:transform .35s; }
.tile:hover { transform:translateY(-6px); }
.frame { box-shadow:none; }
.frame.phone { width:100%; }
/* ============ 5, 17, 18: photo geometry, copied off the live stylesheet ============ */
/* .img-pair is 79% / 576px, two up, and STAYS two up on a phone, full bleed.
   .img-landscape is the same width at 3:2. Crops come through as object-position. */
.pair { display:grid; grid-template-columns:1fr 1fr; gap:.6rem;
        width:79%; max-width:576px; margin:1.5rem auto; }
.pair.narrow { width:55.5%; max-width:400px; }
.pair > div { overflow:hidden; border-radius:2px; }
.pair img { width:100%; height:100%; object-fit:cover; display:block; }
.ls { display:block; width:79%; max-width:576px; margin:.15rem auto 1.5rem; position:relative;
      overflow:hidden; border-radius:2px; aspect-ratio:3/2; }
.ls img { width:100%; height:100%; object-fit:cover; display:block; }
.one-shot, .day-shot { margin:1rem auto; max-width:400px; }
.one-shot img, .day-shot img { width:100%; display:block; border-radius:2px; }
/* the live page adds 2.5rem because its parent is padded; these blocks sit in a
   full width container already, so full bleed is simply 100% */
.phone .pair, .phone .pair.narrow { grid-template-columns:1fr 1fr; width:100%; max-width:none;
               margin-left:0; margin-right:0;
               gap:.15rem; margin-top:.15rem; margin-bottom:.15rem; }
.phone .pair > div { border-radius:0; }
.phone .ls { width:100%; max-width:none; margin-left:0; margin-right:0;
             border-radius:0; margin-bottom:.5rem; margin-top:.15rem; }
.phone .one-shot, .phone .day-shot { width:90%; max-width:90%; }
.pair-cap { text-align:center; margin:10px 0 26px; }
/* ============ 1: the country name, in the theme's own sans ============ */
.tile .nm { font-family:var(--body); font-weight:500; letter-spacing:.005em; }
.frame[data-cards="b"] .tile .nm { font-weight:400; }
/* ============ 18: home tiles stay horizontal on a phone ============ */
.phone .tiles, .phone .tiles.four { grid-template-columns:1fr; gap:.85rem; }
.phone .tile { aspect-ratio:1.9/1; }
.phone .tile .lab { left:20px; right:20px; bottom:16px; }
.phone .tile.map-tile { aspect-ratio:1.9/1; }
/* ============ 12: no ring around the flags ============ */
.fl { box-shadow:none; }
.mm-cols { grid-template-columns:repeat(3,minmax(0,1fr)); }
/* ============ 15: the map preview earns its space on a phone ============ */
.phone .mc-img { height:180px; padding:10px 16px; }
.phone .mapcard { margin-bottom:6px; }
.dr-map .mc-img { height:150px; }
/* ============ 10: the footer's small print ============ */
.foot-tag { font-size:12px; color:rgba(255,255,255,.55); margin-top:6px; }
.foot-r { text-align:right; }
.phone .foot-r { text-align:left; margin-top:16px; }
.foot-copy { font-size:11px; color:rgba(255,255,255,.42); margin-top:12px; letter-spacing:.02em; }
/* ============ 6: contents in a box, the shape of the budget card ============ */
.toc-box { border:1px solid var(--line); padding:22px 26px 18px; }
.toc-box.tint { background:var(--tint); border-color:transparent; }
.toc-box.rail { border-left:2px solid var(--accent); }
.bx-l { font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); }
.bx-t { font-size:21px; font-style:italic; line-height:1.25; margin:8px 0 16px; }
.phone .toc-box { padding:18px 20px 14px; }
.phone .bx-t { font-size:18px; }
.bx-c .r:last-child { border-bottom:0; }
/* ============ 3: the stat legend, centred ============ */
.lg-d.mid { justify-content:center; text-align:center; gap:64px; }
.lg-d.mid .keys { margin-left:0; justify-content:center; width:100%; }
.lg-d.mid.stack { flex-direction:column; align-items:center; gap:22px; }
.lg-d.mid.stack .keys { margin-top:2px; }
.lg-d.mid.band { border-top:1px solid var(--line); padding:22px 0; margin:22px 0 16px;
                 align-items:center; }
.phone .lg-d.mid { gap:26px; }
/* ============ 4: dispatch grids with real separation ============ */
.pg.ruled { gap:0; }
.pg.ruled .pg-c { padding:30px 26px; border-right:1px solid var(--line-soft);
                  border-bottom:1px solid var(--line-soft); }
.pg.ruled .pg-c:nth-child(3n) { border-right:0; }
.phone .pg.ruled .pg-c { border-right:0; padding:24px 0; }
.pg.two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px 44px; }
.pg.two .pg-t { font-size:26px; }
.phone .pg.two { grid-template-columns:1fr; gap:30px; }
.pg.boxed { gap:20px; }
.pg.boxed .pg-c { border:1px solid var(--line); padding:0 0 20px; }
.pg.boxed .pg-i { margin-bottom:0; }
.pg.boxed .kick, .pg.boxed .pg-t, .pg.boxed .card-p { padding:0 20px; }
.pg.boxed .kick { padding-top:16px; }
/* ============ 16: about stats, boxed to match ============ */
.ab-stats.plain { border-top:1px solid var(--line); padding-top:26px; }
.ab-stats.boxed { border:1px solid var(--line); padding:22px 26px; gap:0;
                  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.ab-stats.boxed .ab-s { border-left:1px solid var(--line-soft); padding-left:22px; }
.ab-stats.boxed .ab-s:first-child { border-left:0; padding-left:0; }
.ab-stats.boxed.tint { background:var(--tint); border-color:transparent; }
.ab-stats.boxed.rail { border-left:2px solid var(--accent); }
.ab-stats.stacked { display:grid; grid-template-columns:1fr; gap:0;
                    border-top:1px solid var(--ink); }
.ab-stats.stacked .ab-s { display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px;
                          align-items:baseline; padding:13px 0;
                          border-bottom:1px solid var(--line-soft); }
.ab-stats.stacked .ab-s .n { font-size:27px; }
.ab-stats.stacked .ab-s .l { margin-top:0; }
.phone .ab-stats.boxed { grid-template-columns:1fr; gap:14px; }
.phone .ab-stats.boxed .ab-s { border-left:0; padding-left:0; }
/* ============ the article, with no hero photo at all ============ */
.ah-none { display:none; }
.frame[data-ahero="none"] .ah-none { display:block; }
.ah-none .cpy { padding:60px 0 30px; border-bottom:1px solid var(--line); }
.phone .ah-none .cpy { padding:26px 20px 22px; }
.ah-none h1 { font-size:46px; line-height:1.12; margin:14px 0 0; font-weight:var(--dw); }
.phone .ah-none h1 { font-size:28px; }
.ah-none .artsub { margin-left:0; }
.frame[data-ahero="none"] .artbody { padding-top:34px; }
/* the route map now takes the page ground, since its baked rectangle is gone */
.route-map svg { background:transparent; }
.frame[data-pal="ink"] .route-map svg { background:#F7F7F3; border-radius:3px; }
/* ============ 9, 11: the article's rhythm and its green lead-ins ============ */
/* the headings sit inside a variant wrapper now, so the spacing has to reach through it */
.artbody > .measure > .v-head { margin:52px 0 0; }
.artbody > .measure > .v-head + * { margin-top:18px; }
.artbody > .measure > .v-head .h-a, .artbody > .measure > .v-head .h-b, .artbody > .measure > .v-head .h-c { margin:0; }
.artbody > .measure > .copy { margin:0 0 20px; }
.artbody > .measure > .v-list { margin:4px 0 24px; }
.artbody > .measure > .v-toc, .artbody > .measure > .v-facts, .artbody > .measure > .v-table, .artbody > .measure > .v-call { margin:22px 0 30px; }
.artbody > .measure > .comp-h { margin:46px 0 0; }
.artbody .day-head { margin:44px 0 6px; }
.artbody > .measure > .day-copy { margin:0 0 18px; }
.h-a { margin:0; }
/* the lead-in of a bullet carries the accent, not just weight */
.b-a li b, .b-a li strong, .b-b .t b, .b-b .t strong, .b-c .r b, .b-c .r strong, .b-a li u, .b-c .r u { color:var(--accent); font-weight:600; text-decoration:none; }
/* ============ 8: a greener contents box ============ */
.toc-box { border-color:color-mix(in oklab, var(--accent) 30%, transparent); }
.toc-box .bx-t { color:var(--accent); }
.toc-box .toc-d .n, .toc-box .toc-g .n { color:var(--accent); }
.toc-box .toc-d .r, .toc-box .toc-g .r { border-bottom-color:
  color-mix(in oklab, var(--accent) 16%, transparent); }
.toc-box .toc-g .gh { color:var(--accent); border-bottom-color:var(--accent); }
.toc-box.tint { background:color-mix(in oklab, var(--accent) 5%, transparent); }
.toc-sub { margin:6px 0 16px; }
.toc-box .toc-sub { display:none; }
/* ============ 1: four country cards ============ */
/* the name takes the same face as the Read Notes chip */
.tile .nm { font-family:var(--body); font-weight:500; letter-spacing:.02em; }
.frame[data-cards="b"] .tile .nm { font-size:15px; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; }
/* C, a solid bar across the foot of the photo */
.frame[data-cards="c"] .tile .veil { display:none; }
.frame[data-cards="c"] .tile .lab { left:0; right:0; bottom:0; background:var(--footer);
  padding:13px 16px 14px; display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; }
.frame[data-cards="c"] .tile .nm { font-size:16px; letter-spacing:.02em; text-transform:none; }
.frame[data-cards="c"] .tile .sub { margin-top:0; }
/* D, framed, with the caption below the picture on the page ground */
.frame[data-cards="d"] .tile { aspect-ratio:auto; background:none; }
.frame[data-cards="d"] .tile img { position:static; width:100%; aspect-ratio:3/2;
  object-fit:cover; display:block; border:1px solid var(--line); }
.frame[data-cards="d"] .tile .veil { display:none; }
.frame[data-cards="d"] .tile .lab { position:static; padding:11px 0 0; }
.frame[data-cards="d"] .tile .nm { color:var(--ink); font-size:16px; text-transform:none;
  letter-spacing:.01em; }
.frame[data-cards="d"] .tile .sub { color:var(--faint); }
.frame[data-cards="d"] .tile.map-tile { background:var(--footer); aspect-ratio:3/2; }
/* ============ 2: legend, centred, square swatches, boxed stats ============ */
.lg-key { display:flex; gap:30px; justify-content:center; flex-wrap:wrap; margin:22px 0 16px; }
.lg-key > div { display:flex; align-items:center; gap:9px; }
.frame[data-pal="major"] .sw.pale { background:#CFE0F7; }
.frame[data-pal="sand"]  .sw.pale { background:#E7D3C6; }
.frame[data-pal="ink"]   .sw.pale { background:#4A5F55; }
.lg-band { display:flex; justify-content:center; gap:56px; border:1px solid var(--line);
           padding:18px 24px; margin:4px auto 18px; width:max-content; max-width:100%; }
.lg-band .st, .lg-box .st { text-align:center; }
.lg-band .n, .lg-box .n { font-size:30px; line-height:1; color:var(--ink);
                          font-variant-numeric:tabular-nums; }
.lg-band .l, .lg-box .l { font-size:10px; letter-spacing:.14em; text-transform:uppercase;
                          color:var(--faint); margin-top:7px; }
.lg-box { position:absolute; z-index:2; display:flex; gap:26px; background:var(--ground);
          border:1px solid var(--line); padding:15px 20px; }
.frame[data-pal="ink"] .lg-box { background:var(--footer); }
.lg-box.bl { left:14px; bottom:14px; }
.lg-box.tr { right:14px; top:14px; }
.lg-box .n { font-size:25px; }
.phone .lg-box { display:none; }
/* it would crowd the map on a phone */
.map-wrap { border-top:0; padding-top:0; }
/* ============ 3: hover cards on the map ============ */
.tip { position:absolute; z-index:3; background:var(--ground); border:1px solid var(--ink);
       padding:10px 13px 11px; min-width:150px; }
.frame[data-pal="ink"] .tip { background:var(--footer); }
.tip-pe { left:26%; top:62%; }
.tip-ge { left:57%; top:30%; }
.tip .t-h { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); }
.tip .t-m { font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
            color:var(--accent); margin-top:5px; }
.tip .t-b { font-size:12.5px; line-height:1.5; color:var(--muted); margin-top:7px;
            max-width:200px; }
.tip-b { min-width:210px; }
.tip .t-go { display:inline-block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
             color:var(--ground); background:var(--accent); padding:4px 9px; margin-top:9px; }
.frame[data-pal="ink"] .tip .t-go { color:var(--footer); }
.phone .tip { display:none; }
/* ============ 4: a header above the country grid ============ */
.dest-head { margin-top:50px; align-items:flex-end; }
.dest-note { font-size:13.5px; color:var(--faint); max-width:280px; text-align:right; }
.phone .dest-note { text-align:left; margin-top:8px; }
/* ============ 5: resources ============ */
.rs-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:36px; }
.phone .rs-grid { grid-template-columns:1fr; }
.rs-g { border:1px solid var(--line); padding:22px 24px 8px; }
.rs-h { display:grid; grid-template-columns:22px minmax(0,1fr); gap:14px; align-items:start;
        padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.rs-h .ig { margin-top:3px; }
.rs-t { font-size:20px; line-height:1.2; }
.rs-s { font-size:12.5px; color:var(--faint); margin-top:5px; line-height:1.5; }
.rs-r { display:block; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.rs-r:last-child { border-bottom:0; }
.rs-n { display:block; font-size:14.5px; color:var(--ink); font-weight:500; }
.rs-r:hover .rs-n { color:var(--accent); }
.rs-d { display:block; font-size:13px; line-height:1.6; color:var(--muted); margin-top:3px; }
.rs-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:22px; }
.phone .rs-cards { grid-template-columns:1fr; }
.rs-c { border:1px solid var(--line); padding:20px 20px 22px; }
.rs-c:hover { border-color:var(--accent); }
.rs-cn { font-size:21px; line-height:1.15; }
.rs-c .kick { margin:6px 0 10px; color:var(--accent); }
/* ============ 7: hero-less openers ============ */
.ah-band, .ah-bandmap { display:none; }
.frame[data-ahero="band"] .ah-band, .frame[data-ahero="bandmap"] .ah-bandmap { display:block; }
.bandwrap { background:var(--footer); padding:56px 0 60px; }
.phone .bandwrap { padding:30px 0 34px; }
.ah-band h1, .ah-bandmap h1 { font-size:46px; line-height:1.12; color:#fff; margin:14px 0 0;
                              font-weight:var(--dw); max-width:900px; }
.phone .ah-band h1, .phone .ah-bandmap h1 { font-size:28px; }
.ah-band .artsub, .ah-bandmap .artsub { color:rgba(255,255,255,.8); margin-left:0; }
.bm-map { margin:30px auto 6px; }
.bm-map svg { width:100%; height:auto; display:block; }
.frame[data-ahero="band"] .artbody, .frame[data-ahero="bandmap"] .artbody { padding-top:40px; }
/* the crop box a lone image can carry, straight off the author's own markup */
.one-shot.cropped, .day-shot.cropped { max-width:none; }
.cropped .fr { position:relative; overflow:hidden; border-radius:2px; }
.cropped .fr img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
                   display:block; }
.phone .one-shot.cropped, .phone .day-shot.cropped { width:100%; max-width:none; margin:.15rem 0 .5rem; }
.phone .cropped .fr { border-radius:0; }
/* ============ ABOUT: one width all the way down ============ */
.ab-page { padding-top:56px; }
.ab-hero { display:grid; grid-template-columns:380px minmax(0,1fr); gap:56px; align-items:stretch; }
.phone .ab-hero { grid-template-columns:1fr; gap:24px; }
.ab-port { overflow:hidden; }
.ab-port img { width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block; }
.ab-lead { display:flex; flex-direction:column; }
.ab-h1 { font-size:46px; line-height:1.08; margin:0 0 20px; }
.ab-h1 em { font-style:italic; color:var(--accent); }
.phone .ab-h1 { font-size:32px; }
/* the counts sit at the foot of the column, level with the base of the photo, no rule */
.ab-stats { margin-top:auto; padding-top:30px; border-top:0; display:flex; gap:0; }
.ab-stats .ab-s { flex:1; border-left:1px solid var(--line-soft); padding-left:22px; }
.ab-stats .ab-s:first-child { border-left:0; padding-left:0; }
.phone .ab-stats { padding-top:22px; }
.ab-body { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:56px;
           align-items:start; margin-top:62px; }
.phone .ab-body { grid-template-columns:1fr; gap:28px; margin-top:34px; }
.ab-main > .h-a { margin:44px 0 18px; }
.ab-main > .h-a:first-child { margin-top:0; }
.ab-main > .copy { margin:0 0 20px; }
.ab-main .pair { width:100%; max-width:none; margin:30px 0 8px; }
.ab-main .pair-cap { text-align:left; margin:0 0 34px; }
.ab-side { position:sticky; top:200px; }
.phone .ab-side { position:static; }
.ab-card { border:1px solid var(--line); padding:22px 24px 8px; }
.ab-card .bx-l { margin-bottom:6px; }
.ab-q { display:block; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.ab-q:last-child { border-bottom:0; }
.ab-q .k { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.ab-q .v2 { font-size:15px; color:var(--muted); margin-top:4px; line-height:1.5; }
/* B, the facts column on the left */
.frame[data-bio="b"] .ab-body { grid-template-columns:320px minmax(0,1fr); }
.frame[data-bio="b"] .ab-side { order:-1; }
/* C, the same box on a tint */
.frame[data-bio="c"] .ab-card { background:var(--tint); border-color:transparent; }
/* D, a full width band under the prose instead of a column */
.frame[data-bio="d"] .ab-body { grid-template-columns:minmax(0,1fr); }
.frame[data-bio="d"] .ab-card { display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 26px; padding:22px 26px 14px; }
.frame[data-bio="d"] .ab-card .bx-l { grid-column:1 / -1; }
.frame[data-bio="d"] .ab-q { border-bottom:0; }
/* ============ MENU: centred map, continents, hover ============ */
.mc-img { display:flex; align-items:center; justify-content:center; }
.mc-img img { width:auto; max-width:100%; max-height:100%; margin:0 auto; }
.cont-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.cont-row a { display:flex; flex-direction:column; align-items:center; gap:7px;
              padding:11px 4px; border:1px solid var(--line); }
.cont-row a:hover { border-color:var(--accent); }
.cont-row img { width:26px; height:26px; object-fit:contain; display:block; opacity:.75; }
.cont-row span { font-size:10px; letter-spacing:.1em; text-transform:uppercase;
                 color:var(--faint); text-align:center; }
.dr-ico { display:flex; align-items:center; gap:16px; }
/* the panel is open on hover, exactly as the live nav behaves */
.hoverable .v-menu { transition:opacity .16s; }
.hoverable:not(:hover) .v-menu { opacity:.35; }
.hoverable .nav-links a[data-go="dest"] { position:relative; }
.hoverable:hover .nav-links a[data-go="dest"]::after { content:""; position:absolute;
  left:0; right:0; bottom:-9px; height:1.5px; background:var(--accent); }
.phone .cont-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
/* ============ NAV BEHAVIOUR over a full bleed hero ============ */
/* the nav is in normal flow now and the hero slides up under it, which is what
   lets it stick. --pin is the prototype toolbar's height, measured at load. */
.navdark { position:relative; z-index:20; }
.hero.over, .chero.over { margin-top:calc(-1 * var(--navh)); }
.navdark.pinned .nav-links a, .navdark.pinned .burger svg { color:var(--ink); stroke:currentColor; }
.navdark.pinned .serif { color:var(--ink) !important; }
/* A, over the photo and pinning to a white bar once the hero is past */
.frame[data-nav="a"] .navdark { position:sticky; top:var(--pin,0px); }
.frame[data-nav="a"] .navdark.pinned { background:var(--ground);
  border-bottom:1px solid var(--line-soft); }
/* B, a solid bar the whole time, so the page matches every other one */
.frame[data-nav="b"] .navdark { position:sticky; top:var(--pin,0px); background:var(--ground);
  border-bottom:1px solid var(--line-soft); }
.frame[data-nav="b"] .navdark .nav-links a { color:var(--muted); }
.frame[data-nav="b"] .navdark .serif { color:var(--ink) !important; }
.frame[data-nav="b"] .hero.over, .frame[data-nav="b"] .chero.over { margin-top:0; }
/* C, over the photo and gone as soon as you scroll, which is today's mockup */
.frame[data-nav="c"] .navdark { position:relative; }
/* D, over the photo, pinning to dark glass */
.frame[data-nav="d"] .navdark { position:sticky; top:var(--pin,0px); }
.frame[data-nav="d"] .navdark.pinned { background:rgba(var(--scrim),.82);
  backdrop-filter:blur(9px); }
.frame[data-nav="d"] .navdark.pinned .nav-links a { color:rgba(255,255,255,.92); }
.frame[data-nav="d"] .navdark.pinned .serif { color:#fff !important; }
/* the bar keeps its height when it pins; shrinking it changed the page height, which bounced the scroll position and made the pin flicker near the top */
.navdark { transition:background .2s, border-color .2s; }
/* ============ map hover: white, boxy, outlined ============ */
/* the live tooltip is a flag and the country name on a dark rounded chip; same
   content, squared off, on white with the outline the rest of the theme uses */
.tip { position:absolute; z-index:3; background:var(--ground); border:1px solid var(--ink);
       border-radius:0; padding:9px 12px 10px; min-width:0; width:max-content;
       box-shadow:2px 2px 0 rgba(var(--scrim),.10); }
.frame[data-pal="ink"] .tip { background:var(--footer); }
.tip .t-h { display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink);
            font-weight:500; line-height:1.2; white-space:nowrap; }
.tip .t-h .fl { width:18px; height:13px; }
.tip .t-m { font-size:10px; letter-spacing:.14em; text-transform:uppercase;
            color:var(--accent); margin-top:6px; }
.tip .t-b { font-size:12.5px; line-height:1.45; color:var(--muted); margin-top:7px;
            max-width:190px; white-space:normal; }
.tip .t-go { display:inline-block; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
             color:var(--ink); border:1px solid var(--ink); padding:4px 9px; margin-top:9px; }
.tip-b { min-width:0; }
/* ============ legend B: centred in the box, square outlined swatches ============ */
.lg-box { position:absolute; z-index:2; display:flex; gap:0; background:var(--ground);
          border:1px solid var(--ink); border-radius:0; padding:0;
          align-items:stretch; text-align:center; }
.lg-box .st { padding:14px 22px 13px; border-left:1px solid var(--line-soft);
              display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lg-box .st:first-child { border-left:0; }
.lg-box .n { font-size:26px; line-height:1; }
.lg-box .l { margin-top:7px; }
.lg-box.bl { left:16px; bottom:16px; }
.lg-box.tr { right:16px; top:16px; }
/* the key swatches take the same square outline as the box */
.sw { width:12px; height:12px; border:1px solid var(--ink); border-radius:0; }
.lg-key { gap:26px; }
/* ============ 2, 3: the nav, thinner, with the green wordmark back ============ */
/* live: padding 1.5rem, logo 1.3rem in #1e4d38. Ours read heavier, so it comes down. */
.frame { --navh:60px; }
.nav { padding:15px 64px; min-height:var(--navh); }
.frame.phone { --navh:52px; }
.phone .nav { padding:12px 20px; min-height:52px; }
.navlight { padding-top:15px; padding-bottom:15px; }
.nav .brandmark, .navlight .serif, .foot .w { font-size:20px; }
/* the wordmark is green everywhere, as it is on the live site */
.navlight .brandmark, .navdark.pinned .brandmark { color:var(--accent) !important; }
.navdark .brandmark { color:#fff; }
.frame[data-nav="b"] .navdark .brandmark { color:var(--accent) !important; }
.nav-links a { font-size:12px; }
.nav-links a .cv { display:inline-block; margin-left:5px; vertical-align:middle; opacity:.65; }
/* ============ 4: body copy sized like the live article ============ */
/* live .article-body p: 1rem, line-height 1.85, weight 350 */
.copy, .b-a li, .b-b .t, .b-c .r { font-size:16px; line-height:1.82; }
.h-a { font-size:25px; padding-bottom:10px; }
.h-b .t, .h-c .t { font-size:25px; }
.artsub { font-size:17px; }
.card-p, .rs-d { font-size:14px; }
/* ============ 5: the route map heading ============ */
.rm-h { font-size:23px; text-align:center; margin:0 0 14px; }
.route-map { margin:38px auto 34px; }
/* ============ 6: the landscape shot, sized like the pairs ============ */
.ls { max-width:576px; }
.one-shot, .day-shot { max-width:400px; }
/* ============ 7: one underline, and the caret the live nav has ============ */
.hoverable:hover .nav-links a[data-go="dest"]::after { content:none; }
/* ============ 8: two menu columns, in the live order ============ */
.mm-cols { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 40px; }
.phone .mm-cols { grid-template-columns:1fr; }
.mm-col.wide { grid-column:span 1; }
.mm-col.wide .lst { column-count:1; }
/* ============ 9: resources with marks and channel previews ============ */
.rs-r.with-mark { display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px;
                  align-items:start; }
.rs-mark { width:34px; height:34px; display:flex; align-items:center; justify-content:center;
           border:1px solid var(--line); font-family:var(--display); font-size:16px;
           color:var(--accent); background:var(--tint); }
.yt-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:22px; }
.phone .yt-grid { grid-template-columns:1fr; }
.yt-c { border:1px solid var(--line); }
.yt-prev { aspect-ratio:16/9; background:var(--tint); display:flex; align-items:center;
           justify-content:center; border-bottom:1px solid var(--line); position:relative; }
.yt-play { width:46px; height:32px; border:1px solid var(--accent); display:flex;
           align-items:center; justify-content:center; }
.yt-play::after { content:""; border-left:9px solid var(--accent);
                  border-top:6px solid transparent; border-bottom:6px solid transparent;
                  margin-left:3px; }
.yt-b { padding:15px 18px 17px; }
.yt-n { font-size:16px; color:var(--ink); font-weight:500; }
.yt-d { font-size:13px; line-height:1.55; color:var(--muted); margin-top:5px; }
/* ============ 10, 11: the about column, boxes down the side ============ */
.ab-body { align-items:start; }
.ab-side { display:flex; flex-direction:column; gap:12px; }
.ab-card.ab-q { border:1px solid var(--line); padding:14px 18px 15px; display:block; }
.frame[data-bio="c"] .ab-card.ab-q { background:var(--tint); border-color:transparent; }
.frame[data-bio="d"] .ab-side { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
                                gap:12px; }
/* C: the hero column's foot lines up with the base of the photograph */
.frame[data-bio="c"] .ab-hero { align-items:stretch; }
.ab-lead { justify-content:flex-start; }
.ab-stats { margin-top:auto; }
/* ============ 12: the hover card points at its country ============ */
.tip { position:absolute; }
.tip::after, .tip::before { content:""; position:absolute; width:0; height:0;
  border-left:7px solid transparent; border-right:7px solid transparent; }
.tip::before { bottom:-8px; left:22px; border-top:8px solid var(--ink); }
.tip::after { bottom:-6.5px; left:22px; border-top:8px solid var(--ground); }
.frame[data-pal="ink"] .tip::after { border-top-color:var(--footer); }
/* ============ 13: the counts, under the map, evenly spaced and smaller ============ */
.lg-box.row { position:static; display:grid;
              grid-template-columns:repeat(3,minmax(0,1fr)); width:100%;
              margin:14px 0 4px; border:1px solid var(--ink); }
.lg-box.row .st { padding:11px 10px 10px; }
.lg-box.row .n { font-size:21px; }
.lg-box.row .l { font-size:9px; letter-spacing:.13em; margin-top:6px; }
.lg-box.row.tight { border:0; border-top:1px solid var(--line); }
.lg-box.row.tight .st { border-left:0; }
.phone .lg-box { display:grid; }
.phone .lg-box.row .n { font-size:18px; }
.phone .lg-box.row .l { font-size:8.5px; letter-spacing:.1em; }
.frame[data-toc="a"] .v-toc[data-v="a"], .frame[data-toc="b"] .v-toc[data-v="b"], .frame[data-toc="c"] .v-toc[data-v="c"], .frame[data-toc="d"] .v-toc[data-v="d"], .frame[data-toc="e"] .v-toc[data-v="e"], .frame[data-toc="f"] .v-toc[data-v="f"], .frame[data-toc="g"] .v-toc[data-v="g"], .frame[data-toc="h"] .v-toc[data-v="h"], .frame[data-toc="i"] .v-toc[data-v="i"], .frame[data-head="a"] .v-head[data-v="a"], .frame[data-head="b"] .v-head[data-v="b"], .frame[data-head="c"] .v-head[data-v="c"], .frame[data-facts="a"] .v-facts[data-v="a"], .frame[data-facts="b"] .v-facts[data-v="b"], .frame[data-facts="c"] .v-facts[data-v="c"], .frame[data-facts="d"] .v-facts[data-v="d"], .frame[data-facts="e"] .v-facts[data-v="e"], .frame[data-facts="f"] .v-facts[data-v="f"], .frame[data-facts="g"] .v-facts[data-v="g"], .frame[data-list="a"] .v-list[data-v="a"], .frame[data-list="b"] .v-list[data-v="b"], .frame[data-list="c"] .v-list[data-v="c"], .frame[data-days="a"] .v-days[data-v="a"], .frame[data-days="b"] .v-days[data-v="b"], .frame[data-table="a"] .v-table[data-v="a"], .frame[data-table="b"] .v-table[data-v="b"], .frame[data-table="c"] .v-table[data-v="c"], .frame[data-table="d"] .v-table[data-v="d"], .frame[data-call="a"] .v-call[data-v="a"], .frame[data-call="b"] .v-call[data-v="b"], .frame[data-call="c"] .v-call[data-v="c"], .frame[data-legend="a"] .v-legend[data-v="a"], .frame[data-legend="b"] .v-legend[data-v="b"], .frame[data-legend="c"] .v-legend[data-v="c"], .frame[data-legend="d"] .v-legend[data-v="d"], .frame[data-legend="e"] .v-legend[data-v="e"], .frame[data-tips="a"] .v-tips[data-v="a"], .frame[data-tips="b"] .v-tips[data-v="b"], .frame[data-tips="c"] .v-tips[data-v="c"], .frame[data-posts="a"] .v-posts[data-v="a"], .frame[data-posts="b"] .v-posts[data-v="b"], .frame[data-posts="c"] .v-posts[data-v="c"], .frame[data-posts="d"] .v-posts[data-v="d"], .frame[data-posts="e"] .v-posts[data-v="e"], .frame[data-posts="f"] .v-posts[data-v="f"], .frame[data-posts="g"] .v-posts[data-v="g"], .frame[data-menu="a"] .v-menu[data-v="a"], .frame[data-menu="b"] .v-menu[data-v="b"], .frame[data-menu="c"] .v-menu[data-v="c"], .frame[data-bio="a"] .v-bio[data-v="a"], .frame[data-bio="b"] .v-bio[data-v="b"], .frame[data-bio="c"] .v-bio[data-v="c"], .frame[data-bio="d"] .v-bio[data-v="d"], .frame[data-bio="e"] .v-bio[data-v="e"] { display:block; }
@media (max-width: 768px) {
.frame { width:390px; }
.pad { padding-left:20px; padding-right:20px; }
.nav { padding:14px 20px; min-height:56px; }
.frame { --navh:56px; }
.nav-links { display:none; }
.burger { display:flex; }
.hero { height:540px; }
.hero-copy { left:20px; right:20px; bottom:62px; width:auto; }
.hero-h { font-size:32px; line-height:1.13; }
.dots { left:20px; bottom:26px; }
.sec { padding-top:42px; }
.sec-head { display:block; margin-bottom:18px; }
.sec-h { font-size:28px; }
.tiles, .tiles.four { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tile .nm { font-size:18px; }
.cards { grid-template-columns:1fr; gap:30px; }
.measure { max-width:none; padding:0 20px; }
.foot { padding:32px 20px; display:block; margin-top:42px; }
.foot .lk { margin-top:14px; gap:18px; }
.ah-banner .band { height:420px; }
.ah-banner .cpy { left:20px; right:20px; bottom:34px; }
.ah-banner h1 { font-size:30px; }
.ah-quiet .cpy { padding:32px 20px 24px; text-align:left; }
.ah-quiet h1 { font-size:31px; }
.frame[data-ahero="split"] .ah-split { grid-template-columns:1fr; min-height:0; }
.frame[data-ahero="split"] .ah-split > .pic { aspect-ratio:3/2; }
.frame[data-ahero="split"] .ah-split .pic { min-height:0; }
.frame .ah-split .txt { padding:30px 20px 26px; }
.frame .ah-split h1 { font-size:30px; }
.artsub { font-size:16px; margin-left:0; }
.comp { padding:32px 20px 0; }
.opts, .opts.two { grid-template-columns:minmax(0,1fr); gap:26px; }
.f-grid { grid-template-columns:1fr; }
.f-list .f-row { grid-template-columns:1fr; gap:4px; }
.d-a .d-row { grid-template-columns:64px minmax(0,1fr); gap:16px; }
.d-a .d-n { font-size:24px; }
.d-a .d-t, .d-b .d-t2 { font-size:18px; }
.about-grid { grid-template-columns:1fr; gap:26px; }
.tb { min-width:480px; }
.toc-d { column-count:1; }
.toc-f .cols { column-count:1; }
.f-icons { grid-template-columns:repeat(2,minmax(0,1fr)); }
.f-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.f-stat:nth-child(3) { border-left:0; }
.f-stat .f-v { font-size:23px; }
.f-rest .r { grid-template-columns:1fr; gap:3px; }
.f-panel { padding:6px 18px 10px; }
.b-cards { grid-template-columns:1fr; }
.bc-tot { font-size:32px; }
.b-led .lr { grid-template-columns:minmax(0,1fr) 84px; gap:4px 12px; }
.b-led .d { grid-column:1; }
.b-led .lh { display:none; }
.hero { height:470px; }
.frame[data-scrim="plate"] .hero-copy { padding:22px; }
.frame[data-scrim="plate"] .hero-copy, .frame[data-scrim="plate"] .ah-banner .cpy { padding:20px 22px 22px; right:20px; max-width:none; }
.frame[data-scrim="under"] .slide img { bottom:150px; }
.frame[data-scrim="under"] .hero-copy { height:150px; padding:18px 20px 0; }
.frame[data-scrim="under"] .hero-h { font-size:25px; }
.frame[data-scrim="under"] .dots { bottom:164px; }
.frame[data-scrim="under"] .ah-banner .band .hp { height:300px; }
.frame[data-scrim="under"] .ah-banner .cpy { padding:22px 20px 0; }
.lg-c { position:static; max-width:none; margin-top:14px; }
.lg-d { gap:26px; }
.lg-d .st .n { font-size:30px; }
.ms { padding:26px 20px 0; }
.megam { grid-template-columns:1fr; gap:26px; padding:22px; }
.mm-cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mm-feat { border-left:0; padding-left:0; border-top:1px solid var(--line-soft); padding-top:22px; }
.ms-two { grid-template-columns:1fr; }
.b-led .lr { grid-template-columns:minmax(0,1fr) 96px; }
.toc-g { grid-template-columns:1fr; }
.toc-g .g { padding:0 0 14px; border-left:0; }
.toc-h { column-count:1; }
.f-lead .f-v { font-size:21px; }
.f-sides { grid-template-columns:1fr; }
.f-boxes { grid-template-columns:repeat(2,minmax(0,1fr)); }
.megab { grid-template-columns:1fr; }
.mm-rail { border-right:0; border-bottom:1px solid var(--line-soft); }
.mm-side { border-left:0; }
.fg { grid-template-columns:repeat(2,minmax(0,1fr)); }
.megac { grid-template-columns:1fr; }
.megac .fg { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pl-r { gap:16px; }
.pl-i { width:118px; }
.pl-t { font-size:17px; }
.px-r { grid-template-columns:1fr; gap:5px; padding:15px 0; }
.px-r .t { font-size:18px; }
.px-r .c { justify-content:flex-start; }
.pg { grid-template-columns:1fr; gap:28px; }
.pd-r { grid-template-columns:1fr; gap:4px; }
.pd-r .k { text-align:left; }
.ab-q { grid-template-columns:1fr; gap:4px; }
.mm-col.wide { grid-column:span 2; }
.toc-sub { font-size:19px; }
.wrow { grid-template-columns:1fr; gap:10px; }
.wc { padding:7px 2px 8px; }
.wc .tc, .wc .tf { font-size:9px; }
.wc .mn { font-size:9px; letter-spacing:.06em; }
.frame { width:100%; }
.pair, .pair.narrow { grid-template-columns:1fr 1fr; width:100%; max-width:none;
               margin-left:0; margin-right:0;
               gap:.15rem; margin-top:.15rem; margin-bottom:.15rem; }
.pair > div { border-radius:0; }
.ls { width:100%; max-width:none; margin-left:0; margin-right:0;
             border-radius:0; margin-bottom:.5rem; margin-top:.15rem; }
.one-shot, .day-shot { width:90%; max-width:90%; }
.tiles, .tiles.four { grid-template-columns:1fr; gap:.85rem; }
.tile { aspect-ratio:1.9/1; }
.tile .lab { left:20px; right:20px; bottom:16px; }
.tile.map-tile { aspect-ratio:1.9/1; }
.mc-img { height:180px; padding:10px 16px; }
.mapcard { margin-bottom:6px; }
.foot-r { text-align:left; margin-top:16px; }
.toc-box { padding:18px 20px 14px; }
.bx-t { font-size:18px; }
.lg-d.mid { gap:26px; }
.pg.ruled .pg-c { border-right:0; padding:24px 0; }
.pg.two { grid-template-columns:1fr; gap:30px; }
.ab-stats.boxed { grid-template-columns:1fr; gap:14px; }
.ab-stats.boxed .ab-s { border-left:0; padding-left:0; }
.ah-none .cpy { padding:26px 20px 22px; }
.ah-none h1 { font-size:28px; }
.lg-box { display:none; }
.tip { display:none; }
.dest-note { text-align:left; margin-top:8px; }
.rs-grid { grid-template-columns:1fr; }
.rs-cards { grid-template-columns:1fr; }
.bandwrap { padding:30px 0 34px; }
.ah-band h1, .ah-bandmap h1 { font-size:28px; }
.one-shot.cropped, .day-shot.cropped { width:100%; max-width:none; margin:.15rem 0 .5rem; }
.cropped .fr { border-radius:0; }
.ab-hero { grid-template-columns:1fr; gap:24px; }
.ab-h1 { font-size:32px; }
.ab-stats { padding-top:22px; }
.ab-body { grid-template-columns:1fr; gap:28px; margin-top:34px; }
.ab-side { position:static; }
.cont-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
.frame { --navh:52px; }
.nav { padding:12px 20px; min-height:52px; }
.mm-cols { grid-template-columns:1fr; }
.yt-grid { grid-template-columns:1fr; }
.lg-box { display:grid; }
.lg-box.row .n { font-size:18px; }
.lg-box.row .l { font-size:8.5px; letter-spacing:.1em; }
.frame { width:100%; }
}

/* ---- de-shelled: the artifact frame becomes the page itself ---- */
.frame { width:100%; max-width:none; box-shadow:none; overflow:visible; background:#fff; }
body.frame { margin:0; }
.mk a, nav a, .foot a { text-decoration:none; }
.mk button { font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  padding:0; }
/* the photo band is dark while the hero image decodes, never a white hole */
.hero { background:#16211B; }
/* the live footer keeps its light links even under .mk a's inherit */
.mk footer a, footer .footer-links a { color: rgba(255,255,255,.82); }
.mk footer .footer-affiliate a { color: rgba(255,255,255,.85); }
/* the artifact nav inside sections is removed; the live fixed nav stands in.
   Exact artifact metrics: */
nav { min-height:60px; height:60px; padding:0 64px !important;
  background:var(--nav-bg); }
nav .nav-logo { font-size:22px; letter-spacing:-.012em; font-weight:300;
  color:#1e4d38 !important; }   /* the artifact's wordmark, to the pixel */
body.gg-home nav:not(.pinned) .nav-logo { color:#fff !important; }
/* the artifact quick facts, boxed */
.ab-quick { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px; border-top:0; }
.ab-quick .ab-q { display:block; border:1px solid var(--line);
  padding:14px 18px 15px; border-bottom:1px solid var(--line); }
nav ul li a, nav > ul a { font-size:12.5px; letter-spacing:.13em; }
@media (max-width:768px) { nav { height:52px; min-height:52px; padding:0 20px !important; } }
/* home: hero starts at the very top, the fixed nav floats over it */
.hero.over { margin-top:0; }
body.gg-home { padding-top:0; }
/* dropdown panel, restyled to the artifact menu */
.nav-dropdown, .nav-dropdown-inner { background:#fff !important; border:1px solid var(--line);
  border-top:0; box-shadow:0 18px 40px rgba(28,40,33,.10) !important; border-radius:0 !important; }
.nav-fn-region, .nav-dropdown-continent { color:var(--accent) !important;
  font:600 10.5px/1.4 var(--body) !important; letter-spacing:.15em !important;
  text-transform:uppercase; }
.nav-dropdown-item { font:400 14px/1.5 var(--body) !important; color:var(--muted) !important; }
.nav-dropdown-item:hover { color:var(--accent) !important; }
.nav-map-card { border:1px solid var(--line) !important; border-radius:0 !important;
  background:var(--tint) !important; }
.nav-map-title { font:500 13px/1.4 var(--body) !important; color:var(--ink) !important; }
/* the artifact panel inside the live dropdown shell */
.nav-dropdown-fn { width:min(1080px, 94vw) !important; padding:0 !important;
  left:50% !important; right:auto !important; transform:translateX(-50%); }
.nav-dropdown-fn .megam { border-top:0; padding:26px 30px 30px; }
.nav-dropdown-fn .mm-col a { color:var(--muted); }
.nav-dropdown-fn .mm-col a:hover { color:var(--accent); }

/* ---- destinations: interactive map in the artifact skin ---- */
#world-map { background:transparent !important; border-radius:0 !important; }
.dest-map-wrap { background:#fff; }
#world-map .gg-mapstats { position:absolute; left:2%; bottom:14%; z-index:5;
  display:flex; background:#fff; border:1px solid var(--ink); }
#world-map .gg-mapstats .st { text-align:center; padding:9px 14px 8px;
  border-left:1px solid var(--line-soft); }
#world-map .gg-mapstats .st:first-child { border-left:0; }
#world-map .gg-mapstats .n { font-family:var(--display); font-weight:300; font-size:19px;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
#world-map .gg-mapstats .l { font-family:var(--body); font-size:8px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); margin-top:5px; }
@media (max-width:768px) { #world-map .gg-mapstats { display:none; } }
.gg-stats { display:none; }          /* the old under-map row is superseded */

/* cards, option B: what the site uses today, in the new type */
.home-dest-card { aspect-ratio:2/3 !important; border-radius:0 !important; }
.dest-overlay { background:linear-gradient(180deg, rgba(18,26,21,.15) 0%,
  rgba(18,26,21,.62) 100%) !important; }
.art-card-info { inset:0 !important; top:0 !important; display:flex !important;
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center !important; padding:0 1rem !important; }
.art-card-name { font-family:var(--body) !important; font-size:15px !important;
  font-weight:500 !important; letter-spacing:.15em !important; text-transform:uppercase;
  color:#fff; margin:0 !important; text-shadow:none !important; }
.art-card-btn { display:inline-block !important; font-family:var(--body) !important;
  font-size:10.5px !important; letter-spacing:.14em !important; text-transform:uppercase;
  color:#fff !important; border:1px solid rgba(255,255,255,.7) !important;
  padding:7px 15px !important; background:transparent !important; }
.art-card-badge { border-radius:0 !important; }
@media (max-width:768px) { .home-dest-card { aspect-ratio:1.9/1 !important; } }

/* ---- home bio strip ---- */
.gg-bio { padding-bottom:88px; }
.gg-bio .bio-grid { display:grid; grid-template-columns:340px minmax(0,1fr);
  gap:52px; align-items:center; }
.gg-bio .bio-port { aspect-ratio:3/4; overflow:hidden; }
.gg-bio .bio-port img { width:100%; height:100%; object-fit:cover;
  object-position:50% 30%; display:block; }
.gg-bio .bio-h { font-size:40px; font-weight:300; letter-spacing:-.02em;
  margin:0 0 18px; color:var(--ink); }
.gg-bio .bio-h em { font-style:italic; color:var(--accent); }
.gg-bio .more { margin-top:8px; display:inline-block; }
@media (max-width:768px) { .gg-bio .bio-grid { grid-template-columns:1fr; gap:22px; } }
/* the green footer sits flush against the page */
footer { margin-top:0 !important; }
/* hero dots readable on any photo */
.dots button { background:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(18,26,21,.25); }
.dots button[aria-current="true"] { background:#fff; }
/* the circular in-depth marker comes back */
.gdot { border-radius:50% !important; }
.art-card-badge { border-radius:999px !important; }
/* tooltip text, belt and braces */
#world-map [role="tooltip"] div, #world-map foreignObject div { color:#1C2821 !important; }
/* a hairline box around the interactive map */
#world-map { border:1px solid var(--b-medium) !important; }
/* second tile row is desktop only */
@media (max-width:768px) { .tiles.row2 { display:none; } }
.tiles.row2 { margin-top:14px; }
/* the old explore-the-map card: dark tile with the map preview */
.tile.map-old { background:var(--footer); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:20px; }
.tile.map-old img { position:static; width:86%; height:auto; object-fit:contain; }
.tile.map-old .nm { color:#fff; }
/* about: prose left, quick boxes right */
.gg-ab2 { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px;
  align-items:start; max-width:1180px; margin:0 auto; padding:28px 64px 20px; }
.gg-ab2 > .main .measure { max-width:none; margin:0 0 6px; }
.gg-ab2 .ab-side2 { position:sticky; top:84px; display:flex; flex-direction:column;
  gap:10px; }
.gg-ab2 .ab-side2 .ab-q { display:block; border:1px solid var(--line);
  padding:13px 16px 14px; }
@media (max-width:900px) {
  .gg-ab2 { grid-template-columns:1fr; padding:20px 20px 8px; }
  .gg-ab2 .ab-side2 { position:static; }
}
/* dropdown: fits the viewport, tight, two columns in the live order */
.nav-dropdown-fn { max-height:calc(100vh - 72px); overflow-y:auto; }
.nav-dropdown-fn .megam { padding:22px 26px 26px; gap:32px;
  grid-template-columns:minmax(0,1fr) 300px; }
.nav-dropdown-fn .mm-cols { grid-template-columns:1fr 1fr !important; gap:6px 30px; }
.nav-dropdown-fn .mm-col.wide { grid-column:auto !important; }
.nav-dropdown-fn .mm-col.wide .lst { column-count:1 !important; }
.nav-dropdown-fn .mm-col a { padding:3.5px 0; font-size:13.5px; }
.nav-dropdown-fn .mm-h { margin:14px 0 7px; }
.nav-dropdown-fn .mm-col .mm-h:first-child { margin-top:0; }
/* continents row: plain links like the live nav, no boxes anywhere */
.cont-row { display:flex; flex-wrap:wrap; gap:4px 16px; }
.cont-row a { border:0 !important; padding:3px 0; flex-direction:row; gap:7px;
  align-items:center; }
.cont-row img { width:19px; height:19px; }
/* dropdown items are sentence case like the artifact; only region heads shout */
.nav-dropdown-fn .mm-col a { text-transform:none !important; letter-spacing:.01em !important;
  font-size:13.5px !important; color:var(--muted) !important; }
.nav-dropdown-fn .mm-col a:hover { color:var(--accent) !important; }
.nav-dropdown-fn .mm-h { text-transform:uppercase; }
/* 4 -- the country hero honours its own 520px, not the live min-height */
.frame .hero { min-height:0 !important; }

/* 8 -- filter pills, artifact weight */
.filter-label { display:none; }
.filter-btn { padding:.4rem .85rem !important; font-size:.58rem !important;
  color:rgba(28,40,33,.72) !important; }
.filter-btn.active { background:var(--accent) !important; border-color:var(--accent) !important;
  color:#fff !important; }

/* 6 -- the stats strip the phone sees, under the map */
.gg-mapstats-m { display:none; }
@media (max-width:768px) {
  .gg-mapstats-m { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    border:1px solid var(--ink); margin:1rem 1.25rem 0; }
  .gg-mapstats-m .st { text-align:center; padding:.6rem .4rem .55rem;
    border-left:1px solid var(--b-subtle); }
  .gg-mapstats-m .st:first-child { border-left:0; }
  .gg-mapstats-m .n { font-family:var(--display); font-weight:300; font-size:1.15rem;
    line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
  .gg-mapstats-m .l { font-family:var(--body); font-size:.5rem; letter-spacing:.13em;
    text-transform:uppercase; color:var(--faint); margin-top:.35rem; }
}

/* 2 + 7 -- on the phone the tiles are the artifact's compact landscape cards */
@media (max-width:768px) {
  .home-dest-card, .tiles .tile { aspect-ratio:1.9/1 !important; }
  .art-card-info { inset:auto 0 0 0 !important; top:auto !important;
    display:block !important; text-align:left !important;
    padding:0 1.15rem .9rem !important; }
  .art-card-name { font-size:1.05rem !important; font-weight:500 !important;
    letter-spacing:.01em !important; text-transform:none !important;
    margin:0 0 .2rem !important; }
  .art-card-btn { border:0 !important; padding:0 !important;
    background:transparent !important; font-size:.55rem !important;
    letter-spacing:.14em !important; color:rgba(255,255,255,.74) !important; }
  .dest-overlay { background:linear-gradient(180deg, rgba(18,26,21,0) 42%,
    rgba(18,26,21,.76) 100%) !important; }
  /* the old map card is a desktop-only choice; the phone keeps the compact tile */
  .tile.map-old { aspect-ratio:1.9/1; padding:0; justify-content:flex-end;
    align-items:flex-start; }
  .tile.map-old img { display:none; }
  .tile.map-old .nm { padding:0 1.15rem .9rem; font-size:1.05rem; }
  /* the home tiles carry the artifact's own classes, and option B styles them
     centred on desktop; the phone takes the compact bottom-left label instead */
  .frame[data-cards="b"] .tile .lab, .tile .lab {
    inset:auto 0 0 0 !important; top:auto !important; display:block !important;
    text-align:left !important; padding:0 1.15rem .9rem !important; }
  .frame[data-cards="b"] .tile .nm, .tile .nm {
    font-family:var(--body) !important; font-size:1.05rem !important;
    font-weight:500 !important; letter-spacing:.01em !important;
    text-transform:none !important; margin:0 0 .2rem !important;
    text-align:left !important; }
  .frame[data-cards="b"] .tile .sub, .tile .sub { display:block !important;
    font-size:.55rem !important; letter-spacing:.14em !important;
    color:rgba(255,255,255,.74) !important; }
  .frame[data-cards="b"] .tile .rn, .tile .rn { display:none !important; }
  .tile .veil { background:linear-gradient(180deg, rgba(18,26,21,0) 42%,
    rgba(18,26,21,.76) 100%) !important; }
  /* 3 -- photo pairs run edge to edge on the phone */
  .pair, .artbody .pair, .gg-ab2 .pair {
    /* full bleed by NEGATIVE MARGIN, not 100vw. On iOS 100vw can be wider than
       the visual viewport, and this rule also pulled left while pinning
       margin-right:0, so the box could only ever spill to the RIGHT -- which
       is exactly the clipped body text on the about page. A negative margin
       equal to the container's own gutter lands on the screen edge by
       construction and cannot exceed it. */
    width:auto !important; max-width:none !important;
    margin-left:calc(-1 * var(--bleed, 24px)) !important;
    margin-right:calc(-1 * var(--bleed, 24px)) !important;
    grid-template-columns:1fr 1fr !important; gap:2px !important; }
  /* 23 -- one consistent gutter down the about page */
  .gg-ab2 { padding-left:1.25rem !important; padding-right:1.25rem !important; }
  .gg-ab2 .main .measure, .gg-ab2 .main .pad { padding-left:0 !important;
    padding-right:0 !important; }
}

/* resources logos */
.rs-mark { background:#fff; }
.rs-mark img { width:100%; height:100%; object-fit:contain; display:block; }

/* ---- the artifact tokens live on :root too, so pages that were not
   transplanted (destinations, field notes) can still resolve them.
   Without this, var(--accent) was undefined there and text rendered white
   on white: the missing ALL button and FILTER BY label. ---- */
:root {
  --ground:#FFFFFF; --ink:#1C2821; --accent:#2D6B50; --footer:#1C2821;
  --scrim:18,26,21; --line:rgba(28,40,33,.14); --line-soft:rgba(28,40,33,.09);
  --muted:rgba(28,40,33,.86); --faint:rgba(28,40,33,.64);
  --tint:rgba(28,40,33,.035);
  --display:'Newsreader',Georgia,serif;
  --body:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif;
  --dw:300; --dls:-.012em;
}

/* ---- the white nav text belongs to the top level links only. It was
   cascading into the dropdown panel and making its titles white on white. ---- */
body.gg-home nav > ul > li > a,
body.gg-home nav > ul > li > .nav-dropdown-trigger { color:rgba(255,255,255,.92); }
body.gg-home nav.pinned > ul > li > a,
body.gg-home nav.pinned > ul > li > .nav-dropdown-trigger { color:var(--ink); }
.nav-dropdown, .nav-dropdown * { color:var(--muted); }
.nav-dropdown .mm-ft, .nav-dropdown .rrow-name, .nav-dropdown .nav-map-title,
.nav-dropdown .country-name { color:var(--ink) !important; }
.nav-dropdown .kick, .nav-dropdown .mm-h { color:var(--accent) !important; }

/* ---- nav dropdown: no gap under the bar, no dead space on the right ---- */
.nav-dropdown-fn { top:100% !important; margin-top:0 !important;
  width:min(940px, 94vw) !important; }
.nav-dropdown-fn .megam { grid-template-columns:minmax(0,1fr) 268px !important;
  gap:26px !important; padding:20px 24px 24px !important; }
.nav-dropdown-fn .mm-cols { gap:4px 22px !important; }
.nav-dropdown-fn .mm-col a { padding:2px 0 !important; font-size:13px !important; }
/* 600, not 700: fonts.css ships Hanken Grotesk at 300/400/500/600, so a 700
   here is SYNTHESISED by the browser -- a smeared fake bold beside the real
   faces everywhere else. Every weight the theme names has to be one that is
   actually declared. */
.nav-dropdown-fn .mm-h { margin:12px 0 5px !important; color:var(--ink) !important;
  font-weight:600 !important; letter-spacing:.12em !important; }
.nav-dropdown-fn .mm-col .mm-h:first-child { margin-top:0 !important; }
.nav-dropdown-fn .fl { width:15px; height:11px; }

/* ---- home ---- */
.hero { height:680px !important; }
@media (max-width:768px) { .hero { height:470px !important; } }
/* the dispatches band gets the theme's own light ground for separation */
.gg-dispatch { background:#F5F5F2; padding-top:5.2rem !important;
  padding-bottom:5.2rem !important; margin-top:1rem; }
/* the live img-* classes carry their own background-position (80%, 90%,
   70% ...); overriding it to centre re-cropped every card */
.gg-dispatch .card-img { background-size:cover; }
/* live photo classes need a box to paint into */
.cards .card-img.bg { aspect-ratio:3/2; display:block; }
.gg-bio .bio-txt .copy { max-width:52ch; }
.gg-bio .bio-grid { gap:64px; }
.gg-morelink { display:inline-block; margin-top:1.6rem; }
/* the map card is the live site's own photo card, so it needs no chrome of
   its own; it is a tile like the nine countries beside it */
.tile.map-live .nm em { font-style:italic; }

/* ---- destinations ---- */
#world-map { border:0 !important; }
.legend-dot, .map-legend span[style*="border-radius"], .map-legend i,
.dest-legend span, [class*="legend"] .dot, .sw {
  border:0 !important; border-radius:0 !important; }
.filter-label { display:inline !important; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(28,40,33,.55); }
.filter-btn { color:rgba(28,40,33,.72) !important; }
.filter-btn.active { background:#2D6B50 !important; border-color:#2D6B50 !important;
  color:#fff !important; }

/* ---- resources: the live rows, themed. No boxes around any media. ---- */
.grp { border:1px solid var(--line); padding:24px 26px 10px; background:transparent; }
.blk-wrap { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
@media (max-width:900px) { .blk-wrap { grid-template-columns:1fr; } }
.grp-kicker { font-family:var(--body); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 6px; }
.grp-name { font-family:var(--display); font-weight:300; font-size:1.5rem;
  letter-spacing:-.012em; margin:0 0 6px; color:var(--ink); }
.grp-name em { font-style:italic; color:var(--accent); }
.grp-intro { font-family:var(--body); font-size:.82rem; line-height:1.55;
  color:var(--faint); margin:0 0 14px; padding-bottom:14px;
  border-bottom:1px solid var(--line-soft); }
.rrow { display:grid; grid-template-columns:var(--media,56px) minmax(0,1fr);
  gap:16px; align-items:center; padding:13px 0;
  border-bottom:1px solid var(--line-soft); }
.rrow:last-child { border-bottom:0; }
.rrow-name { font-family:var(--body); font-size:.95rem; font-weight:500;
  color:var(--ink); }
.rrow:hover .rrow-name { color:var(--accent); }
.rrow-desc { font-family:var(--body); font-size:.82rem; line-height:1.6;
  color:var(--muted); margin:3px 0 0; }
.rrow-tag { font-family:var(--body); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-left:6px; }
/* every logo, screenshot and avatar loses its frame */
.ktile, .fav-tile, .thumb, .avatar-circle {
  border:0 !important; background:transparent !important; box-shadow:none !important;
  padding:0 !important; }
.ktile img, .fav-tile img { width:100%; height:auto; object-fit:contain; display:block; }
.thumb-bar { display:none !important; }
.thumb img, .thumb-body img { width:100%; height:auto; display:block;
  border:1px solid var(--line-soft); }
.avatar-circle { width:var(--media,68px); height:var(--media,68px); overflow:hidden; }
.avatar-circle img { width:100%; height:100%; object-fit:cover; display:block;
  border-radius:50% !important; }

/* ---- about: the prose column sits on the theme's light ground, the fact
   boxes share one height, and a second photo pair mirrors "How this started" ---- */
.gg-ab2 { background:#F5F5F2; padding-top:44px !important; padding-bottom:44px !important;
  max-width:none; }
.gg-ab2 > .main { max-width:760px; margin-left:0; }
/* the quick facts are even with each other but sized to what they hold, rather
   than stretched to the height of the essay beside them */
.gg-ab2 .ab-side2 { align-self:start; }
.gg-ab2 .ab-side2 .ab-q { flex:0 0 auto; display:flex; flex-direction:column;
  justify-content:center; background:#fff; min-height:150px;
  padding:18px 20px !important; }
.gg-ph { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:1.8rem 0 .5rem; }
.gg-ph div { aspect-ratio:3/2; overflow:hidden; background:#E6E6E1;
  display:flex; align-items:center; justify-content:center; }
.gg-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.gg-ph .ph-empty { font-family:var(--body); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(28,40,33,.42); }
.gg-ph-cap { font-family:var(--body); font-size:.62rem; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(28,40,33,.5); margin:0 0 1.6rem; }
@media (max-width:900px) { .gg-ab2 > .main { max-width:none; } }

/* ---- the dropdown's right column, live markup in the new theme ---- */
.mm-side-live { border-left:1px solid var(--line-soft); padding-left:24px; }
.mm-side-live .nav-map-card { display:block; border:1px solid var(--line) !important;
  background:var(--tint) !important; padding:12px 14px; text-decoration:none; }
.mm-side-live .nav-map-card:hover { border-color:var(--accent) !important; }
.mm-side-live .nav-map-title { display:block; font-family:var(--body) !important;
  font-size:12.5px !important; font-weight:500; color:var(--ink) !important;
  margin-bottom:9px; letter-spacing:.01em; }
.mm-side-live .nav-map-thumb { width:100%; height:auto; display:block; }
.mm-side-live .nav-dropdown-continent { display:flex; align-items:center; gap:9px;
  font-family:var(--body) !important; font-size:13px !important; font-weight:400 !important;
  letter-spacing:.01em !important; text-transform:none !important;
  color:var(--muted) !important; padding:4px 0; text-decoration:none; }
.mm-side-live .nav-dropdown-continent:hover { color:var(--accent) !important; }
.mm-side-live .nav-dropdown-continent img { width:19px; height:19px; opacity:.75; }
.mm-side-live .nav-guides-legend, .mm-side-live .nav-dropdown-all {
  font-family:var(--body) !important; font-size:11px !important; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent) !important; display:inline-block;
  margin-top:10px; text-decoration:none; }

/* ---- legend B: a band under the map, not a caption floating above it ---- */
.map-legend { display:flex !important; justify-content:center; align-items:center;
  gap:2.4rem; flex-wrap:wrap; margin:0 !important;
  border:1px solid var(--line); border-top:0; padding:20px 24px; }
.map-legend .legend-item { font-family:var(--body) !important; font-size:.62rem !important;
  letter-spacing:.15em !important; text-transform:uppercase;
  color:var(--muted) !important; }
.map-legend .legend-dot { border:0 !important; border-radius:50%; }
#world-map { border:1px solid var(--line); border-radius:0 !important; }
/* amCharts ships unstyled grey zoom buttons; the map pans and zooms by gesture */
#world-map .amcharts-ZoomControl, #world-map g[aria-labelledby*="Zoom"] {
  display:none !important; }

/* ---- the footer: styles.css dims these with opacity, and the theme only
       changed colour, so the two multiplied into 1.2:1 text ---- */
footer .footer-logo, footer .footer-tagline, footer .footer-copy,
footer .footer-links a, footer .footer-affiliate, footer .footer-right,
footer .footer-left { opacity:1 !important; }
footer .footer-logo { color:rgba(255,255,255,.92) !important; }
footer .footer-tagline { color:rgba(255,255,255,.62) !important; }
footer .footer-links a { color:rgba(255,255,255,.78) !important; }
footer .footer-links a:hover { color:#fff !important; }
footer .footer-copy, footer .footer-affiliate {
  color:rgba(255,255,255,.58) !important; }

/* the same opacity leak dims these to the point of vanishing */
nav > ul > li > a { opacity:1 !important; }
.filter-btn, .contact-label, .privacy-lede, .nav-hamburger span {
  opacity:1 !important; }

/* ---- the resources page: the group label was absolutely positioned for the
       live two-column layout and now lands on top of its first row ---- */
.grp-head { position:static !important; width:auto !important;
  top:auto !important; left:auto !important; margin-bottom:18px !important; }
.grp:first-of-type .grp-head { top:auto !important; }
.grp { padding-top:26px !important; }

/* ---- page titles run at the display face's own weight. Scoped to the page
       title itself: a blanket .gg-art h1 also caught the hero headline, which
       shrank whichever slide carried the <h1> from 58px to 44px ---- */
.page-title, h1.page-title, h1.sec-h, .gg-about-h {
  font-weight:300 !important; letter-spacing:-.02em; line-height:1.08; }
.page-title, h1.page-title { font-size:2.75rem !important; }
h1.hero-h { margin:0; }   /* it takes its size from .hero-h, like its siblings */

/* ---- the home nav floats over a five-slide carousel, so "white" is only
       legible on the slides that happen to be dark. Measured over the bright
       ones the hamburger came in at 2.07:1 and the search at 2.84:1, and the
       hamburger is the only way into the menu on a phone. A soft scrim on the
       bar itself lifts the whole set (wordmark, links, both glyphs) on every
       slide, and costs nothing on the dark ones. ---- */
body.gg-home nav:not(.pinned) {
  background-color:transparent !important; background-image:none !important; }
/* The scrim CANNOT be the bar's own background: a 60px box has to finish its
   fade at 60px, and that hard stop read as a black line ruled across the
   photograph. It is a pseudo-element that outlives the bar, fading over 150px
   so there is no edge to see. */
body.gg-home nav:not(.pinned)::after {
  content:''; position:absolute; left:0; right:0; top:0; height:150px;
  z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,26,21,.62) 0%,
    rgba(18,26,21,.42) 26%, rgba(18,26,21,.22) 52%,
    rgba(18,26,21,.08) 76%, rgba(18,26,21,0) 100%); }
body.gg-home nav:not(.pinned) { border-bottom-color:transparent !important; }
/* a second layer for the glyphs themselves, which are thin strokes */
body.gg-home nav:not(.pinned) .nav-hamburger span,
body.gg-home nav:not(.pinned) .nav-search-btn svg,
body.gg-home nav:not(.pinned) .nav-search-icon,
body.gg-home nav:not(.pinned) .nav-logo {
  filter:drop-shadow(0 1px 2px rgba(12,18,14,.55)); }

/* ---- over the hero photograph the burger and the search have to be white ---- */
/* the burger is three filled bars, so it takes a background; the magnifier is
   a stroked glyph, so filling its box white swallowed it */
body.gg-home nav:not(.pinned) .nav-hamburger span {
  background:#fff !important; }
body.gg-home nav:not(.pinned) .nav-search-btn,
body.gg-home nav:not(.pinned) .nav-search-btn svg,
body.gg-home nav:not(.pinned) .nav-search-icon {
  background:transparent !important; color:#fff !important; stroke:#fff !important; }
/* the burger's hit area used to reach 10px left, straight over the search
   button; it grows everywhere except toward its neighbour, and the search
   sits above it either way */
.nav-hamburger { padding:10px 10px 10px 0 !important;
  margin:-10px -10px -10px 0 !important; }
.nav-search, .nav-search-btn { position:relative; z-index:210; }
/* the field is .nav-search-q, so the earlier rule never reached it */
.nav-search-q { color:var(--ink) !important; }
body.gg-home nav:not(.pinned) .nav-search-q { color:#fff !important; }
body.gg-home nav:not(.pinned) .nav-search-q::placeholder {
  color:rgba(255,255,255,.7) !important; }

/* ---- a lead-in inside prose is body copy at 600, never its own size. One
       <b> on santa-ana carries an inline font-size:1.2rem (a Google Docs paste
       artifact of the kind fix_paste_styles.py strips), which made it the only
       19.2px lead-in among 2195 at 16px. A stylesheet !important beats a plain
       inline declaration, so this holds without editing the live file. ---- */
.article-body p b, .article-body p strong, .article-body li b,
.article-body li strong, .artbody p b, .artbody p strong,
.fn-section p b, .fn-section p strong, .fn-section li b {
  font-size:inherit !important; }

/* ---- resources: the section h2 came in at 2.6rem/400 against a 44px/300 h1,
       so the subordinate heading was both nearly the same size and visibly
       heavier than the title above it. It drops a step and matches the page
       title's weight. ---- */
.rbh-title { font-size:34px !important; font-weight:300 !important;
  letter-spacing:-.014em !important; }

/* 44px is the page-title size on the other six pages that have one; about was
   the only 42 */
.gg-about-h { font-size:44px; line-height:1.16; margin:0 0 22px;
  font-weight:300; letter-spacing:-.02em; }

/* ---- the portrait ended on the exact pixel the tint band began, which read
       as a clipped photo ---- */
.gg-bio { padding-bottom:5.5rem !important; }
.gg-bio + .gg-ab2, .gg-ab2 { margin-top:0; }

/* ---- the intro was set straight over the country silhouette at full
       strength; the shape is a watermark, so it reads as one ---- */
.country-hero-map, .fn-hero-map, .country-hero-shape, .fn-hero-shape {
  opacity:.14 !important; }
.country-breadcrumb, .country-hero-title, .country-hero-desc,
.country-places-row { position:relative; z-index:2; }

/* ---- the country hero was a fixed 700px block holding 546px of content,
       so it ended in 154px of bare green; both types now size to what they
       hold, with the field notes hero's own rhythm ---- */
.country-hero { min-height:0 !important; padding-top:128px !important;
  padding-bottom:72px !important; }
.fn-hero { min-height:0 !important; }
@media (max-width:768px) {
  .country-hero { padding-top:88px !important; padding-bottom:48px !important; }
}

/* ---- the two country page types shared no title scale: 144px against
       67px ---- */
.country-hero-title, .fn-hero-title { font-size:3.6rem !important;
  font-weight:300 !important; letter-spacing:-.02em; line-height:1.06; }
@media (max-width:768px) {
  .country-hero-title, .fn-hero-title { font-size:2.3rem !important; }
}

/* ---- one primary button fill across the site ---- */
.contact-submit, .newsletter-submit, .form-submit {
  background:var(--accent) !important; border-color:var(--accent) !important;
  color:#fff !important; }
.contact-submit:hover, .newsletter-submit:hover, .form-submit:hover {
  background:#1e4d38 !important; }

/* ---- the country page's guides needed a heading and a grid that fits ---- */
/* the live page runs four across; three made every card half again as big */
.country-articles-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:1.5rem !important; }
@media (max-width:1100px) {
  .country-articles-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:768px) {
  .country-articles-grid { grid-template-columns:1fr !important; }
}

/* ---- one page-title scale, one primary button ---- */
.nf-btn-primary, .btn-primary, .newsletter-btn, .cta-btn {
  background:var(--accent) !important; color:#fff !important;
  border-color:var(--accent) !important; }

/* ---- resources ---- */
.grp-head, .grp-head::after { width:auto !important; }
/* every group is a card, so every one keeps all four edges: the live rule
   dropped the top border on the first of each column */
.grp, .grp:first-of-type { border:1px solid var(--line) !important;
  padding:26px 26px 14px !important; min-height:0 !important; }

/* the logos were blown up past their own resolution, which is what made them
   soft; the tile is smaller now and nothing scales beyond 1:1 */
.ktile, .fav-tile { width:40px !important; height:40px !important; }
.ktile img, .fav-tile img { max-width:100% !important; max-height:100% !important;
  width:auto !important; height:auto !important; object-fit:contain; }

/* the head had two rules under it: the intro's own short one and the box's
   full-width one. The short one goes. */
.grp-intro { border-bottom:0 !important; padding-bottom:0 !important; }

/* several logo PNGs carry a baked-in white plate, which showed as a white
   square the moment the row took a hover tint; multiply drops it out */
.ktile img, .fav-tile img { mix-blend-mode:multiply; background:transparent !important; }
.avatar-circle img { mix-blend-mode:normal; }

/* the section marks run in the site's green rather than as colour emoji */
.grp-kicker { color:var(--accent) !important; }
.grp-kicker .gg-mark { filter:grayscale(1) sepia(1) hue-rotate(96deg)
  saturate(2.6) brightness(.55); font-size:12px; line-height:1; }

/* both columns keep the same rhythm, so the two sides line up row for row */
.blk-wrap { align-items:stretch !important; gap:1.5rem !important; }
.grp .rrow { padding:13px 0 !important; }
/* the two intros reserve the same two lines, so the rows beside each other
   start on the same baseline */
.grp .grp-intro { min-height:56px; margin-bottom:0 !important; }
.grp .grp-head { padding-bottom:14px !important;
  border-bottom:1px solid var(--line-soft); margin-bottom:4px; }

/* the shorter of two boxes sizes to its content instead of stretching */
.grp.gg-fit { align-self:start !important; }



/* ---- styles.css dims 40-odd text elements with opacity, which multiplied
       with the theme's colours into unreadable text. Reset it and let colour
       carry the tone. ---- */
.privacy-body p, .about-body, .about-intro, .about-body-main p,
.about-sidebar-content, .about-stat-label, .about-sig,
.article-breadcrumb, .article-breadcrumb a, .article-breadcrumb span,
.country-breadcrumb, .country-breadcrumb a, .country-breadcrumb span,
.article-lead, .contact-info-value, .contact-label, .continent-count,
.country-fact-label, .country-fact-value, .country-info-body,
.country-places-label, .country-util-text span, .country-util-icon,
.dest-info-count, .dest-trips, .filter-btn, .filter-label,
.form-note, .newsletter-sub, .post-excerpt, .post-meta,
.posts-page-eyebrow, .resource-desc, .resource-tag, .section-link,
.nav-links a, .nav-dropdown-item, .mobile-drawer-footer,
.mobile-nav-continents a.mnc-map, #toc-b .toc-label {
  opacity:1 !important; }
.privacy-body p, .about-body, .about-intro, .about-body-main p,
.country-info-body, .article-lead, .post-excerpt, .resource-desc {
  color:var(--muted) !important; }
.post-meta, .contact-label, .country-fact-label, .about-stat-label,
.posts-page-eyebrow, .form-note, .newsletter-sub, .dest-trips,
.continent-count, .resource-tag { color:var(--faint) !important; }
/* the breadcrumbs sit on the dark hero, so they need the light end */
.article-breadcrumb, .article-breadcrumb a, .article-breadcrumb span,
.country-breadcrumb, .country-breadcrumb a, .country-breadcrumb span {
  color:rgba(255,255,255,.68) !important; }
.article-breadcrumb a:hover, .country-breadcrumb a:hover { color:#fff !important; }
/* they were rendering at 9.28px, below the point where the hinting holds and
   the letterforms picked up subpixel colour fringing on the photograph */
.article-breadcrumb, .country-breadcrumb, .fn-hero .country-breadcrumb {
  font-size:11px !important; letter-spacing:.14em !important; }
.article-breadcrumb a, .article-breadcrumb span,
.country-breadcrumb a, .country-breadcrumb span {
  font-size:11px !important; }

/* ---- the drawer covers the nav, so the burger's bars have to turn back to
       ink once it is open, whatever the nav is sitting over ---- */
/* specific enough to beat the over-the-hero rule that turns them white */
body.gg-drawer-open nav .nav-hamburger span,
body.gg-home.gg-drawer-open nav:not(.pinned) .nav-hamburger span {
  background:var(--ink) !important; }
body.gg-drawer-open nav .nav-search-btn svg,
body.gg-home.gg-drawer-open nav:not(.pinned) .nav-search-btn svg,
body.gg-drawer-open nav .nav-search-q {
  color:var(--ink) !important; stroke:var(--ink) !important; }
/* the wordmark was left out of that flip, so on the home page it stayed white
   over the white drawer at 1:1 -- the site's own name, invisible */
body.gg-drawer-open nav .nav-logo,
body.gg-home.gg-drawer-open nav:not(.pinned) .nav-logo {
  color:var(--accent) !important; filter:none !important; }
/* and the bar's over-the-photo scrim has nothing left to sit on. The scrim is
   a ::after with z-index:-1, which sits inside the nav's own fixed stacking
   context and therefore paints ABOVE the forced-white bar: with the drawer
   open it washed 150px of dark green down the top of the white panel. It has
   to be switched off, not just recoloured. */
body.gg-drawer-open nav, body.gg-home.gg-drawer-open nav:not(.pinned) {
  background-image:none !important; background-color:#fff !important; }
body.gg-drawer-open nav::after,
body.gg-home.gg-drawer-open nav:not(.pinned)::after {
  display:none !important; content:none !important; }
body.gg-drawer-open nav .nav-hamburger span,
body.gg-drawer-open nav .nav-search-btn svg {
  filter:none !important; }
/* and it gets a labelled way out, sitting inside the drawer rather than under
   the fixed nav bar that covers the drawer's own top strip */
/* The hamburger itself turns into an X in the bar above, which is how the live
   site closes the drawer and is now a proper glyph rather than the asterisk it
   used to render. The extra CLOSE label sat on the same baseline as "Home" and
   read as part of that row, so the drawer appeared to have two close controls
   and a misaligned first item. The X is the control. */
.mobile-nav-drawer .gg-drawer-close { display:none !important; }
.mobile-nav-drawer .gg-drawer-close--unused { position:absolute; top:64px; right:20px;
  width:auto; height:auto; border:0; background:transparent; cursor:pointer;
  font-family:var(--body); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); z-index:260;
  /* a 30px target was under the 44px a thumb needs */
  min-height:44px; min-width:44px; padding:8px 12px;
  display:flex; align-items:center; justify-content:flex-end; }
.mobile-nav-drawer .gg-drawer-close:hover { color:var(--ink); }

/* ---- the 404: its hero is light now, so the ghost button had to follow, and
       the page has to reach the bottom of the window ---- */
.nf-btn-ghost { color:var(--ink) !important;
  border-color:rgba(28,40,33,.32) !important; background:transparent !important; }
.nf-btn-ghost:hover { border-color:var(--ink) !important;
  background:rgba(28,40,33,.04) !important; }
body.gg-404 { min-height:100vh; display:flex; flex-direction:column; }
body.gg-404 > .page, body.gg-404 > .nf-hero { flex:1 0 auto; display:flex;
  flex-direction:column; justify-content:center; }
body.gg-404 > footer { flex:0 0 auto; }

/* ---- one page-title scale across the site ---- */
.page-title, h1.page-title, .posts-page-title, .privacy-title, .contact-title,
.nf-title, .about-big-title { font-size:2.75rem !important; font-weight:300 !important;
  letter-spacing:-.02em; line-height:1.08; }
/* a group heading cannot outweigh the page's own title */
.rs-blk-h, .blk-h, .privacy-heading, .contact-heading {
  font-size:1.25rem !important; font-weight:400 !important; }

/* ---- the home hero sat on the old 64px gutter ---- */
.hero-text { padding-left:96px !important; padding-right:96px !important; }
@media (max-width:768px) {
  .hero-text { padding-left:24px !important; padding-right:24px !important; }
}

/* ---- every article opens on the same banner hero: left aligned, the
       artifact's proportion and type scale, the soft scrim ---- */
.article-hero.gg-banner { aspect-ratio:1440/560 !important; min-height:420px !important;
  align-items:flex-start !important; justify-content:flex-end !important;
  text-align:left !important; gap:0 !important;
  padding:0 96px 3.4rem !important; }
.article-hero.gg-banner > * { text-align:left !important; align-self:flex-start; }
/* the scrim: the artifact's vertical soft scrim, plus a left wash so the copy
   has a ground even over a mural. The photo is an absolutely positioned <img>
   on some of these pages, so it has to be pushed below the scrim explicitly. */
.article-hero.gg-banner > img { z-index:0 !important; }
.article-hero.gg-banner::before { content:''; position:absolute; inset:0;
  z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,26,21,.62) 0%,
      rgba(18,26,21,.34) 34%, rgba(18,26,21,0) 62%),
    linear-gradient(180deg, rgba(18,26,21,.42) 0%,
      rgba(18,26,21,.10) 40%, rgba(18,26,21,.80) 100%); }
.article-hero.gg-banner > *:not(img) { position:relative; z-index:2; }
.article-hero.gg-banner .article-tag,
.article-hero.gg-banner span[onclick] { background:transparent !important;
  color:rgba(255,255,255,.92) !important; padding:0 !important;
  border-radius:0 !important; font-family:var(--body) !important;
  font-size:.64rem !important; letter-spacing:.18em !important;
  text-transform:uppercase !important; }
.article-hero.gg-banner h1, .article-hero.gg-banner .article-hero-title {
  font-family:var(--display) !important; font-weight:300 !important;
  font-size:clamp(2rem,3.6vw,3.4rem) !important; line-height:1.06 !important;
  letter-spacing:-.018em !important; color:#fff !important;
  max-width:22ch; margin:.8rem 0 0 !important; }
.article-hero.gg-banner .article-hero-sub, .article-hero.gg-banner p {
  font-family:var(--body) !important; font-size:1rem !important;
  color:rgba(255,255,255,.82) !important; max-width:46ch;
  margin:1rem 0 0 !important; }
.article-hero.gg-banner .article-meta, .article-hero.gg-banner .article-hero-meta {
  color:rgba(255,255,255,.85) !important; margin-top:1rem !important; }
@media (max-width:768px) {
  .article-hero.gg-banner { padding:0 24px 2.4rem !important;
    aspect-ratio:auto !important; min-height:360px !important; }
}

/* ---- the home page opens on the photograph, not on a white flash. The
       page-level fade started at opacity 0, so on a cold load the white body
       showed through under the fixed nav before the hero appeared. ---- */
body.gg-home .page, body.gg-home .page.fade-in {
  animation:none !important; opacity:1 !important; transform:none !important; }
/* the dark ground is the hero's alone: on the body it showed through every
   band that paints no background of its own, and the bio went green */
body.gg-home .hero { background:#1B2620; }
body.gg-home, body.gg-home .page { background:#fff; }

/* ---- body copy: bold is emphasis, not a link. Only links are green, and
       they are underlined so they read as links rather than as colour ---- */
.artbody strong, .artbody b, .article-body strong, .article-body b,
.fn-section strong, .fn-section b, .measure strong, .measure b {
  color:var(--ink) !important; font-weight:600; }
/* only links inside running prose are underlined: contents lists, jump chips
   and cards are navigation, and underlining them made the page look busy */
.artbody p a, .artbody li a, .article-body p a, .article-body li a,
.fn-section p a, .fn-section li a, .measure p a, .measure li a {
  color:var(--accent) !important;
  /* the LONGHAND. `text-decoration:underline !important` is a shorthand, so it
     also set text-decoration-color to currentColor at !important priority and
     beat the faint colour declared after it. The underline was therefore
     already full-strength green at rest, and the hover rule below had nothing
     left to deepen: no prose link on any of the 39 articles responded to the
     cursor. */
  text-decoration-line:underline !important;
  text-underline-offset:3px !important;
  text-decoration-thickness:1px !important;
  text-decoration-color:rgba(45,107,80,.42) !important;
  transition:text-decoration-color .15s ease, color .15s ease; }
.artbody p a:hover, .artbody li a:hover, .article-body p a:hover,
.article-body li a:hover, .fn-section p a:hover, .fn-section li a:hover,
.measure p a:hover, .measure li a:hover {
  text-decoration-color:var(--accent) !important;
  text-decoration-thickness:2px !important; }
/* nothing structural carries an underline */
#toc-b a, .article-toc a, .fn-toc a, .toc-g a, .v-toc a,
.country-place-btn, .card-h a, .cards a, .tile a, .gg-notes-cards a,
.rrow, .rrow a, .mm-col a, .nav-dropdown-item, .more, .cta {
  text-decoration:none !important; }

/* ---- <u> is used as a lead-in label ("Authenticity - ..."), not a link, so
       it reads as emphasis in ink rather than as green underlined text ---- */
.artbody u, .article-body u, .fn-section u, .measure u, .v-list u {
  color:var(--ink) !important; font-weight:600; text-decoration:none !important; }
/* The same place link is written two ways across the articles: <b><a>name</a></b>
   and <a><b>name</b></a>. In the second the inner <b> painted the text, so the
   ink rule beat the link colour and half the places came out black. Anything
   inside a link takes the link's colour. */
.artbody a b, .artbody a strong, .artbody a u, .artbody a em,
.article-body a b, .article-body a strong, .article-body a u, .article-body a em,
.fn-section a b, .fn-section a strong, .fn-section a u, .fn-section a em,
.measure a b, .measure a strong, .measure a u, .measure a em {
  color:inherit !important; text-decoration:inherit !important; }

/* ---- the silhouette behind a field-notes header reads at 32% ---- */
.fn-hero-map, .fn-hero-shape { opacity:.32 !important; }

/* ---- callouts run as an accent rule, not a filled box ---- */
.article-tip, .article-callout, .tip-box, .artbody .cal, .v-call .cal {
  background:transparent !important; border:0 !important;
  border-left:2px solid var(--accent) !important;
  border-radius:0 !important; padding:2px 0 2px 22px !important;
  color:var(--muted) !important; margin:22px 0 !important; }

/* ---- the contents box is a plain rule box, no tinted fill ---- */
#toc-b, .article-toc, .fn-toc {
  background:transparent !important; border:1px solid var(--line) !important;
  border-radius:0 !important; padding:24px 28px !important;
  margin:22px 0 30px !important; }
#toc-b .toc-label, .article-toc .toc-label {
  color:var(--accent) !important; opacity:1 !important;
  font-family:var(--body) !important; font-size:10px !important;
  letter-spacing:.16em !important; }
#toc-b .toc-title, .article-toc .toc-title {
  font-family:var(--display) !important; font-weight:300 !important; }
/* .wc, .bc and .f-icons are the artifact's own weather, budget and facts
   cells: their tint encodes the row, so it stays */

/* ---- destinations: the counts read as their own band, clear of the map ---- */
.gg-mapstats { border:1px solid var(--line) !important; margin-top:20px; }
.dest-count-highlight { display:none; }

/* ---- resources: every logo occupies the same square, whatever its own
       resolution, so a 32px mark no longer sits smaller than a 128px one ---- */
.ktile, .fav-tile { width:36px !important; height:36px !important;
  display:flex; align-items:center; justify-content:center; }
.ktile img, .fav-tile img { width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important; object-fit:contain; }

/* ---- the country silhouette reads as a watermark, not a ghost ---- */
/* the country outline is a watermark, but it was so faint on the field-notes
   headers that it read as a smudge */
/* both page types use .country-hero-map, so they move together */
/* Albania's outline fills most of the frame while Denmark's is a few small
   islands, so at 34% the same ground read as two different greens. 26% shows
   on the small shapes without washing out the large ones. */
.country-hero-map, .country-hero-shape,
.fn-hero-map, .fn-hero-shape { opacity:.42 !important; }

/* ---- the country hero stands the same height as an article banner ---- */
.country-hero { min-height:560px !important; display:flex !important;
  flex-direction:column; justify-content:center; }
@media (max-width:768px) {
  .country-hero { min-height:380px !important; }
}

/* ---- an entry's name is written four ways across the articles: <strong>,
       <b>, <u>, or a bare <a> where the place links out, and it opens either a
       list item or its own paragraph. The first three rendered at 600 and the
       link at 400, so names changed weight down the same list. Whatever opens
       an entry is 600; a linked one keeps the green and the underline. ---- */
.artbody li > a:first-child,
.artbody p > a:first-child,
.artbody li > b:first-child,
.artbody p > b:first-child,
.artbody li > strong:first-child,
.artbody p > strong:first-child,
.artbody li > u:first-child,
.artbody p > u:first-child,
.article-body li > a:first-child,
.article-body p > a:first-child,
.article-body li > b:first-child,
.article-body p > b:first-child,
.article-body li > strong:first-child,
.article-body p > strong:first-child,
.article-body li > u:first-child,
.article-body p > u:first-child,
.fn-section li > a:first-child,
.fn-section p > a:first-child,
.fn-section li > b:first-child,
.fn-section p > b:first-child,
.fn-section li > strong:first-child,
.fn-section p > strong:first-child,
.fn-section li > u:first-child,
.fn-section p > u:first-child,
.measure li > a:first-child,
.measure p > a:first-child,
.measure li > b:first-child,
.measure p > b:first-child,
.measure li > strong:first-child,
.measure p > strong:first-child,
.measure li > u:first-child,
.measure p > u:first-child {
  font-weight:600 !important; }
/* body copy is one weight; a handful of runs had drifted to 300 and 700 */
.artbody p, .article-body p, .fn-section p, .measure p,
.artbody li, .article-body li, .fn-section li, .measure li {
  font-weight:400 !important; }

/* ---- the group intro was still 380px wide inside a 558px box, a leftover
       from the live two-column layout, so every one of them wrapped to three
       lines ---- */
.grp-intro { max-width:none !important; width:auto !important; }
.grp .grp-intro { min-height:2.6em; }

/* ---- the top-level nav sits back and steps forward on hover, the way the
       live nav does; the active page stays at full strength ---- */
nav > ul > li > a { color:rgba(28,40,33,.55) !important; transition:color .15s; }
nav > ul > li > a:hover, nav > ul > li > a.active,
nav > ul > li > a[aria-current] { color:var(--ink) !important; }
body.gg-home nav:not(.pinned) > ul > li > a {
  color:rgba(255,255,255,.7) !important; }
body.gg-home nav:not(.pinned) > ul > li > a:hover,
body.gg-home nav:not(.pinned) > ul > li > a.active {
  color:#fff !important; }

/* ---- over the hero the nav's text is white, so the active item's rule has to
       be white too: the green one was invisible against the photograph ---- */
body.gg-home nav:not(.pinned) .nav-links a.active,
body.gg-home nav:not(.pinned) ul li a.active {
  border-bottom-color:rgba(255,255,255,.9) !important; }
body.gg-home nav:not(.pinned) .nav-links a:hover {
  border-bottom-color:rgba(255,255,255,.5); }

/* ---- The search field opens OUTWARD from its glyph and the rest of the nav
       stays where it is and stays visible. Two earlier attempts were wrong:
       laying the field out in the same flex row shoved the whole nav 190px
       left, and fading the links out to make room hid the navigation the
       moment you reached for search. Taking the field out of flow and growing
       it leftwards from the icon does neither. ---- */
nav .nav-search { position:relative; }
nav .nav-search.active {
  position:absolute; right:96px; left:auto; background:transparent;
  z-index:220; }
nav .nav-search.active .nav-search-q {
  width:240px !important; opacity:1 !important;
  transition:width .22s ease, opacity .18s ease; }
/* the links stay put and stay readable */
nav .nav-search.active ~ ul, nav:has(.nav-search.active) > ul {
  opacity:1 !important; pointer-events:auto !important; }
@media (max-width:768px) { nav .nav-search.active { right:24px; } }

/* ---- the in-depth marker is the same dot in both places it appears ---- */
.nav-fulldot, .art-card-badge .dot { width:6px !important; height:6px !important;
  border-radius:50% !important; background:var(--accent) !important; }
.art-card-badge { border-radius:0 !important;
  background:rgba(18,26,21,.55) !important; font-family:var(--body) !important;
  font-size:9px !important; letter-spacing:.13em !important; text-transform:uppercase;
  color:#fff !important; padding:4px 9px !important; }

/* ---- on a phone every article opens on the same hero, at the same height,
       under the same transparent nav ---- */
@media (max-width:768px) {
  .article-hero.gg-banner, .ah-banner {
    min-height:420px !important; height:420px !important; margin-top:0 !important; }
  .article-body, .artbody { padding-left:24px !important; padding-right:24px !important; }
  .artbody > .measure, .article-body > * { padding-left:0 !important;
    padding-right:0 !important; }
}

/* ---- the guide's banner is the same object as .article-hero.gg-banner: the
       photograph runs edge to edge and the COPY carries the 96px gutter. The
       earlier version put the gutter on the section and made .cpy relative,
       which inset the photo and floated the copy 60px up under the nav, so
       the itinerary's headline was clipped off the top of its own hero. ---- */
.ah-banner { padding-left:0 !important; padding-right:0 !important; }
.ah-banner .band { position:relative; }
.ah-banner .cpy { position:absolute !important; left:96px !important;
  right:96px !important; bottom:3.4rem !important; top:auto !important;
  padding-left:0 !important; padding-right:0 !important; z-index:2; }
/* the same left wash the other five guides get, so copy over a bright frame
   keeps a ground to sit on */
.ah-banner .band .veil { background-image:linear-gradient(90deg,
    rgba(18,26,21,.62) 0%, rgba(18,26,21,.34) 34%, rgba(18,26,21,0) 62%),
  linear-gradient(180deg, rgba(18,26,21,.42) 0%,
    rgba(18,26,21,.10) 40%, rgba(18,26,21,.80) 100%) !important; }
@media (max-width:768px) {
  .ah-banner .cpy { left:24px !important; right:24px !important;
    bottom:2.4rem !important; }
}

/* ---- Albania is the only one of the 34 field notes that actually carries a
       <div class="fn-hero-glow">; the other 33 define the rule and never emit
       the div. Its gold radial wash made that one hero read visibly lighter
       than every other country's. ---- */
/* ---- five interactive things had no hover state at all: theme.css defines
       rules for classes the artifact markup does not use, so the wordmark, the
       home section links, the hero dots, the about sidebar links and the
       contact link all sat inert under the cursor. One language for all of
       them: the ink steps to the accent, everything else holds still. ---- */
.more, .section-link, .ab-side2 a, .ab-q a, .contact-info-link,
.nav-logo, .footer-logo, .hero .dots > * {
  transition:color .16s ease, opacity .16s ease, background-color .16s ease; }
.more:hover, .section-link:hover, .ab-side2 a:hover, .ab-q a:hover,
.contact-info-link:hover { color:var(--accent) !important; }
.nav-logo:hover { color:var(--accent) !important; }
body.gg-home nav:not(.pinned) .nav-logo:hover { opacity:.82; }
.footer-logo:hover { color:#fff !important; }
.hero .dots > *:hover { opacity:1; transform:scale(1.25); }

/* the four transplanted pages carry the artifact's shorter stack, which drops
   'Segoe UI'. Same rendered face wherever the webfont loads, different one
   wherever it does not, so both are stated the same way.
   The fix is at the source. The artifact's own `.frame { --body: ... }` sets
   the short stack on <body>, which beats the :root definition by proximity, so
   every rule reading var(--body) on those pages inherits it. Redefining it on
   .frame corrects all of them at once instead of chasing each consumer. */
body.frame, .frame {
  --body:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif; }
nav > ul > li > a, nav > ul > li > .nav-dropdown-trigger,
.contact-input, .nav-search-q, .form-row input {
  font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif !important; }

/* ---- a description under a name, in a row or a card, is body copy and takes
       the sans: .card-p, .f-b and .art-card-name all do. .rrow-desc was the
       one exception, running Newsreader at 13.12px, which made the resources
       rows read as a different species from every other list on the site. ---- */
.rrow-desc { font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif
  !important; font-size:13.5px !important; font-weight:400 !important; }
/* theme.css's display-face block names .rrow-name and .contact-input with
   !important, which put the resources row titles and every form field a
   visitor types into in Newsreader. A field takes the reading face. */
.contact-input, .form-row input, .form-row textarea, .nav-search-q,
input[type=text], input[type=email], textarea {
  font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif
  !important; }

/* ---- privacy ran a 592px column inside a 1248px area, so half the window
       was empty where destinations and resources use the full width ---- */
.privacy-section, .privacy-body { max-width:820px; }
.privacy-section p, .privacy-body p { max-width:none; }

/* ---- the retired faces. The theme's sweep rewrites font-family in the
       markup, but it cannot reach a family set on an SVG container: every
       route map and city map still labelled itself in Montserrat, and the
       titles in Fraunces, on 35 pages. DM Mono was in neither sweep list and
       was setting the guide hero dates and privacy's "Last updated", the only
       monospace in the site's body copy. ---- */
svg, svg text, svg tspan, .itinerary-map, .itinerary-map text,
.route-map text, .cmmap text, .cmkey, .cmkey text, .cmhead,
.cmbase + svg text, .cm-ov, .cm-ov-title, .cm-ov-kick, .cm-ov-hint {
  font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif !important; }
/* the map labels asked for 700, which this family does not ship; 600 is the
   heaviest real face and the synthesised one looked smeared next to it */
svg text[font-weight="700"], svg text[font-weight="bold"], .cmhead,
.cmhead *, .cmkey *, svg .num, svg text tspan {
  font-weight:600 !important; }
/* the map TITLES take the display face, like every other title on the site */
.cmhead .cm-title, .cm-ov-title, .itinerary-map .rm-title {
  font-family:'Newsreader',Georgia,serif !important; }
/* the article date and the privacy stamp are body copy, not code */
.article-meta, .article-hero-meta, .ah .meta, .ah-banner .meta,
.gg-updated, .privacy-updated, .article-date, .kick .date,
/* the hero dates and the privacy stamp carry the family in an inline style on
   an unclassed <div>, out of reach of any class selector */
[style*="DM Mono"], [style*="dm mono"] {
  font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif !important; }

/* ---- one hover language for the cards. A country tile lifted 8px on
       destinations and 6px on the home page; the country guide card and the
       dropdown's map card did not move at all. 6px everywhere. ---- */
.tiles .tile, .home-dest-card, .country-article-card,
.country-articles-grid > a, .nav-map-card {
  transition:transform .22s ease, box-shadow .22s ease !important; }
.tiles .tile:hover, .home-dest-card:hover, .country-article-card:hover,
.country-articles-grid > a:hover, .nav-map-card:hover {
  transform:translateY(-6px) !important; }
/* An article card answers the cursor with the LIFT only. Turning the title
   green on hover made the card read as a link-in-prose, which is the one thing
   the accent is reserved for; the whole card is the target, not the words.
   The country cards sit ON a photograph under a bottom-up scrim, so their
   title is white in BOTH states -- forcing ink here made them unreadable. */
.country-article-card .country-article-card-title,
.country-articles-grid > a .country-article-card-title,
.country-article-card:hover .country-article-card-title,
.country-articles-grid > a:hover .country-article-card-title {
  color:#EDF0EC !important; }
/* the dispatch cards sit on paper, so theirs is ink in both states */
.cards > a .card-h, .cards > a:hover .card-h { color:var(--ink) !important; }
/* the dropdown's map card was completely inert: it is the only tile in the
   panel and gave no sign it was clickable */
.mm-side-live .nav-map-card, .nav-map-card {
  transition:border-color .18s ease, background-color .18s ease,
    transform .22s ease !important; }
.mm-side-live .nav-map-card:hover, .nav-map-card:hover {
  border-color:var(--accent) !important;
  background-color:rgba(45,107,80,.05) !important; }
/* the contents links sat at .86 on the field notes and .85 on the guides */
#toc-b a, #toc-b a.toc-link, .article-toc a, .toc-g a, .fn-toc a, .v-toc a {
  color:rgba(28,40,33,.86) !important; transition:color .15s ease; }
#toc-b a:hover, #toc-b a.toc-link:hover, .article-toc a:hover,
.toc-g a:hover, .fn-toc a:hover, .v-toc a:hover {
  color:var(--accent) !important; }

/* ---- keyboard focus. The build had no :focus rule at all, so tabbing through
       any page showed nothing. Visible only for keyboard users, so a mouse
       click never draws it. ---- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--accent) !important; outline-offset:3px !important;
  border-radius:1px; }
body.gg-home nav:not(.pinned) a:focus-visible,
body.gg-home nav:not(.pinned) button:focus-visible,
.article-hero a:focus-visible, .fn-hero a:focus-visible,
.country-hero a:focus-visible, .tile:focus-visible {
  outline-color:#fff !important; }

/* ---- the home dispatch band: short accented title, sentence beneath it ---- */
.gg-dispatch-sub { font-family:var(--display) !important; font-style:italic;
  font-size:1rem; font-weight:300; color:var(--muted);
  margin:8px 0 22px !important; max-width:52ch; }
.sec-head .serif.sec-h { margin-bottom:0 !important; }

/* ---- the place heading and its "days recommended" chip, at the live site's
       own spacing: 16px below the block and a 10.4px gap above its rule. The
       re-theme had 18/0, which closed the gap under the rule and opened the
       one under the block. ---- */
/* 14px, not 10.4: the badge is a filled block, so its box reaches the padding
   edge and 10.4 left it sitting 2px off the rule. */
.fn-city-hd { margin-bottom:16px !important; padding-bottom:14px !important; }

/* ---- THE SEARCH SURFACE.
       search.js builds its own stylesheet at runtime and injects it into the
       head, so it lands AFTER artifact.css and wins every tie. It also predates
       the re-theme: it asks for Montserrat and for --terra and --gold, two of
       the retired accents. The whole panel therefore kept the old look while
       the page behind it changed. Everything here is !important because of
       that injection order. ---- */
.s-modal {
  border-radius:0 !important; border:1px solid var(--line) !important;
  background:#fff !important;
  box-shadow:0 18px 44px rgba(28,40,33,.14) !important; }
.s-group-h {
  font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif !important;
  font-size:10px !important; letter-spacing:.16em !important;
  color:var(--accent) !important; }
.s-count { color:var(--faint) !important; }
.s-main {
  font-family:var(--display) !important; font-size:15px !important;
  font-weight:500 !important; color:var(--ink) !important;
  letter-spacing:0 !important; }
.s-tag, .s-n {
  font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif !important;
  font-size:.58rem !important; letter-spacing:.13em !important;
  color:var(--accent) !important; border-color:rgba(45,107,80,.35) !important;
  border-radius:0 !important; }
.s-snip {
  font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif !important;
  font-size:13.5px !important; color:var(--muted) !important; }
.s-status {
  font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif !important;
  color:var(--muted) !important; }
.s-row { border-left:2px solid transparent !important;
  transition:background-color .15s, border-color .15s !important; }
.s-row:hover, .s-row:focus {
  background:rgba(45,107,80,.05) !important;
  border-left-color:var(--accent) !important; }
.s-row mark { background:rgba(45,107,80,.20) !important;
  border-radius:0 !important; }
.s-flag { border-radius:0 !important;
  box-shadow:0 0 0 1px var(--line) !important; }
.s-input, .nav-search-q {
  font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif !important; }
.s-inrow { border-bottom-color:var(--line) !important; }

.fn-hero-glow, .nf-glow { display:none !important; }
/* the 404 carried the same gold wash, which left its ground at (247,241,234)
   where every other page is white */
body.gg-404, body.gg-404 .nf-hero { background:var(--paper) !important; }

/* ---- the contents box opens the article, so the gap above it is the hero's
       gap, not a section gap. The field notes gave it the .article-body's full
       80px top padding on top of the box's own 22px, so they opened on a 102px
       hole where the six guides open on 46px. ---- */
.article-body:has(> #toc-b:first-child),
.article-body:has(> .article-toc:first-child),
.article-body:has(> .fn-toc:first-child) { padding-top:24px !important; }

/* ---- resources: the doubled divider. The live page draws a PARTIAL rule with
       .rrow::before, inset to `calc(460px + 4rem)` so it starts beside the
       logo. The theme gives .rrow a full-width border of its own, so the two
       sat 1px apart and every one of the 27 rows carried a 34px stub hanging
       off its right end. The row's own border is the divider now. ---- */
.rrow::before { display:none !important; }
.grp img, .rrow img, .grp-head img { border-bottom:0 !important;
  border-top:0 !important; }

/* ---- the same doubling on all 34 field notes: .fn-city-hd is a flex row that
       already carries the section's rule, and its h2 shrinks to the width of
       its own text, so the theme's `.fn-section h2 { border-bottom }` drew a
       short stub across the words with the container's full-width rule 1px
       below it. Inside .fn-city-hd the container owns the rule. ---- */
.fn-section .fn-city-hd h2, .fn-city-hd > h2, section .fn-city-hd h2 {
  border-bottom:0 !important; padding-bottom:0 !important; }

/* The two columns of boxes are the same width and sit on the same 96px
   gutters, but their DIVIDERS did not line up: a one-line description made a
   72px row and a two-line one made 93px, so the left column's rules landed
   21px above the right column's and the pair read as unevenly spaced. Giving
   every description a two-line floor puts both columns on one rhythm. */
.rrow-desc { min-height:3.2em; }
@media (max-width:768px) { .rrow-desc { min-height:0; } }

/* ======================= MOBILE PARITY WITH THE LIVE SITE =================
   Everything below is measured against the live site at 390px. The re-theme
   inherited the desktop rules at this width and lost several things the live
   mobile site does deliberately. ========================================== */
@media (max-width:768px) {

  /* The live home page shows FOUR countries plus the Explore the Map card on
     every width; the re-theme's ten-tile desktop grid ran all ten down the
     phone as a 1900px column. Desktop keeps its ten. */
  .tiles .tile:nth-child(n+5):not(.map-live) { display:none !important; }

  /* Body photographs run edge to edge on live mobile. The re-theme left the
     article's 4px gutter on them, so every photo sat in a hairline frame.
     The :not() list is load bearing: a city map's base raster is deliberately
     WIDER than the phone (473px inside 390, cropped by .cmmap's overflow), so
     sweeping it into a 100vw box collapses it to zero width and the map
     disappears. Route-map SVGs size themselves too. Leave both alone.

     The 4px belongs to the WRAPPER, not the photo: live puts .img-landscape
     and .img-pair at the full 390 and the re-theme had them at [4,382]. So
     widen only the wrapper and never touch what is inside it. Forcing a width
     on the images themselves made each half of a pair 390px and they
     overlapped at [-98] and [98].

     Two-class selectors on purpose: live's own mobile rule is a bare
     `.img-landscape{width:calc(100% + 2.5rem)!important}`, which ties this on
     specificity, and a tie is decided by source order in a file the build does
     not control. Going to (0,2,0) settles it. */
  .article-body .img-landscape, .artbody .img-landscape,
  .fn-section .img-landscape, .article-body .img-pair,
  .artbody .img-pair, .fn-section .img-pair,
  /* the transplanted itinerary calls the same blocks .ls / .day-shot / .fr,
     so it kept a 24px gutter while the pairs beside it went edge to edge and
     the page contradicted itself down its own column */
  .artbody .ls, .artbody .day-shot, .artbody .fr,
  .article-body .ls, .article-body .day-shot, .article-body .fr,
  .article-body > picture, .artbody > picture {
    /* same reasoning as .pair above: gutter-based, never viewport-based */
    width:auto !important; max-width:none !important;
    margin-left:calc(-1 * var(--bleed, 24px)) !important;
    margin-right:calc(-1 * var(--bleed, 24px)) !important; }
  /* A city map's base raster is `width:100%` of a frame that is itself wider
     than the phone. It must keep exactly that: `auto` (or `revert`) resolves
     to 0 while the PNG is still loading and the map vanishes. */
  .cmbase, .cmmap img, .cmworld img {
    width:100% !important; max-width:none !important;
    margin-left:0 !important; margin-right:0 !important; }

  /* resources: the 190px screenshot column is a desktop measure. Held at 190
     inside a 288px row it left the description 82px wide over ten lines. Live
     drops the shot to 120px and gives the text ~204px. */
  /* the markup already carries the live site's own mobile measure as
     --media-m; use it rather than inventing a second number */
  .rrow { --media:var(--media-m, 120px) !important; }
  /* the desktop rule is `.grp, .grp:first-of-type`, so the first group in each
     column is matched at (0,2,0) and a plain `.grp` here loses to it. Repeat
     the pair to take back the first group too. */
  .grp, .grp:first-of-type {
    padding-left:14px !important; padding-right:14px !important; }
  .thumb img { height:auto !important; }

  /* The nav bar, to the live site's own measurements. The re-theme had it at
     52px with the search glyph at 16px and its right edge touching the
     hamburger (0px between them), and the hamburger hanging 10px into the
     24px gutter. Live: 63px tall, a 21px glyph, 18px of air between the two,
     and both controls inside the gutter. */
  /* SPACING. A phone has a fraction of the vertical room a desktop has, and
     the re-theme was carrying desktop's section rhythm straight down to 390:
     the about page opened its tint band on 36px of margin plus 64px of padding
     where live uses 48. Every big vertical gap comes in about a third. */
  .sec.pad, .pad, .sec { padding-top:2.6rem !important;
    padding-bottom:2.6rem !important; }
  /* two-class selector: the desktop rule is a bare `.gg-ab2 { padding-top:4rem
     !important }` that sits later in the sheet and wins the tie */
  body .gg-ab2, body.gg-aboutpage .gg-ab2 {
    margin-top:18px !important; padding-top:2.6rem !important;
    padding-bottom:2rem !important; }
  .gg-ab2 .ab-side2 { gap:12px !important; margin-top:14px !important; }
  /* the first quick-fact card followed the prose on a full section gap */
  .gg-ab2 .main + .ab-side2, .gg-ab2 > .ab-side2:last-child {
    margin-top:14px !important; }
  .gg-ab2 .ab-side2 .ab-q { padding:14px 16px !important; }
  .gg-bio { padding-top:2.6rem !important; padding-bottom:2.6rem !important; }
  .gg-dispatch { padding-top:2.6rem !important; }
  .gg-notes { padding-top:2.6rem !important; padding-bottom:3rem !important; }
  .sec-head { margin-bottom:14px !important; }
  /* the article sections too: a field note stacks 30+ of them */
  .fn-section { margin-top:2.2rem !important; }
  .article-h2, .article-body h2, .fn-section h2, .artbody h2 {
    margin-top:30px !important; }
  .article-h3, .article-body h3, .fn-section h3, .fn-sub-hd {
    margin-top:28px !important; }

  /* THE ARTICLE HERO ON A PHONE.
     Two things went wrong together. Four of the six guides carry an ID-scoped
     !important mobile <style> block that centres the hero copy VERTICALLY, and
     the scrim's vertical pass is at its weakest (.10) at exactly 40% height,
     so the title landed in the one band with no ground under it: 2.48:1 on
     Santa Ana against 6.8:1 on live. The horizontal wash could not save it
     either, because it fades out at 62% of the width and a phone headline runs
     the full 390. So: the copy goes back to the bottom, and the phone gets a
     vertical-only scrim that is strong the whole way across.
     Beating those page blocks needs an ID in the selector: theirs is
     `#page-article-sv-santaana .article-hero` at (1,1,0), and no number of
     classes outranks an id. :is() takes the specificity of its most specific
     argument, so :is(#_, [id^="page-"]) scores (1,0,0) while still MATCHING on
     the attribute -- one rule for all six guides instead of six selectors that
     go stale the moment a seventh is written. Total (1,2,0), and it is later. */
  .article-hero.gg-banner, .ah-banner,
  :is(#_, [id^="page-"]) .article-hero.gg-banner,
  :is(#_, [id^="page-"]) .ah-banner {
    justify-content:flex-end !important;
    align-items:flex-start !important; }
  /* one headline size for all six. The page blocks set 23.4px on four guides
     and left top-10 at 32; live is itself split 23.4/25.6. 26px is one value,
     sits at live's larger end, and holds two lines on a 390 screen. The lead
     stays at 16px rather than live's 9.92px, which is below reading size. */
  :is(#_, [id^="page-"]) .article-hero.gg-banner h1,
  :is(#_, [id^="page-"]) .article-hero.gg-banner .article-title,
  :is(#_, [id^="page-"]) .ah-banner h1,
  .article-hero.gg-banner h1, .ah-banner h1 {
    font-size:26px !important; line-height:1.14 !important;
    /* and the same weight as every other h1 on the site: the five guides came
       in at 400 where the other 44 pages are 300 */
    font-weight:300 !important; }
  /* the page blocks reach this one as `#page-… .article-hero .article-lead`,
     which is (1,2,0) and ties; adding .gg-banner takes it to (1,3,0) */
  :is(#_, [id^="page-"]) .article-hero.gg-banner .article-lead,
  :is(#_, [id^="page-"]) .article-hero.gg-banner p,
  :is(#_, [id^="page-"]) .ah-banner .artsub,
  .article-hero .article-lead, .ah-banner .artsub, .article-hero-sub {
    font-size:15px !important; line-height:1.5 !important; }

  :is(#_, [id^="page-"]) .article-hero.gg-banner::before,
  .article-hero.gg-banner::before {
    background:linear-gradient(180deg, rgba(18,26,21,.40) 0%,
      rgba(18,26,21,.34) 34%, rgba(18,26,21,.58) 70%,
      rgba(18,26,21,.82) 100%) !important; }
  .ah-banner .band .veil {
    background-image:linear-gradient(180deg, rgba(18,26,21,.40) 0%,
      rgba(18,26,21,.34) 34%, rgba(18,26,21,.58) 70%,
      rgba(18,26,21,.82) 100%) !important; }

  /* The tap-to-expand map turns .dest-map-wrap into a fixed flex column of
     legend + #world-map. The re-theme moved the three-stat box INTO that
     wrapper, so full screen it became a third flex child with no flex sizing:
     it shoved the legend up and got cut off itself. Live's expanded screen is
     legend and map only, so the stats step out of it and stay below the
     inline map, where they were asked for. */
  .dest-map-wrap.map-fs .gg-mapstats { display:none !important; }
  /* the legend's own `margin:0 !important; padding:20px 24px` band rule beat
     .map-fs's, collapsing it from 41px to 13px and running "Countries Visited"
     9px under the close button. In full screen it is a header strip, so it
     takes the live page's padding and clears the button on the right. */
  .dest-map-wrap.map-fs .map-legend {
    padding:1rem 3.2rem .65rem 1rem !important; background:#fff !important;
    border:0 !important; border-bottom:1px solid rgba(28,40,33,.08) !important;
    justify-content:center !important; flex:0 0 auto !important; }

  /* the height is pinned at 52px earlier, so padding alone cannot grow the
     bar; set the height itself */
  nav { height:63px !important; min-height:63px !important;
    padding-top:17.6px !important; padding-bottom:17.6px !important; }
  nav .nav-search { width:21px !important; height:21px !important; }
  nav .nav-search svg, nav .nav-search img {
    width:21px !important; height:21px !important; }
  nav .nav-hamburger {
    margin-left:18.4px !important; margin-right:0 !important;
    padding:6.4px !important; }
}

/* ---- the section gap already separates field-note sections; the heading's
       own 40px on top of it opened a 180px hole between them ---- */
.fn-section .fn-city-hd h2, .fn-section > h2:first-child { margin-top:0 !important; }

/* A field note's place headings are its SECTION level, the same rank as the
   h2s in a guide, so they take the h2 treatment. Making them the green 21px
   subhead gave the same tag two different looks depending on the page. The
   green 21px stays the sub-level, used where a page has one. */

/* ---- one font stack: four pages carry a shorter one in their own style
       block, which resolves differently where Segoe UI is present ---- */
body nav > ul > li > a, body .artbody p, body .article-body p,
body .fn-section p, body .measure p, body .artbody li, body .article-body li,
body .fn-section li, body .measure li {
  font-family:'Hanken Grotesk',-apple-system,'Segoe UI',sans-serif !important; }
/* a <u> used for emphasis is upright wherever it appears */
.artbody u, .article-body u, .fn-section u, .measure u { font-style:normal !important; }

/* ---- one lead-in style: a stray <em> was setting one entry in italic ---- */
.artbody li > em:first-child, .article-body li > em:first-child,
.fn-section li > em:first-child, .measure li > em:first-child,
.artbody p > em:first-child, .article-body p > em:first-child,
.fn-section p > em:first-child, .measure p > em:first-child {
  font-style:normal !important; font-weight:600 !important; }

/* ---- the field notes label their route map with a 9.9px uppercase eyebrow
       while the El Salvador guide gives it a Newsreader 23px title. One
       treatment across the site. ---- */
.fn-sub-hd, .itinerary-map .fn-sub-hd {
  font-family:var(--display) !important; font-size:23px !important;
  font-weight:300 !important; letter-spacing:-.012em !important;
  text-transform:none !important; color:var(--ink) !important;
  opacity:1 !important; margin-bottom:14px !important; text-align:center; }

/* ---- the route maps keep the size their artwork was drawn at; forcing them
       to the column width blew them up. They are only centred and kept inside
       the measure. ---- */
/* every route map carries its own max-width inline, drawn to fit that
   country's shape (Albania 349px, Georgia 542px ...). Overriding it with
   100% blew them all up to the full column. Only centre them. */
.itinerary-map, .route-map { margin-left:auto; margin-right:auto; }
.itinerary-map img, .itinerary-map svg, .route-map svg {
  height:auto !important; display:block; margin-left:auto; margin-right:auto; }

/* ---- Windows renders regional-indicator pairs as bare letters ("TN"), so
       the flag is the same PNG the nav uses for all 35 countries ---- */
.gg-flag { display:inline-block; vertical-align:-1px; margin-right:7px;
  width:16px; height:12px; }

/* ---- the burger becomes an X: the middle bar has to go, or the two crossed
       bars plus the flat one render as a six-pointed asterisk ---- */
.nav-hamburger.open span:nth-child(2) { opacity:0 !important; }
.nav-hamburger.open span:nth-child(1),
.nav-hamburger.open span:nth-child(3) { background:var(--ink) !important; }

/* ---- the resource tag was the fifth pass at 0.50 opacity, 1.6:1 ---- */
.rrow-tag, .resource-tag { opacity:1 !important; color:var(--accent) !important;
  font-size:.58rem !important; border-color:rgba(45,107,80,.35) !important; }

/* ---- about, on a wide screen: the band's first grid track ran the full
       width while the prose inside it stopped at 760px, leaving 520px of empty
       ground before the sidebar, and the intro paragraph ran 1200px long ---- */
.gg-ab2 { grid-template-columns:minmax(0,760px) 300px !important;
  justify-content:start !important; column-gap:72px !important; }
/* Above 1700 the band centred but the intro above it did not, so the page ran
   down five different left edges (96 / 349 / 1129 / 1481 / 1734) with 605px of
   white beside the intro. Centre the whole column, on the band's own measure
   (760 + 72 + 300 = 1132), so the portrait, the intro and the band share one
   left edge. The same treatment gives the archive and privacy a centred column
   instead of a single card stranded against the left gutter. */
@media (min-width:1700px) {
  /* the tint band is a BAND: it runs the full width of the window at every
     size, and it is the content inside it that centres on the same 1132px
     measure as the intro above. Capping the band itself left it floating as a
     1132px grey rectangle with white either side. */
  .gg-ab2 { justify-content:center !important;
    max-width:none !important; margin-left:0 !important;
    margin-right:0 !important; }
  body.gg-aboutpage .pad, body.gg-aboutpage .sec.pad,
  .gg-ab-intro,
  /* the markup calls these .page-header, and neither page carries a body
     class, so the earlier .privacy-header/.contact-header selector centred the
     body and left the title 253px off it. :has() scopes by what the page
     actually contains, and leaves the archive and destinations alone. */
  body:has(.privacy-section) .page-header,
  body:has(.contact-grid) .page-header,
  .privacy-header, .privacy-body, .privacy-section,
  .contact-header, .contact-body, .contact-grid {
    max-width:1132px !important;
    margin-left:auto !important; margin-right:auto !important; }
  /* NOT the archive: its cards keep the 96px gutter, so centring only the
     header put the title at 349 while the cards below it stayed at 96. */
}

/* ---- the home page's bio band centred its 1080px grid while the two
       sections above it ran to the 96px gutter, so at 1830 it sat 279px
       inside them and read as a misplaced block. It takes the same gutter. ---- */
/* the bio grid is 1080 inside a 1248 column, so pinning it to the 96px gutter
   left it visibly left-heavy with all the slack on one side; it centres */
.gg-bio .bio-grid { margin-left:auto !important; margin-right:auto !important;
  max-width:1080px; }
.gg-ab2 > .main { max-width:760px; }
/* the intro above the band is capped to a readable measure and sits with the
   portrait rather than running to the window edge */
.page > .pad:first-child .copy, .gg-ab-intro .copy { max-width:68ch; }
@media (max-width:1200px) {
  .gg-ab2 { grid-template-columns:minmax(0,1fr) 300px !important;
    justify-content:stretch !important; }
}
@media (max-width:900px) {
  .gg-ab2 { grid-template-columns:1fr !important; }
}

/* ---- the dropdown: a label for the list, a key for the dot, and a divider
       that runs the full height of the taller column ---- */
.nav-dropdown-fn .megam { align-items:stretch !important; }
.mm-guides { min-width:0; }
.mm-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:1.2rem; margin-bottom:14px; padding-bottom:10px;
  border-bottom:1px solid var(--line-soft); }
/* the same face and size as "Explore the Interactive Map" beside it */
.mm-head-t { font-family:var(--display); font-size:15px; font-weight:300;
  letter-spacing:0; text-transform:none; color:var(--ink); }
.nav-guides-legend { display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--body) !important; font-size:9.5px !important; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint) !important; }
.nav-fulldot { width:5px; height:5px; border-radius:50%; background:var(--accent);
  display:inline-block; flex:0 0 auto; }
.mm-col a .nav-fulldot { margin-left:6px; }
/* the divider runs the whole panel, and nothing rules off All destinations */
.mm-side-live { border-left:1px solid var(--line-soft); align-self:stretch;
  padding-left:30px; }
.mm-side-live .nav-all-dest { border-top:0 !important; padding-top:0 !important;
  margin-top:16px; }

/* ---- the footer's links sit on the wordmark's line ---- */
footer { align-items:flex-start !important; }
footer .footer-right { display:flex; flex-direction:column; align-items:flex-end;
  gap:.5rem; }

/* ---- the bio link carries the hero button's arrow ---- */
/* .more sets display:inline-block, so the gap never applied and the arrow sat
   flush against the last letter */
.gg-morelink { display:inline-flex !important; align-items:center;
  gap:12px !important; text-decoration:none; }
.gg-morelink svg { transition:transform .25s; flex:0 0 auto;
  width:15px; height:15px; }
.gg-morelink:hover svg { transform:translateX(4px); }
.hero a.cta svg { transition:transform .25s; }
.hero a.cta:hover svg { transform:translateX(4px); }

/* ---- only the slide on screen takes clicks: the four behind it were
       stacked on top and swallowed every press on the button ---- */
.hero .slide { pointer-events:none; }
.hero .slide[data-on="1"] { pointer-events:auto; }

/* ---- the hero headline and its button are links ---- */
.hero .hero-link { text-decoration:none; color:inherit; display:block; }
.hero a.cta { text-decoration:none; cursor:pointer; }
.hero .hero-link:hover .hero-h { text-decoration:none; }

/* ---- the hero headline wraps at two lines, never three ---- */
.hero-h { text-wrap:balance; }

/* ---- eyebrows over a photograph sit at 10-11px, too small to carry 78%
       white; they run near-opaque instead ---- */
.hero .kick, .ah .kick, .ah-banner .kick, .hero-copy .kick {
  color:rgba(255,255,255,.92) !important; }

/* ---- the two card grids on the archive page share one column track ---- */
.gg-dispatch .cards, .gg-notes-cards {
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:2.4rem 2rem !important; }
@media (max-width:1100px) {
  .gg-dispatch .cards, .gg-notes-cards {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:768px) {
  .gg-dispatch .cards, .gg-notes-cards { grid-template-columns:1fr !important;
    gap:1.6rem !important; }
}
/* a field-note card has no deck, so its title sets the card's own rhythm */
.gg-notes-cards .card-h { margin-bottom:0 !important; }

/* ---- the photo heroes sat on the old 64px gutter. These copy blocks are
       positioned, not padded, so the gutter is their offset: padding them
       instead pushed the headline to 160px against the bands' 96. ---- */
.hero .hero-copy, .ah .cpy, .ah-banner .cpy, .hero .dots {
  left:96px !important; padding-left:0 !important; }
.hero .hero-copy, .ah .cpy, .ah-banner .cpy {
  right:96px !important; padding-right:0 !important; }
@media (max-width:768px) {
  .hero .hero-copy, .ah .cpy, .ah-banner .cpy, .hero .dots {
    left:24px !important; }
  .hero .hero-copy, .ah .cpy, .ah-banner .cpy { right:24px !important; }
}

/* ---- the country standfirst reads white over the dark hero ---- */
.country-hero-desc, .fn-hero-desc, .country-hero .lede {
  color:rgba(255,255,255,.86) !important; opacity:1 !important; }

/* ---- article headings: one treatment across every article, the artifact's
       Headers A. The live pages still carried the old green rule beside every
       h3, and headings sat too close to the text under them. ---- */
.article-h2, .article-h3, .article-body h2, .article-body h3,
.fn-section h2, .fn-section h3 {
  font-family:var(--display) !important; font-weight:300 !important;
  letter-spacing:-.012em !important;
  border-left:0 !important; border-bottom:0 !important;
  padding-left:0 !important; background:none !important; }
.article-h2, .article-body h2, .fn-section h2 {
  color:var(--ink) !important;
  font-size:1.72rem !important; line-height:1.2 !important;
  margin:40px 0 0 !important; padding-bottom:14px !important;
  border-bottom:1px solid var(--line-soft) !important; }
/* THE subhead. Hanken Grotesk 15px at 700, uppercase, .1em tracking, LEFT, in
   ink. This is the Wander Lush move, scaled to this site's narrower measure:
   their section head is a 42px serif and their sub is a 27px bold uppercase
   sans, so the two ranks are told apart by FAMILY and CASE rather than by size
   and colour. Three things follow from that:
     - the sub no longer competes with the serif h2 above it, because it is not
       the same face trying to be smaller;
     - it stops using the accent, so green goes back to meaning "this is a
       link", which is the one job it had before the subheads borrowed it;
     - it sits on the same left edge as the paragraph it introduces, instead of
       floating centred away from the text it belongs to.
   One class across both page types: the guides' h3 and the field notes'
   .fn-sub-hd. The route-map captions are NOT here -- they moved to .rm-h,
   because a caption over a centred figure is a different job. */
.article-h3, .article-body h3, .fn-section h3, .artbody h3, .fn-sub-hd {
  /* Newsreader at 21px, sentence case as typed. The accent bar carries the
     rank, so the type does not have to shout: uppercase tracking on a serif
     reads dated, and at this size the bar is what the eye catches anyway. */
  font-family:var(--display) !important;
  font-size:24px !important; font-weight:400 !important;
  font-style:normal !important; text-transform:none !important;
  letter-spacing:-.01em !important; line-height:1.28 !important;
  margin-top:38px !important; text-align:left !important;
  color:var(--ink) !important;
  /* The accent is a BAR down the left edge, not a rule in front of the words.
     It does the work the green text used to do -- marking the level without
     tinting the type, so the accent still means "link" in the prose -- and
     because it runs the full height of the block it holds a heading that wraps
     to two lines, which the horizontal rule did not. */
  border-left:3px solid var(--accent) !important;
  padding-left:14px !important;
  display:block !important; }
/* the horizontal rule is gone */
.article-h3::before, .article-body h3::before, .fn-section h3::before,
.artbody h3::before, .fn-sub-hd::before { content:none !important; }
/* a tight gap below binds the head to the text it introduces */
.article-h3 + *, .article-body h3 + *, .fn-section h3 + *,
.artbody h3 + *, .fn-sub-hd + * { margin-top:16px !important; }

/* the route-map caption keeps the display face and stays centred over its map.
   Ink, not the accent: it titles a figure, it is not a link, and the green was
   the last thing on the page still borrowing the link colour. */
.rm-h {
  font-family:var(--display) !important; font-size:22px !important;
  font-weight:500 !important; font-style:normal !important;
  line-height:1.25 !important; letter-spacing:-.012em !important;
  text-align:center !important; color:var(--ink) !important;
  text-transform:none !important; }
/* margin-TOP only, never the shorthand: a .fn-sub-hd that captions a route map
   is a narrow block centred by its own inline `margin:… auto`, and the
   shorthand was zeroing those auto sides, pinning the caption flush left over
   a centred map (Egypt). The rhythm below it is set by the `+ *` rule anyway. */
/* one heading rhythm across the site: the heading, its hairline rule, then
   18px of air, which is what the about page sets */
.article-h2 + *, .article-h3 + *, .article-body h2 + *, .article-body h3 + *,
.fn-section h2 + *, .fn-section h3 + *, .v-head + * { margin-top:18px !important; }
/* when a wrapper follows the heading the gap belongs to the wrapper, and its
   first child must not add a second one */
.v-head + .measure > *:first-child { margin-top:0 !important; }
/* a .measure that holds only the heading block carries the gap itself, since
   what follows is a sibling of the wrapper rather than of the heading */
.artbody .measure:has(> .v-head) { margin-bottom:18px !important; }
.artbody .measure:has(> .v-head) + * { margin-top:0 !important; }
/* a heading that ends its wrapper hands the gap to the wrapper's next block */
.article-body > *:has(> h2:last-child) + *,
.article-body > *:has(> h3:last-child) + * { margin-top:18px !important; }
/* the field notes wrap each heading in .fn-city-hd, whose own padding and
   margin set the gap; zero those so the site's 18px applies here too */
.fn-city-hd { padding-bottom:0 !important; margin-bottom:18px !important; }
/* the field notes put a time chip between the heading and the copy */
.article-body h2 + .fn-time, .article-body h3 + .fn-time,
.fn-section h2 + .fn-time, .fn-section h3 + .fn-time { margin-top:18px !important; }
.fn-time + * { margin-top:18px !important; }
.artbody > .measure > .v-head + * { margin-top:18px !important; }

/* ---- about: the portrait started under the nav with no air, and ended on the
       tint band's first pixel ---- */
/* the about page has no <body class>, so the first band is addressed through
   the band that follows it */
.page:has(> .gg-ab2) > .pad:first-child {
  padding-top:calc(60px + 3.5rem) !important; padding-bottom:0 !important; }
/* and the tint band starts below the portrait rather than against it */
.gg-ab2 { padding-top:4rem !important; margin-top:3.5rem; }
@media (max-width:768px) {
  .page:has(> .gg-ab2) > .pad:first-child {
    padding-top:calc(63px + 2.25rem) !important; }
  .gg-ab2 { margin-top:2.25rem; }
}
/* the quick facts hold one line each, so they do not need 150px of box */
.gg-ab2 .ab-side2 { gap:18px !important; }
.gg-ab2 .ab-side2 .ab-q { min-height:0 !important; padding:20px 24px !important;
  justify-content:flex-start !important; }
/* the box is a flex column with a 24px row gap; the live card keeps the label
   and its value together */
.gg-ab2 .ab-side2 .ab-q { row-gap:6px !important; }
.gg-ab2 .ab-q .k { margin-bottom:0 !important; }
.gg-ab2 .ab-q .v2 { margin-top:0 !important; }

/* ---- destinations: the key reads above the map, and the three counts run as
       a band beneath it ---- */
.map-legend { display:flex !important; justify-content:center; align-items:center;
  gap:2.4rem; flex-wrap:wrap; margin:0 0 16px !important; border:0 !important;
  padding:0 !important; }
.gg-mapstats { position:static !important; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line);
  border-top:0; }
.gg-mapstats .st { text-align:center; padding:16px 12px 14px;
  border-left:1px solid var(--line-soft); }
.gg-mapstats .st:first-child { border-left:0; }
.gg-mapstats .n { font-family:var(--display); font-weight:300; font-size:1.6rem;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.gg-mapstats .l { font-family:var(--body); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin-top:.5rem; }
@media (max-width:768px) {
  .gg-mapstats .n { font-size:1.2rem; }
  .gg-mapstats .l { font-size:.5rem; }
}

/* ---- the page starts closer to the nav, here and on every page like it ---- */
/* the nav is fixed, so the header's top padding has to carry its height too:
   3.5rem alone put the title behind the bar */
.page-header, .dest-header, .posts-page-header, .privacy-header, .contact-header {
  padding-top:calc(60px + 3.5rem) !important; padding-bottom:1.75rem !important; }
.page-header { border-bottom:0 !important; }
@media (max-width:768px) {
  /* 63px is the mobile bar's height, matched to the live site. It was 52 here,
     which is what left the archive's header sitting 64px below the nav where
     every other page cleared 36. .gg-posts-head was missing from the list
     entirely, so the archive never got the offset at all. */
  .page-header, .dest-header, .posts-page-header, .privacy-header,
  .contact-header, .gg-posts-head, .sec.pad.gg-posts-head {
    padding-top:calc(63px + 2.25rem) !important; }
}

/* ---- the filter sits as close to the cards as the cards sit to each other ---- */
.filter-bar-inline { margin-bottom:0 !important; padding-bottom:0 !important;
  border-bottom:0 !important; }
/* the row of cards sat 48px below the filter while the cards sit 24px apart */
.home-dest-grid, .dest-articles-grid { margin-top:24px !important; }
.dest-articles-section .sec-head { margin-bottom:1.25rem !important;
  padding-bottom:0 !important; border-bottom:0 !important; }

/* ---- the field notes on the archive page are cards, three across, the same
       component the guides above them use ---- */
.gg-notes-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2.4rem 2rem; margin-top:6px; }
@media (max-width:1100px) { .gg-notes-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:768px) { .gg-notes-cards { grid-template-columns:1fr; gap:1.6rem; } }

/* ---- index: the cards have to look clickable, the way the live ones do ---- */
.cards > a { text-decoration:none; color:inherit; display:block; }
.cards > a .card-img { overflow:hidden; transition:transform .6s ease; }
.cards > a:hover .card-img { transform:scale(1.04); }
.cards > a .card-h { transition:color .2s; }
.cards > a:hover .card-h { color:var(--accent); }
.cards > a:hover .kick { color:var(--accent); }
.tile, .home-dest-card { transition:transform .4s; }

/* ---- index: the wordmark in the footer runs at the live site's size ---- */
footer .footer-logo { font-size:1.6rem !important; }
@media (max-width:768px) { footer .footer-logo { font-size:1.3rem !important; } }

/* ---- index: one gap between a band's title and the row under it ---- */
.gg-dispatch .sec-head { margin-bottom:0 !important; }
.gg-dispatch .sec-h { margin-bottom:30px !important; }
.sec-head + .tiles, .sec-head + .cards { margin-top:0 !important; }

/* ---- the dropdown's right column, as the live site draws it ---- */
.mm-side-live .nav-map-card { border:0 !important; background:transparent !important;
  padding:0 !important; }
.mm-side-live .nav-map-card:hover { border:0 !important; }
.mm-side-live .nav-map-title { font-family:var(--display) !important;
  font-size:15px !important; font-weight:300 !important; letter-spacing:0 !important;
  color:var(--ink) !important; margin-bottom:10px; }
/* the section label takes the same face as the continents it introduces */
.mm-side-live .nav-dropdown-continent[style], .mm-side-live .nav-guides-legend {
  font-family:var(--body) !important; font-size:10.5px !important;
  font-weight:500 !important; letter-spacing:.14em !important;
  text-transform:uppercase !important; color:var(--faint) !important;
  margin-top:18px; }
.mm-side-live a.nav-dropdown-continent { font-family:var(--body) !important;
  font-size:11.5px !important; font-weight:500 !important; letter-spacing:.09em !important;
  text-transform:uppercase !important; color:var(--ink) !important;
  padding:5px 0 !important; }
.mm-side-live a.nav-dropdown-continent:hover { color:var(--accent) !important; }
/* the little continent maps are back, at a size where they read */
.mm-side-live .nav-cont-ico { display:inline-block !important; width:17px !important;
  height:17px !important; opacity:.55; flex:0 0 auto; }
.mm-side-live a.nav-dropdown-continent:hover .nav-cont-ico { opacity:.9; }
.mm-side-live .nav-all-dest { font-size:12px !important; font-weight:500 !important;
  letter-spacing:.13em !important; color:var(--accent) !important; margin-top:14px;
  padding-top:12px !important; border-top:1px solid var(--line-soft); }

/* ---- the search field's rule has to show against the hero photograph ---- */
.nav-search-q, .nav-search input { border-bottom:1px solid var(--line) !important; }
body.gg-home nav:not(.pinned) .nav-search-q,
body.gg-home nav:not(.pinned) .nav-search input,
body.gg-home nav:not(.pinned) .nav-search.active {
  border-bottom-color:rgba(255,255,255,.75) !important; }

/* ---- resources rows: the live layout indented every row past a 460px label
       column, and the hover state still did, so the text flew across the page
       whenever the pointer touched a row ---- */
.rrow, .rrow:hover { padding-left:0 !important; padding-right:0 !important; }
.rrow { transition:background-color .2s !important; }
.rrow:hover { background:rgba(45,107,80,.045) !important; }

/* ---- the dropdown's country links inherited the nav's dimmed opacity, so
       the main menu read as disabled ---- */
/* The country name sits in a <span> inside the link, and that span carried its
   own colour, so recolouring the <a> on hover changed nothing you could see.
   Both the link and its span move together: grey at rest, black on hover. */
.nav-dropdown-fn a, .nav-dropdown-fn .mm-col a, .nav-dropdown-item,
.nav-dropdown-fn .mm-col a span, .nav-dropdown-item span,
.nav-dropdown-fn .mm-col a .country-name {
  /* .5 gave the 35 country names 3.13:1 at 13.5px, under the 4.5:1 floor, and
     left the five continent heads reading louder than the links they label.
     .68 clears 4.5:1 and still sits obviously back from the ink hover, which
     is the effect that was asked for. */
  opacity:1 !important; color:rgba(28,40,33,.68) !important;
  transition:color .15s; }
.nav-dropdown-fn .mm-col a:hover, .nav-dropdown-item:hover,
.nav-dropdown-fn .mm-col a:hover span, .nav-dropdown-item:hover span,
.nav-dropdown-fn .mm-col a:hover .country-name {
  color:var(--ink) !important; }

/* ---- the breadcrumb nested two opacities and landed at 2.4:1 ---- */
.fn-hero-crumbs, .fn-hero-crumbs *, .country-hero-crumbs, .country-hero-crumbs * {
  opacity:1 !important; }
.fn-hero-crumbs a, .fn-hero-crumbs span, .country-hero-crumbs a,
.country-hero-crumbs span { color:rgba(255,255,255,.66) !important;
  font-size:.6rem !important; }
.fn-hero-crumbs a:hover, .country-hero-crumbs a:hover { color:#fff !important; }

/* ---- the nav and the footer sat on 64px while every band sat on 96 ---- */
nav, footer { padding-left:96px !important; padding-right:96px !important; }
@media (max-width:768px) {
  nav, footer { padding-left:24px !important; padding-right:24px !important; }
}

/* ---- the 404 hero and the footer were the same green, so the page read as
       one undifferentiated slab ---- */
.nf-hero, .notfound-hero { background:var(--ground) !important;
  color:var(--ink) !important; min-height:0 !important; padding:6rem 0 5rem !important; }
.nf-hero h1, .nf-hero .nf-title { color:var(--ink) !important; }
.nf-hero p, .nf-sub { color:var(--muted) !important; }

/* ---- the country hero sat on the 64px grid while the section under it sat
       on 96px, so the content edge jumped as you scrolled ---- */
.country-hero, .fn-hero { padding-left:96px !important; padding-right:96px !important; }
@media (max-width:768px) {
  .country-hero, .fn-hero { padding-left:24px !important; padding-right:24px !important; }
}

/* ---- the dropdown is a layer, so it casts one ---- */
.nav-dropdown-fn { box-shadow:0 18px 44px rgba(28,40,33,.14) !important;
  border:1px solid var(--line) !important; background:#fff !important; }

/* ---- the drawer carries the same continent marks the live mobile menu does.
       They were hidden here, which is the one thing the drawer was missing
       against live: the markup was already byte-identical. ---- */
.mobile-nav-continents .mnc-ico { display:inline-block !important;
  width:20px !important; height:20px !important; object-fit:contain;
  margin-right:3px; vertical-align:-4px; opacity:.85; flex:0 0 20px; }
.mobile-nav-continents a { padding-left:0 !important;
  display:flex !important; align-items:center; }
/* "All destinations" and "Explore the map" carry no outline, and on the live
   drawer they start at the OUTLINES' left edge, not the labels' -- the five
   continent marks form the left column and those two align with the marks.
   An earlier pass indented them to the labels, which is the other reading. */
.mobile-nav-continents a:not(:has(.mnc-ico)),
.mobile-nav-continents a.mnc-all, .mobile-nav-drawer .mnc-map {
  padding-left:0 !important; }

/* ---- the drawer's own links were caught by the same opacity leak ---- */
.mobile-nav-drawer a, .mobile-drawer-footer, .mobile-drawer-footer a,
.mobile-nav-links a, .mnav-parent { opacity:1 !important; }
.mobile-drawer-footer { color:rgba(28,40,33,.6) !important; }

/* ---- the 404 button was the one warm accent left on the site ---- */
.nf-btn-primary { background:var(--accent) !important; color:#fff !important;
  border-color:var(--accent) !important; }
.nf-btn-primary:hover { background:#1e4d38 !important; }

/* ---- the jump chips are buttons, and the theme's button reset took their
       border away, so they stopped reading as something you can click ---- */
.country-place-btn { border:1px solid rgba(255,255,255,.34) !important;
  background:transparent !important; color:rgba(255,255,255,.82) !important;
  font-family:var(--body) !important; font-size:.6rem !important;
  letter-spacing:.14em !important; text-transform:uppercase;
  padding:.5rem 1.1rem !important; cursor:pointer; transition:all .2s; }
.country-place-btn:hover, .country-place-btn.active {
  border-color:rgba(255,255,255,.8) !important; color:#fff !important;
  background:rgba(255,255,255,.08) !important; }
.country-places-label { opacity:1 !important;
  color:rgba(255,255,255,.55) !important; }
.fn-hero .breadcrumb, .fn-hero-crumbs a, .fn-hero-crumbs span {
  color:rgba(255,255,255,.6) !important; }

/* the field notes read at the same measure as the guides: the guides set
   729px of text, the notes were running 854px */
.article-body { max-width:825px !important; }

/* ---- field-note chips wrap instead of pushing the page sideways ---- */
.fn-time, .fn-chip, .fn-meta, .jump-chips, .fn-jump {
  max-width:100%; box-sizing:border-box; }
.fn-time { display:flex; flex-wrap:wrap; gap:.4rem .9rem; white-space:normal !important; }
@media (max-width:768px) {
  .fn-time, .fn-chip { font-size:.62rem; }
}

/* ---- resource rows wrap on a phone instead of running off the edge ---- */
.rrow-name { display:inline-flex; flex-wrap:wrap; align-items:center;
  gap:.5rem .65rem; min-width:0; }
.rrow-name .rrow-tag { flex:0 0 auto; }
@media (max-width:768px) {
  .rrow-name { display:flex; flex-direction:column; align-items:flex-start;
    gap:.3rem; }
}

/* ---- the dispatches archive ---- */
/* the archive opened 108px below the nav with a three-line stack; every other
   page header starts 56px down and runs eyebrow, title, one line of deck */
/* .posts-page already pads 80px to clear the fixed nav, so this header adds
   only the 56px every other page header uses below the bar */
.posts-page { padding-top:60px !important; }
.sec.pad.gg-posts-head, .gg-posts-head {
  padding-top:3.5rem !important; padding-bottom:1.75rem !important; }
/* On the archive the nav offset is already carried by the .posts-page wrapper,
   so the header must NOT add it a second time: doing that put the title 119px
   below the bar where every other page clears 36. The wrapper goes to the
   phone bar's 63px and the header keeps only its own 2.25rem. */
@media (max-width:768px) {
  .posts-page { padding-top:63px !important; }
  .sec.pad.gg-posts-head, .gg-posts-head {
    padding-top:2.25rem !important; }
}
.gg-posts-head .kick { margin-bottom:9px !important; }
.gg-posts-head h1.sec-h { font-size:2.75rem; margin:0; font-weight:300;
  letter-spacing:-.02em; line-height:1.08; }
/* the standfirst is one 74-character sentence and reads as one line; the 52ch
   measure broke it after "have them," and left three words on a second row */
.gg-posts-lede { max-width:none !important; margin-top:10px !important;
  color:var(--muted); text-wrap:balance; }
@media (max-width:900px) { .gg-posts-lede { max-width:52ch !important; } }
.gg-notes { padding-top:4rem !important; }
.gg-notes .tiles.five { margin-top:6px; }
.gg-notes { padding-bottom:6rem !important; }
/* The country name sits at the card's vertical CENTRE, so the scrim has to be
   at full strength there rather than bottom-weighted. Measured against the
   brightest tiles the label was 3.22:1 (Türkiye) and 3.60:1 (Georgia), and the
   map tile's green EXPLORE was 2.83:1. Deepening the middle stop clears 4.5:1
   on all of them without flattening the photograph at the edges. */
.tile .veil, .dest-overlay { background:linear-gradient(180deg, rgba(16,24,19,.28) 0%,
  rgba(16,24,19,.56) 46%, rgba(16,24,19,.66) 72%,
  rgba(16,24,19,.72) 100%) !important; }
/* the map tile's call to action was the worst of them: it is green on photo,
   so it goes white and leans on the same scrim as the country names */
.tile.map-live .nm, .tile.map-live .more, .tile .more {
  color:#fff !important; }

/* ---- the dropdown is exactly as wide as its contents, like the live one,
       and it breathes: 32px of padding on every side ---- */
.nav-dropdown-fn { margin-top:28px !important;   /* clear of the nav bar */
  width:max-content !important;
  min-width:0 !important; max-width:none !important; padding:32px !important;
  left:50% !important; right:auto !important; transform:translateX(-50%) !important; }
/* display stays with the live open/closed rules; only the layout changes here */
.nav-dropdown-wrap:hover .nav-dropdown-fn,
.nav-dropdown-fn.open { display:block !important; }
.nav-dropdown-fn .megam { display:grid !important;
  grid-template-columns:340px 300px !important; gap:30px !important;
  padding:0 !important; border-top:0 !important; }
.nav-dropdown-fn .mm-cols { display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:4px 24px !important; }
.mm-side-live { padding-left:30px; }
.mm-side-live .nav-all-dest { font-family:var(--body) !important; font-size:11px !important;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent) !important;
  margin-top:12px; }

/* ---- the live site's own side gutter: 96px desktop, 24px phone ---- */
.pad, .sec.pad, .gg-dispatch, .gg-bio, .gg-ab2 {
  padding-left:96px !important; padding-right:96px !important; }
.hero-text, .ah .measure-h { padding-left:96px !important; padding-right:96px !important; }
@media (max-width:768px) {
  .pad, .sec.pad, .gg-dispatch, .gg-bio, .gg-ab2,
  .hero-text, .ah .measure-h {
    padding-left:24px !important; padding-right:24px !important; }
}

/* ---- the hero paints on a dark ground, never a white bar ---- */
.hero, .gg-hero-ready { background:#1B2620; }
.hero .slide img { background:#1B2620; }

/* The Nicaragua hero is framed differently on each tier: the desktop crop
   holds the headland on the right, and on a phone the same crop pushed the
   subject out of the visible strip. An inline object-position cannot carry a
   media query, so this one lives here rather than on the tag like the others. */
.hero .slide img.hp-nicaragua { object-position:85% 65%; }
@media (max-width:768px) {
  .hero .slide img.hp-nicaragua { object-position:43% 2%; }
}

/* ---- maps sit on the page, not in a box ---- */
.itinerary-map, figure.itinerary-map, .citymap-fig, .route-map, .bm-map,
.country-hero-map { border:0 !important; outline:0 !important; box-shadow:none !important; }
/* the map's own drop shadow stays: it lifts the map off the page and Kevin
   likes it. Only the key panel inside it was the box that had to go. */
.citymap img, .itinerary-map img { box-shadow:none !important; border:0 !important; }
.cmmap { border:0 !important; }
/* the key panel on a city map, and the zoom buttons beside it, still carried
   the old rounded-and-shadowed card: square, hairline, no drop shadow */
.cmkey { border-radius:0 !important; box-shadow:none !important;
  background:rgba(255,255,255,.94) !important;
  border:1px solid rgba(28,40,33,.12) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.cmzoom button, .cmbubble, .cm-ov-card {
  border-radius:0 !important; box-shadow:none !important; }
.cmzoom button { border:1px solid rgba(28,40,33,.14) !important; }

/* ---- article prose: readable without being severe ---- */
.artbody .copy, .artbody p, .article-body p, .article-body li,
.artbody li, .measure .copy { color:rgba(28,40,33,.78) !important; }
.artbody .copy strong, .article-body strong { color:rgba(28,40,33,.9); }

/* ---- kickers that sit on a photo cannot take the green accent ---- */
.country-article-card-tag, .article-tag, .country-article-tag,
.post-card-image .post-tag, .dest-info-count {
  color:rgba(255,255,255,.76) !important; opacity:1 !important; }
.country-article-card-tag { font-size:.56rem !important; }

/* ---- the bio reads like the live strip: centered, text given room ---- */
.gg-bio .bio-grid { grid-template-columns:minmax(0,360px) minmax(0,1fr) !important;
  gap:60px !important; align-items:center !important;
  max-width:1080px; margin-left:auto; margin-right:auto; }
.gg-bio .bio-txt { padding:0 !important; }
.gg-bio .bio-txt .copy { max-width:none !important; font-size:1.02rem;
  line-height:1.82; }
.gg-bio .bio-port { aspect-ratio:3/4; }
@media (max-width:900px) {
  .gg-bio .bio-grid { grid-template-columns:1fr !important; gap:26px !important;
    max-width:560px; }
}

/* ---- country tiles keep the live photo and the live crop ---- */
.tile .tile-bg { position:absolute; inset:0; transition:transform .4s; }
.tile:hover .tile-bg { transform:scale(1.06); }

/* ---- dispatch cards crop exactly like the live ones ---- */
.cards .card-img, .card-img { aspect-ratio:4/3 !important; }
@media (max-width:768px) { .cards .card-img, .card-img { aspect-ratio:16/9 !important; } }
.card-img.bg { background-size:cover; background-repeat:no-repeat; }

/* ---- one rhythm for every band on every page ---- */
.sec, .home-destinations, .section, .gg-dispatch, .gg-bio {
  padding-top:5.5rem !important; padding-bottom:5.5rem !important; }
.sec:first-of-type { padding-top:5.5rem !important; }
.gg-dispatch { margin-top:0 !important; }
.gg-bio { padding-bottom:6rem !important; }
@media (max-width:768px) {
  .sec, .home-destinations, .section, .gg-dispatch, .gg-bio {
    padding-top:3rem !important; padding-bottom:3rem !important; }
}

/* ---- home tiles: five across, the live grid's own spacing ---- */
.tiles.five { display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1.5rem; }
@media (max-width:1100px) { .tiles.five { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:768px) { .tiles.five { grid-template-columns:1fr; gap:.85rem; } }

/* ---- article rhythm: headings breathe, photos stay in their measure ---- */
.artbody > .measure > .v-head { margin:40px 0 0 !important; }
.artbody > .measure > .v-head + * { margin-top:18px !important; }
/* the live article runs a single photo at 576px, its own measure */
.artbody .one-shot, .artbody .day-shot { max-width:576px !important;
  margin:1.6rem auto; }
.artbody .ls { margin-top:1.6rem; margin-bottom:1.6rem; }
.artbody .pair { margin-top:1.6rem; margin-bottom:1.6rem; }
.artbody > .measure > .comp-h { margin-top:56px !important; }
/* the season matrix ends cleanly, with no rule hanging under the wet row */
.whm2 .wrow:last-child, .whm .whm-row:last-child { border-bottom:0 !important; }
/* the tail: the last paragraph, a rule, the standing footnote, then the
   footer. 118px above and 80px below read as a gap rather than an ending. */
.gg-updated { font-family:var(--body); font-size:.72rem; letter-spacing:.06em;
  color:var(--faint); padding-top:20px; margin-top:56px;
  border-top:1px solid var(--line-soft); margin-bottom:56px; }
/* the body already ends with 84px of its own padding, which stacked with the
   footnote margin into 118px of dead space */
.artbody { padding-bottom:0 !important; }
.artbody > .measure:last-of-type { margin-bottom:0 !important; }

/* ---- the footer runs at the live site's scale ---- */
footer .footer-logo { font-family:var(--display) !important; font-size:1.6rem !important;
  font-style:italic; font-weight:300; }
footer .footer-tagline { font-size:.72rem !important; color:rgba(255,255,255,.55) !important;
  margin-top:.3rem; }
footer .footer-links a { font-size:.66rem !important; letter-spacing:.13em !important;
  text-transform:uppercase; }
footer .footer-links { display:flex; gap:1.4rem; list-style:none; margin:0; padding:0; }
footer .footer-copy { font-size:.64rem !important; color:rgba(255,255,255,.42) !important;
  margin-top:.7rem; }
footer .footer-affiliate { font-size:.64rem !important; line-height:1.6;
  color:rgba(255,255,255,.42) !important; }
footer { padding:2.6rem 96px !important; }
@media (max-width:768px) { footer { padding:2rem 24px !important; } }

/* ---- the footer never touches the last block ---- */
.frame .foot, footer { margin-top:0 !important; }
.artbody, .gg-ab2, .page > .pad:last-of-type { padding-bottom:64px; }
.article-body, .fn-wrap, .country-wrap { padding-bottom:64px !important; }
@media (max-width:768px) {
  .artbody, .gg-ab2, .article-body { padding-bottom:40px !important; }
}

/* ==========================================================================
   MOBILE PASS -- reported on the shipped site
   ========================================================================== */
@media (max-width:768px) {

  /* "All dispatches" sat flush on top of the first photo with no gap and no
     arrow, so it read as a caption printed on the picture rather than a link.
     It becomes the same object as the bio's "More about me": a standalone
     uppercase link with the arrow and room to breathe. */
  .sec-head { display:block !important; }
  .sec-head .more, .sec-head .section-link {
    display:inline-flex !important; align-items:center; gap:.5rem;
    margin-top:16px !important; margin-bottom:26px !important;
    border-bottom:1px solid var(--line) !important; padding-bottom:5px !important;
    color:var(--ink) !important; }
  .sec-head .more::after, .sec-head .section-link::after {
    content:"\2192"; font-size:1.05em; line-height:1;
    transition:transform .18s ease; }
  .sec-head .more:active::after, .sec-head .section-link:active::after {
    transform:translateX(3px); }

  /* A card on a phone gets no hover, so nothing said it was tappable. Give it
     the affordance a touch screen can actually show: a visible press state,
     and a small arrow on the title so it reads as a destination, not a block
     of text that happens to sit under a photo. */
  .cards > a, .country-article-card, .country-articles-grid > a,
  .tiles .tile, .home-dest-card {
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s ease, opacity .12s ease; }
  .cards > a:active, .country-article-card:active,
  .country-articles-grid > a:active, .tiles .tile:active,
  .home-dest-card:active { transform:scale(.985); opacity:.9; }
  /* the arrow that used to sit on the headline is gone: it read as part
     of the sentence and, firing on every card, said nothing. The card's
     own call to action does that job now. */

  /* The live map's tooltips render white-on-white on a phone: the desktop rule
     that inks them is scoped to the hover state, which a touch screen never
     enters, so the tap-to-open bubble kept the plugin's own colours. */
  .dest-tooltip, .map-tooltip, .am5-tooltip, [class*="tooltip"] {
    color:var(--ink) !important; }
  .dest-tooltip *, .map-tooltip *, .am5-tooltip * { color:inherit !important; }
  .dest-tooltip a, .map-tooltip a, .am5-tooltip a,
  .dest-tooltip .more, .map-tooltip .more {
    color:var(--accent) !important; }

  /* The tip's accent rule sat flush against its first word on a phone: the
     mobile gutter reset (.article-body > * { padding-left:0 }) also stripped
     the 22px indent the bar needs, so the rule and the text touched. Desktop
     keeps 2px 0 2px 22px; the phone gets the same shape, one step in. */
  .article-tip, .article-callout {
    padding:2px 0 2px 16px !important;
    border-left-width:3px !important; }
}

/* ---- ONE font stack, stated once.
       theme.css defines --display/--body with the full fallback list, but the
       artifact's own `.frame { --display: ... }` sets a shorter one on <body>,
       which beats :root by proximity. The four transplanted pages therefore
       resolved to a stack without "Times New Roman"/Helvetica/Arial. The
       rendered face is identical wherever the webfont loads and different
       wherever it does not, which is exactly the case a fallback list is for. */
.frame, body.frame, :root {
  --display:"Newsreader", Georgia, "Times New Roman", serif;
  --body:"Hanken Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* the field notes carry a page-level paragraph rule with the short stack */
.article-body p, .artbody p, .fn-section p, .measure p,
.article-body li, .artbody li, .fn-section li, .measure li {
  font-family:"Hanken Grotesk", -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif !important; }

/* the section's "view all" link answers the cursor as well as the thumb: the
   mobile rule that inks it was overriding the shared hover with !important */
.sec-head .more:hover, .sec-head .section-link:hover,
.more:hover, .section-link:hover { color:var(--accent) !important; }
.sec-head .more:hover::after, .sec-head .section-link:hover::after {
  transform:translateX(3px); }

/* ==========================================================================
   NARROW-SCREEN ROBUSTNESS
   A real iPhone clipped the about page's body text off the right edge while
   headless Chromium showed no overflow at 320/360/390/430. Two causes, both
   invisible to a desktop test:

   1. iOS Safari inflates text on its own ("text autosizing") unless a page
      opts out. Inflated type widened the three-column stats bar past the
      viewport, and once the document is wider than the screen every block in
      it is too -- which is why the prose was cut off, not just the bar.
   2. The page had been served before the webfonts were fixed, so it fell back
      to a system face with wider metrics. A layout that only fits in its
      intended font is a layout that breaks the first time the font is slow.

   The fix is to opt out of autosizing and to let the bar shrink and wrap, so
   neither a fallback face nor a larger accessibility size can burst it.
   ========================================================================== */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }

.ab-stats, .ab-stats.plain, .ab-stats.boxed, .gg-mapstats {
  flex-wrap:wrap !important; }
.ab-stats > *, .ab-stats.plain > *, .ab-stats.boxed > *, .gg-mapstats > * {
  min-width:0 !important; flex:1 1 auto; }
/* a long label breaks rather than forcing the row wider than the screen */
.ab-stats .l, .gg-mapstats .l { overflow-wrap:anywhere; hyphens:auto; }

/* nothing in running prose may push the page sideways: a long place name, an
   unbroken URL or a wide inline element all used to be able to */
.article-body, .artbody, .fn-section, .measure, .ab-stats,
.article-body p, .artbody p, .fn-section p, .measure p,
.article-body li, .artbody li, .fn-section li {
  overflow-wrap:break-word; }

@media (max-width:420px) {
  /* below this the three stats no longer fit on one row in any font */
  .ab-stats.plain, .ab-stats.boxed {
    display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px 10px; }
  .ab-stats.plain > *, .ab-stats.boxed > * { border-left:0 !important;
    padding-left:0 !important; }
}

/* --bleed is each container's own mobile side padding, so a full-bleed child
   reaches the screen edge exactly and never a pixel past it. */
@media (max-width:768px) {
  .article-body, .artbody, .fn-section, .measure { --bleed:24px; }
  .gg-ab2, .gg-ab2 .main { --bleed:1.25rem; }
  .sec.pad, .pad { --bleed:24px; }

  /* Belt and braces. `clip` rather than `hidden`: hidden turns the element
     into a scroll container and breaks position:sticky, clip does not. If any
     rule still tries to push the page sideways, the reader never sees the
     text cut off -- they just do not get a phantom horizontal scroll. */
  html { overflow-x:clip; }
}

/* ==========================================================================
   MAKING A CARD READ AS CLICKABLE ON A PHONE
   An arrow glued to the headline was the wrong instrument: it read as part of
   the sentence, and it fired on every card so it stopped meaning anything.
   A card says "tap me" the way a card does -- by looking like an object with
   an edge, and by carrying its own call to action at the bottom, which is the
   thing a thumb is actually aiming for.
   ========================================================================== */
@media (max-width:768px) {
  .cards > a {
    display:block; position:relative;
    padding-bottom:14px;
    border-bottom:1px solid var(--line-soft); }
  .cards > a:last-child { border-bottom:0; }

  /* the call to action, generated so no markup changes are needed */
  .cards > a .card-p::after {
    content:"Read the guide \2192";
    display:block; margin-top:12px;
    font-family:"Hanken Grotesk", -apple-system, "Segoe UI", Helvetica, Arial,
      sans-serif;
    font-size:11px; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:var(--accent); }
  /* a field note is not a guide, so it says what it is */
  .gg-notes .cards > a .card-p::after,
  .cards > a[href*="field-notes"] .card-p::after { content:"Read the notes \2192"; }

  /* the whole card acknowledges the press, and the photo lifts with it */
  .cards > a .card-img { transition:transform .18s ease; }
  .cards > a:active .card-img { transform:scale(1.03); }
  .cards > a:active .card-p::after { color:var(--ink); }

  /* the closed drawer is fixed and translated off-canvas, but a transformed
     fixed element still counted toward the document width in Chromium, which
     made the itinerary page 24px wider than the screen. Hiding it outright
     takes it out of that calculation and out of the tab order. */
  .mobile-nav-drawer:not(.open) { visibility:hidden !important; }
  .mobile-nav-drawer.open { visibility:visible !important; }

  /* and the hamburger stays inside the gutter */
  nav { overflow:visible; }
  nav .nav-hamburger { margin-right:0 !important; }
}

@media (max-width:768px) {
  /* .fr on the itinerary already sits in a full-width container, so the 24px
     escape that the other bleed blocks need pushed it 24px past the screen on
     each side -- the last horizontal overflow on the site. Its bleed is zero
     because there is no gutter for it to escape. */
  .fr { --bleed:0px; }
}

/* ==========================================================================
   MOBILE BODY TYPE -- restoring the size the site already asked for
   styles.css:537 sets 1.15rem/1.75 on a phone, with the comment "Larger,
   less-thin body text on mobile for readability". theme.css then pins
   .article-body p to 1rem/1.82 with NO media query, so it won at every width
   and mobile shipped 16px.

   Benchmarked against 65 travel-blog article pages measured at 390px: the
   median mobile body size is 18px (IQR 17-20), and only 12 of the 65 set 16px
   or smaller. The same sample says this site is NOT too airy -- its dead-space
   fraction is 0.25-0.30 against a median of 0.38, and its tallest empty band
   is 93-123px against a median of 401px. It sits at or below the 25th
   percentile on every whitespace measure. What reads as emptiness is small
   pale type in a correctly spaced column, not the spacing.
   ========================================================================== */
@media (max-width:768px) {
  .article-body p, .article-body li,
  .artbody p, .artbody li,
  .fn-section p, .fn-section li,
  .measure p, .measure li {
    font-size:1.15rem !important;   /* 18.4px, the value styles.css intended */
    line-height:1.75 !important; }
  /* the paragraph gap comes up with the type: 17.6px was well under the
     27.5px median, which is the other half of why the column felt thin */
  .article-body p + p, .artbody p + p, .fn-section p + p, .measure p + p {
    margin-top:1.35em !important; }
}



/* ---- the photo on a search result row. search.js injects its own stylesheet
       at runtime, so this needs !important to reach it (see the search block
       above). The row becomes a two-column object: picture, then the text. ---- */
.s-thumb { flex:none !important; display:block !important;
  width:80px !important; height:60px !important; overflow:hidden !important;
  background:var(--line-soft); }
.s-thumb img { width:100% !important; height:100% !important;
  object-fit:cover !important; display:block !important; }
/* the flag sits with the name now that a photo leads the row */
.s-row .s-flag { margin-left:2px !important; }
/* a mention has no photo, so its text starts where the others' text does */
/* a mention carries no thumbnail, so it is indented by the thumb plus its gap
   (80 + 11) and every title in the panel starts on the same line */
.s-row.s-mention { padding-left:calc(1.35rem + 91px) !important; }
@media (max-width:768px) {
  .s-row.s-mention { padding-left:calc(1.35rem + 75px) !important; }
}
@media (max-width:768px) {
  .s-thumb { width:64px !important; height:48px !important; }
}

/* ---- a search result is one row, not three.
       search.js sets .s-row{flex-wrap:wrap}, which was fine for flag + name
       but wraps the moment an 80px photo leads the row: the title dropped to
       a second line and the tag to a third. The photo is fixed, the text
       block takes the rest, and only the text inside it wraps. ---- */
.s-row { flex-wrap:nowrap !important; align-items:center !important;
  gap:.7rem !important; }
.s-row .s-main { min-width:0 !important; flex:1 1 auto !important; }
.s-row .s-tag { flex:0 0 auto !important; }
.s-row.s-mention { flex-wrap:wrap !important; }
.s-row.s-mention .s-snip { flex:1 1 100% !important; }

/* ---- the search field is a LINE, on the SAME ROW as the glyph.
       It grows leftward out of the icon: transparent, one rule underneath, no
       box and no focus ring, because the rule already shows where the cursor
       is. It overlays the end of the nav while open, which is the trade for
       keeping it on one line. ---- */
nav .nav-search { position:relative; }
nav .nav-search.active {
  position:absolute !important; right:96px !important; left:auto !important;
  top:50% !important; transform:translateY(-50%) !important;
  margin-top:0 !important;
  background:transparent !important; border:0 !important;
  border-bottom:1px solid var(--ink) !important;
  box-shadow:none !important; border-radius:0 !important;
  padding:3px 2px 5px !important; z-index:1002 !important;
  display:flex !important; align-items:center !important; gap:.5rem !important; }
nav .nav-search.active .nav-search-q {
  width:230px !important; opacity:1 !important; background:transparent !important;
  border:0 !important; color:var(--ink) !important; }
/* no green ring on the field: the underline is the affordance, and the outline
   the focus rules add read as a box around it */
nav .nav-search-q:focus, nav .nav-search-q:focus-visible,
nav .nav-search.active, nav .nav-search.active:focus-within {
  outline:none !important; }
/* the links behind it step back so the typed text stays readable, rather than
   disappearing entirely */
nav:has(.nav-search.active) > ul { opacity:.28 !important;
  transition:opacity .18s ease; pointer-events:auto !important; }
/* over the hero the rule and the text go white with the rest of that nav */
body.gg-home nav:not(.pinned) .nav-search.active {
  border-bottom-color:rgba(255,255,255,.85) !important; }
body.gg-home nav:not(.pinned) .nav-search.active .nav-search-q,
body.gg-home nav:not(.pinned) .nav-search.active .nav-search-q::placeholder {
  color:#fff !important; }
@media (max-width:768px) {
  nav .nav-search.active { right:24px !important; left:24px !important;
    transform:translateY(-50%) !important; }
  nav .nav-search.active .nav-search-q { width:100% !important; }
}

/* the results panel starts below the field, not behind it. search.js puts
   .s-modal at top:4.35rem, which was under the old inline field; the field is
   its own panel a row lower now, so the results clear it. */
.s-modal { top:120px !important; }
@media (max-width:768px) { .s-modal { top:118px !important; } }

/* ==========================================================================
   MOBILE PASS 3
   ========================================================================== */

/* theme.css lists .rrow-desc in a big `font-family: var(--display)!important`
   block. A bare `.rrow-desc` here ties it and the winner comes down to source
   order, which was not reliable. Two classes settles it: a description under a
   name is body copy and takes the reading face, on every page and width. */
.grp .rrow-desc, .grp-rows .rrow-desc, .rrow .rrow-desc {
  font-family:"Hanken Grotesk", -apple-system, "Segoe UI", Helvetica, Arial,
    sans-serif !important;
  font-weight:400 !important; }

@media (max-width:768px) {
  /* THE HERO. The copy block sat at 244 of a 470px hero with 14px under the
     kicker and 24px over the button, which read as loose in the middle and
     high on the photograph. It drops toward the lower third and the three
     lines pull together. Desktop is untouched. */
  /* .hero-copy is absolutely positioned at bottom:62px, so padding INSIDE it
     grows the block upward: adding 52px moved the title 34px HIGHER, the
     opposite of what was wanted. The block sits lower by lowering its own
     offset instead, and carries no internal padding. */
  .hero .hero-copy { bottom:44px !important; padding-bottom:0 !important; }
  .hero .hero-copy .kick { margin-bottom:9px !important; }
  .hero .hero-h { font-size:28px !important; line-height:1.12 !important; }
  .hero .cta { margin-top:16px !important; }

  /* the drawer's rows were 39px, which is tight for a thumb and tighter still
     for the eye; 12px of padding takes them to ~47 */
  .mobile-nav-links > li > a, .mnav-parent {
    padding-top:12px !important; padding-bottom:12px !important; }
  .mobile-nav-continents a { padding-top:9px !important;
    padding-bottom:9px !important; }
  .mobile-nav-links > li { margin-bottom:2px; }

  /* "How this started" opened on 58px of container padding, which is a
     desktop measure carried straight down to a 390px screen */
  .measure { padding-top:30px !important; }

  /* "Read Notes" on a destination card was 74% white at 12px: on a photograph
     that is barely there, and on a touch screen it is the only thing saying
     the card is a link. Full white, at the size desktop uses. */
  .art-card-btn {
    color:#fff !important; border-color:rgba(255,255,255,.9) !important;
    font-size:9.5px !important; padding:5px 11px !important; }
}

/* ---- the result row's flag.
       32x24 is its natural size, so asking for 20x15 upscaled it on a 2x
       screen and it went soft; 16x12 lets one source pixel cover two device
       pixels exactly. The 1px box-shadow search.js gives it was the box
       around it. It now sits after the name, so every title in the panel
       starts at the same x whether or not its row has a flag. ---- */
.s-row .s-flag {
  width:16px !important; height:12px !important;
  box-shadow:none !important; border-radius:0 !important;
  margin-left:8px !important; vertical-align:-1px;
  opacity:.9; }
/* .s-main must stay normal text flow. Making it a flex container turned every
   <mark> the highlighter injects into its own flex item, so a matched title
   broke into fragments with gaps between them. The flag is an inline <img> and
   sits after the last word on its own. */
.s-row .s-main { display:block !important; text-align:left !important; }

/* the results panel starts below the field. search.js puts .s-modal at
   top:4.35rem, which sat under the old in-bar field; the field is a row lower
   now, so the panel clears it. */
.s-modal { top:112px !important; }
@media (max-width:768px) { .s-modal { top:110px !important; } }

/* ---- a mention row is a stacked block, so it must align to its left edge.
       .s-row's align-items:center (right for a one-line row) centred every
       mention horizontally, because search.js makes .s-mention a column. ---- */
.s-row.s-mention {
  flex-direction:column !important; align-items:flex-start !important;
  text-align:left !important; }
.s-row.s-mention .s-main, .s-row.s-mention .s-snip {
  text-align:left !important; width:100% !important; }

/* the panel sits under the bar again now the field is back on the nav row */
.s-modal { top:76px !important; }
@media (max-width:768px) { .s-modal { top:74px !important; } }

/* ---- BADGE 4: a 13% green wash with the text in the deeper accent, below the
       heading rather than in its row. Applied to every "days recommended"
       badge on the 34 field notes. ---- */
.fn-time {
  display:inline-block !important;
  background:rgba(45,107,80,.13) !important;
  color:#245840 !important;
  font-family:"Hanken Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif
    !important;
  font-size:10.5px !important; font-weight:600 !important;
  letter-spacing:.11em !important; text-transform:uppercase !important;
  padding:5px 12px !important; border:0 !important; border-radius:0 !important;
  margin-top:9px !important; white-space:normal !important; line-height:1.5; }
/* It sits BESIDE the place name when it fits and wraps to its own row when it
   does not, which is what the row did before. Forcing the h2 to 100% pushed
   every badge onto a second line and left it stranded against the rule.
   Both gaps are measured from the title's BASELINE, the same reference the
   same-row case aligns to. The h2's box runs 10px past that baseline, so a
   5px row-gap is a 15px optical gap above the pill, matching the 15px below
   it (9px pill margin + 6px padding). Measuring from the box instead reads
   as 12 and 16 and looks wrong on the page, which is what it did. */
.fn-city-hd {
  display:flex !important; flex-wrap:wrap !important;
  align-items:flex-end !important; gap:5px 14px !important;
  /* an earlier rule zeroes this; the badge is a filled block whose box reaches
     the padding edge, so without it the badge sits 2px off the rule */
  padding-bottom:14px !important; }
.fn-city-hd h2 { flex:0 1 auto !important; }
/* the adjacent-sibling form is deliberate. A generic ".article-body h2 +
   .fn-time" at line 2938 sets margin-top:18px !important and outranks a plain
   ".fn-city-hd .fn-time" on specificity, so the pill kept an 18px margin the
   flex gap then added to: the wrapped gap measured 33px against 16px below. */
.fn-city-hd h2 + .fn-time,
.fn-city-hd .fn-time { flex:0 1 auto !important; margin-top:0 !important; }

/* Two things the row has to get right, and they pull in opposite directions.
   Baseline alignment hung the title 8px clear of the pill's lower edge, and
   when the pill wrapped it left 30px above the pill against 15px below it.

   The type's own metrics are the cause: the h2's box runs ~9px past the
   baseline (descender plus half-leading), so aligning boxes, baselines or
   anything else in between never lands the title's VISIBLE bottom on the
   pill's. Aligning the boxes at flex-end and then lifting the pill by exactly
   that 9px does, and it costs no transform, so the rule below still sits where
   layout puts it.

   :has() picks out the rows that actually carry a pill, so the ~200 bare
   headings keep their existing 14px to the rule. */
.fn-city-hd:has(.fn-time) { padding-bottom:6px !important; }
.fn-city-hd h2 + .fn-time,
.fn-city-hd .fn-time { margin-bottom:9px !important; }

/* ==========================================================================
   THE FACT CARDS -- option D, label and value
   They were white boxes on a white page, separated only by a 1px grid gap, so
   the "card" did no work: it read as a table with invisible rules. D drops the
   box entirely. Each fact becomes a fixed uppercase label with its value in
   sentence case beneath, on a hairline, which is the same label/value pattern
   the about page's quick facts already use.
   ========================================================================== */
.f-grid { gap:0 !important; background:transparent !important; }
.f-card {
  background:transparent !important; padding:14px 0 !important;
  border:0 !important; border-bottom:1px solid var(--line-soft) !important; }
.f-card:last-child { border-bottom:0 !important; }
.f-grid .f-t {
  font-family:"Hanken Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif
    !important;
  font-size:10px !important; font-weight:700 !important;
  letter-spacing:.15em !important; text-transform:uppercase !important;
  color:var(--accent) !important; margin-bottom:5px !important; }
.f-grid .f-b {
  font-family:"Hanken Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif
    !important;
  font-size:15px !important; line-height:1.6 !important;
  color:rgba(28,40,33,.86) !important; }
.f-b strong, .f-b b { font-weight:600 !important; color:var(--ink) !important; }
/* two columns where there is room; one on a phone */
@media (min-width:700px) {
  .f-grid { display:grid !important; grid-template-columns:1fr 1fr !important;
    column-gap:40px !important; }
}
@media (max-width:768px) {
  .f-grid .f-card { padding:12px 0 !important; }
  .f-grid .f-b { font-size:15px !important; }
}

/* ==========================================================================
   THE FACT BLOCK -- variant d, the one with the call-outs.
   The itinerary carries seven fact variants (a-g) and <body data-facts> picks
   one. "D" names the VARIANT, not a treatment: d is .f-icons > .f-ic.f-lead,
   which leads each cell with a big serif value ("Nov-Apr", "$30-$50") above
   the label. An earlier pass restyled .f-icons to look like the badge sheet's
   option D, which is a different sheet entirely -- that is now gone, and the
   variant's own styling (lines 257 and 516) is what renders.

   The one thing kept: two columns at 390 leave each cell 171px, and a call-out
   like "$30-$50" plus a sentence breaks every two or three words there.
   ========================================================================== */
@media (max-width:560px) {
  .f-icons { grid-template-columns:1fr; }
}

/* ---- the hero's opening slide introduces the site rather than an article, so
       it carries a standfirst under the headline and no kicker above it ---- */
.hero-sub {
  font-family:"Hanken Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:1.05rem; line-height:1.55; color:rgba(255,255,255,.90);
  /* 46ch broke the standfirst into three lines with a 107px orphan on the
     third. 58ch is 545px inside a 700px copy block, a comfortable measure,
     and holds two lines.

     pretty, not balance: balance equalises the lines and was pinning them at
     403/446, so the SECOND line came out longer whatever the max-width. pretty
     fills the first line greedily, which tapers 544/306, and still refuses to
     leave a single word alone on the last line if the copy changes. */
  margin:14px 0 0; max-width:58ch; text-wrap:pretty; }
@media (max-width:768px) {
  .hero-sub { font-size:.95rem; margin-top:11px; max-width:34ch; }
  /* the standfirst carries a hard break so the desktop line ends on "travel
     guides"; at 34ch there is no room for it to help, so it is dropped and the
     phone wraps on its own */
  .hero-sub br { display:none; }
}

/* ==========================================================================
   THE EDITOR'S TYPE CLASSES
   The font picker used to call execCommand, which emits <font> tags that
   cleanArtifacts() unwraps on save -- so four of its five options silently did
   nothing. It writes these classes instead, which survive the save and render
   here exactly as they do in the editor. Only the two faces the site serves.
   ========================================================================== */
.article-body .t-display, .artbody .t-display, .fn-section .t-display {
  font-family:"Newsreader",Georgia,"Times New Roman",serif; }
.article-body .t-body, .artbody .t-body, .fn-section .t-body {
  font-family:"Hanken Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
.article-body .t-sm, .artbody .t-sm, .fn-section .t-sm { font-size:.85em; }
.article-body .t-lg, .artbody .t-lg, .fn-section .t-lg { font-size:1.2em; }
.article-body .t-xl, .artbody .t-xl, .fn-section .t-xl { font-size:1.5em; }

/* ---- photo captions. Kosovo is the only page that uses them and it carried
       the whole treatment inline, against no rule at all, so nothing else
       could ever match it. The colour is --faint rather than the .55 it had:
       .55 measures 3.54 against the paper, below the 4.5 this size needs. ---- */
.article-body .img-caption, .artbody .img-caption, .fn-section .img-caption {
  display:block; width:79%; margin:-1rem auto 1.75rem; text-align:center;
  font-family:"Hanken Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:.85rem; font-style:italic; line-height:1.55; color:var(--faint); }
@media (max-width:768px) {
  .article-body .img-caption, .artbody .img-caption, .fn-section .img-caption {
    width:100%; margin-top:-.6rem; }
}

/* ---- The hero veil, all five slides together. The base .veil runs
       .5 / .1 / .78, mean alpha .390; this is those three at 115%, mean alpha
       .448. Proportional rather than a heavier middle: the glacier briefly had
       .47 / .41 / .78 (mean .539) and at that weight it kept only 62% of its
       brightness through the light band at 36%, where the other four keep 88%,
       and it read as murky. Scaling all three stops evenly darkens the frame
       without flattening the band that lets the photograph show.

       Scoped to .hero so it cannot reach anything else; .slide exists only on
       the home page today, but the base rule is not the place to say this. ---- */
.hero .slide .veil {
  background:linear-gradient(180deg, rgba(var(--scrim),.575) 0%,
    rgba(var(--scrim),.115) 36%, rgba(var(--scrim),.897) 100%); }

/* ---- Patagonia staging, linked to the Argentina article. Values chosen on
       the shortlist bench. 5350 is 1.33:1, so on a phone it is pinned by
       height and its crop slides SIDEWAYS; the portraits stay vertical. ---- */
.hero .slide img.hp-pat-5350 { object-position:50% 43%; }

/* New Zealand teaser: no article behind it yet, so the slide carries no CTA and
   the parenthetical is italic. <em> inherits the site accent elsewhere, which on
   a dark photo reads as unreadable teal, so it takes the headline's own colour. */
.hero .slide img.hp-nz-raft { object-position:50% 12%; }
.hero .hero-h em { font-style:italic; color:inherit; opacity:.8; }
.hero .slide img.hp-pat-5348 { object-position:50% 25.5%; }
.hero .slide img.hp-pat-6204 { object-position:50% 66.5%; }
.hero .slide img.hp-pat-6420 { object-position:50% 49.5%; }
.hero .slide img.hp-pat-5245 { object-position:50% 32%; }
@media (max-width:1400px) {
  /* 15%, not a taste call: the lake edge is a ~10px band and the laptop box
     leaves only 280px of travel, so this is the one window where it passes
     between the headline and the CTA instead of through the second line */
  .hero .slide img.hp-pat-5350 { object-position:50% 15%; }
  .hero .slide img.hp-pat-6420 { object-position:50% 53.5%; }
  .hero .slide img.hp-pat-5245 { object-position:50% 36.5%; }
}
@media (max-width:768px) {
  .hero .slide img.hp-pat-5350 { object-position:39% 50%; }
  .hero .slide img.hp-pat-6204 { object-position:50% 100%; }
  .hero .slide img.hp-pat-6420 { object-position:50% 100%; }
}

/* ---- Philippines staging: these photos drown under the full veil, so they
       carry it at HALF strength (.575/.115/.897 halved). gp9 is 1.14:1 and
       goes sideways only on a phone, where its 50% default holds. ---- */
.hero .slide:has(img.hp-ph) .veil {
  background:linear-gradient(180deg, rgba(var(--scrim),.29) 0%,
    rgba(var(--scrim),.06) 36%, rgba(var(--scrim),.45) 100%); }
/* 0619 alone wants more shade than its group: 85% of the full veil, not 50% */
.hero .slide:has(img.hp-ph-0619) .veil {
  background:linear-gradient(180deg, rgba(var(--scrim),.49) 0%,
    rgba(var(--scrim),.10) 36%, rgba(var(--scrim),.76) 100%); }
/* 0393 came out brighter once it was regraded, so it takes the FULL veil, the
   same weight the glacier lead carries: the group's half strength washed out */
.hero .slide:has(img.hp-ph-0393) .veil {
  background:linear-gradient(180deg, rgba(var(--scrim),.575) 0%,
    rgba(var(--scrim),.115) 36%, rgba(var(--scrim),.897) 100%); }
.hero .slide img.hp-ph-0313 { object-position:50% 60.5%; }
.hero .slide img.hp-ph-0393 { object-position:50% 58.5%; }
@media (max-width:1400px) {
  .hero .slide img.hp-ph-gp9  { object-position:50% 22%; }
  .hero .slide img.hp-ph-0313 { object-position:50% 57%; }
  .hero .slide img.hp-ph-0393 { object-position:50% 72.5%; }
}

/* ---- Hero crops, per photo per shape. The hero is a fixed height, so its
       aspect changes with the window: 2.80:1 on the monitor, 1.88:1 on a
       150%-scaled laptop, 0.86:1 on a phone. One object-position cannot serve
       all three, and which axis even responds depends on the photograph.
       Chosen on the crop bench against the live page. ---- */
.hero .slide img.hp-glacier { object-position:50% 62%; }
.hero .slide img.hp-albania { object-position:50% 43%; }
.hero .slide img.hp-peru    { object-position:50% 74%; }
@media (max-width:1400px) {
  .hero .slide img.hp-glacier { object-position:50% 53%; }
  .hero .slide img.hp-albania { object-position:50% 0%; }
  .hero .slide img.hp-peru    { object-position:50% 100%; }
}
/* On the phone the two landscape frames flip axis: 1.78:1 in a nearly square
   box is pinned by HEIGHT, so the vertical value does nothing and the crop is
   chosen left to right. The glacier, being a portrait, stays vertical. */
@media (max-width:768px) {
  .hero .slide img.hp-glacier { object-position:50% 2.5%; }
  .hero .slide img.hp-albania { object-position:45.5% 50%; }
  .hero .slide img.hp-peru    { object-position:43% 50%; }
}