: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; }
body.has-reader { overflow: 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; }
/* The tagline sits under the logo, as part of it, not in the middle of the bar where it read as a menu item. */
.nav .wordmark { grid-column: 1; grid-row: 1; align-self: start; margin-top: -2px; }
.nav-place { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; margin: 0 0 -3px 1px; font-family: Georgia, 'Times New Roman', serif; font-size: .74rem; font-style: italic; font-weight: 400; letter-spacing: 0; opacity: .72; pointer-events: none; white-space: nowrap; }
.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; white-space: nowrap; }
.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(20.3vw, 301px); --copy-opacity: 0; --copy-y: 30px; }
/* JavaScript sets this background to the chosen destination's poster, so a dropped video
   layer never flashes a flat navy block. No image here: it would download on every visit. */
.hero-window { position: absolute; inset: 0; overflow: hidden; background: #173b4e 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-mask-refreshing { mask-size: calc(var(--mask-size) + .1px) auto; -webkit-mask-size: calc(var(--mask-size) + .1px) auto; }
.hero-window.is-unmasked { mask: none; -webkit-mask: none; }
.hero-window video, .map-scene img { 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; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.hero-window.is-settled .map-reel { opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
/* Each photo is its own compositor layer for the length of the reel. app.js moves them with
   one synchronised timeline, so the reel never waits on timers or the main thread. */
.hero-window.is-sequencing { background-image: none; }
.map-reel::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.17)); }
/* A frame just larger than the outline (ghana-mask.svg is 69.27 × 100), centred like the mask. */
/* Centred with explicit offsets: margin: auto left-aligns a box once it is wider than the
   screen, which shifted the destination as the outline opened out. */
.map-scene { --frame-w: calc(var(--mask-size) + 4px); --frame-h: calc(var(--mask-size) * 1.4436 + 4px); position: absolute; left: calc(50% - var(--frame-w) / 2); top: calc(50% - var(--frame-h) / 2); width: var(--frame-w); height: var(--frame-h); overflow: hidden; transform: translateY(-100%); will-change: transform; }
/* The destination frame shows its photo at full-screen crop, so it matches the video exactly. */
/* Scaled like the video, so the hand-off is exact. */
.map-scene-final img { inset: auto; left: calc(50% - var(--stage-w, 100vw) / 2); top: calc(50% - 50svh); width: var(--stage-w, 100vw); max-width: none; height: 100svh; transform: scale(1.015); }
.map-scene.is-active { transform: none; }
.hero-window.is-settled .map-scene { will-change: auto; }
.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 .hero-destination { display: flex; align-items: center; gap: 11px; margin-bottom: 17px; font-family: Arial, Helvetica, sans-serif; font-size: .59rem; font-weight: 800; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.hero-destination::before { content: ''; flex: 0 0 28px; height: 2px; background: var(--yellow); }
.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, .home-fest 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, .home-fest 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: 1px solid var(--red); background: var(--red); color: var(--white); padding: 10px 13px; cursor: pointer; font-size: .64rem; font-weight: 800; line-height: 1; letter-spacing: .1em; text-transform: uppercase; transition: background .2s, border-color .2s, color .2s; }
.reader-close:hover, .reader-close:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--white); outline: 2px solid var(--yellow); outline-offset: 2px; }
.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; }
/* The way into the full region page sits in the reading flow, right under the intro, as
   the one filled button on the panel. */
.reader-open { display: inline-flex; align-items: center; gap: 16px; margin-top: 26px; border: 1px solid var(--ink); padding: 15px 20px; background: var(--yellow); color: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transition: background .2s, color .2s; }
.reader-open i { font-style: normal; font-size: 1rem; line-height: 1; transition: transform .25s var(--ease); }
.reader-open:hover, .reader-open:focus-visible { background: var(--ink); color: var(--white); }
.reader-open:hover i, .reader-open:focus-visible i { transform: translateX(5px); }
/* The photos open the region too. The button above is the one link for keyboards and
   screen readers, so these stay out of the tab order. */
.reader-photo-link { position: absolute; z-index: 1; inset: 0; cursor: pointer; }
.reader-more { margin: 11px 0 0; color: #55554f; font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }

/* 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; }
.wall-waiting .community-wall .place-photo { background-image: none; }
.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-social { margin-top: 26px; }
.footer-brand .footer-social-label { margin: 0 0 11px; font-family: Arial, Helvetica, sans-serif; font-size: .58rem; font-weight: 800; line-height: 1; letter-spacing: .13em; text-transform: uppercase; }
.footer-social-list { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.footer-social-mark { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(27,47,110,.62); border-radius: 50%; color: var(--footer-ink); }
.footer-social-mark svg { width: 18px; height: 18px; }
.footer-social-mark path, .footer-social-mark circle, .footer-social-mark rect { vector-effect: non-scaling-stroke; }
a.footer-social-mark { transition: background-color .2s, color .2s, transform .2s; }
a.footer-social-mark:hover, a.footer-social-mark:focus-visible { background: var(--footer-ink); color: #f1ecdf; transform: translateY(-2px); outline: 0; }
.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; }

/* Below this width the links need the room the empty centre column takes. */
@media (max-width: 1240px) {
  .nav { grid-template-columns: 1fr auto; }
}
@media (max-width: 680px) {
  .nav-place { display: none; }
}
@media (max-width: 820px) and (min-width: 681px) {
  .nav .nav-links { gap: 11px; }
}

@media (max-width: 980px) {
  .nav-links { gap: 16px; }
  .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: 40.6vw; }
  .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. */
/* One screen tall. The stage stays sticky only so app.js can line it up with the viewport
   when a preview opens; with nothing to scroll through it never travels. */
.regions { height: 100svh; 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); translate: calc(var(--x, 0) * 1px - 50%) calc(var(--y, 0) * 1px - 50%); transform: translate3d(var(--push-x, 0px), calc(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, translate; }
/* The glide is switched on by app.js only while a card is lifted, opened or put back.
   Where a card sits (`translate`) is kept apart from how it is lifted (`transform`): a lift
   glides the transform only, so scrolling straight after a tap still moves the cards with
   the finger. Only opening and closing the preview glides the position too. */
.region-rail.is-gliding .region-card { transition: transform .82s var(--ease), filter .5s, opacity .4s; }
.region-rail.is-restacking .region-card { transition: transform .82s var(--ease), translate .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); }
/* Wide, short browser windows need the instruction to use the spare lower gutter instead
   of sharing the last postcard row's visual edge. Phones keep the larger thumb-safe inset. */
@media (min-width: 681px) {
  .rail-instruction { bottom: 10px; }
}

.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); translate: calc(var(--stack-x) * 1px - 50%) calc(var(--stack-y) * 1px - 50%); transform: rotate(calc(var(--stack-r) * 1deg)) scale(var(--stack-scale)); }
.regions.has-selection .region-card:not(.is-selected):hover,
.regions.has-selection .region-card:not(.is-selected):focus-visible { z-index: 39 !important; opacity: .94; filter: grayscale(.25) brightness(.92) saturate(1.05); transform: translate3d(8px, 0, 20px) rotate(0) scale(var(--stack-hover-scale)); }
.regions.has-selection .region-card.is-selected { z-index: 40 !important; opacity: 1; filter: saturate(1.18); transform: translate3d(0, 0, 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 auto; 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; }
/* The preview has its own scrollport. Keep its dismiss action pinned to the viewport so
   the way back to the card field never scrolls out of reach on phones or short screens. */
.regions .reader-close { position: fixed; top: 104px; right: calc(2.5vw + 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-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); }
.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): three direct opening questions, then photos and context. */
.tip-form [hidden], .tip-done [hidden] { display: none !important; }
.tip-basics { display: grid; gap: clamp(32px, 4vw, 48px); margin: 0; padding: 0; border: 0; }
.tip-question { display: block; min-width: 0; margin: 0; padding: 0; border: 0; cursor: text; }
.tip-answer { display: grid; min-width: 0; }
.tip-question-title { display: block; margin-bottom: 9px; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tip-answer > input, .tip-place input, .tip-map input { width: 100%; min-width: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 0 0 7px; outline: 0; color: var(--red); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.45rem, 2.2vw, 2.3rem); line-height: 1.15; }
.tip-answer > input::placeholder, .tip-place input::placeholder, .tip-map input::placeholder { color: rgba(17,17,15,.38); font-style: italic; }
.tip-answer > input:focus, .tip-place input:focus, .tip-map input:focus { border-bottom-color: var(--red); }
.tip-identity { cursor: default; }
.tip-where { position: relative; }
.tip-place { display: grid; cursor: text; }
.tip-suggest { position: absolute; z-index: 5; top: 82px; left: 0; right: 0; width: 100%; 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-map { display: grid; gap: 7px; margin-top: 24px; cursor: text; }
.tip-map > span { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tip-map input { font-size: 1rem; }
.tip-map-note { margin: 9px 0 0; color: var(--green); font-size: .72rem; font-weight: 800; line-height: 1.4; }
.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-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-close { top: 84px; right: 24px; padding: 9px 11px; font-size: .56rem; }
  .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: translate3d(0, 0, 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-basics { gap: 30px; }
  .tip-answer > input, .tip-place input { font-size: 1.35rem; }
  .tip-from { grid-template-columns: 1fr; }
}

/* Touch screens: the same motion with cheaper effects. 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) {
  .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-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; }

/* Travel directory teaser — the home page's way into travel-directory.html. The three tiles
   use the directory's own category colours and open it already filtered. */
.directory-teaser { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 76px); align-items: end; padding: clamp(64px, 8vw, 112px) clamp(20px, 4vw, 64px); background: var(--paper); }
.directory-teaser-copy > p:first-child { margin: 0 0 14px; color: var(--red); font-size: .61rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.directory-teaser h2 { margin: 0; font-size: clamp(3rem, 6vw, 6.4rem); line-height: .84; letter-spacing: -.08em; }
.directory-teaser h2 em { color: var(--green); font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.directory-teaser-copy > p:nth-of-type(2) { max-width: 440px; margin: 26px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.5; }
.directory-teaser-link { display: inline-block; margin-top: 26px; padding: 15px 19px; background: var(--ink); color: var(--white); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transition: background .2s; }
.directory-teaser-link:hover, .directory-teaser-link:focus-visible { background: var(--red); }
.directory-teaser-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ink); background: var(--ink); }
.directory-teaser-needs a { display: grid; align-content: space-between; gap: 34px; height: 100%; min-height: 190px; padding: clamp(16px, 1.8vw, 24px); transition: background .24s, color .24s; }
.directory-teaser-needs span { font-size: .6rem; font-weight: 800; letter-spacing: .12em; }
.directory-teaser-needs strong { display: block; font-size: clamp(1.25rem, 1.9vw, 1.9rem); line-height: .96; letter-spacing: -.05em; }
.directory-teaser-needs small { display: block; margin-top: 9px; font-family: Georgia, 'Times New Roman', serif; font-size: .86rem; line-height: 1.38; }
.teaser-tours { background: #f7d95f; }
.teaser-transport { background: #d9d0f6; }
.teaser-stay { background: #9bc7ae; }
.directory-teaser-needs a:hover, .directory-teaser-needs a:focus-visible { background: var(--ink); color: var(--white); }
@media (max-width: 860px) {
  .directory-teaser { grid-template-columns: 1fr; align-items: start; padding: 60px 18px; }
}
@media (max-width: 680px) {
  .directory-teaser h2 { font-size: 15vw; }
  .directory-teaser-needs { grid-template-columns: 1fr; }
  .directory-teaser-needs a { grid-template-columns: 30px 1fr; align-content: start; gap: 4px 10px; min-height: 0; padding: 15px 16px; }
  .directory-teaser-needs span { grid-row: 1 / span 2; padding-top: 5px; }
  .directory-teaser-needs strong { font-size: 1.3rem; }
  .directory-teaser-needs small { margin-top: 0; }
}

/* Partner rail — one fixed-height line at every partner count. The cells fill the row when
   they fit, then become a native horizontal scroller rather than growing the page vertically. */
.partners { padding: 26px clamp(20px, 4vw, 64px) 30px; background: #f1ecdf; border-top: 1px solid var(--line); }
.partners-label { margin: 0 0 14px; color: var(--red); font-size: .61rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.partner-row { display: flex; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; list-style: none; border: 1px solid var(--ink); background: var(--ink); }
.partner-row::-webkit-scrollbar { display: none; }
.partner-row li { display: flex; flex: 1 0 180px; min-width: 0; height: 78px; align-items: center; justify-content: center; overflow: hidden; scroll-snap-align: start; border-right: 1px solid var(--ink); background: var(--white); }
.partner-row li:last-child { border-right: 0; }
.partner-logo-frame, .partner-row a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 12px; }
.partner-row img { display: block; width: auto; height: auto; object-fit: contain; }
.partner-row .partner-logo-venture, .partner-row .partner-logo-servabot { width: min(100%, 145px); max-height: 52px; }
.partner-row .partner-logo-servabot { transform: scale(1.2); }
.partner-row .partner-logo-symbol, .partner-row .partner-logo-colourfro { width: auto; height: 52px; max-width: 100%; }
.partners-cta { margin: 14px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: .95rem; }
.partners-cta a { margin-left: 4px; font-family: Arial, Helvetica, sans-serif; font-size: .61rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 680px) {
  .partners { padding: 22px 0 24px; }
  .partners-label { margin-bottom: 12px; padding: 0 18px; }
  .partners-cta { padding: 0 18px; }
  .partners-cta a { display: inline-block; margin: 6px 0 0; }
  .partner-row { margin-left: 18px; margin-right: 18px; }
  .partner-row li { flex: 0 0 min(68vw, 240px); height: 72px; }
  .partner-row .partner-logo-venture, .partner-row .partner-logo-servabot { width: min(100%, 132px); max-height: 48px; }
  .partner-row .partner-logo-symbol, .partner-row .partner-logo-colourfro { height: 48px; }
}

/* Plain pages (About, Contact, Privacy): the doc page's type, with the full nav and footer. */
.info-page { background: var(--paper); }
.info-main { max-width: 960px; padding-bottom: 120px; }
.info-main h1 { max-width: 14ch; }
.info-main h1 em { display: block; margin-top: 10px; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: .52em; line-height: 1.05; letter-spacing: -.03em; }
.info-main .info-lead { max-width: 720px; font-size: 1.32rem; line-height: 1.45; }
.info-main .info-updated { margin-top: -6px; color: #5c5b55; font-family: Arial, Helvetica, sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.info-main a { border-bottom: 1px solid; }
.info-list { max-width: 720px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.info-list li { padding: 16px 0; border-bottom: 1px solid var(--line); font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.55; }
.info-list li a { margin-left: 4px; font-family: Arial, Helvetica, sans-serif; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.info-list li a.info-inline { margin: 0; font: inherit; letter-spacing: normal; text-transform: none; }
.info-list .info-link-button { margin-top: 8px; font-family: Arial, Helvetica, sans-serif; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.info-main .info-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.info-main .info-actions a { border: 1px solid var(--ink); border-radius: 99px; padding: 14px 20px; font-family: Arial, Helvetica, sans-serif; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.info-main .info-actions a:first-child { background: var(--ink); color: var(--paper); }
.info-partners { margin-top: 72px; padding: 0; background: transparent; border-top: 0; }
.info-main .info-partners .partners-label { margin: 0 0 14px; padding: 0; font-size: .61rem; letter-spacing: .12em; }
.info-main .info-partners .partner-row { margin-left: 0; margin-right: 0; }
.info-main .info-partners .partners-cta { padding: 0; }
.info-main .partner-row a, .info-main .partners-cta a { border-bottom: 0; }
.info-main .partners-cta a { text-decoration: underline; }
.info-link-button { border: 0; border-bottom: 1px solid; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

/* ==========================================================================
   Region festivals: a plain list of the festivals filed under the region,
   linked to their pages on /festivals/ (built by tools/build_regions.mjs).
   ========================================================================== */
.region-festivals { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.region-festival { display: grid; grid-template-columns: minmax(110px, .5fr) 2fr 1.2fr; gap: 28px; align-items: baseline; padding: 24px 0 26px; border-top: 1px solid var(--line); }
.region-festival-month { color: var(--red); font-size: .62rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.region-festival h3 { margin: 0; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1; letter-spacing: -.05em; }
.region-festival h3 a { border-bottom: 2px solid transparent; transition: border-color .2s; }
.region-festival h3 a:hover, .region-festival h3 a:focus-visible { border-bottom-color: var(--yellow); }
.region-festival div p { margin: 10px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: .98rem; line-height: 1.45; }
.region-festival-when { margin: 0; font-size: .86rem; line-height: 1.45; }
.region-festival-when span { display: block; margin-top: 4px; color: #55554f; }
.region-festivals-all { margin: 28px 0 0; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.region-festivals-all a { border-bottom: 2px solid var(--yellow); }

@media (max-width: 980px) {
  .region-festival { grid-template-columns: 1fr; gap: 10px; }
}

/* Home page festivals: a small version of the /festivals/ board (green paper, taped prints and
   cut-outs that drift on scroll) that invites people in. Written by tools/build_festivals.mjs
   between the festivals:home markers in index.html; its inline script sets --py and --pr. */
.home-fest { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: flex; align-items: center; min-height: clamp(560px, 50vw, 780px); padding: clamp(80px, 9vw, 140px) clamp(20px, 4vw, 64px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(40vw 30vw at 20% 18%, rgba(255,255,255,.07), transparent 70%), radial-gradient(50vw 40vw at 80% 60%, rgba(0,0,0,.14), transparent 70%), #145c41; background-size: 200px, auto, auto; }
.home-fest-paper { position: relative; z-index: 2; width: min(580px, 48vw); margin-left: 17vw; padding: clamp(28px, 3vw, 46px); background: var(--paper); box-shadow: -18px 24px 40px -20px rgba(0,0,0,.45); transform: rotate(-1deg);
  clip-path: polygon(0 1.2%, 6% .4%, 13% 1.4%, 21% .2%, 30% 1.1%, 41% .3%, 52% 1.3%, 63% .2%, 74% 1%, 86% .1%, 100% .8%, 100% 100%, 0 100%); }
.home-fest-kicker { margin: 0 0 12px; color: var(--red); font-size: .61rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-fest-intro { max-width: 46ch; margin: 18px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.5; }
.home-fest-cta { display: inline-block; margin-top: 24px; padding: 15px 22px; border-radius: 99px; background: var(--ink); color: var(--yellow); font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: background .2s, color .2s; }
.home-fest-cta:hover, .home-fest-cta:focus-visible { background: var(--red); color: var(--white); }
.home-fest-cta:focus-visible { outline-color: var(--ink); }
.home-fest-now { margin: 18px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: .92rem; line-height: 1.5; color: #4a4943; }
.home-fest-now a { color: var(--ink); border-bottom: 1px solid; }
.hf-layer { position: absolute; transform: translate3d(0, var(--py, 0px), 0) rotate(calc(var(--r, 0deg) + var(--pr, 0deg))); }
.hf-print { z-index: 1; margin: 0; padding: 8px 8px 0; background: #fbf9f3; box-shadow: 0 2px 2px rgba(0,0,0,.12), 0 34px 50px -24px rgba(0,0,0,.6); }
.hf-print img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #d9d4c4; }
.hf-print figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px 10px; font-family: Georgia, 'Times New Roman', serif; font-size: .82rem; line-height: 1.15; }
.hf-print figcaption small { align-self: end; color: rgba(17,17,15,.6); font-family: Arial, Helvetica, sans-serif; font-size: .58rem; white-space: nowrap; }
.hf-tape { position: absolute; z-index: 2; top: -12px; left: 32%; width: 36%; height: 26px; background: rgba(241, 238, 229, .7); box-shadow: 0 1px 2px rgba(0,0,0,.1); transform: rotate(-4deg);
  clip-path: polygon(0 10%, 3% 0, 7% 9%, 11% 0, 100% 0, 97% 14%, 100% 30%, 97% 48%, 100% 66%, 97% 84%, 100% 100%, 0 100%, 3% 80%, 0 60%, 3% 40%, 0 22%); }
.hf-fiok { right: 2vw; top: 7%; width: clamp(230px, 27vw, 420px); --r: 5deg; }
.hf-kente { right: 12vw; bottom: 4%; width: clamp(210px, 22vw, 350px); --r: -7deg; }
.hf-kente .hf-tape { left: 12%; transform: rotate(6deg); }
.hf-fetu { left: 1.5vw; bottom: 8%; width: clamp(170px, 15vw, 260px); --r: -11deg; }
.hf-fetu .hf-tape { left: 50%; transform: rotate(9deg); }
.hf-fetu figcaption { flex-direction: column; gap: 3px; }
.hf-fetu figcaption small { align-self: start; }
.hf-cutout { z-index: 3; pointer-events: none; filter: drop-shadow(0 14px 12px rgba(0,0,0,.35)); }
.hf-cutout svg { display: block; width: 100%; height: auto; overflow: visible; }
.hf-drum { left: 5vw; top: 7%; width: clamp(80px, 9vw, 140px); --r: 12deg; }
.hf-umbrella { right: 31vw; top: 5%; width: clamp(70px, 8vw, 124px); --r: -10deg; }
.hf-torch { left: 9vw; top: 42%; width: clamp(50px, 5.5vw, 86px); --r: 14deg; }
.hf-yam { right: 3vw; bottom: 6%; width: clamp(80px, 9vw, 140px); --r: -8deg; }
@media (max-width: 1100px) {
  .home-fest-paper { margin-left: 6vw; width: min(560px, 56vw); }
  .hf-fetu, .hf-torch { display: none; }
  .hf-drum { left: 2vw; top: 3%; }
  .hf-kente { right: 4vw; }
}
@media (max-width: 680px) {
  .home-fest { display: block; min-height: 0; padding: 250px 16px 240px; }
  .home-fest-paper { width: auto; margin: 0; padding: 26px 22px 28px; transform: rotate(-.6deg); }
  .home-fest h2 { font-size: 16vw; }
  .hf-fiok { top: 20px; right: -10vw; width: 58vw; }
  .hf-kente { right: -6vw; bottom: 28px; width: 66vw; }
  .hf-print figcaption { flex-direction: column; gap: 3px; font-size: .74rem; }
  .hf-print figcaption small { align-self: start; }
  .hf-drum { left: 6vw; top: 30px; width: 22vw; }
  .hf-umbrella { display: none; }
  .hf-yam { left: 5vw; right: auto; bottom: 100px; width: 22vw; }
}
@media (prefers-reduced-motion: reduce) {
  .home-fest-cta { transition: none; }
}

/* Newsletter sign-up (newsletter.js): the footer form, the band on festival pages and the home
   page, and the slide-in card. */
.nl-form { position: relative; max-width: 560px; }
.nl-title { margin: 0; font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 900; line-height: .95; letter-spacing: -.05em; }
.nl-lead { max-width: 460px; margin: 14px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.45; }
.nl-row { display: flex; margin-top: 20px; border-bottom: 2px solid currentColor; }
.nl-row input { flex: 1; min-width: 0; padding: 12px 2px; border: 0; border-radius: 0; background: transparent; font-size: 1rem; }
.nl-row input::placeholder { color: inherit; opacity: .5; }
.nl-row input:focus-visible { outline-offset: 2px; }
.nl-row button { flex: none; min-height: 44px; padding: 0 18px; border: 0; background: var(--ink); color: var(--paper); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.nl-row button:hover { background: var(--red); }
.nl-row button:disabled { opacity: .6; cursor: progress; }
.nl-status { margin: 10px 0 0; color: var(--green); font-size: .82rem; font-weight: 800; line-height: 1.4; }
.nl-status:empty { display: none; }
.nl-status.is-error { color: #b3261e; }
.nl-note { margin: 8px 0 0; font-size: .7rem; line-height: 1.45; opacity: .78; }
.nl-note a { text-decoration: underline; text-underline-offset: 3px; }
.nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-form.is-done .nl-row, .nl-form.is-done .nl-note { display: none; }
.nl-form.is-done .nl-status { margin-top: 16px; font-size: 1.05rem; }
main[tabindex="-1"]:focus { outline: 0; }

/* In the footer, the invitation sits under the tagline in the engraving's ink. */
.footer-newsletter { max-width: 320px; margin-top: 28px; }
.footer-brand .nl-form p { max-width: none; font-family: Arial, Helvetica, sans-serif; }
.footer-brand .nl-form .nl-title { margin: 0; font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1; }
.footer-brand .nl-form .nl-lead { margin-top: 10px; font-family: Georgia, 'Times New Roman', serif; font-size: .88rem; line-height: 1.4; }
.footer-brand .nl-form .nl-note { margin-top: 8px; font-size: .7rem; }
.footer-brand .nl-form .nl-status { margin-top: 10px; font-size: .8rem; }
.nl-footer .nl-row { display: grid; gap: 8px; margin-top: 14px; border: 0; }
.nl-footer .nl-row input { width: 100%; padding: 9px 2px; border-bottom: 1px solid currentColor; font-size: .9rem; }
.nl-footer .nl-row button { min-height: 44px; padding: 0 14px; background: var(--footer-ink); color: #f1ecdf; }
.nl-footer .nl-row button:hover { background: var(--red); }
.nl-footer .nl-status { color: var(--footer-ink); }

/* A dark band at the end of festival pages and under the home page's festivals. */
.nl-band { padding: clamp(52px, 7vw, 96px) clamp(20px, 6vw, 110px); background: var(--ink); color: var(--paper); }
.nl-band .nl-form { max-width: 640px; }
.nl-band .nl-row button { background: var(--yellow); color: var(--ink); }
.nl-band .nl-row button:hover { background: var(--paper); }
.nl-band .nl-status { color: var(--yellow); }
.nl-band .nl-status.is-error { color: #ff9a85; }
.nl-band .nl-title em { color: var(--yellow); font-style: normal; }

/* The sign-up card: centered on wide screens, a fuller slide-in card on phones. Never a modal.
   A yellow panel holds two atumpan drums whose sticks play a few beats when the card opens. */
.nl-pop { position: fixed; z-index: 120; top: 50%; left: 50%; display: grid; grid-template-columns: 170px minmax(0, 1fr); width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 8px 8px 0 var(--ink); opacity: 0; transform: translate(-50%, -46%) scale(.96); transition: transform .4s var(--ease), opacity .3s; }
.nl-pop.is-open { opacity: 1; transform: translate(-50%, -50%); }
.nl-pop .nl-form { padding: 26px 30px 24px; }
.nl-pop .nl-title { padding-right: 28px; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.04em; }
.nl-pop .nl-lead { margin-top: 10px; font-size: .98rem; }
.nl-pop .nl-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 20px; border: 0; }
.nl-pop .nl-row input { padding: 10px 2px; border-bottom: 2px solid currentColor; }
.nl-pop .nl-row button { padding: 0 16px; }
.nl-close { position: absolute; z-index: 1; top: 4px; right: 4px; display: grid; width: 40px; height: 40px; place-items: center; border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.nl-close:hover { color: var(--red); }
.nl-pop-art { position: relative; overflow: hidden; border-right: 1.5px solid var(--ink); background: var(--yellow); }
.nl-pop-art svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.nl-pop-art .nl-sun { fill: var(--red); }
.nl-pop-art .nl-ground { stroke: var(--ink); stroke-width: 1.5; }
.nl-pop-art .nl-wood { fill: #8a4a24; }
.nl-pop-art .nl-shade { fill: #5e2f15; }
.nl-pop-art .nl-cord { fill: none; stroke: #f3e6c8; stroke-width: 1.3; stroke-linejoin: round; }
.nl-pop-art .nl-cloth { fill: var(--red); }
.nl-pop-art .nl-stripe { fill: var(--green); }
.nl-pop-art .nl-outline { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.nl-pop-art .nl-skin { fill: #f3e6c8; stroke: var(--ink); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.nl-pop-art .nl-stick { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; transform-box: view-box; transform: rotate(22deg); }
.nl-pop-art .nl-stick-a { transform-origin: 66px 14px; }
.nl-pop-art .nl-stick-b { transform-origin: 114px 28px; }
.nl-pop-art .nl-beat { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
/* Roughly a beat a second, the second drum answering half a beat later. Four beats each on
   opening; it keeps playing while the card is hovered. */
.nl-pop.is-open .nl-stick, .nl-pop.is-open .nl-skin, .nl-pop.is-open .nl-beat { animation: .9s ease-in-out .5s 4 both; }
.nl-pop.is-open .nl-stick { animation-name: nl-hit; }
.nl-pop.is-open .nl-skin { animation-name: nl-skin; }
.nl-pop.is-open .nl-beat { animation-name: nl-beat; }
.nl-pop.is-open .nl-stick-b, .nl-pop.is-open .nl-skin-b, .nl-pop.is-open .nl-beat-b { animation-delay: .95s; }
.nl-pop.is-open:hover .nl-stick, .nl-pop.is-open:hover .nl-skin, .nl-pop.is-open:hover .nl-beat { animation-iteration-count: infinite; }
@keyframes nl-hit { 0%, 35%, 100% { transform: rotate(22deg); } 50% { transform: rotate(0deg); } 64% { transform: rotate(13deg); } }
@keyframes nl-skin { 0%, 48%, 100% { transform: scaleY(1); } 53% { transform: scaleY(.55); } 62% { transform: scaleY(1.15); } 72% { transform: scaleY(.95); } }
@keyframes nl-beat { 0%, 48%, 82%, 100% { opacity: 0; } 55% { opacity: 1; } }
@media (max-width: 680px) {
  .nl-pop { top: auto; bottom: 12px; grid-template-columns: clamp(78px, 23vw, 112px) minmax(0, 1fr); max-height: calc(100dvh - 24px); box-shadow: 5px 5px 0 var(--ink); transform: translate(-50%, calc(100% + 48px)); }
  .nl-pop.is-open { transform: translateX(-50%); }
  .nl-pop-art { display: block; }
  .nl-pop-art svg { inset: auto; top: 50%; left: 50%; width: 100%; height: 180px; transform: translate(-50%, -50%); }
  .nl-pop .nl-form { padding: 18px 16px 16px; }
  .nl-pop .nl-title { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .nl-pop .nl-lead { display: block; margin-top: 8px; font-size: .9rem; line-height: 1.35; }
  .nl-pop .nl-row { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
  .nl-pop .nl-row input { padding: 10px 2px; }
  .nl-pop .nl-row button { min-height: 44px; padding: 0 6px; font-size: .66rem; letter-spacing: .02em; }
  .nl-pop .nl-note { margin-top: 8px; font-size: .7rem; }
  body { padding-bottom: var(--nl-pop-space, 0px); }
  /* The chat launcher sits in the lower right on phones. */
  body:has(> [data-servadot-embed]) .nl-pop { bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-pop { transform: translate(-50%, -50%); transition: none; }
  .nl-pop.is-open .nl-stick, .nl-pop.is-open .nl-skin, .nl-pop.is-open .nl-beat { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 680px) {
  .nl-pop { transform: translateX(-50%); }
}
.nl-band:empty { display: none; }

/* Newsletter archive and issue pages (/newsletter/, tools/build_newsletter.mjs). */
.info-main .nl-section h2 { padding-top: 18px; border-top: 2px solid var(--ink); }
.nl-items { max-width: 720px; margin: 0; padding: 0; list-style: none; }
.nl-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.nl-item-meta { display: block; color: #5c5b55; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nl-item h3 { margin: 6px 0 4px; font-size: 1.3rem; letter-spacing: -.03em; }
.info-main .nl-item h3 a { border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.info-main .nl-item p { margin: 0; }
.info-main .nl-section-note { margin-top: 14px; color: #5c5b55; font-size: .92rem; }
.info-main .nl-more { margin-top: 48px; font-family: Arial, Helvetica, sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nl-page-band { margin: 56px 0 0; }
.info-main .nl-page-band a { border-bottom: 0; }
.doc-main .nl-band p { max-width: none; }
.doc-main .nl-band .nl-title { font-family: Arial, Helvetica, sans-serif; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: .95; }
.doc-main .nl-band .nl-note { font-family: Arial, Helvetica, sans-serif; font-size: .7rem; }
.doc-main .nl-band .nl-status { font-family: Arial, Helvetica, sans-serif; font-size: .82rem; }