:root {
  --ink: #11110f;
  --paper: #f1eee5;
  --white: #fff;
  --red: #df4a32;
  --yellow: #f5c842;
  --green: #176a4b;
  --lilac: #ad9ae8;
  --line: rgba(17, 17, 15, .24);
  --ease: cubic-bezier(.2, .78, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, video { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 14px; z-index: 200; background: var(--yellow); padding: 12px 16px; transform: translateY(-160%); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Navigation */
/* The blur lives on a pseudo-element: backdrop-filter on .nav itself would make it the
   containing block for the fixed-position mobile menu, pinning it inside the nav's grid cell. */
.nav { position: fixed; z-index: 80; inset: 0 0 auto; height: 76px; padding: 16px clamp(20px, 4vw, 64px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--ink); transition: color .35s; }
/* Glass, not a solid bar: at .94 alpha the blur behind it was invisible and the nav read as
   a white band cutting across the hero image. Both states stay translucent and blurred, so
   the change between them is a tint shift rather than solid-to-nothing. */
.nav::before { content: ''; position: absolute; z-index: -1; inset: 0; background: rgba(241,238,229,.58); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom: 1px solid rgba(17,17,15,.08); transition: background .45s, border-color .45s; }
.nav.is-over-image { color: var(--white); }
.nav.is-over-image::before { background: linear-gradient(180deg, rgba(17,17,15,.42), rgba(17,17,15,.16)); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: rgba(255,255,255,.14); }
.wordmark { justify-self: start; display: flex; align-items: baseline; font-size: 1.55rem; font-weight: 900; letter-spacing: -.075em; }
.wordmark span { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; color: var(--red); }
.wordmark i { margin-left: 7px; color: var(--yellow); font-size: .72rem; font-style: normal; }
.nav-place { margin: 0; font-size: .61rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-place span { margin-left: 10px; color: var(--red); }
.nav-links { justify-self: end; display: flex; align-items: center; gap: 26px; font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-links a { border-bottom: 1px solid transparent; padding-bottom: 4px; }
.nav-links a:hover { border-color: currentColor; }
.nav-links .nav-share { border: 1px solid currentColor; border-radius: 99px; padding: 11px 16px; }
.menu-button { display: none; }

/* The map starts small, expands to the full screen, then carries the brand statement. */
.hero { position: relative; height: 190svh; background: var(--paper); }
.hero-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; --mask-size: min(29vw, 430px); --copy-opacity: 0; --copy-y: 30px; }
/* The still arch sits behind the video, so if a browser ever drops the video layer the
   visitor sees the same frame rather than a flat navy block. */
.hero-window { position: absolute; inset: 0; overflow: hidden; background: #173b4e url('assets/real/independence-arch-illustrated-1200.webp') center / cover; mask: url('assets/maps/ghana-mask.svg') center / var(--mask-size) auto no-repeat; -webkit-mask: url('assets/maps/ghana-mask.svg') center / var(--mask-size) auto no-repeat; }
.hero-window.is-unmasked { mask: none; -webkit-mask: none; }
.hero-window video, .map-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-window video { opacity: 1; transform: scale(1.015); }
.hero-window.is-sequencing video { opacity: 0; }
.map-reel { position: absolute; inset: 0; z-index: 2; overflow: hidden; opacity: 1; transition: opacity .45s ease; }
.hero-window.is-settled .map-reel { opacity: 0; }
.map-scene { z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.17)), var(--image) center / cover; opacity: 1; transform: translateY(-108%) scale(1.04); filter: blur(3px) saturate(1.1); transition: transform var(--slot-duration, 100ms) cubic-bezier(.18,.72,.24,1), filter var(--slot-duration, 100ms) ease; will-change: transform, filter; }
.map-scene.is-active { z-index: 3; transform: translateY(0) scale(1); filter: blur(0) saturate(1.06); }
.map-scene.is-leaving { z-index: 2; transform: translateY(108%) scale(1.04); filter: blur(3px) saturate(1.1); }
.hero-shade { position: absolute; z-index: 4; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.03) 30%, rgba(0,0,0,.64)); pointer-events: none; }
.spin-status { position: absolute; z-index: 8; left: 50%; top: calc(50% + min(17.7vw, 262px)); width: min(560px, 76vw); transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: opacity .25s; }
.spin-status i { height: 1px; background: var(--line); }
.spin-status b { font-weight: 800; }
.spin-status em { color: var(--red); font-style: normal; }
.spin-status.is-hidden, .sequence-skip.is-hidden { opacity: 0; pointer-events: none; }
.sequence-skip { position: absolute; z-index: 8; right: 4vw; bottom: 4vh; border: 0; border-bottom: 1px solid; background: transparent; padding: 0 0 6px; cursor: pointer; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transition: opacity .25s; }
.hero-intro { position: absolute; z-index: 7; inset: auto clamp(20px, 5vw, 76px) 7vh; color: var(--white); display: grid; grid-template-columns: 1.35fr .65fr; gap: 5vw; align-items: end; opacity: var(--copy-opacity); transform: translateY(var(--copy-y)); }
.hero-intro h1 { margin: 0; font-size: clamp(5.6rem, 12vw, 13.5rem); line-height: .7; letter-spacing: -.105em; font-weight: 900; }
.hero-intro h1 span, .hero-intro h1 strong { display: block; }
.hero-intro h1 strong { color: var(--yellow); font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; }
.hero-intro-note { max-width: 390px; padding-bottom: 9px; }
.hero-intro-note p { margin: 0 0 28px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 1.45; }
.hero-intro-note a { display: flex; justify-content: space-between; border-block: 1px solid rgba(255,255,255,.72); padding: 14px 0; font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Shared editorial headings */
.section-heading { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 4vw; align-items: end; }
.section-number { align-self: start; margin: 8px 0 0; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-heading h2, .share-copy h2 { margin: 0; font-size: clamp(4.2rem, 8.2vw, 9rem); line-height: .78; letter-spacing: -.085em; }
.section-heading h2 em, .share-copy h2 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; color: var(--red); }
.section-deck { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.02rem; line-height: 1.45; }

/* Region browser — calm, legible, and directly clickable. */
.regions { position: relative; padding: 130px clamp(20px, 4vw, 64px) 100px; background: var(--ink); color: var(--white); }
.regions-heading { margin-bottom: 76px; }
.regions .section-number { color: var(--yellow); }
.regions .section-deck { color: #d6d0c4; }
.region-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.24); border-left: 1px solid rgba(255,255,255,.24); }
.region-card { position: relative; min-height: clamp(250px, 29vw, 440px); overflow: hidden; border: 0; border-right: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); background: #222; color: var(--white); padding: 0; text-align: left; cursor: pointer; }
.region-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.06) 28%, rgba(0,0,0,.86)); z-index: 1; transition: opacity .3s; }
.region-card::after { content: ''; position: absolute; inset: 0; background: var(--image) center / cover; transform: scale(1.015); transition: transform .7s var(--ease), filter .5s; }
.region-card:hover::after, .region-card:focus-visible::after { transform: scale(1.075); filter: saturate(1.15); }
.region-card:hover::before { opacity: .75; }
.card-no, .card-name, .card-note, .card-arrow { position: absolute; z-index: 2; }
.card-no { top: 18px; left: 18px; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.card-name { left: 18px; right: 18px; bottom: 58px; font-size: clamp(1.6rem, 2.6vw, 3rem); line-height: .88; letter-spacing: -.065em; }
.card-note { left: 18px; right: 52px; bottom: 21px; font-size: .57rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-arrow { right: 18px; bottom: 17px; font-size: 1.1rem; transition: transform .25s; }
.region-card:hover .card-arrow { transform: translate(3px, 3px); }

.region-reader { position: fixed; z-index: 120; inset: 18px; display: grid; grid-template-columns: 1.22fr .78fr; gap: clamp(28px, 5vw, 78px); padding: clamp(54px, 5vw, 78px); background: var(--paper); color: var(--ink); visibility: hidden; opacity: 0; transform: translateY(18px); transition: opacity .25s, transform .45s var(--ease), visibility 0s .45s; overflow: auto; }
.region-reader.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.reader-close { position: absolute; z-index: 4; top: 22px; right: 24px; border: 0; border-bottom: 1px solid; background: transparent; padding: 0 0 5px; cursor: pointer; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.reader-gallery { position: relative; min-height: 72vh; }
.reader-gallery figure { position: absolute; margin: 0; }
.reader-main { inset: 0 16% 0 0; }
.reader-side { z-index: 2; right: 0; bottom: 7%; width: 36%; height: 48%; border: 8px solid var(--paper); }
.reader-gallery img { width: 100%; height: 100%; object-fit: cover; }
.reader-copy { align-self: center; }
.reader-index { margin: 0 0 36px; color: var(--red); font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.reader-copy h2 { margin: 0 0 28px; font-size: clamp(4.3rem, 7.8vw, 9rem); line-height: .74; letter-spacing: -.09em; }
.reader-intro { margin: 0; max-width: 520px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.45; }
.reader-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 38px 0; border-block: 1px solid var(--line); }
.reader-facts div { padding: 18px 18px 20px 0; }
.reader-facts div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.reader-facts span { font-size: .58rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.reader-facts p { margin: 10px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: .95rem; line-height: 1.4; }
.reader-copy > a { display: flex; justify-content: space-between; border: 2px solid; padding: 16px; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transition: background .2s, color .2s; }
.reader-copy > a:hover { background: var(--ink); color: var(--white); }

/* Visitor numbers — modular cards replace the previous flying list. */
.most-visited { padding: 130px clamp(20px, 4vw, 64px) 70px; background: #090909; color: var(--white); }
.visited-heading { margin-bottom: 74px; }
.visited-heading .section-number { color: var(--yellow); }
.visited-heading .section-deck { color: #cbc7bd; }
.visit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.visit-card { min-height: 175px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-content: space-between; padding: 22px; background: #1a1a1a; border: 1px solid #313131; transition: transform .25s, background .25s; }
.visit-card:hover { transform: translateY(-4px); background: #242424; }
.visit-card span { color: var(--yellow); font-size: .63rem; font-weight: 800; letter-spacing: .12em; }
.visit-card strong { justify-self: end; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; font-weight: 400; }
.visit-card h3 { grid-column: 1 / -1; align-self: end; margin: 36px 0 0; font-size: clamp(1.2rem, 1.7vw, 1.75rem); line-height: 1; letter-spacing: -.045em; }
.visit-card p { grid-column: 1 / -1; margin: 0; color: #a8a8a8; font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.visit-card-feature { min-height: clamp(300px, 31vw, 450px); background: var(--white); color: var(--ink); border: 0; }
.visit-card-feature:nth-child(2) { background: var(--yellow); }
.visit-card-feature:nth-child(3) { background: var(--lilac); }
.visit-card-feature:nth-child(4) { background: var(--green); color: var(--white); }
/* Feature cards sit on four different grounds, so the small type cannot inherit the
   dark-card greys — #a8a8a8 on lilac measures 1.03:1. These all clear 4.5:1. */
.visit-card-feature span { color: var(--ink); }
.visit-card-feature p { color: rgba(17, 17, 15, .72); }
.visit-card-feature:nth-child(4) span { color: #ffe9a3; }
.visit-card-feature:nth-child(4) p { color: rgba(255, 255, 255, .82); }
.visit-card-feature strong { font-size: clamp(2rem, 3.4vw, 4rem); letter-spacing: -.06em; }
.visit-card-feature h3 { font-size: clamp(1.7rem, 2.6vw, 3rem); }
.visit-source { margin: 26px 0 0; display: flex; justify-content: space-between; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.visit-source a { border-bottom: 1px solid; padding-bottom: 3px; }

/* The community wall borrows the open contribution grid from the supplied Wndws reference. */
.community { background: #d8d8d5; padding: 68px clamp(20px, 3vw, 48px) 100px; }
.community-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(230px, 25vw); border-top: 1px solid rgba(17,17,15,.12); border-left: 1px solid rgba(17,17,15,.12); }
.place-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border-right: 1px solid rgba(17,17,15,.12); border-bottom: 1px solid rgba(17,17,15,.12); background: rgba(255,255,255,.23); overflow: hidden; }
.place-tile span, .place-tile h3, .nice-button, .place-tile i { position: relative; z-index: 2; }
.place-tile span { font-size: .59rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.place-tile h3 { margin: auto 0 16px; max-width: 90%; font-size: clamp(1.55rem, 2.7vw, 3rem); line-height: .9; letter-spacing: -.06em; }
.place-photo { color: var(--white); background: var(--image) center / cover; }
.place-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.73)); }
.nice-button { align-self: flex-start; border: 1px solid currentColor; border-radius: 99px; background: rgba(255,255,255,.08); padding: 8px 11px; cursor: pointer; backdrop-filter: blur(8px); font-size: .59rem; text-transform: uppercase; letter-spacing: .06em; }
.nice-button[aria-pressed='true'] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
/* Local businesses are a first-class entry type, not a footnote, so tiles say which they are. */
.kind { display: inline-block; margin-left: 8px; border: 1px solid currentColor; border-radius: 99px; padding: 2px 7px; font-size: .92em; font-style: normal; letter-spacing: .07em; opacity: .82; }
.kind.is-business { border-color: var(--yellow); color: var(--yellow); opacity: 1; }
.place-tile:not(.place-photo) .kind.is-business { border-color: #8a6d08; color: #6d5606; }
.place-empty { color: #5f5f5b; border-style: dashed; }
.place-empty:hover { background: rgba(255,255,255,.5); }
.place-empty i { align-self: center; margin: auto; font-size: 3rem; font-style: normal; font-weight: 200; }
.share-panel { margin-top: 88px; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: start; padding: 0 clamp(0px, 3vw, 48px); }
.share-copy .section-number { margin-bottom: 64px; color: var(--red); }
.share-copy h2 { font-size: clamp(4rem, 7.5vw, 8.3rem); }
.share-copy > p:last-child { max-width: 560px; margin: 40px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.5; }
.place-form { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid; }
.place-form label { display: grid; align-content: start; gap: 10px; padding: 18px 14px 20px 0; border-bottom: 1px solid var(--line); }
.place-form label:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
.place-form label:nth-child(4) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
.place-form label span { font-size: .59rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.place-form input, .place-form textarea, .place-form select { width: 100%; border: 0; background: transparent; padding: 6px 0; outline: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; resize: vertical; }
.place-form input:focus, .place-form textarea:focus, .place-form select:focus { box-shadow: inset 0 -2px var(--red); }
.place-form button { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 20px; border: 0; background: var(--ink); color: var(--white); padding: 18px; cursor: pointer; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.place-form button:hover { background: var(--green); }
.form-note, .form-status { grid-column: 1 / -1; margin: 12px 0 0; color: #55554f; font-size: .62rem; line-height: 1.45; }
.form-status { color: var(--green); font-weight: 800; }

/* Footer: links set in the open sky of an engraved view of the Volta, the water moving
   underneath (footer.js). Ink is the engraving's own blue so type and picture read as one print. */
.site-footer { --footer-ink: #1b2f6e; --scene-h: clamp(560px, 64vw, 1100px); position: relative; isolation: isolate; min-height: calc(var(--scene-h) + 150px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: #f1ecdf; color: var(--footer-ink); }
/* The picture fills a band at the bottom; its pale sky fades up into the paper above,
   so the links sit in open sky and the hill never runs behind them. */
.footer-scene { --scene-x: 50; position: absolute; z-index: -1; inset: auto 0 0; height: var(--scene-h); }
.footer-scene img, .footer-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: calc(var(--scene-x) * 1%) 100%; }
.footer-scene canvas { opacity: 0; transition: opacity .8s; }
.footer-scene.is-live canvas { opacity: 1; }
/* A soft wash of paper at the top keeps the links legible where clouds are densest. */
.footer-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #f1ecdf 0, rgba(241,236,223,.55) 14%, rgba(241,236,223,0) 32%); pointer-events: none; }
.footer-top { display: grid; grid-template-columns: minmax(200px, .8fr) 2.6fr; gap: clamp(28px, 5vw, 90px); padding: clamp(64px, 9vh, 110px) clamp(20px, 6vw, 110px) 0; }
.footer-mark { font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
.footer-mark span { color: var(--red); }
.footer-brand p { max-width: 230px; margin: 18px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.02rem; line-height: 1.4; }
.footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.footer-links h2 { margin: 6px 0 22px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.footer-links ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.footer-links a { font-size: .86rem; opacity: .88; transition: opacity .2s; }
.footer-links a:hover, .footer-links a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 clamp(20px, 6vw, 110px); padding: 16px 0 22px; border-top: 1px solid rgba(241,236,223,.45); color: #f1ecdf; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(10,20,60,.6); }
.footer-bottom small { font-size: inherit; }

@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-place { display: none; }
  .section-heading { grid-template-columns: .6fr 1.7fr; }
  .section-deck { grid-column: 2; margin-top: 20px; max-width: 440px; }
  .region-grid, .visit-grid, .community-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-reader { grid-template-columns: 1fr; }
  .reader-gallery { min-height: 42vh; }
  .reader-copy h2 { font-size: 12vw; }
  .share-panel { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .nav { height: 66px; padding-inline: 18px; }
  .nav-links { display: none; }
  /* justify-self must be reset: on a grid item with left/right:0 and width:auto it
     shrink-wraps the box instead of stretching it, leaving a sliver menu. */
  .nav-links.open { position: fixed; inset: 66px 0 auto; justify-self: stretch; display: flex; align-items: stretch; flex-direction: column; gap: 0; background: var(--ink); color: var(--white); padding: 14px 18px; }
  .nav-links.open a { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .nav-links.open .nav-share { border: 0; border-bottom: 1px solid rgba(255,255,255,.2); border-radius: 0; }
  .menu-button { display: block; width: 34px; border: 0; background: transparent; padding: 4px; color: inherit; }
  .menu-button span { display: block; height: 1px; margin: 7px 0; background: currentColor; }
  .hero { height: 170svh; }
  .hero-stage { --mask-size: 58vw; }
  .spin-status { top: calc(50% + 34vw); width: 82vw; grid-template-columns: auto 1fr auto; }
  .spin-status b { display: none; }
  .sequence-skip { bottom: 25px; }
  .hero-intro { left: 18px; right: 18px; bottom: 6vh; grid-template-columns: 1fr; gap: 28px; }
  .hero-intro h1 { font-size: 21vw; }
  .hero-intro-note { max-width: 340px; }
  .regions, .most-visited { padding: 92px 18px 64px; }
  .section-heading { display: block; }
  .section-heading h2 { margin-top: 44px; font-size: 16vw; }
  .section-deck { margin-top: 28px; }
  .regions-heading, .visited-heading { margin-bottom: 48px; }
  .region-card { min-height: 250px; }
  .card-name { font-size: 1.75rem; }
  .region-reader { inset: 0; padding: 58px 18px 30px; }
  .reader-gallery { min-height: 39vh; }
  .reader-copy h2 { font-size: 17vw; }
  .reader-facts { grid-template-columns: 1fr; }
  .reader-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .visit-grid { gap: 7px; }
  .visit-card { min-height: 160px; padding: 14px; }
  .visit-card-feature { min-height: 255px; }
  .visit-card-feature strong { font-size: 1.65rem; }
  .visit-source { display: block; line-height: 1.6; }
  .visit-source a { display: inline-block; margin-top: 6px; }
  .community { padding: 38px 14px 72px; }
  .community-wall { grid-auto-rows: 260px; }
  .place-tile { padding: 13px; }
  .place-tile h3 { font-size: 1.65rem; }
  .nice-button { font-size: .5rem; }
  .share-panel { margin-top: 70px; padding: 0 4px; }
  .share-copy .section-number { margin-bottom: 40px; }
  .share-copy h2 { font-size: 15.5vw; }
  .place-form { grid-template-columns: 1fr; }
  .place-form label:nth-child(even) { padding-left: 0; border-left: 0; }
  /* On phones the links take the sky and the picture keeps the hill and the boat below. */
  .site-footer { --scene-h: 138vw; min-height: 0; }
  .footer-scene { --scene-x: 62; }
  .footer-scene::after { background: linear-gradient(180deg, #f1ecdf 0, rgba(241,236,223,.6) 16%, rgba(241,236,223,0) 36%); }
  .footer-top { grid-template-columns: 1fr; gap: 34px; padding: 64px 22px 0; }
  .footer-links { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .footer-links h2 { margin-bottom: 14px; font-size: .95rem; }
  .footer-links ul { gap: 11px; }
  .footer-links a { font-size: .82rem; }
  .footer-bottom { flex-direction: column; gap: 8px; margin: 96vw 22px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .map-reel, .spin-status, .sequence-skip { display: none; }
  .hero-window video { opacity: 1 !important; }
  .hero-window { mask: none; -webkit-mask: none; }
  .hero { height: 100svh; }
  .hero-intro { opacity: 1; transform: none; }
}

/* Postcard atlas — restored as the primary regional interaction. */
.regions { height: 340svh; padding: 0; background: var(--ink); color: var(--white); scroll-margin-top: 0; }
.regions-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.regions-title { position: absolute; z-index: 8; top: 90px; left: clamp(20px, 4vw, 64px); right: clamp(20px, 4vw, 64px); display: flex; justify-content: space-between; align-items: flex-start; transition: opacity .4s, transform .5s var(--ease); }
.regions-title > div > p { margin: 0 0 13px; color: var(--yellow); font-size: .61rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.regions-title h2 { margin: 0; font-size: clamp(4rem, 8.7vw, 9.5rem); line-height: .72; letter-spacing: -.09em; }
.regions-title > p { margin: 5px 0 0; max-width: 320px; color: #c9c4b9; font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; line-height: 1.45; text-align: right; }
.region-rail { position: absolute; z-index: 15; inset: 0; perspective: 1400px; pointer-events: none; }
.region-card { --tone: var(--red); position: absolute; left: 50%; top: 55%; width: var(--card-w, clamp(122px, 10.5vw, 164px)); min-height: 0; aspect-ratio: .71; overflow: hidden; border: 0; background: #222; color: var(--white); padding: 0; text-align: left; cursor: pointer; pointer-events: auto; clip-path: polygon(4% 0,8% 2%,12% 0,16% 2%,20% 0,24% 2%,28% 0,32% 2%,36% 0,40% 2%,44% 0,48% 2%,52% 0,56% 2%,60% 0,64% 2%,68% 0,72% 2%,76% 0,80% 2%,84% 0,88% 2%,92% 0,96% 2%,100% 0,98% 4%,100% 8%,98% 12%,100% 16%,98% 20%,100% 24%,98% 28%,100% 32%,98% 36%,100% 40%,98% 44%,100% 48%,98% 52%,100% 56%,98% 60%,100% 64%,98% 68%,100% 72%,98% 76%,100% 80%,98% 84%,100% 88%,98% 92%,100% 96%,98% 100%,94% 98%,90% 100%,86% 98%,82% 100%,78% 98%,74% 100%,70% 98%,66% 100%,62% 98%,58% 100%,54% 98%,50% 100%,46% 98%,42% 100%,38% 98%,34% 100%,30% 98%,26% 100%,22% 98%,18% 100%,14% 98%,10% 100%,6% 98%,2% 100%,0 96%,2% 92%,0 88%,2% 84%,0 80%,2% 76%,0 72%,2% 68%,0 64%,2% 60%,0 56%,2% 52%,0 48%,2% 44%,0 40%,2% 36%,0 32%,2% 28%,0 24%,2% 20%,0 16%,2% 12%,0 8%,2% 4%,0 0); transform: translate(-50%,-50%) translate3d(calc(var(--x, 0) * 1px + var(--push-x, 0px)), calc(var(--y, 0) * 1px + var(--push-y, 0px) + var(--lift-y, 0px)), 0) rotate(calc(var(--r, 0) * var(--rot-k, 1) * 1deg)) scale(var(--lift-scale, 1)); transition: filter .5s, opacity .4s; will-change: transform; }
/* The glide is switched on by app.js only while a card is lifted, opened or put back. */
.region-rail.is-gliding .region-card { transition: transform .82s var(--ease), filter .5s, opacity .4s; }
.region-card::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,.02) 18%, rgba(0,0,0,.85)), var(--image) center / cover; transform: scale(1.02); transition: transform .55s var(--ease), opacity .5s; }
.region-card::before { content: ''; position: absolute; z-index: 2; inset: 9px; border: 1px solid rgba(255,255,255,.44); background: none; pointer-events: none; }
.region-card:hover::after, .region-card:focus-visible::after { transform: scale(1.09); }
/* The torn-edge clip-path hides anything drawn outside the card (shadows, outlines), so the
   highlight lives on the inner frame instead. */
.region-card:hover, .region-card:focus-visible { filter: saturate(1.2); outline: none; }
.region-card:hover::before, .region-card:focus-visible::before, .region-card.is-lifted::before { border: 2px solid var(--yellow); }
.region-card .card-no, .region-card .card-name, .region-card .card-note, .region-card .card-arrow { z-index: 3; }
/* A lifted card comes to the front of the deck; its neighbours are pushed aside in JS. */
.region-card.is-lifted { z-index: 50 !important; --lift-scale: 1.14; --lift-y: -12px; --rot-k: 0; filter: saturate(1.2); }
/* Dim the rest by fading their photo toward the card's dark ground: an opacity change,
   rather than a filter that repaints fifteen cards. */
.region-rail.has-lift .region-card:not(.is-lifted)::after { opacity: .6; }
.card-no { top: 18px; left: 18px; }
.card-name { left: 18px; right: 14px; bottom: 43px; font-size: clamp(1.25rem, 2vw, 2rem); line-height: .84; }
.card-note { left: 18px; right: 14px; bottom: 19px; font-size: .5rem; }
.card-arrow { display: none; }
.rail-instruction { position: absolute; z-index: 8; left: 4vw; right: 4vw; bottom: 26px; display: flex; align-items: center; gap: 18px; margin: 0; font-size: .57rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: opacity .3s; }
.rail-instruction i { height: 1px; flex: 1; background: rgba(255,255,255,.35); }
.rail-instruction b { color: var(--yellow); }

.regions.has-selection .regions-title { opacity: .06; transform: translateY(-28px); }
.regions.has-selection .rail-instruction { opacity: 0; }
.regions.has-selection .region-card { opacity: .56; filter: grayscale(.9) blur(1.4px) brightness(.72); transform: translate(-50%,-50%) translate3d(calc(var(--stack-x) * 1px), calc(var(--stack-y) * 1px), 0) rotate(calc(var(--stack-r) * 1deg)) scale(var(--stack-scale)); }
.regions.has-selection .region-card.is-selected { z-index: 40 !important; opacity: 1; filter: saturate(1.18); transform: translate(-50%,-50%) translate3d(calc(var(--stack-x) * 1px), calc(var(--stack-y) * 1px), 32px) rotate(-2deg) scale(1.08); }
.regions.has-selection .region-card.is-selected::before { border-color: var(--yellow); border-width: 2px; }

/* Fixed, not absolute: an absolute panel is carried off-screen by the sticky stage as it
   unsticks at the end of the section, taking the close button with it. */
.regions .region-reader { position: fixed; z-index: 20; left: 27%; right: 2.5vw; top: 86px; bottom: 26px; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(28px, 3.6vw, 62px); padding: clamp(30px, 3.4vw, 58px); overflow: hidden; background: var(--paper); color: var(--ink); visibility: hidden; opacity: 0; pointer-events: none; clip-path: inset(0 0 0 100%); transform: none; transition: clip-path .75s var(--ease), opacity .2s, visibility 0s .75s; }
.regions .region-reader.is-open { visibility: visible; opacity: 1; pointer-events: auto; clip-path: inset(0); transition-delay: 0s; }
.reader-close { top: 18px; right: 20px; }
.reader-copy { align-self: center; min-width: 0; }
.reader-region { margin: 0 0 24px; color: var(--red); font-size: .61rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.reader-copy h2 { margin: 0 0 26px; font-size: clamp(3.6rem, 6.4vw, 7.4rem); line-height: .75; }
.reader-intro { font-size: clamp(1rem, 1.35vw, 1.24rem); }
.reader-facts { grid-template-columns: 1fr; margin: 30px 0; }
.reader-facts div { padding: 13px 0 15px; }
.reader-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
.reader-facts p { margin-top: 7px; }
.reader-copy > a { padding: 14px 0; border-width: 1px; }
.reader-gallery { align-self: center; min-height: 0; height: min(69vh, 650px); }
.reader-main { inset: 0 13% 0 0; display: flex; flex-direction: column; }
.reader-main img { flex: 1 1 auto; min-height: 0; }
.reader-side { right: 0; bottom: 9%; width: 35%; height: 47%; border-width: 7px; }
/* A region with only one verified photograph gives that photograph the whole frame. */
.reader-gallery.is-single .reader-main { inset: 0; }
.reader-gallery figcaption { flex: 0 0 auto; padding-top: 9px; color: #55554f; font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.reader-side figcaption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Plainspoken ranking title; the cards carry the hierarchy. */
.visited-heading { margin-bottom: 72px; display: grid; grid-template-columns: 1.45fr .55fr; align-items: end; gap: 7vw; }
.visited-heading h2 { margin: 0; font-size: clamp(4.4rem, 9.3vw, 10rem); line-height: .76; letter-spacing: -.085em; }
.visited-heading h2 em { color: var(--yellow); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.visited-heading > div { border-top: 1px solid #555; padding-top: 16px; }
.visited-heading strong { display: block; color: var(--yellow); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.2rem, 4vw, 4.4rem); font-weight: 400; }
.visited-heading p { margin: 12px 0 0; color: #c9c6bd; font-family: Georgia, 'Times New Roman', serif; line-height: 1.45; }

/* Community proof first, then a conversational tip card instead of a template form. */
.community { scroll-margin-top: 0; }
.community-intro { display: grid; grid-template-columns: 1.25fr .75fr; gap: 8vw; align-items: end; margin: 18px clamp(0px, 3vw, 48px) 72px; }
.community-intro h2 { margin: 0; font-size: clamp(4.4rem, 8.8vw, 9.5rem); line-height: .76; letter-spacing: -.09em; }
.community-intro h2 em { color: var(--green); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.community-intro p { margin: 0; max-width: 440px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.5; }
.place-tip-trigger { background: var(--yellow); color: var(--ink); }
.place-tip-trigger strong { position: relative; z-index: 2; margin-top: auto; font-size: clamp(2rem, 3.7vw, 4.3rem); line-height: .88; letter-spacing: -.065em; }
.place-empty i { align-self: flex-start; margin: auto 0 0; max-width: 220px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.5rem, 2.2vw, 2.4rem); line-height: 1; }
.tip-panel { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 80svh; margin-top: 14px; background: var(--yellow); color: var(--ink); scroll-margin-top: 76px; }
.tip-copy { display: flex; min-height: 100%; flex-direction: column; justify-content: space-between; padding: clamp(32px, 5vw, 78px); border-right: 1px solid rgba(17,17,15,.35); }
.tip-copy > p { margin: 0; font-size: .67rem; font-weight: 800; line-height: 1.45; letter-spacing: .1em; text-transform: uppercase; }
.tip-copy h2 { margin: 80px 0 0; font-size: clamp(4.7rem, 8.3vw, 9rem); line-height: .7; letter-spacing: -.09em; }
.tip-form { align-self: center; padding: clamp(34px, 6vw, 90px); }
/* The inputs are inline, so a percentage width resolves against the whole paragraph and
   overruns the line. Sizing them in ch keeps the sentence inside the panel. */
.tip-sentence { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.9rem, 2.9vw, 3.2rem); line-height: 1.4; letter-spacing: -.035em; }
.tip-sentence label { display: inline; }
.tip-sentence input { width: 11ch; max-width: 100%; border: 0; border-bottom: 2px solid; background: transparent; padding: 0 .08em .06em; outline: none; font: inherit; color: var(--red); }
.tip-sentence input::placeholder { color: rgba(17,17,15,.36); font-style: italic; }
.tip-form select, .tip-form textarea { border: 0; background: transparent; outline: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1rem; resize: vertical; }
.tip-form > button { width: 100%; display: flex; justify-content: space-between; margin-top: 24px; border: 0; background: var(--ink); color: var(--white); padding: 18px; cursor: pointer; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tip-form > button:hover { background: var(--green); }
.tip-form .form-note, .tip-form .form-status { margin-top: 12px; }
.tip-form > button:disabled { opacity: .6; cursor: progress; }
.tip-from { margin: 36px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.tip-from label { display: grid; gap: 6px; border-top: 1px solid rgba(17,17,15,.35); padding: 12px 0 14px; }
.tip-from label span { font-size: .59rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tip-from input[type='text'], .tip-from input[type='email'] { width: 100%; border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 4px 0; outline: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; }
.tip-from input::placeholder { color: rgba(17,17,15,.4); }
.tip-from input:focus { border-bottom-color: var(--red); }
.tip-from .tip-credit { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: .78rem; cursor: pointer; }
.tip-credit input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.tip-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tip form (tip-form.js): place with Google suggestions, up to three photos, then the rest. */
.tip-form [hidden], .tip-done [hidden] { display: none !important; }
.tip-where { position: relative; }
.tip-place input { min-width: 8ch; }
@supports (field-sizing: content) { .tip-place input { width: auto; field-sizing: content; } }
.tip-suggest { position: absolute; z-index: 5; width: 100%; max-width: 520px; margin: 8px 0 0; padding: 6px 0; list-style: none; background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 18px 40px rgba(17,17,15,.2); }
.tip-suggest li { display: grid; gap: 2px; padding: 10px 14px; cursor: pointer; }
.tip-suggest b { font-size: .95rem; }
.tip-suggest small { font-size: .72rem; opacity: .65; }
.tip-suggest li:hover, .tip-suggest li[aria-selected='true'] { background: var(--ink); color: var(--white); }
.tip-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; font-size: .8rem; font-weight: 700; }
.tip-pin { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.tip-change, .tip-again { border: 0; border-bottom: 1px solid; background: none; padding: 0 0 3px; color: inherit; cursor: pointer; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tip-hint { margin: 12px 0 0; color: #55554f; font-size: .72rem; line-height: 1.45; }
.tip-label, .tip-from legend { margin: 0 0 12px; font-size: .63rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tip-label em, .tip-from em { margin-left: 6px; font-style: normal; font-weight: 700; letter-spacing: .02em; text-transform: none; opacity: .6; }
.tip-photos, .tip-line { margin-top: 36px; padding-top: 16px; border-top: 1px solid rgba(17,17,15,.35); }
.tip-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.tip-thumb, .tip-add { position: relative; width: 92px; height: 92px; margin: 0; }
.tip-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tip-thumb button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(17,17,15,.8); color: var(--white); cursor: pointer; font-size: 1rem; line-height: 1; }
.tip-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1.5px dashed var(--ink); cursor: pointer; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.tip-add b { font-size: 1.7rem; font-weight: 400; line-height: 1; }
.tip-add:hover { background: rgba(17,17,15,.07); }
.tip-add:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.tip-photo-status { margin: 10px 0 0; font-size: .74rem; line-height: 1.4; }
.tip-photo-status:empty { display: none; }
.tip-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: .8rem; line-height: 1.4; cursor: pointer; }
.tip-line { display: grid; }
.tip-line textarea { width: 100%; padding: 4px 0; font-size: 1.05rem; }
.tip-line textarea:focus { box-shadow: inset 0 -2px var(--red); }
.tip-turnstile:empty { display: none; }
.tip-turnstile { margin-top: 18px; }
.tip-done { align-self: center; padding: clamp(34px, 6vw, 90px); }
.tip-done h3 { margin: 0 0 14px; font-size: clamp(2.6rem, 4.4vw, 4.6rem); line-height: .9; letter-spacing: -.065em; outline: none; }
.tip-done > p:not(.tip-label) { max-width: 460px; margin: 0 0 30px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.08rem; line-height: 1.5; }
.tip-done .place-tile { width: min(100%, 340px); min-height: 290px; margin: 0 0 26px; border: 1px solid rgba(17,17,15,.2); }

/* Directory entries enriched by the n8n pipeline, and a visitor's own tips awaiting review. */
.kind.is-pending { border-style: dashed; opacity: .75; }
.tile-rating { position: relative; z-index: 2; margin: 0 0 8px; font-size: .66rem; font-weight: 800; letter-spacing: .06em; }
.tile-credit { position: relative; z-index: 2; margin: 8px 0 0; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.tile-links { position: relative; z-index: 2; display: flex; gap: 14px; margin: 10px 0 12px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tile-links a { border-bottom: 1px solid; padding-bottom: 2px; }

@media (max-width: 980px) {
  .regions .region-reader { left: 29%; grid-template-columns: 1fr; padding: 54px 26px 24px; overflow: auto; }
  .regions .reader-gallery { order: -1; height: 33vh; }
  .regions .reader-copy h2 { font-size: 10.5vw; }
  .visited-heading { grid-template-columns: 1fr; }
  .visited-heading > div { max-width: 390px; }
  .community-intro { grid-template-columns: 1fr; }
  .tip-panel { grid-template-columns: 1fr; }
  .tip-copy { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(17,17,15,.35); }
  .tip-copy h2 { margin-top: 60px; }
}

@media (max-width: 680px) {
  .regions { height: 320svh; }
  .regions-title { top: 82px; }
  .regions-title h2 { font-size: 17vw; }
  /* The deck fills the screen on phones, so the title stays compact and the
     bottom rail-instruction carries the guidance instead of the deck paragraph. */
  .regions-title h2 { font-size: 14vw; }
  .regions-title > p { display: none; }
  .regions-title > div > p { margin-bottom: 9px; }
  .region-card::before { inset: 6px; }
  .region-card .card-no { top: 9px; left: 9px; font-size: .52rem; }
  /* Rows overlap on shorter phones and cover the bottom of each card, so the name sits at
     the top where it always stays visible. The note is too small to read at this size. */
  .region-card::after { background: linear-gradient(180deg, rgba(0,0,0,.8) 0, rgba(0,0,0,.25) 46%, rgba(0,0,0,.05) 70%), var(--image) center / cover; }
  .region-card .card-name { left: 9px; right: 8px; top: 24px; bottom: auto; font-size: .92rem; letter-spacing: -.045em; }
  .region-card .card-note { display: none; }
  .region-card.is-lifted { --lift-scale: 1.3; --lift-y: -18px; }
  .regions .region-reader { left: min(125px, 31vw); right: 10px; top: 72px; bottom: 12px; padding: 50px 14px 18px; }
  .regions .reader-gallery { height: 27vh; }
  .regions .reader-copy h2 { font-size: 15vw; }
  .regions .reader-intro { font-size: .92rem; }
  .regions .reader-facts { margin: 20px 0; }
  .regions .reader-facts div { padding-block: 10px; }
  .regions .reader-facts p { font-size: .82rem; }
  .regions.has-selection .region-card.is-selected { transform: translate(-50%,-50%) translate3d(calc(var(--stack-x) * 1px), calc(var(--stack-y) * 1px), 32px) rotate(-2deg) scale(.76); }
  .visited-heading h2 { font-size: 16vw; }
  .community-intro { margin: 36px 4px 48px; }
  .community-intro h2 { font-size: 16vw; }
  .tip-copy, .tip-form { padding: 32px 22px; }
  .tip-copy h2 { font-size: 18vw; }
  .tip-sentence { font-size: 1.75rem; }
  .tip-from { grid-template-columns: 1fr; }
}

/* Touch screens: the same motion with cheaper effects. Blurring full-screen photos mid-spin,
   a 20px frosted blur over moving video, and blurring fifteen cards at once are the
   heaviest things this page asks of a phone's graphics chip. */
@media (hover: none), (max-width: 680px) {
  .map-scene, .map-scene.is-active, .map-scene.is-leaving { filter: none; transition: transform var(--slot-duration, 100ms) cubic-bezier(.18,.72,.24,1); will-change: transform; }
  .nav::before { backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3); }
  .nav.is-over-image::before { background: linear-gradient(180deg, rgba(17,17,15,.5), rgba(17,17,15,.24)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .regions.has-selection .region-card { filter: grayscale(.9) brightness(.72); }
  .regions.has-selection .region-card.is-selected { filter: saturate(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .regions { height: 1250px; }
  .regions-sticky { position: relative; }
}

/* ==========================================================================
   Region pages — the destination behind each postcard.
   ========================================================================== */
.region-page { background: var(--paper); }
.region-hero { position: relative; height: min(78svh, 760px); overflow: hidden; background: var(--ink); }
.region-hero img { width: 100%; height: 100%; object-fit: cover; }
.region-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,15,.5) 0 18%, rgba(17,17,15,.12) 42%, rgba(17,17,15,.86)); }
.region-hero-copy { position: absolute; z-index: 2; inset: auto clamp(20px, 5vw, 76px) clamp(38px, 6vh, 74px); color: var(--white); }
.region-back { display: inline-block; margin-bottom: 26px; border-bottom: 1px solid; padding-bottom: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.region-eyebrow { margin: 0 0 12px; color: var(--yellow); font-size: .63rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.region-hero h1 { margin: 0; font-size: clamp(3.6rem, 10vw, 10rem); line-height: .76; letter-spacing: -.09em; font-weight: 900; }
.region-intro { max-width: 620px; margin: 26px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.45; }
.region-hero-caption { position: absolute; z-index: 2; right: clamp(20px, 5vw, 76px); top: 96px; margin: 0; color: rgba(255,255,255,.82); font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.region-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-bottom: 1px solid var(--line); padding: 0 clamp(20px, 4vw, 64px); }
.region-facts div { padding: 30px 26px 34px 0; }
.region-facts div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.region-facts span { color: var(--red); font-size: .58rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.region-facts p { margin: 12px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.02rem; line-height: 1.45; }

.region-block { padding: clamp(60px, 8vh, 108px) clamp(20px, 4vw, 64px); }
.region-block + .region-block { border-top: 1px solid var(--line); }
.region-block-head { display: grid; grid-template-columns: 1.3fr .7fr; gap: 6vw; align-items: end; margin-bottom: 52px; }
.region-block-head h2 { margin: 0; font-size: clamp(3rem, 6.6vw, 7rem); line-height: .78; letter-spacing: -.085em; }
.region-block-head h2 em { color: var(--green); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.region-block-head p { margin: 0; max-width: 420px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.02rem; line-height: 1.5; }

.visit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 22px; margin: 0; padding: 0; list-style: none; }
.visit-item { display: flex; flex-direction: column; border: 1px solid var(--line); background: rgba(255,255,255,.45); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.visit-item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(17,17,15,.13); }
.visit-image { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #ddd9cf; }
.visit-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.visit-item:hover .visit-image img { transform: scale(1.05); }
.visit-body { flex: 1; padding: 22px 22px 26px; }
.visit-body h3 { margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.8rem); line-height: 1; letter-spacing: -.05em; }
.visit-body p { margin: 12px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: .98rem; line-height: 1.45; }
.visit-item:not(.has-image) .visit-body { padding-top: 26px; border-top: 3px solid var(--yellow); }

.region-empty { margin: 0; max-width: 560px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.55; color: #55554f; }
.region-empty a { border-bottom: 2px solid var(--yellow); }
.region-wall { grid-auto-rows: minmax(210px, 22vw); margin-bottom: 26px; }
.region-wall:empty { display: none; }
.tile-note { position: relative; z-index: 2; margin: 10px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: .92rem; line-height: 1.4; }

.region-page .tip-panel { margin: 0; border-top: 1px solid rgba(17,17,15,.35); }
.region-next { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 40px clamp(20px, 4vw, 64px) 64px; }
.region-next p { margin: 0; font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.region-next div { display: flex; gap: 14px; flex-wrap: wrap; }
.region-next a { border: 1px solid var(--line); border-radius: 99px; padding: 11px 20px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s; }
.region-next a:hover { background: var(--ink); color: var(--white); }

@media (max-width: 980px) {
  .visit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-block-head { grid-template-columns: 1fr; gap: 24px; }
  .region-facts { grid-template-columns: 1fr; }
  .region-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .region-facts div { padding: 22px 0 24px; }
}

@media (max-width: 680px) {
  .region-hero { height: min(72svh, 620px); }
  .region-hero h1 { font-size: 17vw; }
  .region-hero-caption { display: none; }
  .region-block { padding: 56px 18px; }
  .visit-list { grid-template-columns: 1fr; gap: 16px; }
  .region-wall { grid-template-columns: 1fr; grid-auto-rows: 200px; }
}

/* Maker credit under the footer tagline. */
.footer-brand .footer-maker { margin-top: 22px; font-family: Arial, Helvetica, sans-serif; font-size: .8rem; line-height: 1.55; }
.footer-maker a, .footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer-maker a:hover { color: var(--red); }

/* ==========================================================================
   Region gallery — an editorial mosaic of credited photographs, plus a lightbox.
   ========================================================================== */
.region-gallery .region-block-head p a { border-bottom: 2px solid var(--yellow); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 250px); grid-auto-flow: dense; gap: 10px; }
.gallery-tile { position: relative; display: block; overflow: hidden; margin: 0; border: 0; padding: 0; background: #ddd9cf; color: var(--white); text-align: left; cursor: zoom-in; }
.gallery-tile.is-lead { grid-column: span 2; grid-row: span 2; }
.gallery-tile.is-wide { grid-column: span 2; }
.gallery-tile.is-tall { grid-row: span 2; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; }
.gallery-tile:hover img, .gallery-tile:focus-visible img { transform: scale(1.06); filter: saturate(1.12); }
.gallery-label { position: absolute; inset: auto 0 0; display: grid; gap: 4px; padding: 40px 14px 12px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease); }
.gallery-label b { font-size: .9rem; line-height: 1.15; letter-spacing: -.01em; }
.gallery-label small { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.gallery-tile:hover .gallery-label, .gallery-tile:focus-visible .gallery-label, .gallery-tile.is-lead .gallery-label { opacity: 1; transform: none; }
.gallery-tile.is-lead .gallery-label b { font-size: clamp(1.1rem, 1.8vw, 1.6rem); }
.gallery-invite { display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 2px dashed rgba(17,17,15,.4); background: var(--yellow); color: var(--ink); cursor: pointer; }
.gallery-invite span { font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gallery-invite strong { font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: .9; letter-spacing: -.06em; }
.gallery-invite small { font-family: Georgia, 'Times New Roman', serif; font-size: .88rem; line-height: 1.35; }
.gallery-invite:hover { background: #f8d765; }
.gallery-credits { margin-top: 22px; border-top: 1px solid var(--line); font-size: .78rem; line-height: 1.5; }
.gallery-credits summary { cursor: pointer; padding: 14px 0; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gallery-credits ol { margin: 0 0 10px; padding-left: 20px; columns: 2; column-gap: 40px; }
.gallery-credits li { break-inside: avoid; margin-bottom: 6px; color: #3b3b37; }
.photo-credit a { text-decoration: underline; text-underline-offset: 2px; }

.lightbox { position: fixed; z-index: 200; inset: 0; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 60px 12px 24px; background: rgba(10,10,9,.95); color: var(--white); }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.lightbox img { max-width: 100%; max-height: calc(100svh - 190px); object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox figcaption { display: grid; justify-items: center; gap: 6px; max-width: 760px; text-align: center; }
.lightbox figcaption strong { font-family: Georgia, 'Times New Roman', serif; font-size: 1.1rem; font-weight: 400; }
.lightbox figcaption span { font-size: .7rem; letter-spacing: .04em; color: #d6d0c4; }
.lightbox figcaption em { font-style: normal; font-size: .6rem; font-weight: 800; letter-spacing: .12em; color: var(--yellow); }
.lightbox-close { position: absolute; top: 18px; right: 22px; border: 0; border-bottom: 1px solid; background: none; color: inherit; padding: 0 0 4px; cursor: pointer; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lightbox-nav { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 1.2rem; }
.lightbox-nav:hover { background: var(--white); color: var(--ink); }
body.has-lightbox { overflow: hidden; }

/* Place cards: photographer credit on the photo, useful links under the text. */
.visit-image { position: relative; }
.visit-image .photo-credit { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 4px 8px; background: rgba(17,17,15,.62); color: #eee; font-size: .55rem; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visit-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: .6rem !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.visit-links a { border-bottom: 1px solid; padding-bottom: 2px; }
.visit-links a:hover { color: var(--red); }

@media (max-width: 980px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 170px; }
}
@media (max-width: 680px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; gap: 6px; }
  .gallery-tile.is-tall { grid-row: span 2; }
  .gallery-label { opacity: 1; transform: none; padding: 26px 9px 8px; }
  .gallery-label b { font-size: .72rem; }
  .gallery-label small { display: none; }
  .gallery-invite { grid-column: span 2; min-height: 150px; }
  .gallery-credits ol { columns: 1; }
  .lightbox { grid-template-columns: 1fr; padding: 56px 8px 16px; }
  .lightbox-nav { position: absolute; bottom: 18px; width: 44px; height: 44px; }
  .lightbox-prev { left: 16px; }
  .lightbox-next { right: 16px; }
  .lightbox img { max-height: calc(100svh - 230px); }
}

/* ==========================================================================
   Most visited — flip cards. Front: rank and visitor count. Back: a credited photo.
   The faces share one grid cell so the card keeps its height through the turn.
   ========================================================================== */
.visit-card.flip-card { --card-bg: #1a1a1a; --card-fg: var(--white); --card-line: #313131; position: relative; display: block; min-height: 0; padding: 0; border: 0; background: none; perspective: 1600px; cursor: pointer; }
.visit-card.flip-card:hover { transform: none; background: none; }
.visit-card-feature.flip-card { --card-bg: var(--white); --card-fg: var(--ink); --card-line: transparent; }
.visit-card-feature.flip-card:nth-child(2) { --card-bg: var(--yellow); }
.visit-card-feature.flip-card:nth-child(3) { --card-bg: var(--lilac); }
.visit-card-feature.flip-card:nth-child(4) { --card-bg: var(--green); --card-fg: var(--white); }
.flip-inner { display: grid; height: 100%; min-height: 175px; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.visit-card-feature .flip-inner { min-height: clamp(300px, 31vw, 450px); }
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-card:not(.is-flipped):hover .flip-inner { transform: rotateY(-8deg); }
.flip-front, .flip-back { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-front { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-content: space-between; padding: 22px; background: var(--card-bg); color: var(--card-fg); border: 1px solid var(--card-line); }
.flip-back { position: relative; margin: 0; overflow: hidden; background: #111; transform: rotateY(180deg); }
.flip-back img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flip-back figcaption { position: absolute; inset: auto 0 0; display: grid; gap: 5px; padding: 44px 16px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); color: var(--white); }
.flip-back figcaption b { font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1; letter-spacing: -.03em; }
.flip-back .photo-credit { font-size: .56rem; letter-spacing: .03em; opacity: .9; }
.flip-hint { grid-column: 1 / -1; justify-self: start; font-size: .56rem; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.flip-card:hover .flip-hint { opacity: 1; }
.flip-toggle { position: absolute; z-index: 3; top: 12px; right: 12px; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; background: rgba(255,255,255,.12); color: var(--card-fg); cursor: pointer; font-size: .95rem; backdrop-filter: blur(6px); }
.flip-card.is-flipped .flip-toggle { color: var(--white); }
.flip-front strong.is-rank-only { font-size: .62rem; font-family: Arial, Helvetica, sans-serif; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.visit-card-feature .flip-front span { color: inherit; }
.visit-card-feature .flip-front p { color: inherit; opacity: .78; }
.visit-card .flip-front h3 { margin-top: 30px; }
.flip-front p { grid-column: 1 / -1; margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .72; }
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
  .flip-card:not(.is-flipped):hover .flip-inner { transform: none; }
}
@media (max-width: 680px) {
  .flip-inner { min-height: 160px; }
  .visit-card-feature .flip-inner { min-height: 255px; }
  .flip-front { padding: 14px; }
}
.most-visited .visit-source { display: block; max-width: 900px; line-height: 1.7; }
.most-visited .visit-source a { margin-right: 6px; }
/* Keep the flip button clear of the visitor number in the top corner. */
.flip-toggle { top: auto; bottom: 12px; }
.flip-back figcaption { padding-right: 56px; }

/* Plain document pages: photo credits and the 404. */
.doc-page { min-height: 100svh; }
.doc-page .nav { grid-template-columns: 1fr; }
.doc-main { max-width: 1100px; margin: 0 auto; padding: 120px clamp(18px, 5vw, 64px) 90px; }
.doc-main h1 { margin: 0 0 22px; font-size: clamp(3rem, 9vw, 7rem); line-height: .82; letter-spacing: -.07em; }
.doc-main h2 { margin: 64px 0 14px; font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: -.04em; }
.doc-main p { max-width: 680px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.55; }
.doc-main p a, .credits-table a { border-bottom: 1px solid; }
.doc-eyebrow { color: var(--red); font-family: Arial, Helvetica, sans-serif !important; font-size: .64rem !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.credits-table { overflow-x: auto; margin: 18px 0; border-top: 1px solid var(--line); }
.credits-table table { width: 100%; border-collapse: collapse; font-size: .8rem; line-height: 1.4; }
.credits-table th { padding: 12px 10px 10px 0; font-size: .6rem; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.credits-table td { padding: 10px 10px 10px 0; border-top: 1px solid var(--line); vertical-align: top; }
.credits-table code { font-size: .72rem; word-break: break-all; }
.doc-missing { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; }