/*
Theme Name: Mihipedia Atlas
Theme URI: https://mihipedia.lk
Author: Mihipedia Redesign
Author URI: https://mihipedia.lk
Description: A warm editorial travel-magazine theme for Mihipedia. Posts read like a coffee-table book: numbered plates, drop caps, pull quotes and a tear-out journey-facts card. Edit posts normally in the block editor — the theme applies the design automatically. Featured image = hero plate, H2 = chapter heading, blockquote = pull quote, full-width image = full-bleed plate.
Version: 1.26.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mihipedia-atlas
Tags: blog, travel, photography, editorial, one-column, custom-logo, featured-images, wide-blocks
*/

/* Self-hosted so the critical path does not depend on a third party.
   Variable fonts, 300 to 700, latin and latin-ext only. Regenerate with
   scripts/fetch-fonts.py if the families ever change. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url(assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url(assets/fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/fraunces-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/inter-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(assets/fonts/inter-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root{
  --paper:#f6f1e6; --paper-2:#efe7d6; --ink:#1c1813; --muted:#6f6455;
  --accent:#b4502a; --line:#d8cdb6; --gold:#a9853c;
  --gold-text:#806224; /* AA-safe gold for small text on paper */
  --brand-ink:#1c1813; /* the logo reads in the theme's ink, not an unrelated navy */
}
*{margin:0;padding:0;box-sizing:border-box}
/* The masthead is sticky and 77px tall, so anything scrolled to the very top
   sat behind it, including whatever the skip link landed on. WCAG 2.4.11. */
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--paper)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
@media(max-width:760px){.wrap{padding:0 22px}}

/* ---------- masthead ---------- */
/* Masthead search. Search used to exist only inside the mobile menu panel,
   so a desktop reader had none at all. This sits beside the navigation at
   every width and opens a single row under the header. */
.search-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer;order:2}
.search-toggle-icon{width:21px;height:21px;display:block}
.search-toggle:hover{color:var(--accent)}
.search-toggle[aria-expanded="true"]{color:var(--accent)}
.masthead-search{border-top:1px solid var(--line);background:var(--paper-2)}
.masthead-search > .wrap{padding-top:14px;padding-bottom:14px}
.masthead-search form{display:flex;gap:8px;max-width:620px;margin:0 auto}
.masthead-search input[type=search]{flex:1 1 auto;min-height:46px;padding:10px 14px;
  border:1px solid var(--muted);background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.masthead-search input[type=submit]{min-height:46px;padding:10px 20px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);font:inherit;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;border-radius:999px}
.masthead-search label{flex:1 1 auto}
.masthead-search .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
@media(max-width:1023px){
  /* The menu panel already carries a search field, so keep one affordance. */
  .search-toggle{margin-right:4px}
}


.topline{border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.topline .wrap{display:flex;justify-content:space-between;gap:14px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
@media(max-width:760px){
  .topline{font-size:10px;letter-spacing:.12em}
  .topline .wrap{justify-content:center;text-align:center;gap:4px 12px;row-gap:2px}
}
.masthead{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:50}
.admin-bar .masthead{top:32px}
.masthead > .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.wordmark{font-family:'Fraunces',serif;font-weight:600;font-size:30px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;line-height:1;min-width:0}
.wordmark em{font-style:italic;font-weight:400;color:var(--accent);font-size:15px;letter-spacing:.04em}
/* Brand SVG (inlined from assets/logo/ so the wordmark uses the page's Fraunces) */
.wordmark--brand{flex-shrink:0;color:var(--brand-ink)}
@media(max-width:1023px){.wordmark--brand{min-width:44px;min-height:44px;align-items:center}}
.atlas-logo{display:block;height:auto;width:auto}
.atlas-logo-word{font-family:'Fraunces',Georgia,serif;font-size:52px;font-weight:400;letter-spacing:-.01em;fill:var(--brand-ink)}
.atlas-logo--full{height:44px}
.atlas-logo--mark{height:38px;display:none}
@media(max-width:600px){
  .atlas-logo--full{display:none}
  .atlas-logo--mark{display:block}
}
/* Custom logo: WP outputs its own <a.custom-logo-link><img.custom-logo> with intrinsic width attrs */
.wordmark--logo{max-width:min(220px,42vw)}
.wordmark .custom-logo-link{display:flex;align-items:center;line-height:0;max-height:48px}
.wordmark .custom-logo,
.wordmark img.custom-logo,
.custom-logo-link img{
  display:block;
  max-height:48px !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
}
.main-nav ul{display:flex;gap:34px;list-style:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.main-nav a{position:relative;padding:6px 0}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .3s}
.main-nav a:hover::after{width:100%}
.nav-toggle{display:none}
/* 1024-1149px is tight with the 163px logo: buy room from the nav gap.
   (The .wordmark em rule only ever applied to the legacy text wordmark.) */
@media(min-width:1024px) and (max-width:1149px){.wordmark em{display:none}.main-nav ul{gap:28px}}
@media(max-width:1023px){
  .masthead > .wrap{gap:16px}
  .nav-toggle{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:48px;height:48px;margin-right:-8px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
  .nav-toggle-bars{position:relative;display:block;width:22px;height:2px;background:currentColor}
  .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;display:block;width:22px;height:2px;background:currentColor;transition:transform .25s ease}
  .nav-toggle-bars::before{top:-7px}
  .nav-toggle-bars::after{top:7px}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg)}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);max-height:calc(100vh - 76px);overflow-y:auto}
  .nav-toggle[aria-expanded="true"] + .main-nav{display:block}
  .main-nav ul{display:block;gap:0;font-size:13px;padding:4px 22px 16px}
  .main-nav li + li{border-top:1px solid var(--line)}
  .main-nav a{display:block;padding:15px 0;min-height:48px;line-height:1.3}
  .main-nav a::after{display:none}
}
@media(min-width:761px) and (max-width:1023px){.main-nav ul{padding-left:40px;padding-right:40px}}

/* ---------- home hero ---------- */
.hero{padding:72px 0 0}
.kicker{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700}
.kicker::before{content:"";width:44px;height:1px;background:var(--accent)}
.hero h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(48px,8.4vw,132px);line-height:.98;letter-spacing:-.025em;margin:26px 0 8px}
.hero h1 a:hover{color:var(--accent)}
.hero-stand{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin:28px 0 44px}
.hero-stand p{font-family:'Fraunces',serif;font-size:clamp(19px,2vw,26px);line-height:1.45;font-weight:300}
.hero-meta{justify-self:end;text-align:right;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:2.1}
.hero-meta b{color:var(--ink)}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;border:1px solid var(--ink);padding:16px 26px;border-radius:999px;transition:.3s}
.cta:hover{background:var(--ink);color:var(--paper)}
/* Full-bleed plate crop. Default focus sits slightly above center so faces stay in frame. */
.hero-fig{position:relative;margin:0;background:var(--paper-2);overflow:hidden}
.hero-fig img{display:block;width:100%;height:min(78vh,760px);object-fit:cover;object-position:center 30%}
/* A portrait photograph forced into the 2:1 hero band keeps barely a third of
   its height, which is how a standing subject ends up cut off at the waist with
   a raised hand clipped at the top. Give portraits a tall centred plate and
   almost the whole frame survives. 14 stories are affected. */
.hero-fig img.is-portrait{
  width:100%;
  max-width:min(100%,720px);
  height:auto;
  aspect-ratio:3/4;
  max-height:min(84vh,940px);
  object-position:center center;
  margin:0 auto;
}
.hero-fig img.is-landscape{object-position:center center}
.hero-fig figcaption{display:flex;justify-content:space-between;gap:20px;font-size:11.5px;letter-spacing:.08em;color:var(--muted);padding:14px 40px;border-bottom:1px solid var(--line);text-transform:uppercase}
@media(max-width:900px){.hero-stand{grid-template-columns:1fr}.hero-meta{justify-self:start;text-align:left}.hero-fig{margin:0}.hero-fig figcaption{padding:14px 22px;flex-direction:column;gap:6px}
  /* Let the plate keep its own proportions on a phone. A fixed 390x590 box
     is taller than it is wide, and the median featured image here is 2:1, so
     the cover crop was discarding two thirds of the width and slicing people
     standing near the edges. The ratio comes from the image itself, clamped
     in atlas_plate_aspect_style(). */
  .hero-fig img{height:auto;aspect-ratio:var(--atlas-ar,3/2);max-height:min(78vh,700px)}
}

/* ---------- motto ribbon ---------- */
.motto{position:relative;border-bottom:1px solid var(--line);overflow:hidden;padding:30px 0}
.motto.is-paused .motto-track{animation-play-state:paused}
/* Sits over the ribbon rather than beside it, so it costs no vertical space. */
.motto-pause{position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--muted);border-radius:999px;background:var(--paper);color:var(--ink);cursor:pointer}
.motto-pause:hover{background:var(--paper-2)}
/* Two bars for pause, one triangle for play. */
.motto-pause-icon{display:block;width:12px;height:14px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.motto.is-paused .motto-pause-icon{width:0;height:0;border:0;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.motto-track{display:flex;gap:60px;white-space:nowrap;font-family:'Fraunces',serif;font-size:clamp(28px,4vw,52px);font-weight:300;font-style:italic;animation:slide 26s linear infinite}
.motto-track span b{font-style:normal;font-weight:600;color:var(--accent)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- story index ---------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:80px 0 34px;border-bottom:2px solid var(--ink)}
.section-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(34px,4.4vw,58px);letter-spacing:-.02em}
.section-head .count{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.story{display:grid;grid-template-columns:90px 300px 1fr auto;gap:36px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);transition:background .3s}
.story:hover{background:#f2ece0}
.story .num{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:30px;color:var(--muted)}
.story .thumb{height:170px;overflow:hidden;background:var(--paper-2)}
.story .thumb img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .6s cubic-bezier(.2,.6,.2,1);filter:saturate(.92)}
.story .thumb img.is-landscape{object-position:center center}
/* A portrait photograph in the 346x200 card keeps 43% of its frame, and a
   blanket 28% anchor is a coin flip: it saved two cards and sliced Mihiri's
   head off the Great Western one. Give portrait cards a taller box so the crop
   is shallow enough that the anchor stops mattering. */
.story:has(.thumb img.is-portrait) .thumb{height:290px}
.story .thumb img.is-portrait{object-position:center 22%}
@media(max-width:700px){
  .story:has(.thumb img.is-portrait) .thumb{height:330px}
}
.story:hover .thumb img{transform:scale(1.06)}

.story .tag{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
.story h3{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(22px,2.4vw,32px);line-height:1.15;margin:10px 0 12px;letter-spacing:-.01em}
.story p{color:var(--muted);font-size:16px;line-height:1.65;max-width:56ch}
.story .go{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.3s;flex-shrink:0}
.story:hover .go{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(-45deg)}
@media(max-width:1024px){.story{grid-template-columns:60px 200px 1fr}.story .go{display:none}}
@media(max-width:700px){.story{grid-template-columns:1fr;gap:16px}.story .thumb{height:200px}.story .num{display:none}}

/* ---------- “more stories” CTA after homepage list ---------- */
.stories-more{padding:28px 0 10px;border-bottom:1px solid var(--line)}
.stories-more-link{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 8px;transition:background .3s}
.stories-more-link:hover{background:#f2ece0}
.stories-more-kicker{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:8px}
.stories-more-title{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.015em;line-height:1.15}
.stories-more-link .go{width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:.3s}
.stories-more-link:hover .go{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(-45deg)}
@media(max-width:700px){.stories-more-link .go{display:none}}

/* ---------- interlude ---------- */
.interlude{position:relative;height:88vh;min-height:560px;margin-top:90px;overflow:hidden}
.interlude img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.interlude::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,10,.15),rgba(20,16,10,.62))}
.interlude .quote{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center;padding:0 8vw}
.interlude blockquote{font-family:'Fraunces',serif;font-weight:300;font-style:italic;font-size:clamp(26px,3.6vw,50px);line-height:1.3;color:#f8f3e7;max-width:22ch;border:0;padding:0;margin:0}
.interlude cite{display:block;margin-top:26px;font-family:'Inter';font-style:normal;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#e8ddc4}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;padding-top:110px;padding-bottom:110px;align-items:center}
.about .frame{position:relative;margin-left:18px}
.about .frame img{width:100%;aspect-ratio:3/4;object-fit:cover}
.about .frame::before{content:"";position:absolute;inset:-18px 18px 18px -18px;border:1px solid var(--gold);pointer-events:none}
.about .frame figcaption{margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.about h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(36px,4.6vw,62px);line-height:1.04;letter-spacing:-.02em;margin:18px 0 26px}
.about h2 em{font-style:italic;font-weight:300;color:var(--accent)}
.about p{color:var(--muted);font-size:16px;line-height:1.8;max-width:58ch}
.about p + p{margin-top:16px}
.about .sig{font-family:'Fraunces',serif;font-style:italic;font-size:26px;margin-top:30px}
@media(max-width:900px){.about{grid-template-columns:1fr;gap:44px;padding-top:80px;padding-bottom:80px}}

/* ---------- field index (categories) ---------- */
.index{background:var(--ink);color:var(--paper);padding:96px 0}
.index .section-head{border-color:var(--paper)}
.index .section-head .count{color:#b9ad94}
.dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#3a342a;border:1px solid #3a342a;margin-top:40px}
.dest{background:var(--ink);padding:30px 26px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between;transition:.3s}
@media(max-width:700px){.dest{min-height:0;padding:20px 22px}.dest h3{font-size:21px;margin:8px 0 4px}}
.dest:hover{background:#26211a}
.dest .d-num{font-family:'Fraunces',serif;font-style:italic;color:var(--gold);font-size:15px}
.dest h3{font-family:'Fraunces',serif;font-weight:500;font-size:24px;margin:14px 0 8px;letter-spacing:-.01em}
.dest span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#a2957d}
@media(max-width:900px){.dest-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dest-grid{grid-template-columns:1fr}}
.index-more{margin-top:0;border:1px solid #3a342a;border-top:0}
.index-more-link{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 26px;color:var(--paper);transition:background .3s}
.index-more-link:hover{background:#26211a;color:var(--paper)}
.index-more-link span:first-child{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.01em}
.index-more-link .go{width:48px;height:48px;border:1px solid #5a5244;border-radius:50%;display:grid;place-items:center;color:var(--gold);transition:.3s}
.index-more-link:hover .go{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:rotate(-45deg)}
.destinations-page{padding-top:40px}

/* ---------- subscribe ---------- */
.subscribe{padding-top:110px;padding-bottom:110px;text-align:center;border-bottom:1px solid var(--line)}
.subscribe h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(32px,4.4vw,56px);letter-spacing:-.02em}
.subscribe h2 em{font-style:italic;color:var(--accent)}
.subscribe p{color:var(--muted);margin:18px auto 36px;max-width:46ch;line-height:1.7;font-size:15px}
.subscribe .sub-shortcode{max-width:560px;margin:0 auto}
/* Jetpack form blocks, when active, sit in the same visual lane */
.page-body .wp-block-jetpack-contact-form,
.page-body .contact-form{max-width:520px;margin-top:24px}
.page-body .wp-block-jetpack-contact-form input,
.page-body .wp-block-jetpack-contact-form textarea,
.page-body .contact-form input,
.page-body .contact-form textarea{
  width:100%;border:1px solid var(--line);background:#fff;padding:12px 14px;
  font-family:'Inter',system-ui,sans-serif;font-size:14px;margin-bottom:12px
}
.page-body .wp-block-jetpack-button .wp-block-button__link,
.page-body .contact-form input[type=submit]{
  background:var(--ink)!important;color:var(--paper)!important;border:0!important;
  padding:14px 28px!important;font-size:11px!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;font-weight:700!important;border-radius:999px!important
}

/* Accessibility fixes from an audit of the live site.
   Form fields were outlined in --line, which is 1.4:1 against paper. WCAG
   1.4.11 wants 3:1 for a control boundary, and --muted measures 5.14:1. This
   covers the Jetpack contact form and the subscribe field, which the theme
   does not render itself. */
.wp-block-jetpack-contact-form input[type=text],
.wp-block-jetpack-contact-form input[type=email],
.wp-block-jetpack-contact-form input[type=tel],
.wp-block-jetpack-contact-form input[type=url],
.wp-block-jetpack-contact-form select,
.wp-block-jetpack-contact-form textarea,
input[type=email].subscribe-field,
#subscribe-field-1{border:1px solid var(--muted)}

/* Jetpack's related-posts metadata ships at 3.89:1. */
.jp-relatedposts-post-date,
.jp-relatedposts-post-context{color:var(--muted)}

/* Micro-type. The theme already drops in-content captions to 13px sentence
   case on a phone, with a note that uppercase micro-type is the hardest thing
   to read there. The same argument applies to the tagline strip, the byline,
   the plate caption and the section kickers, which stayed at 10 to 11.5px
   uppercase with wide tracking. The readership is over 60. */
@media(max-width:760px){
  .topline{font-size:12px;letter-spacing:.06em}
  .byline,.byline span{font-size:13px;letter-spacing:.04em}
  .hero-fig figcaption{font-size:12.5px;letter-spacing:.05em}
  .gal-head span{font-size:12.5px;letter-spacing:.08em}
  .story-map-kicker{font-size:12px;letter-spacing:.12em}
  .comment-metadata,.comment-metadata a{font-size:13px}
}

/* Controls an older reader has to hit accurately. */
.comment-reply-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--accent)}
.comment-reply-link:hover{text-decoration:underline}
.story .kicker a,.more-from .count a{display:inline-flex;align-items:center;min-height:44px}
.wp-block-social-links .wp-block-social-link-anchor{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* ---------- footer ---------- */
footer{padding:56px 0 40px}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.foot-mark{display:flex;align-items:center;gap:16px;font-family:'Fraunces',serif;font-size:44px;font-weight:600;letter-spacing:-.02em}
.atlas-logo--foot{flex:0 0 auto;height:54px;color:var(--brand-ink)}
@media(max-width:760px){.foot-mark{font-size:34px;gap:12px}.atlas-logo--foot{height:42px}}
.foot-mark em{font-style:italic;font-weight:300;color:var(--accent)}
footer .fine{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:2}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:4px 24px;list-style:none;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
.foot-nav a:hover{color:var(--accent)}

/* =========================================================
   SINGLE POST — the coffee-table book
   ========================================================= */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;z-index:100}
.story-head{text-align:center;padding-top:88px;padding-bottom:60px;max-width:1000px;margin:0 auto}
.story-head .kicker{justify-content:center}
.story-head .kicker::before{display:none}
.story-head h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(44px,7vw,96px);line-height:1;letter-spacing:-.025em;margin:26px 0}
.standfirst{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(18px,2vw,24px);line-height:1.55;color:#3a342b;max-width:62ch;margin:0 auto}
.byline{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-top:40px;padding-top:26px;border-top:1px solid var(--line);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.byline b{color:var(--ink)}

/* the reading column — everything the editor writes flows through here */
.book{max-width:720px;margin:0 auto;padding:40px 40px 0}
@media(max-width:760px){.book{padding:28px 22px 0}}
.entry-content{font-size:17.5px;line-height:1.85;color:#2c271f}
.entry-content > p{margin-bottom:26px}
/* Sized for two lines of the 32.375px body leading. The old 86px cap needed
   about 3.3 lines and Mihiri opens with one or two short sentences, so it hung
   29px below its own paragraph and crossed into the next one on every story.
   initial-letter seats it on the correct baseline where supported. */
.entry-content > p:first-of-type::first-letter{font-family:'Fraunces',serif;font-weight:500;font-size:62px;float:left;line-height:1.04;padding:4px 12px 0 0;color:var(--accent)}
@supports (initial-letter: 2) or (-webkit-initial-letter: 2){
  .entry-content > p:first-of-type::first-letter{
    -webkit-initial-letter:2;
    initial-letter:2;
    float:none;
    font-size:inherit;
    line-height:inherit;
    padding:0;
    margin-right:12px
  }
}
.entry-content h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.015em;line-height:1.1;margin:80px 0 30px;display:flex;align-items:center;gap:16px}
.entry-content h2::before{content:"";width:44px;height:1px;background:var(--accent);flex-shrink:0}
.entry-content h3{font-family:'Fraunces',serif;font-weight:500;font-size:26px;margin:48px 0 18px}
.entry-content a{color:var(--accent);border-bottom:1px solid var(--accent)}
.entry-content ul,.entry-content ol{margin:0 0 26px 22px}
.entry-content li{margin-bottom:10px}
.entry-content li::marker{color:var(--accent)}

/* blockquote = pull quote */
.entry-content blockquote,.entry-content .wp-block-quote{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:clamp(26px,3.2vw,38px);line-height:1.35;text-align:center;margin:70px auto;max-width:24ch;color:var(--ink);border:0;padding:0}
.entry-content blockquote::before,.entry-content .wp-block-quote::before{content:"“";display:block;font-size:90px;color:var(--accent);line-height:.4;margin-bottom:18px}
.entry-content blockquote p{margin:0;font:inherit}
.entry-content blockquote cite{display:block;font-family:'Inter';font-style:normal;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:22px}

/* images = plates */
.entry-content img{border-radius:0}
.entry-content,.entry-content p,.entry-content li,
.entry-content h1,.entry-content h2,.entry-content h3{overflow-wrap:break-word}
.entry-content a{overflow-wrap:anywhere}
.entry-content iframe,.entry-content embed,.entry-content object,.entry-content video{max-width:100%}
.entry-content .wp-block-table,.entry-content figure.wp-block-table{max-width:100%;overflow-x:auto}
.entry-content table{width:100%;border-collapse:collapse}
.entry-content .wp-block-image{margin:44px 0}
.entry-content .wp-block-image figcaption,.entry-content figcaption{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:12px;text-align:left}
.entry-content .alignwide{margin-left:calc( (100vw - 720px) / -4 );margin-right:calc( (100vw - 720px) / -4 );max-width:none}
@media(max-width:1099px){.entry-content .alignwide{margin-left:-40px;margin-right:-40px}}
@media(max-width:760px){.entry-content .alignwide{margin-left:-22px;margin-right:-22px}}
.entry-content .alignfull{position:relative;left:50%;transform:translateX(-50%);width:100vw;max-width:100vw;margin-top:70px;margin-bottom:70px}
@media(max-width:1099px){.entry-content .alignfull{position:static;left:auto;transform:none;width:auto;max-width:none;margin-left:-40px;margin-right:-40px}}
@media(max-width:760px){.entry-content .alignfull{margin-left:-22px;margin-right:-22px}}
/* In the >=1100px rail layout the article is a column, so full-bleed must stay in it. */
.story-layout--aside .entry-content .alignfull{position:static;left:auto;transform:none;width:auto;max-width:none;margin-left:0;margin-right:0}
.entry-content .alignfull img{width:100%;height:min(78vh,720px);object-fit:cover;object-position:center 30%;display:block}
.entry-content .alignfull figcaption{display:flex;justify-content:space-between;gap:18px;padding:14px 40px;border-bottom:1px solid var(--line);max-width:100%}
@media(max-width:760px){.entry-content .alignwide{margin-left:-22px;margin-right:-22px}.entry-content .alignfull figcaption{padding:12px 22px;flex-direction:column;gap:4px}}

/* Classic-editor stories nest figure.aligncenter inside div.wp-block-image.
   The inner figure was picking up a -44px right margin and rendering 434px
   wide in a 390px viewport, so 61 of the 227 stories scrolled sideways. The
   wrapper keeps its full-bleed pull; the figure inside it does not get one. */
.entry-content .wp-block-image > figure,
.entry-content .wp-block-image > figure.aligncenter,
.entry-content .wp-block-image > figure.alignleft,
.entry-content .wp-block-image > figure.alignright{
  margin-left:0;margin-right:0;width:auto;max-width:100%;float:none
}

/* alignwide exists to let photographs bleed past the text column. A group of
   text using it had no gutter at all on a phone, so the Contact page ran edge
   to edge. Give the padding back to anything that is not a picture. */
@media(max-width:760px){
  .entry-content .alignwide.wp-block-group,
  .entry-content .alignwide.wp-block-columns{padding-left:22px;padding-right:22px}
}

/* galleries = plate collection */
.entry-content .wp-block-gallery{margin:50px 0}
/* Core's gallery caption rule (0,3,2) outranks the theme's (0,2,1) and turns
   captions into white text laid over the photo, which vanishes on bright
   images. Put them back under the picture in the theme's own voice. */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption{
  position:static;
  max-width:none;
  padding:12px 0 0;
  margin:0;
  background:none;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.02em;
  text-transform:none;
  text-align:left;
  overflow:visible;
  text-overflow:clip;
  white-space:normal
}
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption){
  background:none
}
/* Uppercase micro-type is the hardest thing to read on a phone. */
@media(max-width:760px){
  .entry-content figcaption,
  .entry-content .wp-block-image figcaption{font-size:13px;text-transform:none;letter-spacing:.02em}
}
/* Mobile: the column keeps its 22px gutters so the text is not flush to the
   glass, but photographs still run edge to edge. */
@media(max-width:760px){
  .entry-content figure,
  .entry-content .wp-block-image,
  .entry-content .wp-block-gallery,
  .entry-content .wp-block-embed,
  .entry-content > img,
  .entry-content p > img{
    margin-left:-22px;
    margin-right:-22px;
    width:calc(100% + 44px);
    max-width:calc(100% + 44px)
  }
  /* Items inside a gallery must not pull out a second time. */
  .entry-content .wp-block-gallery figure,
  .entry-content .wp-block-gallery img{
    margin-left:0;
    margin-right:0;
    width:auto;
    max-width:100%
  }
  /* Captions line back up with the body text. */
  .entry-content figure figcaption,
  .entry-content .wp-block-image figcaption{padding-left:22px;padding-right:22px}
}
.entry-content .wp-block-gallery .blocks-gallery-item img{transition:transform .6s cubic-bezier(.2,.6,.2,1);filter:saturate(.95)}
.entry-content .wp-block-gallery .blocks-gallery-item:hover img{transform:scale(1.03)}

/* separator */
.entry-content .wp-block-separator{border:0;border-top:1px solid var(--line);margin:60px auto;max-width:120px}

/* ---------- fast facts card (editor meta) ---------- */
.facts{max-width:520px;margin:80px auto;padding:0 24px}
.facts .card{border:1px solid var(--line);background:#f3efe4;border-radius:16px;overflow:hidden;box-shadow:0 1px 0 rgba(28,24,19,.04)}
.facts .card-head{padding:20px 26px 14px;border-bottom:1px solid var(--line)}
.facts .card-head h2,.facts .card-head h3{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.fact-rows{padding:6px 26px 10px}
.fact-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid rgba(216,205,182,.85);font-size:15px}
.fact-row:last-child{border-bottom:0}
.fact-label{color:var(--muted);font-weight:500}
.fact-value{font-weight:600;color:var(--ink);text-align:right}
.fact-badge{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.fact-tips{background:#e5efe0;padding:20px 26px 22px}
.fact-notes{background:#f3e4e0;padding:20px 26px 24px}
.fact-section-label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:12px;color:#3d6b38}
.fact-notes .fact-section-label{color:#8a3a2c}
.fact-tips ul{margin:0;padding:0;list-style:none}
.fact-tips li{position:relative;padding:0 0 10px 16px;font-size:14.5px;line-height:1.55;color:#2c271f}
.fact-tips li:last-child{padding-bottom:0}
.fact-tips li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:#5a8f4a}
.fact-notes p{margin:0;font-size:14.5px;line-height:1.6;color:#2c271f}
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:26px 30px;border-right:1px solid var(--line)}
.fact b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:30px;margin-bottom:6px}

/* ---------- story map (editorial tear-out locator) ---------- */
.story-map{max-width:640px;margin:90px auto 20px;padding:0 24px}
.story-map-card{
  border:1px solid var(--line);background:linear-gradient(180deg,#f7f2e8 0%,#f1e9d8 100%);
  border-radius:20px;overflow:hidden;
  box-shadow:0 1px 0 rgba(28,24,19,.04),0 18px 40px rgba(28,24,19,.06)
}
.story-map-head{padding:22px 28px 16px;border-bottom:1px solid rgba(216,205,182,.9);background:rgba(246,241,230,.55)}
.story-map-kicker{margin:0;font-family:'Inter',system-ui,sans-serif;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.story-map-title{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(24px,3.2vw,32px);letter-spacing:-.02em;margin:10px 0 0;color:var(--ink);line-height:1.15}
.story-map-figure{padding:28px 20px 18px;display:flex;flex-direction:column;align-items:center}
.story-map-stage{
  width:100%;max-width:340px;margin:0 auto;padding:12px 8px 4px;
  background:transparent;border:0;border-radius:0;box-shadow:none
}
.story-map-canvas{width:100%;height:auto;display:block;background:transparent}
.story-map-canvas--sl{max-width:300px;margin:0 auto}
/* The island is 1:1.76 portrait, so width-driven sizing makes a 530px-tall card
   on phones and pushes the story text off screen. Let height drive it instead. */
@media(max-width:899px){
  .story-map-canvas--sl{width:auto;max-width:100%;max-height:290px}
  .story-map-figure{padding:20px 16px 14px}
}
.story-map-ocean{fill:none !important}
/* District landmass */
.story-map-districts .story-map-district{
  fill:#d8c6a0;stroke:#8a7a5c;stroke-width:.55;stroke-linejoin:round;transition:fill .25s
}
.story-map-districts .story-map-district.is-highlight{
  fill:#c47a4a;stroke:#7a3d1e;stroke-width:.9
}
.story-map-pin-dot{filter:drop-shadow(0 1px 2px rgba(28,24,19,.25))}
.story-map-legend{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:16px;padding:0 16px;text-align:center
}
.story-map-caption{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
.story-map-place{
  font-family:'Fraunces',serif;font-size:clamp(16px,2.2vw,20px);font-weight:500;
  color:var(--ink);letter-spacing:-.01em
}
.story-map-meta{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.story-map-foot{
  padding:16px 26px 20px;border-top:1px solid rgba(216,205,182,.9);
  text-align:center;background:rgba(246,241,230,.4)
}
.story-map-ext{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.story-map-ext:hover{color:var(--accent)}
/* Grid of cached OpenStreetMap tiles; the pin is placed by percentage. */
.story-map-static{position:relative;width:100%;max-width:420px;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2);display:grid;grid-template-columns:repeat(var(--atlas-grid,3),1fr);grid-template-rows:repeat(var(--atlas-grid,3),1fr)}
/* Tiles still warming, or unreachable: a plain plate, never a blank gap. */
.story-map-static.is-pending{aspect-ratio:3/2;background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 10px,#eae1cd 10px,#eae1cd 20px)}
.story-map-static img{width:100%;height:100%;display:block;filter:grayscale(1) sepia(.38) contrast(.92) brightness(1.04)}
.story-map-gap{background:var(--paper-2)}
.story-map-static-pin{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent);border:2px solid var(--paper);box-shadow:0 0 0 8px rgba(180,80,42,.2);pointer-events:none}
.story-map-credit{margin-top:6px;font-size:10.5px;letter-spacing:.04em;color:var(--muted)}
.story-map-credit a{border-bottom:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){
  .story-map-pin-pulse{animation:atlas-pin-pulse 2.4s ease-in-out infinite}
}
@keyframes atlas-pin-pulse{
  0%,100%{opacity:.14;transform:scale(1)}
  50%{opacity:.06;transform:scale(1.18)}
}

/* ---------- tear-out pair (map + fast facts at the top of the story) ----------
   Design rules (do not violate):
   1. One pair per story, at the top: right rail beside the opening
      paragraphs on desktop (≥1100px); above the story body below that.
   2. Stack map then facts inside the rail; side by side only in the
      900–1099px band where the pair sits above the story.
   3. Map plate is taller; facts plate is denser (never force equal height).
*/
.tearout-pair{
  max-width:1080px;
  margin:56px auto 0;
  padding:0 24px;
  display:grid;
  gap:28px;
  align-items:start;
  grid-template-columns:1fr;
}
.story-layout--aside .tearout-pair{
  max-width:560px;
}
@media (min-width:900px) and (max-width:1099px){
  .story-layout--aside .tearout-pair--both{
    max-width:1000px;
  }
}
@media (min-width:1100px){
  /* Full > wide > body, all inside the column. */
  .story-layout--aside .entry-content .alignwide{margin-left:-24px;margin-right:-24px}
  .story-layout--aside .entry-content .alignfull{margin-left:-40px;margin-right:-40px}
  .story-layout--aside{
    max-width:1240px;
    margin:0 auto;
    padding:0 40px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:56px;
    align-items:start;
  }
  .story-layout--aside .book{
    grid-column:1;
    grid-row:1;
    max-width:720px;
    margin:0 auto;
  }
  .story-aside{
    grid-column:2;
    grid-row:1;
    padding-top:52px;
  }
  .story-aside .tearout-pair{
    margin:0;
    padding:0;
    max-width:none;
    gap:24px;
    grid-template-columns:1fr;
  }
  /* Rail is narrow: undo the wide-band plate sizing */
  .story-aside .tearout-pair--both{
    grid-template-columns:1fr;
    gap:24px;
  }
  .story-aside .tearout-pair--both .story-map-figure{
    min-height:0;
    padding:24px 16px 18px;
  }
  .story-aside .tearout-pair--both .story-map-canvas--sl{
    max-width:230px;
  }
}
.tearout-pair .story-map,
.tearout-pair .facts{
  max-width:none;
  width:100%;
  margin:0;
  padding:0;
}
/* Solo plate: keep a magazine-card width, not full band */
.tearout-pair--map-only,
.tearout-pair--facts-only{
  max-width:560px;
}
@media (min-width:900px){
  .tearout-pair--both{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:32px;
    align-items:start;
  }
  /* Map: taller plate — generous figure stage, column can grow */
  .tearout-pair--both .story-map-card{
    display:flex;
    flex-direction:column;
    min-height:100%;
  }
  .tearout-pair--both .story-map-figure{
    flex:1 1 auto;
    justify-content:center;
    min-height:420px;
    padding:32px 18px 22px;
  }
  .tearout-pair--both .story-map-stage{
    max-width:min(100%,320px);
  }
  .tearout-pair--both .story-map-canvas--sl{
    max-width:280px;
  }
  .tearout-pair--both .story-map-title{
    font-size:clamp(22px,2.4vw,28px);
  }
  /* Facts: denser plate — tighter rows and section pads, no height stretch */
  .tearout-pair--both .facts .card{
    height:auto;
  }
  .tearout-pair--both .facts .card-head{
    padding:16px 22px 12px;
  }
  .tearout-pair--both .fact-rows{
    padding:2px 22px 4px;
  }
  .tearout-pair--both .fact-row{
    padding:10px 0;
    font-size:14px;
    gap:12px;
  }
  .tearout-pair--both .fact-tips,
  .tearout-pair--both .fact-notes{
    padding:14px 22px 16px;
  }
  .tearout-pair--both .fact-tips li,
  .tearout-pair--both .fact-notes p{
    font-size:13.5px;
    line-height:1.5;
  }
  .tearout-pair--both .fact-tips li{
    padding-bottom:8px;
  }
  .tearout-pair--both .fact-section-label{
    margin-bottom:8px;
  }
}
@media (max-width:899px){
  .tearout-pair{
    margin:64px auto 36px;
    gap:22px;
  }
  .tearout-pair--both .story-map-figure{
    min-height:0;
  }
}

/* ---------- wander-by chips (home, under the motto) ---------- */
.wander{max-width:1320px;margin:38px auto 6px;padding:0 40px;display:flex;align-items:center;gap:14px 16px;flex-wrap:wrap}
.wander-label{font-family:'Fraunces',serif;font-style:italic;font-size:24px;color:var(--ink);margin-right:6px}
.wander-chip{display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;border:1.5px solid var(--chip,var(--accent));border-radius:999px;color:var(--chip,var(--accent));font-size:13px;letter-spacing:.05em;font-weight:600;transition:background .25s,color .25s}
.wander-chip:hover{background:var(--chip,var(--accent));color:var(--paper)}
@media(max-width:760px){.wander{padding:0 22px;margin-top:28px;gap:10px 10px}.wander-label{font-size:20px;flex:1 0 100%;margin-right:0}}

/* ---------- join the journey ---------- */
.journey-hero{position:relative;background:var(--ink);min-height:320px;display:flex;align-items:flex-end;overflow:hidden}
.journey-hero--img{min-height:min(72vh,640px)}
.journey-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.journey-hero>img.is-landscape{object-position:center center}
/* Upright photograph: show the whole frame beside the copy rather than cropping
   a quarter of it into the band. Photograph first on a phone, then the words. */
.journey-hero--split{display:block;min-height:0;overflow:visible}
.journey-hero--split::after{display:none}
.journey-hero-inner{display:grid;grid-template-columns:1fr;gap:30px;padding-top:52px;padding-bottom:52px;position:relative;z-index:1}
.journey-hero--split .journey-hero-copy{padding:0;width:auto}
.journey-hero--split img{position:static;inset:auto;width:100%;height:auto;max-width:360px;margin:0 auto;order:-1}
@media(min-width:900px){
  .journey-hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:64px;align-items:center;padding-top:76px;padding-bottom:76px}
  .journey-hero--split img{max-width:420px;max-height:min(74vh,660px);object-fit:contain;margin:0;justify-self:end;order:0}
}
.journey-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,24,19,.08) 30%,rgba(28,24,19,.74))}
.journey-hero-copy{position:relative;z-index:1;width:100%;padding-top:70px;padding-bottom:54px;color:var(--paper)}
.journey-hero-copy .kicker{color:#e9ddc4}
.journey-hero-copy h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(44px,7vw,92px);letter-spacing:-.02em;color:#fff;margin:10px 0 16px}
.journey-hero-copy .standfirst{max-width:560px;font-family:'Fraunces',serif;font-size:clamp(17px,2vw,21px);line-height:1.55;color:#f1e9d8}
.journey-body{max-width:840px;margin:0 auto;padding:70px 40px 50px}
.journey-body .entry-content>p.journey-lede{font-family:'Fraunces',serif;font-size:clamp(22px,2.8vw,30px);line-height:1.5;text-align:center;max-width:32ch;margin:0 auto 36px}
.journey-body .entry-content>p:first-of-type::first-letter{float:none;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;padding:0;margin-right:0;-webkit-initial-letter:normal;initial-letter:normal}
.journey-stats.wp-block-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0;margin:60px 0;text-align:center}
.journey-stats .wp-block-column{margin:0}
.journey-stats .stat-value{font-family:'Fraunces',serif;font-size:clamp(34px,4vw,52px);line-height:1;margin:0 0 10px}
.journey-stats .wp-block-column:nth-child(4n+1) .stat-value{color:#66713f}
.journey-stats .wp-block-column:nth-child(4n+2) .stat-value{color:var(--accent)}
.journey-stats .wp-block-column:nth-child(4n+3) .stat-value{color:var(--gold)}
.journey-stats .wp-block-column:nth-child(4n+4) .stat-value{color:#3f5d6b}
.journey-stats .stat-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
@media(max-width:760px){.journey-body{padding:50px 22px 36px}.journey-stats.wp-block-columns{grid-template-columns:repeat(2,1fr);gap:30px 16px}}

/* ---------- mihipedia rating card ---------- */
.rating{max-width:920px;margin:0 auto 100px;padding:0 40px}
.rating .card{border:1.5px solid var(--ink);background:var(--ink);color:var(--paper)}
.rating .card-head{padding:26px 30px;border-bottom:1px solid #3a342a;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.rating .card-head h3{font-family:'Fraunces',serif;font-weight:500;font-size:26px}
.rating .card-head .stars{color:#d8b06a;font-size:20px;letter-spacing:.1em}
.rating-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.r-item{padding:24px 30px;border-right:1px solid #3a342a;border-bottom:1px solid #3a342a}
.r-item:nth-child(3n){border-right:0}
.r-item b{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#a2957d;margin-bottom:8px;font-weight:600}
.r-item span{font-family:'Fraunces',serif;font-size:20px;color:#efe7d6}
.r-item span.stars{color:#d8b06a;font-size:18px;letter-spacing:.06em}
.rating .again{padding:26px 30px;font-family:'Fraunces',serif;font-style:italic;font-size:22px;color:#efe7d6}
.rating .again b{font-style:normal;font-family:'Inter';font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:8px}
@media(max-width:700px){.rating-grid{grid-template-columns:1fr}.r-item{border-right:0}}

/* ---------- plates gallery (auto from attached images) ---------- */
.gallery{padding-top:40px;padding-bottom:100px}
.gal-head{text-align:center;margin-bottom:50px}
.gal-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(32px,4vw,52px);letter-spacing:-.02em}
.gal-head span{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gal-grid figure{position:relative;overflow:hidden;margin:0}
.gal-grid img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1);filter:saturate(.95)}
.gal-grid figure:hover img{transform:scale(1.05)}
@media(max-width:820px){.gal-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- next story ---------- */
.next-story{display:block;background:var(--ink);color:var(--paper);text-align:center;padding:110px 24px;transition:background .4s}
.next-story:hover{background:#26211a;color:var(--paper)}
.next-story span{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.next-story h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(34px,5vw,68px);margin-top:18px;letter-spacing:-.02em}
.next-story h2 em{font-style:italic;color:#d8b06a}

/* The pair sits inside the story a few paragraphs down on phones. On desktop
   the rail is the better layout, so the inline copy is hidden there. The pair
   itself needs no sizing rules: it is still inside .story-layout--aside and
   picks up exactly what the "above" placement gets. */
.tearout-inline{margin:34px 0}
/* The pull quote holder. Separate from .tearout-inline, which is hidden on
   desktop because it carries the phone-only map card. */
.atlas-pullquote-holder{margin:38px 0}
@media(min-width:1100px){
  .tearout-inline{display:none}
}
@media(max-width:1099px){
  .story-layout--inline > .story-aside{display:none}
}

/* Split layout. The four facts that decide whether a reader can do the trip sit
   above the story at about a quarter of a screen. The map and the rest of the
   detail wait at the end, one tap away via the jump link. Desktop keeps the
   rail, so both of these are hidden there. */
.facts-strip{max-width:720px;margin:30px auto 0;padding:0 22px}
.facts-strip-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.facts-strip-item{background:#f3efe4;padding:13px 15px}
.facts-strip-item dt{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.facts-strip-item dd{margin-top:5px;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.facts-strip-jump{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:6px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.facts-strip-jump:hover{text-decoration:underline}

.trip-planning{margin:56px 0 0;padding:44px 0 8px;border-top:1px solid var(--line);background:var(--paper-2)}
.trip-planning > .wrap{max-width:720px}
.trip-planning h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(26px,4.6vw,34px);letter-spacing:-.01em;margin-bottom:24px}
.trip-planning .story-map,.trip-planning .facts{max-width:none;margin:0 0 26px;padding:0}

@media(min-width:1100px){
  .facts-strip,.trip-planning{display:none}
}
@media(max-width:1099px){
  .story-layout--split > .story-aside{display:none}
}

/* "Below the story" is a phone choice: the desktop rail is unchanged, so the
   copy in the rail is hidden on phones and the copy after the story is hidden
   on desktop. Exactly one is ever visible. */
@media(max-width:1099px){
  .story-layout--below > .story-aside{display:none}
}
@media(min-width:1100px){
  .story-aside--after{display:none}
}

/* Folded map and facts, when Mihiri picks that option. Open on desktop; on a
   phone it collapses from roughly 1,200px to a single tappable line. */
.tearout-fold{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tearout-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:14px 22px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.tearout-fold > summary::-webkit-details-marker{display:none}
.tearout-fold > summary::after{content:"+";font-size:20px;line-height:1;color:var(--muted)}
.tearout-fold[open] > summary::after{content:"\2212"}
@media(min-width:1100px){
  .tearout-fold{border:0}
  .tearout-fold > summary{display:none}
}
.story-aside--after{margin-top:10px}
@media(min-width:1100px){
  .story-aside--after{max-width:720px;margin-left:auto;margin-right:auto}
}

/* ---------- search + related ---------- */
.nav-search{padding:12px 22px 18px;border-top:1px solid var(--line)}
.nav-search form,.archive-search form{display:flex;gap:8px}
.nav-search input[type=search],.archive-search input[type=search]{flex:1 1 auto;min-height:46px;padding:10px 14px;border:1px solid var(--muted);background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.nav-search input[type=submit],.archive-search input[type=submit],
.nav-search button,.archive-search button{min-height:46px;padding:10px 18px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:inherit;font-size:13px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:999px}
.nav-search label,.archive-search label{flex:1 1 auto}
.nav-search .screen-reader-text,.archive-search .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.archive-search{max-width:520px;margin:22px auto 0}
@media(min-width:1024px){.nav-search{display:none}}
.more-from .section-head{padding-top:70px}
.more-from .count a{border-bottom:1px solid var(--line)}
.more-from .count a:hover{color:var(--accent)}
.no-results{padding:40px 0 80px;color:var(--muted);font-size:17px}

/* ---------- archive / index ---------- */
.archive-head{padding-top:80px;padding-bottom:0;text-align:center}
.archive-head h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(38px,5vw,64px);letter-spacing:-.02em}
.archive-head p{color:var(--muted);margin-top:14px;font-size:15px}
.archive-jump{margin-top:18px !important}
.archive-jump a{display:inline-flex;align-items:center;min-height:44px;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.archive-jump a:hover{color:var(--ink)}
.archive-empty{padding:40px 0;color:var(--muted)}

/* ---------- page ---------- */
.page-body{max-width:760px;margin:0 auto;padding:70px 40px 90px}
@media(max-width:760px){.page-body{padding:56px 22px 72px}}
/* Featured image on a page: portrait plate beside the opening text, with the
   gold offset border the About section uses. */
.page-portrait{position:relative;float:right;width:min(300px,42%);margin:6px 0 24px 34px}
.page-portrait img{width:100%;height:auto;display:block}
.page-portrait::before{content:"";position:absolute;inset:-16px -16px 16px 16px;border:1px solid var(--gold);pointer-events:none}
.page-portrait figcaption{margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.page-body .entry-content::after{content:"";display:block;clear:both}
@media(max-width:700px){
  .page-portrait{float:none;width:100%;max-width:340px;margin:0 auto 30px}
  .page-portrait::before{inset:-12px -12px 12px 12px}
}
.page-body h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(38px,5vw,60px);letter-spacing:-.02em;margin-bottom:36px}

/* ---------- comments ---------- */
.comments-area{max-width:720px;margin:60px auto 0;padding:60px 0;border-top:1px solid var(--line)}
.comments-title{font-family:'Fraunces',serif;font-size:28px;margin-bottom:30px}
.comment-list,.comment-list ol{list-style:none}
.comment-list .comment-body{padding:22px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.7;color:#3a342b}
.comment-list .comment-author{font-weight:600}
.comment-list .comment-metadata{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:4px 0 10px}
.comment-reply-title{font-family:'Fraunces',serif;font-size:24px;margin:34px 0 14px}
.comment-form label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:1px solid var(--line);background:#fff;padding:12px 14px;font-family:'Inter';font-size:16px;color:var(--ink)}
.comment-form .submit{background:var(--ink);color:var(--paper);border:0;min-height:44px;padding:14px 30px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;cursor:pointer;border-radius:999px}
.comment-form .submit:hover{background:var(--accent)}

/* ---------- misc WP ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
/* Two markups reach here: paginate_links() puts the pills straight in
   .pagination, the_posts_pagination() wraps them in .nav-links. Both must lay
   out as a wrapping row; a column stacks one pill per line. */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:50px 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pagination > a,.pagination > span:not(.screen-reader-text),
.pagination .nav-links a,.pagination .nav-links span{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:10px 18px;
  border:1px solid var(--line);border-radius:999px
}
.pagination .screen-reader-text{border:0;padding:0;min-height:0;min-width:0}
.pagination .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sticky .tag::after{content:" · Featured"}
.wp-caption{max-width:100%}


/* ---------- a11y: skip link, focus, reduced motion (1.7.1) ---------- */
.skip-link:focus{
  position:fixed !important;top:10px;left:10px;z-index:999;width:auto;height:auto;clip:auto;
  background:var(--ink);color:var(--paper);padding:12px 18px;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:700;clip-path:none
}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .motto-track{animation:none;transform:none}
}
/* Jetpack/subscribe fields the theme does not otherwise style: 16px stops iOS zooming on focus. */
.sub-shortcode input[type=email],
.sub-shortcode input[type=text],
.page-body .contact-form input[type=text],
.page-body .contact-form input[type=email],
.page-body .contact-form textarea{
  width:100%;font-family:'Inter',sans-serif;font-size:16px;min-height:48px;
  padding:12px 14px;border:1px solid var(--line);background:#fff;color:var(--ink)
}
.sub-shortcode button,
.sub-shortcode input[type=submit]{min-height:48px;font-size:14px}
.page-body .contact-form input[type=submit],
.page-body .contact-form button[type=submit],
.page-body .wp-block-button__link{min-height:48px}