/* N/A Magazine — public site v1.0
   Minimal, image-first, red accent. No build step. */

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/eb-garamond-latin-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("../fonts/eb-garamond-latin-italic.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/eb-garamond-latin-ext-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("../fonts/eb-garamond-latin-ext-italic.woff2") format("woff2-variations"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --brand: #FF340A;
    --paper: #F2F2F0;
    --paper-2: #E7E7E4;
    --ink: #121110;
    --ink-2: #2b2926;
    --muted: #716b64;
    --line: rgba(18, 17, 16, .14);
    --serif: "EB Garamond", "Garamond", "Georgia", "Times New Roman", serif;
    --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --gutter: clamp(16px, 3.2vw, 48px);
    --max: 1480px;
    --radius: 2px;
    --ease: cubic-bezier(.2, .7, .1, 1);
    --header-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.5; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
/* WebKit draws its own clear cross inside <input type="search">, which lands
   next to ours and reads as two close buttons. Ours is the one that matches
   the rest of the page. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; }
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
[hidden] { display: none !important; }

.visually-hidden, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; z-index: 1000; }
.skip-link:focus { top: 8px; }
.icon { flex: none; }
.muted { color: var(--muted); }

/* ---------------------------------------------------------- type scale */
.display-xxl, .display-xl, .display-l, .display-m, .display { font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; letter-spacing: -.02em; line-height: .92; margin: 0; }
.display-xxl { font-size: clamp(64px, 13vw, 220px); letter-spacing: -.035em; }
.display-xl { font-size: clamp(48px, 8.2vw, 136px); letter-spacing: -.03em; }
.display-l { font-size: clamp(38px, 5.4vw, 84px); }
.display-m { font-size: clamp(32px, 3.6vw, 56px); }
.display { font-size: clamp(34px, 4vw, 60px); }
/* v1.13: emphasis is red, not slanted. Ana asked for upright type across the
   site, and the old Squarespace headings were upright too — the italic was
   something this build introduced. The one exception is the founder credit. */
.display-xxl em, .display-xl em, .display-l em { font-style: normal; color: var(--brand); }
.eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.eyebrow .dot::before, .eyebrow a.dot::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-right: 10px; vertical-align: middle; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; letter-spacing: .02em; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .2s, gap .3s var(--ease); }
.text-link:hover { color: var(--brand); gap: 12px; }

/* ------------------------------------------------------------- buttons */
.pill-button { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ink); background: transparent; font-size: 14px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.pill-button:hover { background: var(--ink); color: var(--paper); }
.pill-button.solid { background: var(--brand); border-color: var(--brand); color: #fff; }
.pill-button.solid:hover { background: var(--ink); border-color: var(--ink); }
.pill-button.inverse { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pill-button.inverse:hover { background: transparent; color: var(--paper); }
.pill-button.large { height: 56px; padding: 0 28px; font-size: 16px; }
.pill-button .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.pill-button:hover .icon { transform: translateX(3px); }
.icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; transition: background .2s; }
.icon-button:hover { background: rgba(0, 0, 0, .06); }

/* ------------------------------------------------------------ countdown */
.countdown-bar { background: var(--brand); color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.countdown-bar a { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 9px var(--gutter); }
.countdown-bar .countdown-clock { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.countdown-bar .icon { width: 14px; height: 14px; }
/* No announcement running: the band keeps its place and says so. */
.countdown-bar.is-idle { display: flex; justify-content: center; padding: 9px var(--gutter); }

/* --------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(242, 242, 240, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { max-width: var(--max); margin: 0 auto; padding: 12px var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 500; }
.nav-right { justify-content: flex-end; gap: 18px; }
.nav a:not(.pill-button) { position: relative; padding: 4px 0; }
.nav a:not(.pill-button)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav a:not(.pill-button):hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav .pill-button { height: 38px; padding: 0 18px; }
.menu-toggle { display: none; }
.brand { display: block; }
/* --menu-top is set by site.js from the header's real bottom edge, because
   the countdown strip and the editor's preview bar sit above it and a fixed
   header height put the first link under the header. The var() fallback is
   the old behaviour, for the moment before the script runs. */
/* The panel begins BELOW the header rather than behind it. Padding was not
   enough: the header is above the menu in the stack and half transparent, so
   the moment the list scrolled, "Magazine" slid up under it and showed
   through the blur. Starting the panel at the header's bottom edge means
   scrolled content is clipped there instead — it can never pass underneath.
   --menu-top is measured by site.js; the fallback covers the moment before
   the script runs. */
.mobile-menu { position: fixed; top: var(--menu-top, var(--header-h)); left: 0; right: 0; bottom: 0;
    z-index: 45; background: var(--paper);
    padding: clamp(10px, 2vh, 24px) var(--gutter) clamp(16px, 3vh, 40px);
    overflow-y: auto; overscroll-behavior: contain; }
/* Sixteen links at a fixed 44px do not fit a 360×640 phone, so the panel
   scrolled — and a scrolled panel cuts the first word in half at its top
   edge. Scaling the type to the viewport's HEIGHT makes the whole menu fit
   on the phones people actually hold; overflow stays as a safety net for a
   very small window or very large system text, but in normal use nothing
   scrolls and nothing is clipped. */
.mobile-menu nav { display: flex; flex-direction: column; gap: clamp(2px, .7vh, 6px); }
.mobile-menu a { font-family: var(--serif); font-size: clamp(27px, 5.1vh, 44px); line-height: 1.05; letter-spacing: -.02em; }
.mobile-menu a.sub { font-family: var(--sans); font-size: clamp(11px, 1.9vh, 15px); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-left: 4px; }

.search-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(242, 242, 240, .97); display: flex; flex-direction: column; justify-content: center; padding: var(--gutter); animation: fade .25s var(--ease); }
.search-overlay-form { max-width: 1100px; width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--ink); }
.search-overlay-form input { flex: 1; border: 0; background: transparent; font-family: var(--serif); font-size: clamp(40px, 7vw, 96px); letter-spacing: -.02em; padding: 10px 0; outline: none; min-width: 0; }
.search-hint { max-width: 1100px; width: 100%; margin: 18px auto 0; color: var(--muted); font-size: 14px; }
.search-hint a { color: var(--ink); border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------- layout */
main { min-height: 50vh; }
.block { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 7vw, 110px) var(--gutter) 0; }
.block-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(32px, 4vw, 60px); border-bottom: 1px solid var(--line); padding-bottom: 26px; }
.page-intro { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 7vw, 110px) var(--gutter) 0; }
.page-intro.compact { padding-top: clamp(28px, 4vw, 60px); }
.page-intro > p:not(.eyebrow) { max-width: 620px; font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-2); margin: 22px 0 0; }
.hero-intro { font-size: clamp(19px, 1.95vw, 27px); line-height: 1.42; color: var(--ink-2); max-width: 560px; margin: 24px 0 0; }
.empty-state { max-width: var(--max); margin: 0 auto; padding: 80px var(--gutter); text-align: center; color: var(--muted); }
.empty-state .display-m { color: var(--ink); margin-bottom: 14px; }

/* ---------------------------------------------------------------- hero */
/* Tighter at the top: the hero used to open 80px below a navigation bar
   that is already 88px tall, which read as a hole rather than as air. */
.hero { max-width: var(--max); margin: 0 auto; padding: clamp(14px, 2vw, 30px) var(--gutter) clamp(40px, 6vw, 90px); display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-cover { display: block; position: relative; aspect-ratio: 4 / 5; perspective: 1400px; }
/* Straight, not tilted — Ana asked for it and the cover art reads better
   square to the page. The lift on hover stays. */
.hero-cover img, .cover-fallback { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45); transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.hero-cover:hover img { transform: scale(1.015); box-shadow: 0 60px 90px -30px rgba(0, 0, 0, .5); }
.cover-fallback { display: grid; place-items: center; background: var(--brand); color: var(--paper); }
/* .brand-logo sets color:var(--brand) — on a brand-red cover that is red
   on red, i.e. nothing at all. */
.cover-fallback .brand-logo { width: 46%; line-height: 0; color: var(--paper); }
/* Three classes deep on purpose: the generic .brand-logo .brand-svg rule
   further down fixes a 64px height for the site header, and it would
   otherwise win on source order and shrink this to a thumbnail. */
.cover-fallback .brand-logo .brand-svg { display: block; width: 100%; height: auto; }
.hero-countdown { margin-top: 32px; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 116px)); gap: 14px; }
.countdown-grid span { border-top: 1px solid var(--ink); padding-top: 10px; }
.countdown-grid b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(54px, 6.2vw, 92px); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-grid small { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.marquee { overflow: hidden; border-block: 1px solid var(--ink); padding: 14px 0; background: var(--paper); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 48px); padding: 0 28px; white-space: nowrap; line-height: 1; }
.marquee span:nth-child(3n+2) { color: var(--brand); }
.marquee span::after { content: "N/A"; font-family: var(--sans); font-weight: 700; font-size: .3em; letter-spacing: .12em; vertical-align: middle; margin-left: 56px; color: var(--ink); font-style: normal; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.lead-story { max-width: var(--max); margin: clamp(48px, 7vw, 110px) auto 0; padding: 0 var(--gutter); }
.lead-story-link { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.lead-story-media { margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-2); }
.lead-story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.lead-story-link:hover .lead-story-media img { transform: scale(1.04); }
.lead-story-body p:not(.eyebrow) { color: var(--ink-2); font-size: 18px; margin: 20px 0 26px; max-width: 460px; }
.lead-story-link:hover .display-l { color: var(--brand); }
.lead-story .display-l { transition: color .3s; }

/* -------------------------------------------------------- story cards */
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 32px); }
/* v1.12 — the Latest grid read as thrown together. Three things were doing
   it: `dense` reshuffled cards out of editorial order whenever one spanned a
   row, cards were only as tall as their own text so nothing lined up across a
   row, and deks of wildly different lengths left ragged bottoms. Order is now
   the order the editor chose, every card fills its cell, and the dek is held
   to a fixed number of lines so the rows read as rows. */
.story-grid.mosaic { grid-auto-flow: row; }
.story-grid .story-card { display: flex; }
.story-grid .story-card-link { display: flex; flex-direction: column; width: 100%; }
.story-grid .story-card-dek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; }
.story-grid.mosaic .story-card.tall { grid-row: span 2; }
.story-grid.mosaic .story-card.tall .story-card-media { aspect-ratio: 3 / 4.6; }
/* The lead card is the one the eye should land on first, so it is allowed to
   speak louder than the four beside it rather than just being taller. */
.story-grid.mosaic .story-card.tall .story-card-title { font-size: clamp(30px, 2.9vw, 46px); }
.story-grid.mosaic .story-card.tall .story-card-dek { -webkit-line-clamp: 4; font-size: 16px; }
.story-grid.mosaic .story-card.wide { grid-column: span 2; }
.story-grid.mosaic .story-card.wide .story-card-media { aspect-ratio: 16 / 9; }
.story-card-link { display: block; }
.story-card-media { position: relative; margin: 0 0 16px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.story-card-media img, .story-card-media .img-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s; }
.story-card-media::after { content: ""; position: absolute; inset: 0; background: var(--brand); mix-blend-mode: multiply; opacity: 0; transition: opacity .5s var(--ease); }
.story-card-link:hover .story-card-media img { transform: scale(1.05); filter: grayscale(1) contrast(1.1); }
.story-card-link:hover .story-card-media::after { opacity: .85; }
.story-card .eyebrow { font-size: 11px; margin-bottom: 10px; color: var(--muted); }
.story-card-title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.2vw, 34px); line-height: 1.02; letter-spacing: -.015em; margin: 0; transition: color .3s; }
.story-card-link:hover .story-card-title { color: var(--brand); }
.story-card-dek { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.img-placeholder { display: block; width: 100%; height: 100%; min-height: 80px; background: repeating-linear-gradient(135deg, var(--paper-2) 0 12px, #e5dfd6 12px 13px); }

/* --------------------------------------------------------- places */
/* v1.31: six places, one row. At the widest the circles are about 190px —
   small enough to stay a row of portraits rather than a row of photographs,
   which is what this block is for. */
.place-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); }
.place-card { display: block; }
.place-card.is-soon figure { filter: grayscale(1); opacity: .72; transition: filter .5s var(--ease), opacity .5s var(--ease); }
.place-card.is-soon:hover figure { filter: grayscale(0); opacity: 1; }
.place-card figure { margin: 0 0 14px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--paper-2); }
.place-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.place-card:hover img { transform: scale(1.08); }
/* Four names had room for 38px; six do not — "St Andrews" at 38px in a 184px
   card runs out of card. */
.place-name { display: block; font-family: var(--serif); font-size: clamp(22px, 1.9vw, 30px); line-height: 1.05; text-align: center; overflow-wrap: break-word; }
.place-meta { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-top: 8px; white-space: nowrap; }
.place-meta .icon { width: 14px; height: 14px; }

/* ------------------------------------------------------ community band */
.community-band { margin: clamp(60px, 8vw, 130px) 0 0; background: var(--brand); color: var(--paper); padding: clamp(60px, 9vw, 150px) var(--gutter); text-align: center; position: relative; overflow: hidden; }
.community-band .display-xl { font-size: clamp(80px, 16vw, 260px); }
.community-band p:not(.eyebrow) { max-width: 520px; margin: 24px auto 34px; font-size: 19px; }
.community-band .eyebrow { justify-content: center; }

/* --------------------------------------------------------- magazine */
.season-group { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 90px) var(--gutter) 0; }
.season-title { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 16px; margin: 0 0 28px; }
.season-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cover-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px) clamp(16px, 2vw, 32px); }
.issue-cover { display: block; }
.issue-cover figure { position: relative; margin: 0 0 14px; aspect-ratio: 4 / 5; background: var(--paper-2); }
.issue-cover img, .issue-cover .img-placeholder { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .35); transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.issue-cover:hover img { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 34px 44px -20px rgba(0, 0, 0, .45); }
.issue-cover-meta { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.issue-cover-title { display: block; font-family: var(--serif); font-size: 28px; line-height: 1.05; margin-top: 6px; transition: color .3s; }
.issue-cover:hover .issue-cover-title { color: var(--brand); }
.badge { position: absolute; top: 12px; left: 12px; background: var(--brand); color: #fff; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding: 6px 10px; border-radius: 99px; }

.issue-hero { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 80px) var(--gutter) 0; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 6vw, 110px); align-items: center; }
/* Imported covers are portrait photographs; without a ceiling they stretch the
   hero far past the text beside them and leave the right half empty. */
.issue-hero-cover { margin: 0; aspect-ratio: 4 / 5; height: min(62vh, 540px); width: auto; max-width: 100%; justify-self: end; }
.issue-facts { display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.issue-facts div { display: flex; flex-direction: column; gap: 4px; }
.issue-facts dt { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.issue-facts dd { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1; }
.issue-hero-cover img, .issue-hero-cover .img-placeholder { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45); }

/* -------------------------------------------------------------- story */
.preview-banner { background: #111; color: #fff; text-align: center; font-size: 13px; padding: 10px; letter-spacing: .04em; }
.story-head { max-width: var(--max); margin: 0 auto; padding: clamp(32px, 6vw, 96px) var(--gutter) 0; }
.story-head-copy { max-width: 1060px; margin: 0 auto; text-align: center; }
.story-head-copy .eyebrow { justify-content: center; color: var(--brand); }
.story-dek { font-family: var(--serif); font-size: clamp(22px, 2.3vw, 32px); line-height: 1.2; color: var(--ink-2); max-width: 780px; margin: 26px auto 0; }
.story-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13px; color: var(--muted); margin: 28px 0 0; letter-spacing: .02em; }
.story-meta a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.story-meta .icon { width: 14px; height: 14px; }
.story-hero { margin: clamp(32px, 5vw, 70px) calc(var(--gutter) * -1) 0; }
/* The opening photograph is never cropped (Ana, 4 Oct): no object-fit cover,
   no forced height. A portrait is held to a column instead of towering. */
.story-hero img { width: 100%; height: auto; }
.story-hero.is-portrait { max-width: 720px; margin-left: auto; margin-right: auto; }
/* --- captions under pictures (v1.14) -----------------------------------
   They were 13px grey text indented by the page gutter, so they floated loose
   under the image instead of belonging to it, and the credit ran on in small
   caps as if it were part of the sentence. Now: the caption sits against the
   same left edge as the picture, on its own hairline, with the credit set
   apart rather than tacked on. */
.story-hero figcaption, .prose figcaption {
    margin-top: 14px; padding: 10px var(--gutter) 0;
    border-top: 1px solid var(--line);
    font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.story-hero figcaption span, .prose figcaption span {
    margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 600; color: var(--muted); white-space: nowrap;
}
/* Inside the article the picture is held to the text column, so the caption
   lines up with the writing rather than with the edge of the page. */
.prose figcaption { padding-inline: 0; }
@media (max-width: 760px) {
    .story-hero figcaption, .prose figcaption { font-size: 13.5px; }
}
.story-head.is-visual { position: relative; padding: 0; max-width: none; }
.story-head.is-visual .story-hero { margin: 0; }
.story-head.is-visual .story-hero img { height: auto; max-height: none; }
.story-head.is-visual .story-head-copy { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 0 var(--gutter) clamp(40px, 6vw, 90px); color: #fff; max-width: none; }
.story-head.is-visual .story-head-copy .eyebrow, .story-head.is-visual .story-meta, .story-head.is-visual .story-meta a, .story-head.is-visual .story-dek { color: #fff; }
.story-head.is-visual::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); pointer-events: none; }
.story-head.is-visual .story-hero figcaption { display: none; }

.prose-block { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 5vw, 80px) var(--gutter) 0; }
.prose { max-width: 700px; margin: 0 auto; font-size: clamp(18px, 1.25vw, 20px); line-height: 1.65; color: var(--ink-2); }
.story-body { padding: clamp(40px, 5vw, 80px) var(--gutter) 0; box-sizing: content-box; }
.prose > * + * { margin-top: 1.1em; }
.prose p { margin: 0; }
.prose > * + p, .prose > * + h2, .prose > * + h3, .prose > * + ul, .prose > * + ol { margin-top: 1.1em; }
/* The drop cap is opt-in, set by drop_cap_html() in PHP, because CSS cannot
   see what the paragraph says. On a photo essay whose first paragraph is the
   single word "01", :first-child turned the 0 into a 5em red initial and left
   the 1 dangling beside it. Now only a real opening paragraph gets one. */
.story-body > p.has-drop-cap::first-letter { font-family: var(--serif); float: left; font-size: 5.2em; line-height: .8; padding: .06em .08em 0 0; color: var(--brand); }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3vw, 44px); line-height: 1.05; letter-spacing: -.015em; color: var(--ink); margin-top: 1.6em; }
.prose h3 { font-family: var(--sans); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-top: 2em; }
.prose h4 { font-size: 18px; color: var(--ink); }
.prose a { color: var(--ink); background: linear-gradient(var(--brand), var(--brand)) 0 100% / 100% 1px no-repeat; transition: background-size .3s, color .3s; }
.prose a:hover { color: var(--brand); }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 1.8em 0; padding: 0; font-family: var(--serif); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; color: var(--ink); letter-spacing: -.015em; }
.prose blockquote::before { content: "“"; display: block; color: var(--brand); font-size: 1.8em; line-height: .6; }
.prose .pull-quote { font-family: var(--serif); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; color: var(--brand); margin: 1.4em -8vw; text-align: center; }
.prose p.qa-q { font-weight: 700; color: var(--ink); }
.prose p.qa-q::before { content: "n/a — "; color: var(--brand); font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose figure { margin: 2em 0; }
.prose figure.wide { margin-inline: min(-12vw, -120px); }
.prose figure.full { margin-inline: calc(50% - 50vw); }
/* v1.18: this used to be `.prose > img`, a direct-child selector — and almost
   no image imported from Squarespace is a direct child of the body. They come
   wrapped in a <p> or a <div>, so the rule missed them and each one drew at
   whatever size it happened to be: one 300px, the next 1000px, in the same
   article. Every picture in the body now fills the text column exactly.

   The deliberate exceptions above (.wide, .full) still break out, because
   those are a decision rather than an accident of the source file. */
.prose figure img, .prose > img, .prose :is(p, div, li, blockquote) img {
    display: block; width: 100%; height: auto; margin-inline: auto; }
/* A paragraph that holds nothing but a picture is a figure wearing a <p>. */
.prose p:has(> img:only-child) { margin: 2em 0; }
.prose hr { border: 0; text-align: center; margin: 2.4em 0; }
.prose hr::after { content: "n/a"; font-family: var(--serif); color: var(--brand); font-size: 24px; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.prose .lead { font-size: 1.2em; color: var(--ink); }

/* Justified rows: --a is the picture's own aspect ratio, so widths come out
   proportional to the pictures and every row lands on a single height. */
.gallery { max-width: var(--max); margin: clamp(48px, 6vw, 96px) auto 0; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 20px); }
.gallery-row { display: flex; gap: clamp(10px, 1.4vw, 20px); width: calc(100% * var(--fill, 1)); }
.gallery-item { flex: var(--a) 1 0; min-width: 0; border: 0; padding: 0; background: var(--paper-2); overflow: hidden; cursor: zoom-in; }
.gallery-item img { width: 100%; height: auto; display: block; transition: transform 1s var(--ease); }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.story-foot { max-width: 700px; margin: clamp(40px, 5vw, 70px) auto 0; padding: 0 var(--gutter); box-sizing: content-box; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chip { font-size: 13px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; transition: all .2s; white-space: nowrap; }
.chip:hover, .chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.author-card { display: flex; gap: 16px; align-items: center; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
.author-card .avatar, .author-card .img-placeholder { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.author-card div { display: flex; flex-direction: column; font-size: 14px; }
.author-card a { color: var(--brand); }

.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 10, .96); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; animation: fade .25s; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox img { max-height: 86vh; max-width: 100%; object-fit: contain; }
.lightbox figcaption { color: #bbb; font-size: 13px; }
.lightbox .icon-button { color: #fff; }
.lightbox .icon-button:hover { background: rgba(255, 255, 255, .1); }
.lightbox-close { position: absolute; top: 16px; right: 16px; }

/* ----------------------------------------------------------------- map */
/* The map used to be 74vh tall whatever was beside it, so it hung well below
   the last place in the list. Stretching the row instead makes the two
   columns end together; the floor keeps it usable when there are only two or
   three places, and the ceiling keeps a long list from making a map you
   cannot see the bottom of. */
.map-layout { max-width: var(--max); margin: clamp(28px, 4vw, 56px) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: stretch; }
.map-canvas { height: auto; min-height: min(58vh, 440px); max-height: min(78vh, 820px); background: var(--paper-2); z-index: 1;
    border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(18, 17, 16, .55); }
/* Real streets, in our own ink. Straight OSM tiles are a different magazine's
   colour scheme; grayscale plus a little warmth puts them on our paper. */
.map-canvas .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.05) sepia(.14); }
.map-canvas .leaflet-control-zoom { border: 0; box-shadow: 0 8px 20px -10px rgba(18, 17, 16, .5); border-radius: 10px; overflow: hidden; }
.map-canvas .leaflet-control-zoom a { width: 34px; height: 34px; line-height: 34px; border: 0;
    background: var(--paper); color: var(--ink); font-size: 18px; font-weight: 400; }
.map-canvas .leaflet-control-zoom a:hover { background: var(--brand); color: var(--paper); }
.map-canvas .leaflet-control-attribution { background: rgba(242, 242, 240, .86); font-size: 10.5px; padding: 2px 8px; }
.map-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.map-list a { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); transition: padding .3s var(--ease), color .2s; }
.map-list a:hover, .map-list a.is-active { color: var(--brand); padding-left: 8px; }
.map-list-num { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.map-list strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; }
.map-list small { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
/* v1.19: a numbered pin, to match the numbered list beside the map. A circle
   with a triangle under it rather than a rotated square — the rotation trick
   puts the point wherever the border-radius happens to land, and the number
   then has to be rotated back. This way the tip is on the coordinate and the
   number is simply upright. */
.na-pin { position: relative; display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--paper), 0 8px 18px -6px rgba(18, 17, 16, .55);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease); transform-origin: 50% 130%; }
.na-pin::after { content: ""; position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid var(--brand); }
.na-pin b { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    color: var(--paper); font-variant-numeric: tabular-nums; }
.na-pin.is-active, .leaflet-marker-icon:hover .na-pin {
    transform: scale(1.18); box-shadow: 0 0 0 2px var(--paper), 0 14px 26px -8px rgba(18, 17, 16, .6); }

/* Not there yet: the same shape in outline, so the two read as one family. */
.na-pin.is-soon { background: var(--paper); box-shadow: 0 0 0 2px var(--brand), 0 8px 18px -8px rgba(18, 17, 16, .4); }
.na-pin.is-soon b { color: var(--brand); }
.na-pin.is-soon::after { border-top-color: var(--brand); }

.leaflet-popup-content-wrapper { border-radius: 12px; overflow: hidden; box-shadow: 0 26px 50px -24px rgba(18, 17, 16, .55); }
.leaflet-popup-tip { box-shadow: none; }
.leaflet-popup-content { margin: 0; width: 220px !important; font-family: var(--sans); }
.map-popup img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.map-popup div { padding: 12px 14px 14px; }
.map-popup strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1; }
.map-popup span { font-size: 12px; color: var(--muted); }
.map-popup a { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 13px; color: var(--brand) !important; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); text-shadow: none; font-size: 18px; padding: 6px 8px 0 0; }
.leaflet-container a.leaflet-popup-close-button:hover { color: var(--brand); }

.location-hero { position: relative; }
.location-hero figure { margin: 0; height: 70vh; min-height: 420px; background: var(--ink); }
.location-hero img, .location-hero .img-placeholder { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.location-hero-copy { position: absolute; inset: auto 0 0; padding: 0 var(--gutter) clamp(28px, 5vw, 70px); color: #fff; max-width: var(--max); margin: 0 auto; }
.location-hero-copy .icon { width: 14px; height: 14px; }

/* --------------------------------------------------------------- about */
.wide-figure { max-width: var(--max); margin: clamp(32px, 5vw, 70px) auto 0; padding: 0 var(--gutter); }
.wide-figure img { width: 100%; max-height: 80vh; object-fit: cover; }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px); }
.team-card figure { margin: 0 0 14px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2); }
.team-card img, .team-card .img-placeholder { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s, transform 1s var(--ease); }
.team-card:hover img { filter: none; transform: scale(1.03); }
.team-card h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; margin: 0; }
.team-card .muted { margin: 6px 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.team-bio { font-size: 15px; color: var(--ink-2); }
.team-bio p { margin: 0 0 .6em; }
.team-bio.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.team-bio.is-clamped p { margin: 0; }
.bio-toggle { all: unset; cursor: pointer; margin-top: 8px; font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.bio-toggle:hover { color: var(--ink); }
.contributors-title { margin-top: 56px; }
.contributor-list { list-style: none; padding: 0; margin: 0; columns: 3; column-gap: 32px; }
.contributor-list li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.contact-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.contact-strip a { border-top: 1px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; font-size: 15px; transition: color .2s; }
.contact-strip a:hover { color: var(--brand); }
.contact-strip .eyebrow { margin-bottom: 4px; }

/* ----------------------------------------------------------- community */
.form-section { max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 90px) var(--gutter) 0; }
.form-section.narrow { max-width: 620px; text-align: center; }
.stack-form { display: flex; flex-direction: column; gap: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.stack-form label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.stack-form input[type=text], .stack-form input[type=email], .stack-form input[type=url], .stack-form select, .stack-form textarea { border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 10px 0; font-size: 19px; letter-spacing: 0; text-transform: none; font-weight: 400; border-radius: 0; outline: none; transition: border-color .2s; }
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus { border-bottom-color: var(--brand); }
.stack-form textarea { resize: vertical; min-height: 140px; }
.checks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.checks legend { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.checks .check { flex-direction: row; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; cursor: pointer; transition: all .2s; }
.checks .check:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.checks .check input { accent-color: var(--brand); }
.stack-form > .check { flex-direction: row; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; }
.stack-form > .check input { accent-color: var(--brand); margin-top: 3px; }
.stack-form button { align-self: flex-start; }
.notice { border: 1px solid var(--ink); padding: 18px 22px; font-size: 16px; }
.notice.success { border-color: var(--brand); background: rgba(255, 52, 10, .07); }
.notice.error { border-color: var(--brand); color: var(--brand); }
.form-status { margin: 0; font-size: 14px; min-height: 1.4em; }
.form-status.is-error { color: var(--brand); }
.form-status.is-success { font-weight: 600; }

/* ---------------------------------------------------------------- shop */
.coming-soon { max-width: var(--max); margin: clamp(32px, 5vw, 70px) auto 0; padding: 0 var(--gutter); }
.coming-soon-inner { background: var(--ink); color: var(--paper); padding: clamp(40px, 6vw, 96px); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.coming-soon .display-l em { color: var(--brand); }
.coming-soon .newsletter-form input { color: var(--paper); border-bottom-color: var(--paper); }
.coming-soon .form-note { color: #9a948d; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
.product-card figure { position: relative; margin: 0 0 12px; aspect-ratio: 1; background: var(--paper-2); overflow: hidden; }
.product-card img, .product-card .img-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.product-card:hover img { transform: scale(1.05); }
.product-card h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0; line-height: 1.05; }
.product-card p { margin: 6px 0 12px; font-size: 14px; }

/* -------------------------------------------------------------- search */
.search-big { display: flex; align-items: center; border-bottom: 2px solid var(--ink); }
.search-big input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--serif); font-size: clamp(44px, 7vw, 110px); letter-spacing: -.02em; padding: 8px 0; outline: none; }
.search-big .icon-button { width: 56px; height: 56px; }
.search-group .eyebrow { margin-bottom: 20px; }
.result-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.result-list a { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); transition: color .2s, padding .3s var(--ease); }
.result-list a:hover { color: var(--brand); padding-left: 8px; }
.result-list strong { font-family: var(--serif); font-weight: 400; font-size: 26px; display: inline-flex; align-items: center; gap: 6px; }

.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.pagination a { display: inline-flex; gap: 8px; align-items: center; }
.pagination a:hover { color: var(--brand); }

.not-found { max-width: 900px; margin: 0 auto; padding: clamp(60px, 10vw, 160px) var(--gutter) 40px; text-align: center; }
.not-found .display-xl { color: var(--brand); }
.not-found p { font-size: 19px; }
.search-inline { max-width: 520px; margin: 30px auto; }

/* -------------------------------------------------------------- footer */
.site-footer { margin-top: clamp(80px, 10vw, 160px); background: var(--ink); color: var(--paper); }
.footer-newsletter { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 110px) var(--gutter); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 80px); align-items: end; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer-newsletter p:not(.eyebrow) { color: #b7b1a9; max-width: 520px; margin: 18px 0 0; }
.footer-newsletter .eyebrow { color: var(--brand); }
.newsletter-form .inline-field, .inline-field { display: flex; gap: 10px; align-items: center; }
/* padding:0 put the text on the rule it sits above. A little breathing room
   under the baseline, and the placeholder stops looking jammed into it. */
.newsletter-form input[type=email], .inline-field input { flex: 1; min-width: 0; height: 54px; border: 0; border-bottom: 1px solid currentColor; background: transparent; font-size: 19px; outline: none; padding: 0 2px 11px; }
.newsletter-form input[type=email]:focus { border-bottom-color: var(--brand); }
.site-footer .newsletter-form input { color: var(--paper); }
.site-footer .pill-button:not(.solid) { border-color: var(--paper); }
.form-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.site-footer .form-note { color: #8a847d; }
.footer-grid { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter); display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 32px; }
.footer-grid > div { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.footer-grid a { color: #d9d3cb; display: inline-flex; gap: 8px; align-items: center; transition: color .2s; }
.footer-grid a:hover { color: var(--brand); }
.footer-grid .eyebrow { color: #8a847d; margin-bottom: 8px; }
.footer-grid .muted { color: #8a847d; }
.footer-grid .icon { width: 16px; height: 16px; }
.footer-brand p { margin: 0; color: #b7b1a9; }
.footer-base { max-width: var(--max); margin: 0 auto; padding: 22px calc(var(--gutter) + 64px) 34px var(--gutter); display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: #8a847d; border-top: 1px solid rgba(255, 255, 255, .1); flex-wrap: wrap; }

/* ----------------------------------------------------------- motion */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------- responsive */
@media (max-width: 1100px) {
    .cover-grid, .team-grid, .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .map-layout { grid-template-columns: 1fr; }
    .map-canvas { height: 60vh; min-height: 0; max-height: none; }
}
@media (max-width: 900px) {
    :root { --header-h: 70px; }
    .nav-left, .nav-right > a:not(.pill-button) { display: none; }
    .menu-toggle { display: inline-grid; }
    .header-inner { grid-template-columns: auto 1fr; }
    .brand { order: -1; }
    .hero, .issue-hero, .lead-story-link, .footer-newsletter, .coming-soon-inner { grid-template-columns: 1fr; }
    .hero-visual { max-width: 520px; width: 100%; margin: 0 auto; order: -1; }
    .issue-hero-cover { max-width: 460px; width: 100%; margin: 0 auto; }
    .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .story-grid.mosaic .story-card.wide { grid-column: span 2; }
    /* Six circles will not go across a phone, and two by two makes a block
       three rows tall that pushes everything under it off the screen. A strip
       you swipe keeps the whole thing one row high at any width. It bleeds to
       both edges of the screen — a card cut off at the edge is what tells a
       thumb there is more to the right. */
    .place-row {
        display: flex;
        grid-template-columns: none;
        gap: clamp(12px, 3vw, 20px);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        /* Without this the first card snaps flush to the edge of the screen on
           load — the snap point ignores the padding unless it is told not to. */
        scroll-padding-inline: var(--gutter);
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding: 0 var(--gutter) 6px;
    }
    .place-row::-webkit-scrollbar { display: none; }
    .place-card { flex: 0 0 min(42vw, 190px); scroll-snap-align: start; }
    .contact-strip { grid-template-columns: 1fr 1fr; }
    .contributor-list { columns: 2; }
    .prose .pull-quote { margin-inline: 0; }
    .prose figure.wide { margin-inline: 0; }
}
@media (max-width: 640px) {
    body { font-size: 16px; }
    .nav-right .pill-button { display: none; }
    .story-grid, .story-grid.mosaic { grid-template-columns: 1fr; }
    .story-grid.mosaic .story-card.wide, .story-grid.mosaic .story-card.tall { grid-column: auto; grid-row: auto; }
    .story-grid.mosaic .story-card.tall .story-card-media, .story-grid.mosaic .story-card.wide .story-card-media { aspect-ratio: 4 / 5; }
    .cover-grid, .team-grid, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field-row { grid-template-columns: 1fr; }
    .gallery-row { flex-direction: column; width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
    .contributor-list { columns: 1; }
    .countdown-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .newsletter-form .inline-field { flex-direction: column; align-items: stretch; }
    .newsletter-form .pill-button { justify-content: center; }
    .block-head { flex-direction: column; align-items: flex-start; }
    .lightbox { grid-template-columns: 44px 1fr 44px; }
    .countdown-bar a { gap: 8px; font-size: 11px; }
}

/* ================================================================ v1.1 */

/* Scrollbar — only the red thumb, no track */
html { scrollbar-color: var(--brand) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #a91b14; background-clip: padding-box; }

/* Wordmark (text logo) */
.wordmark { display: block; font-family: var(--sans); font-weight: 800; font-size: 27px; line-height: 1; letter-spacing: .005em; color: var(--brand); white-space: nowrap; transition: font-size .35s var(--ease), letter-spacing .35s var(--ease); }
.wordmark.has-image img { height: 40px; width: auto; }
.brand:hover .wordmark { letter-spacing: .04em; }
.site-header.is-scrolled .wordmark { font-size: 22px; }
.header-inner { padding-block: 22px; transition: padding .35s var(--ease); }
.site-header.is-scrolled .header-inner { padding-block: 12px; }

/* Stories ▸ sections dropdown (replaces the old section rail) */
.nav-drop { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.drop-toggle { width: 22px; height: 22px; border: 0; background: none; padding: 0; display: grid; place-items: center; border-radius: 50%; transition: background .2s; }
.drop-toggle span { position: relative; width: 9px; height: 9px; }
.drop-toggle span::before, .drop-toggle span::after { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.drop-toggle span::after { transform: rotate(90deg); }
.nav-drop:hover .drop-toggle span::after, .nav-drop.is-open .drop-toggle span::after { transform: rotate(0); }
.drop-toggle:hover { background: rgba(0, 0, 0, .06); }
.drop-panel { position: absolute; top: calc(100% + 14px); left: -18px; min-width: 220px; padding: 14px 18px 12px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; z-index: 60; }
.drop-panel::before { content: ""; position: absolute; inset: -16px 0 auto 0; height: 16px; }
.nav-drop:hover .drop-panel, .nav-drop:focus-within .drop-panel, .nav-drop.is-open .drop-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.drop-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.nav .drop-panel a { font-family: var(--serif); font-size: 24px; line-height: 1.15; padding: 2px 0; }
.nav .drop-panel a::after { display: none; }
.nav .drop-panel a:hover, .nav .drop-panel a.is-active { color: var(--brand); }
.nav .drop-panel a.drop-all { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); display: inline-flex; gap: 6px; align-items: center; }
.drop-all .icon { width: 14px; height: 14px; }
.mobile-menu a.sub { font-size: clamp(10px, 1.8vh, 13px); }

/* Rotating circle badge */
.hero-visual { position: relative; }
.badge-spin { --size: 168px; position: absolute; isolation: isolate; width: var(--size); height: var(--size); display: block; z-index: 3; animation: badge-in 1.4s var(--ease) both .4s; }
.badge-spin svg { width: 100%; height: 100%; overflow: visible; display: block; }
.badge-ring { transform-origin: 100px 100px; animation: badge-spin 26s linear infinite; }
.badge-ring text { font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: .12em; fill: var(--ink); }
.badge-disc { fill: var(--brand); transition: transform .6s var(--ease); transform-origin: 100px 100px; }
/* The ring turns; the drawn mark in the middle stays upright (v1.11). */
.badge-mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.badge-mark .brand-logo { width: 52%; color: var(--paper); }
.badge-mark .brand-logo .brand-svg { height: auto; width: 100%; }
.badge-mark { transition: transform .6s var(--ease); }
.badge-spin:hover .badge-ring { animation-duration: 6s; }
.badge-spin:hover .badge-disc { transform: scale(1.08); }
.badge-spin:hover .badge-mark { transform: rotate(-12deg) scale(1.04); }
.hero-badge { left: -64px; bottom: 42px; }
@keyframes badge-spin { to { transform: rotate(360deg); } }
@keyframes badge-in { from { opacity: 0; transform: scale(.6) rotate(-90deg); } to { opacity: 1; transform: none; } }

/* Manifesto */
.manifesto { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 9vw, 140px) var(--gutter) 0; text-align: center; }
.manifesto-line { margin: 0; font-family: var(--serif); font-size: clamp(52px, 9.5vw, 168px); line-height: .9; letter-spacing: -.035em; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .28em; }
.manifesto-line > span { display: inline-block; }
.manifesto-line > span:nth-child(2) { color: var(--brand); }
.manifesto-line b { font-weight: 400; color: var(--brand); }
.manifesto-note { margin: 22px 0 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.js .manifesto-word { opacity: 0; transform: translateY(.35em); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * .18s); }
.js .manifesto.is-visible .manifesto-word { opacity: 1; transform: none; }
.footer-manifesto { font-family: var(--serif); font-size: clamp(30px, 3vw, 42px); line-height: 1.02; color: var(--paper) !important; margin: 0 0 14px !important; letter-spacing: -.01em; }
.footer-manifesto span { display: block; }
.footer-manifesto span:nth-child(2) { color: var(--brand); }
.footer-manifesto b { font-weight: 400; color: var(--brand); }

/* Footer wordmark */
.footer-mark { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 28px; display: flex; align-items: baseline; gap: clamp(16px, 2.4vw, 40px); flex-wrap: wrap; }
/* --- the drawn logo (v1.11): one SVG, recoloured by currentColor --------- */
.brand-logo { display: block; color: var(--brand); line-height: 0; }
/* v1.12: the lockup was reading as a footnote beside the navigation. The
   drawn mark is the masthead — it should carry the header, not hide in it. */
/* v1.13: bigger again, at Ana's request. The lockup is the masthead. */
.brand-logo .brand-svg { display: block; height: 64px; width: auto;
    transition: height .35s var(--ease); }
.site-header.is-scrolled .brand-logo .brand-svg { height: 50px; }
.brand-logo.in-footer .brand-svg { height: clamp(44px, 6vw, 86px); }
.footer-wordmark .brand-logo { color: var(--brand); }
/* The ring on its own, used by the home hero and the Uncensored page. */
.brand-logo.mark-only .brand-svg { height: auto; width: 100%; }
@media (max-width: 700px) {
    .brand-logo .brand-svg { height: 48px; }
    .site-header.is-scrolled .brand-logo .brand-svg { height: 40px; }
}
.footer-wordmark { display: block; }
.footer-wordmark span { display: inline-block; font-family: var(--sans); font-weight: 800; color: var(--brand); font-size: clamp(34px, 4.6vw, 68px); line-height: .9; letter-spacing: -.02em; white-space: nowrap; transition: letter-spacing .5s var(--ease); }
.footer-wordmark:hover span { letter-spacing: .01em; }

/* Back to top */
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; z-index: 70; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .45); transition: transform .35s var(--ease), background .25s, opacity .3s; }
.to-top[hidden] { display: grid !important; opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; }
.to-top:hover { background: var(--brand); transform: translateY(-3px); }
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top-ring circle { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.to-top:hover .to-top-ring circle { stroke: var(--paper); }
.to-top-arrow { position: relative; transition: transform .3s var(--ease); }
.to-top:hover .to-top-arrow { transform: translateY(-2px); }

/* Map — vector base (works without tiles) */
.map-canvas.leaflet-container, .latlng-map.leaflet-container { background: #E7E1D7; }
.leaflet-container .na-land { transition: fill .3s, opacity .45s var(--ease); }
/* Real tiles have arrived, so the drawn understudy steps back. It keeps its
   place in the DOM: if the tiles stop coming, the class goes and the map is a
   map again rather than a grey rectangle. */
.map-canvas.has-tiles .na-land { opacity: 0; }

/* About */
/* v1.20: the heading runs across the photograph, as it did on the old
   Squarespace page. `overflow: clip` keeps the overhang from giving the whole
   document a sideways scrollbar; the clip margin is there so the badge and the
   picture's shadow, which deliberately hang off the frame, survive it. */
.about-hero { max-width: var(--max); margin: 0 auto; padding: clamp(32px, 5vw, 80px) var(--gutter) 0;
    display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 80px);
    align-items: center; position: relative; overflow: clip; overflow-clip-margin: 48px; }
.about-hero-copy { position: relative; z-index: 2; }
.about-title { font-size: clamp(54px, 11.2vw, 200px); line-height: .88; color: var(--brand);
    /* The negative margin is the whole trick: the heading keeps its place in
       the left column but its box reaches into the right one, so the words
       cross the picture instead of stopping politely at the gap. */
    margin-right: calc(-1 * clamp(48px, 21vw, 400px)); }
/* Red on a white studio background reads; red crossing a red ribbon does not.
   A paper-coloured halo is invisible against the page and cuts the letters
   out of the photograph wherever they land on one. */
.about-title span { -webkit-box-decoration-break: clone; box-decoration-break: clone;
    filter: drop-shadow(0 0 3px var(--paper)) drop-shadow(0 0 14px rgba(242, 242, 240, .75)); }
.about-title em { font-style: normal; color: var(--brand); }
.fact-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; max-width: 620px; }
.fact-row div { border-top: 1px solid var(--ink); padding-top: 10px; }
.fact-row dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.fact-row dd { margin: 4px 0 0; font-family: var(--serif); font-size: clamp(34px, 3.4vw, 52px); line-height: 1; font-variant-numeric: tabular-nums; }
.about-collage { position: relative; aspect-ratio: 4 / 5; }
/* The shadow reached about 60px below the frame while overflow-clip-margin
   was 30px, so the clip cut it off mid-fade — the hard horizontal edge under
   the picture. Softened to fall inside the margin, and the margin widened a
   little on top of that. */
.about-collage figure { position: absolute; margin: 0; overflow: hidden; background: var(--paper-2);
    box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .30), 0 2px 8px -4px rgba(0, 0, 0, .10);
    will-change: transform; }
.about-collage img, .about-collage .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
/* One frame now, so it takes the whole column instead of sitting in a
   corner of a collage that no longer exists. */
.about-collage .c1 { inset: 0; }
/* The badge belongs to the picture, tucked into its bottom-right corner
   and overlapping the edge, rather than floating in the gap above it. */
.about-badge { --size: 124px; left: auto; right: -14px; top: auto; bottom: -14px; }
.manifesto-inline { padding-top: clamp(56px, 7vw, 110px); }
.about-body .prose { font-size: clamp(19px, 1.45vw, 22px); }

/* Community */
.join-hero { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(36px, 5vw, 70px); display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eyebrow eyebrow" "title title" "lede cta"; align-items: end; gap: 0 40px; }
.join-hero .eyebrow { grid-area: eyebrow; }
.join-title { grid-area: title; font-size: clamp(96px, 21vw, 360px); line-height: .82; }
.join-lede { grid-area: lede; max-width: 520px; font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-2); margin: clamp(48px, 6vw, 96px) 0 0; }
.join-hero .pill-button { grid-area: cta; }
.discipline-marquee { background: var(--brand); color: var(--paper); overflow: hidden; padding: 14px 0; }
.discipline-marquee .marquee-track { animation-duration: 30s; }
.discipline-marquee span { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; padding: 0 26px; white-space: nowrap; }
.discipline-marquee span::after { content: "●"; font-size: 7px; vertical-align: middle; margin-left: 52px; opacity: .6; }
.perks { max-width: var(--max); margin: 0 auto; padding: clamp(48px, 6vw, 96px) var(--gutter) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--ink); }
.perk { padding: 28px 24px 34px 0; border-top: 1px solid var(--ink); position: relative; }
.perk + .perk { padding-left: 24px; border-left: 1px solid var(--line); }
.perk h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 2.8vw, 44px); line-height: 1; margin: 0 0 14px; transition: color .3s; }
.perk p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 280px; }
.perk::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.perk:hover::before { transform: scaleX(1); }
.perk:hover h2 { color: var(--brand); }
.apply { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 120px) var(--gutter) 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 90px); align-items: start; scroll-margin-top: 90px; }
.apply-intro { position: sticky; top: 110px; }
.apply-intro .display-l em { font-style: normal; color: var(--brand); }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 34px 0 28px; display: flex; flex-direction: column; gap: 0; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 2px 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-size: 12px; font-weight: 700; color: var(--brand); padding-top: 4px; }
.steps strong { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.1; }
.steps span { color: var(--muted); font-size: 15px; }
.apply-card { background: #FFFDF9; border: 1px solid var(--line); padding: clamp(24px, 3.4vw, 48px); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .35); }
.apply-form { gap: 26px; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; padding: 0; }
.chip-option { cursor: pointer; }
.chip-option input { position: absolute; opacity: 0; pointer-events: none; }
.chip-option span { text-transform: none; letter-spacing: 0; display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; font-size: 14px; font-weight: 500; transition: all .2s; background: var(--paper); }
.chip-option:hover span { border-color: var(--ink); }
.chip-option input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-option input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.apply-consent { display: flex; flex-direction: column; gap: 10px; }
.apply-consent .check { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.apply-consent .check input { accent-color: var(--brand); margin-top: 3px; }
.apply-done .display-l em { font-style: normal; color: var(--brand); }
.apply-done p:not(.display-l) { font-size: 18px; color: var(--ink-2); }
.stack-form input::placeholder, .stack-form textarea::placeholder { color: #b0a9a1; }

@media (max-width: 1100px) {
    .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .perk:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
    .hero-badge { --size: 120px; left: auto; right: -8px; bottom: -40px; }
    .about-hero, .apply { grid-template-columns: 1fr; }
    /* One column, so there is nothing to reach across — and a negative margin
       here would simply push the heading off the side of the phone. */
    .about-title { margin-right: 0; font-size: clamp(46px, 15vw, 96px); }
    .about-collage { max-width: 520px; width: 100%; margin: 0 auto; }
    .apply-intro { position: static; }
    .join-hero { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "lede" "cta"; }
    .join-hero .pill-button { justify-self: start; margin-top: 24px; }
    .wordmark { font-size: 22px; }
    .site-header.is-scrolled .wordmark { font-size: 19px; }
    .header-inner { padding-block: 14px; }
}
@media (max-width: 640px) {
    .fact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .perks { grid-template-columns: 1fr; }
    .perk, .perk + .perk { padding-left: 0; border-left: 0; }
    .about-badge { --size: 110px; }
    .to-top { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .badge-ring { animation: none; }
    .js .manifesto-word { opacity: 1; transform: none; }
}

/* Subscribe popup */
.subscribe-dialog { width: min(860px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .55); overflow: visible; }
.subscribe-dialog[open] { display: grid; grid-template-columns: .8fr 1.2fr; animation: dialog-in .45s var(--ease) both; }
.subscribe-dialog.is-closing { animation: dialog-out .22s ease both; }
.subscribe-dialog::backdrop { background: rgba(18, 17, 16, .32); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); animation: backdrop-in .35s ease both; }
.subscribe-dialog.is-closing::backdrop { animation: backdrop-out .22s ease both; }
.dialog-art { background: var(--brand); display: grid; place-items: center; min-height: 360px; position: relative; overflow: hidden; }
.dialog-art .badge-spin { position: relative; --size: min(220px, 70%); animation: none; }
.dialog-art .badge-ring text { fill: var(--paper); }
.dialog-art .badge-disc { fill: var(--paper); }
.dialog-art .badge-mark .brand-logo { color: var(--brand); }
.dialog-body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.dialog-body .eyebrow { color: var(--brand); }
.dialog-body .display { font-size: clamp(34px, 3.6vw, 52px); }
.dialog-text { color: var(--ink-2); margin: 16px 0 26px; }
.dialog-body .newsletter-form input[type=email] { color: var(--ink); border-bottom-color: var(--ink); }
.dialog-close { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--paper); }
html.dialog-open { overflow: hidden; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { to { opacity: 0; } }
@media (max-width: 700px) {
    .subscribe-dialog[open] { grid-template-columns: 1fr; }
    .dialog-art { min-height: 150px; }
    .dialog-art .badge-spin { --size: 120px; }
}

/* ==================================================================== v1.5 */

/* --- footer: the social row, bigger than the text links above it --- */
/* Hard right, against the gutter: the wordmark owns the left of that line and
   the accounts own the right, instead of the icons trailing the mark. */
.footer-social { display: flex; flex-wrap: wrap; gap: 14px; margin-left: auto; }
.footer-social a { display: grid; place-items: center; width: 34px; height: 34px; color: #8a847d; transition: color .25s, transform .25s var(--ease); }
.footer-social a:hover { color: var(--brand); transform: translateY(-2px); }
.footer-social .icon { width: 19px; height: 19px; }

/* --- home: every cover, stacked like a shelf rather than laid out in a row --- */
.cover-strip { max-width: var(--max); margin: clamp(56px, 8vw, 120px) auto 0; padding: 0 0 clamp(24px, 4vw, 56px); }
.cover-strip .block-head { max-width: var(--max); padding-inline: var(--gutter); }
.cover-deck { display: flex; align-items: flex-end; overflow-x: auto; overflow-y: hidden; padding: 40px var(--gutter) 30px; scrollbar-width: none; }
.cover-deck::-webkit-scrollbar { display: none; }
.cover-deck:focus-visible { outline: 2px solid var(--brand); outline-offset: -6px; }
.cover-chip { flex: 0 0 clamp(150px, 15vw, 210px); margin-left: clamp(-60px, -5.2vw, -40px); position: relative; z-index: calc(40 - var(--i)); }
.cover-chip:first-child { margin-left: 0; }
.cover-chip figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2);
    transform: rotate(var(--r)); transform-origin: 50% 100%;
    box-shadow: -14px 18px 30px -22px rgba(0, 0, 0, .7);
    transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.cover-chip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3); transition: filter .5s; }
.cover-chip-label { position: absolute; left: 50%; bottom: -26px; transform: translate(-50%, 6px); white-space: nowrap;
    font-family: var(--sans); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
    opacity: 0; transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
.cover-deck:hover .cover-chip figure { transform: rotate(var(--r)) translateY(6px); }
.cover-chip:hover, .cover-chip:focus-visible { z-index: 60; }
.cover-deck:hover .cover-chip:hover figure, .cover-chip:focus-visible figure {
    transform: rotate(0deg) translateY(-30px) scale(1.04); box-shadow: -18px 34px 54px -26px rgba(0, 0, 0, .75); }
.cover-chip:hover img, .cover-chip:focus-visible img { filter: none; }
.cover-chip:hover .cover-chip-label, .cover-chip:focus-visible .cover-chip-label { opacity: 1; transform: translate(-50%, 0); }
.cover-deck.is-dragging { cursor: grabbing; }
.cover-deck.is-dragging a { pointer-events: none; }
.cover-deck-hint { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); font-family: var(--sans);
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* --- home: the social reel, a contact sheet that drifts past --- */
.social-strip { padding-bottom: 0; }
.social-reel { overflow: hidden; padding: 26px 0 clamp(20px, 3vw, 44px); --reel-speed: 64s; }
.social-track { display: flex; width: max-content; gap: clamp(16px, 1.8vw, 30px); padding-left: var(--gutter);
    animation: social-drift var(--reel-speed) linear infinite; }
.social-reel:hover .social-track, .social-reel:focus-within .social-track { animation-play-state: paused; }
.social-post { flex: 0 0 clamp(176px, 18vw, 250px); margin-top: var(--drop); }
.social-post-media { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2);
    transform: rotate(var(--tilt)); box-shadow: 0 22px 40px -30px rgba(0, 0, 0, .8);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.social-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .5s; filter: grayscale(.2); }
.social-post:hover .social-post-media { transform: rotate(0deg) translateY(-10px) scale(1.03); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .8); }
.social-post:hover .social-post-media img { transform: scale(1.06); filter: none; }
.social-badge { position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; background: rgba(18, 17, 16, .58); color: var(--paper); backdrop-filter: blur(6px); }
.social-badge .icon { width: 16px; height: 16px; }
.social-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; color: var(--paper);
    font-family: var(--sans); font-size: 12px; letter-spacing: .04em; line-height: 1.35;
    background: linear-gradient(to top, rgba(12, 11, 10, .88), transparent);
    transform: translateY(101%); transition: transform .45s var(--ease); }
.social-post:hover .social-caption { transform: none; }
@keyframes social-drift { to { transform: translateX(calc(-50% - clamp(8px, .9vw, 15px))); } }
@media (prefers-reduced-motion: reduce) {
    .social-track { animation: none; }
    .social-reel { overflow-x: auto; }
    .social-caption { transform: none; }
}

/* --- home: the question box --- */
.question-block { position: relative; overflow: hidden; max-width: var(--max); margin: clamp(56px, 8vw, 120px) auto 0; padding: clamp(40px, 6vw, 86px) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; background: var(--ink); color: var(--paper); }
.question-glow { position: absolute; width: 58vw; aspect-ratio: 1; left: -12vw; top: -28vw; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 46%, transparent) 0%, transparent 62%);
    filter: blur(16px); animation: q-glow 17s ease-in-out infinite alternate; }
@keyframes q-glow { from { transform: translate3d(0, 0, 0) scale(1); opacity: .5; } to { transform: translate3d(8vw, 6vw, 0) scale(1.18); opacity: .85; } }
.question-copy, .question-form { position: relative; z-index: 1; }
.question-ticker { display: flex; align-items: flex-start; gap: 6px; min-height: 2.4em; margin: 20px 0 22px;
    font-family: var(--serif); font-size: clamp(24px, 2.5vw, 38px); line-height: 1.15; color: var(--paper); }
.question-mark { color: var(--brand); font-size: 1.35em; line-height: .9; }
.question-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: var(--brand); animation: q-caret 1s steps(2) infinite; flex: 0 0 auto; }
@keyframes q-caret { 50% { opacity: 0; } }
.question-note { color: #b9b2aa; max-width: 42ch; }
.question-block .eyebrow { color: var(--brand); }
.question-form { display: flex; flex-direction: column; gap: 10px; }
.question-form label { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a847d; }
.question-form .muted { text-transform: none; letter-spacing: 0; }
.question-form textarea, .question-form input[type="text"], .question-form input[type="email"] { background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius); color: var(--paper); font: inherit; font-size: 16px; padding: 12px 14px; width: 100%; }
.question-form textarea { resize: vertical; min-height: 120px; }
.question-form textarea:focus, .question-form input:focus { outline: none; border-color: var(--brand); }
.question-form ::placeholder { color: #6f6961; }
.question-form label.checkbox { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: .02em; font-size: 14px; color: #d9d3cb; margin: 6px 0; cursor: pointer; }
.question-form label.checkbox input { width: 16px; height: 16px; accent-color: var(--brand); }
.question-identity { display: grid; gap: 6px; }
.question-identity[hidden] { display: none; }
.question-form .pill-button { align-self: start; margin-top: 8px; }
.question-form .form-note { color: #8a847d; font-size: 12px; }
.question-form .form-status:empty { display: none; }
.question-form .form-status { color: #d9d3cb; font-size: 14px; }

/* --- community: the picture strip --- */
.community-gallery { max-width: var(--max); margin: clamp(40px, 6vw, 80px) auto 0; padding: 0 var(--gutter); }
.community-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(8px, 1vw, 16px); }
.community-gallery figure { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-2); }
.community-gallery figure:nth-child(3n+1) { aspect-ratio: 4 / 5; }
.community-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.community-gallery figure:hover img { transform: scale(1.05); }
.community-gallery-note { margin: 16px 0 0; font-size: 13px; color: var(--muted); }

/* --- photography section: a fanned stack that opens a slideshow --- */
.photo-fan-section { max-width: var(--max); margin: 0 auto; padding: clamp(32px, 5vw, 80px) var(--gutter) 0; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.photo-fan { position: relative; aspect-ratio: 5 / 4; justify-self: end; width: 100%; max-width: 620px; }
.photo-fan button { all: unset; position: absolute; inset: 0; z-index: 20; cursor: pointer; display: block; }
.photo-fan button:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.photo-fan-card { position: absolute; top: 50%; left: 50%; width: 58%; aspect-ratio: 4 / 5; background: var(--paper-2); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .55); transform-origin: 50% 118%; transform: translate(-50%, -50%) rotate(var(--r)) translateY(var(--y, 0)); transition: transform .8s var(--ease), filter .5s; filter: grayscale(.3); }
.photo-fan-card img { width: 100%; height: 100%; object-fit: cover; }
.photo-fan:hover .photo-fan-card { transform: translate(-50%, -50%) rotate(calc(var(--r) * 1.9)) translateY(calc(var(--y, 0px) - 8px)); filter: grayscale(0); }
.photo-fan-count { position: absolute; right: 0; bottom: -14px; z-index: 15; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; box-shadow: 0 14px 30px -18px rgba(0,0,0,.8); transition: background .3s, transform .4s var(--ease); }
.photo-fan:hover .photo-fan-count { background: var(--brand); transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .photo-fan-card, .photo-fan:hover .photo-fan-card { transition: none; } }

.slideshow { position: fixed; inset: 0; z-index: 120; background: rgba(12, 11, 10, .97); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 16px; }
.slideshow[hidden] { display: none; }
.slideshow-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #8a847d; font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 6px; }
.slideshow-stage { display: grid; place-items: center; min-height: 0; overflow: hidden; position: relative; }
/* max-height: 100% did not hold. The stage is a grid area sized by
   minmax(0, 1fr) and the picture is a centred grid item; in that
   arrangement the percentage failed to resolve and a 1454px-tall photograph
   rendered at full height inside a 764px stage — the bottom of every
   portrait picture fell off the screen, faces included.

   Viewport units always resolve. 176px is the bar, the caption row and the
   padding above and below. dvh repeats the line for phones, where the
   browser's own toolbars slide in and out and 100vh is a lie. */
.slideshow-stage img { max-width: min(100%, 1400px);
    max-height: calc(100vh - 176px);
    max-height: calc(100dvh - 176px);
    object-fit: contain; }
.slideshow-foot { display: flex; justify-content: center; align-items: center; gap: 18px; color: #d9d3cb; font-size: 14px; padding: 8px; }
.slideshow .icon-button { color: var(--paper); border-color: rgba(255, 255, 255, .25); }
.slideshow-caption { max-width: 60ch; text-align: center; color: #8a847d; }

/* --- map: a landmark that drifts behind the subject --- */
.location-cover { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-2); }
.location-cover .location-backdrop, .location-cover .location-subject { position: absolute; inset: -8% 0; }
.location-cover img { width: 100%; height: 100%; object-fit: cover; }
.location-cover .location-subject { inset: 0; }
.location-cover .location-subject img { object-fit: contain; object-position: bottom center; }

@media (max-width: 900px) {
    .question-block, .photo-fan-section { grid-template-columns: 1fr; }
    .photo-fan { justify-self: center; max-width: 460px; }
}

/* --- shop: "Coming soon" runs behind the word, "Shop" sits in front in red --- */
.shop-stack { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 76px) var(--gutter) 0; }
.shop-stack-art { position: relative; display: grid; place-items: center; overflow: hidden; padding: clamp(8px, 2vw, 28px) 0; }
.shop-soon { position: absolute; top: 50%; left: 0; display: flex; width: max-content; white-space: nowrap;
    font-family: var(--serif); font-size: clamp(56px, 11vw, 168px); line-height: 1; transform: translateY(-50%);
    /* Lighter outline (v1.13): at .3 the word competed with SHOP in front of
       it instead of sitting behind it. */
    color: transparent; -webkit-text-stroke: 1px rgba(18, 17, 16, .17); animation: shop-drift 30s linear infinite; }
.shop-soon span { padding-right: .35em; }
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
    .shop-soon { color: rgba(18, 17, 16, .13); }
}
.shop-word { position: relative; margin: 0; font-family: var(--serif); font-weight: 400; color: var(--brand);
    font-size: clamp(86px, 19vw, 280px); line-height: .88; letter-spacing: -.02em; }
.shop-stack-note { max-width: 46ch; margin: clamp(14px, 2vw, 26px) 0 0; color: var(--ink-2); }
@keyframes shop-drift { to { transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .shop-soon, .question-glow, .question-caret { animation: none; } }

/* --- quick look: a story preview instead of an immediate jump --- */
.quick-look { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px);
    background: rgba(12, 11, 10, .72); backdrop-filter: blur(6px); animation: quick-fade .28s var(--ease); }
.quick-look[hidden] { display: none; }
.quick-panel { position: relative; width: min(1080px, 100%); max-height: min(86vh, 760px); overflow: hidden auto; background: var(--paper);
    display: grid; grid-template-columns: 1fr 1fr; animation: quick-rise .38s var(--ease); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8); }
.quick-media { margin: 0; background: var(--paper-2); min-height: 260px; }
.quick-media img { width: 100%; height: 100%; object-fit: cover; }
.quick-body { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.quick-body .eyebrow { color: var(--brand); margin: 0; }
.quick-body .display-l { margin: 0; }
.quick-dek { margin: 0; font-family: var(--serif); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.25; color: var(--ink-2); }
.quick-dek:empty, .quick-excerpt:empty, .quick-meta:empty { display: none; }
.quick-meta { margin: 0; font-size: 13px; letter-spacing: .02em; color: var(--muted); }
.quick-excerpt { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.quick-close { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--paper); }
@keyframes quick-fade { from { opacity: 0; } }
@keyframes quick-rise { from { opacity: 0; transform: translateY(26px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .quick-look, .quick-panel { animation: none; } }
@media (max-width: 800px) {
    .quick-panel { grid-template-columns: 1fr; max-height: 88vh; }
    .quick-media { aspect-ratio: 16 / 10; min-height: 0; }
}

/* --- preview-only: the live map needs tiles the static copy cannot load --- */
.map-canvas-note { display: grid; place-items: center; text-align: center; padding: 40px 24px; background: var(--paper-2);
    color: var(--muted); font-family: var(--sans); font-size: 14px; line-height: 1.5; min-height: 320px; }

/* --- search: type-ahead panel + recommendations (v1.10) ------------------ */

/* The panel hangs off the big search box, which is the positioning context. */
.search-big { position: relative; }
.suggest-panel { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 60;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 30px 60px -32px rgba(18, 17, 16, .5); overflow: hidden;
    animation: suggest-drop .26s var(--ease); }
.suggest-panel[hidden] { display: none; }
@keyframes suggest-drop { from { opacity: 0; transform: translateY(-8px); } }
.suggest-option { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 13px 18px;
    border-bottom: 1px solid var(--line); cursor: pointer; transition: background .18s, padding-left .25s var(--ease); }
.suggest-option:last-child { border-bottom: 0; }
.suggest-option:hover, .suggest-option[aria-selected="true"] { background: var(--paper-2); padding-left: 24px; }
.suggest-option .st { flex: none; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    color: var(--brand); min-width: 62px; }
.suggest-option .sl { font-family: var(--serif); font-size: 21px; line-height: 1.2; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-option .sm { flex: none; font-size: 12px; color: var(--muted); }

/* Recommendations under the box: a ranked list, not another grid of cards. */
/* .block already carries the top padding — no extra margin on top of it. */
.search-suggest { padding-top: clamp(32px, 4vw, 64px); }
.suggest-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.suggest-head .eyebrow { margin: 0; }
.suggest-list { list-style: none; margin: 0; padding: 0; }
.suggest-row { opacity: 0; transform: translateY(14px); animation: suggest-in .7s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes suggest-in { to { opacity: 1; transform: none; } }
.suggest-row > a { position: relative; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px);
    padding: clamp(18px, 2.2vw, 26px) 0; border-bottom: 1px solid var(--line);
    transition: padding-left .4s var(--ease), border-color .3s; }
/* A red rule wipes in under the row instead of the border simply recolouring. */
.suggest-row > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--brand); transform: scaleX(0); transform-origin: left;
    transition: transform .55s var(--ease); }
.suggest-row > a:hover { padding-left: clamp(8px, 1.2vw, 18px); }
.suggest-row > a:hover::after, .suggest-row > a:focus-visible::after { transform: scaleX(1); }
.suggest-n { flex: none; width: 34px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
    color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s; }
.suggest-row > a:hover .suggest-n { color: var(--brand); }
.suggest-text { flex: 1; min-width: 0; }
.suggest-title { display: block; font-family: var(--serif); font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1.1; letter-spacing: -.01em; transition: color .3s; }
.suggest-row > a:hover .suggest-title { color: var(--brand); }
.suggest-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px;
    font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
/* The thumbnail is the reward for hovering: it is not there until you do. */
.suggest-thumb { flex: none; width: clamp(96px, 11vw, 150px); aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: var(--radius); background: var(--paper-2);
    opacity: 0; transform: translateX(22px) scale(.94); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.suggest-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform .8s var(--ease); }
.suggest-row > a:hover .suggest-thumb, .suggest-row > a:focus-visible .suggest-thumb { opacity: 1; transform: none; }
.suggest-row > a:hover .suggest-thumb img { transform: none; }
.suggest-go { flex: none; display: grid; place-items: center; width: 34px; color: var(--brand);
    opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s var(--ease); }
.suggest-go .icon { width: 20px; height: 20px; }
.suggest-row > a:hover .suggest-go, .suggest-row > a:focus-visible .suggest-go { opacity: 1; transform: none; }

.suggest-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; }
.suggest-chips .eyebrow { margin: 0 6px 0 0; }
.chip { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--line); font-size: 13px; font-weight: 600;
    transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); }

@media (max-width: 700px) {
    .suggest-thumb { display: none; }
    .suggest-go { display: none; }
    .suggest-n { width: 26px; }
    .suggest-option .sl { font-size: 18px; }
    .suggest-option .sm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .suggest-panel, .suggest-row { animation: none; }
    .suggest-row { opacity: 1; transform: none; }
    .suggest-row > a, .suggest-row > a::after, .suggest-thumb, .suggest-thumb img, .suggest-go, .chip,
    .suggest-option { transition: none; }
    .suggest-thumb, .suggest-go { opacity: 1; transform: none; }
}

/* --- Columns index (v1.11) ---------------------------------------------- */
.column-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.column-row { opacity: 0; transform: translateY(14px); animation: suggest-in .7s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
.column-row > a { position: relative; display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
    padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line);
    transition: padding-left .4s var(--ease); }
.column-row > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.column-row > a:hover { padding-left: clamp(8px, 1.2vw, 18px); }
.column-row > a:hover::after, .column-row > a:focus-visible::after { transform: scaleX(1); }
.column-n { flex: none; width: 36px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--muted);
    font-variant-numeric: tabular-nums; transition: color .3s; }
.column-row > a:hover .column-n { color: var(--brand); }
.column-text { flex: 1; min-width: 0; }
.column-name { display: block; font-family: var(--serif); font-optical-sizing: auto;
    font-size: clamp(30px, 4vw, 58px); line-height: 1.02; letter-spacing: -.015em; transition: color .3s; }
.column-row > a:hover .column-name { color: var(--brand); }
.column-desc { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); max-width: 46ch; }
.column-thumbs { flex: none; display: flex; gap: 8px; }
.column-thumb { display: block; width: clamp(56px, 6vw, 84px); aspect-ratio: 1; overflow: hidden;
    border-radius: var(--radius); background: var(--paper-2);
    opacity: 0; transform: translateX(18px) scale(.9); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.column-thumb:nth-child(2) { transition-delay: .05s; }
.column-thumb:nth-child(3) { transition-delay: .1s; }
.column-thumb img { width: 100%; height: 100%; object-fit: cover; }
.column-row > a:hover .column-thumb, .column-row > a:focus-visible .column-thumb { opacity: 1; transform: none; }
.column-count { flex: none; width: 86px; text-align: right; font-size: 11.5px; letter-spacing: .12em;
    text-transform: uppercase; font-weight: 600; color: var(--muted); }
.column-go { flex: none; display: grid; place-items: center; width: 30px; color: var(--brand);
    opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s var(--ease); }
.column-go .icon { width: 20px; height: 20px; }
.column-row > a:hover .column-go, .column-row > a:focus-visible .column-go { opacity: 1; transform: none; }
/* Uncensored owns the brand colour everywhere it appears. */
.column-row.is-uncensored .column-name { color: var(--brand); }
@media (max-width: 860px) { .column-thumbs { display: none; } }
@media (max-width: 620px) {
    .column-count { display: none; }
    .column-go { display: none; }
    .column-n { width: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .column-row { animation: none; opacity: 1; transform: none; }
    .column-row > a, .column-row > a::after, .column-thumb, .column-go { transition: none; }
    .column-thumb, .column-go { opacity: 1; transform: none; }
}

/* --- article colophon (v1.11) ------------------------------------------- */
/* Lowercase, small and in its own colour, so the credits and the disclaimer
   read as a footnote rather than as the end of the article. */
/* v1.12: 12.5px was below comfortable reading even for a footnote — the
   credits are information, not fine print. Up to 15px, with the disclaimer a
   step down from them rather than two steps down from the article. */
.story-colophon { max-width: 720px; margin: clamp(36px, 5vw, 64px) auto 0; padding-top: 18px;
    border-top: 1px solid var(--line); font-size: 15px; line-height: 1.65; letter-spacing: .01em;
    text-transform: lowercase; color: var(--muted); }
.story-colophon .story-disclaimer { display: block; margin-top: 10px; font-size: 13.5px;
    color: var(--brand); opacity: .9; }
/* v1.18: was max-width:none, which ran the credits and the disclaimer the
   full width of the window on every photography story — a 1920px line of
   13px lowercase type starting hard against the left edge, while the same
   two lines under a text story sit in a tidy 720px column. There is no
   reason for them to differ: the colophon is a footnote either way. */

/* --- Uncensored: the section takes the whole page (v1.11) ---------------- */
/* Rather than restyle every component, the page redefines the tokens the
   components already read — so headings, rules, chips, cards and the footer
   all follow without knowing anything about Uncensored. */
body.is-uncensored {
    --paper: #FF340A;
    --paper-2: #E22A06;
    --ink: #FFF5F2;
    --ink-2: #FFE7E0;
    --muted: rgba(255, 245, 242, .74);
    --line: rgba(255, 245, 242, .28);
    --brand: #FFF5F2;
}
body.is-uncensored .site-header { background: rgba(255, 52, 10, .9); }
body.is-uncensored .site-footer { background: #1A0A06; }
body.is-uncensored .countdown-bar { background: #1A0A06; }
body.is-uncensored ::selection { background: #FFF5F2; color: #FF340A; }
body.is-uncensored .story-colophon .story-disclaimer { color: var(--ink-2); opacity: .8; }
body.is-uncensored .pill-button.solid { background: #FFF5F2; border-color: #FFF5F2; color: #FF340A; }
body.is-uncensored .pill-button.solid:hover { background: transparent; color: #FFF5F2; }
.uncensored-mark { display: block; width: clamp(66px, 8vw, 104px); margin: clamp(26px, 4vw, 52px) auto clamp(18px, 2.4vw, 32px); color: var(--ink); }
.uncensored-mark .brand-logo .brand-svg { height: auto; width: 100%; }
.uncensored-mark:hover { color: var(--ink-2); }
/* The section index for Uncensored gets the same treatment. */
body.section-uncensored { --paper: #FF340A; --paper-2: #E22A06; --ink: #FFF5F2; --ink-2: #FFE7E0;
    --muted: rgba(255, 245, 242, .74); --line: rgba(255, 245, 242, .28); --brand: #FFF5F2; }
body.section-uncensored .site-header { background: rgba(255, 52, 10, .9); }
body.section-uncensored .site-footer, body.section-uncensored .countdown-bar { background: #1A0A06; }

/* --- the covers are what moves now (v1.11) ------------------------------ */
.cover-marquee { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 4vw, 56px) 0 0; }
.cover-marquee-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
    max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 18px; }
.cover-marquee-head .eyebrow { margin: 0; }
.cover-rail { overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.cover-rail-track { display: flex; width: max-content; gap: clamp(14px, 2vw, 30px); padding: 12px 0 26px;
    animation: cover-drift 62s linear infinite; }
.cover-rail:hover .cover-rail-track, .cover-rail:focus-within .cover-rail-track { animation-play-state: paused; }
@keyframes cover-drift { to { transform: translateX(-50%); } }
.cover-slide { flex: none; width: clamp(130px, 17vw, 210px); transform: rotate(var(--r, 0deg));
    transition: transform .45s var(--ease); }
.cover-slide img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius);
    box-shadow: 0 20px 40px -24px rgba(18, 17, 16, .55); }
.cover-slide-label { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .13em;
    text-transform: uppercase; font-weight: 600; color: var(--muted); transition: color .3s; }
.cover-slide:hover { transform: rotate(0deg) translateY(-10px) scale(1.03); }
.cover-slide:hover .cover-slide-label { color: var(--brand); }
/* The big line under "Latest issue". */
.hero-issue { margin: 14px 0 0; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: .14em;
    text-transform: uppercase; font-weight: 600; color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
    .cover-rail-track { animation: none; }
    .cover-slide, .cover-slide-label { transition: none; }
}

/* --- About: the full name over the big wordmark (v1.11) ----------------- */
/* .about-wordmark went with the lockup in v1.14 — the mark was on the
   page three times. */
/* The one italic left on the site, and Ana asked for it by name: the
   founder credit stays slanted, with the name in brand red. */
.founded-by { text-align: center; }
.founded-by p { margin: 0; font-family: var(--serif); font-style: italic; font-size: 19px;
    letter-spacing: .01em; text-transform: lowercase; color: var(--muted); }
.founded-by strong { font-weight: 500; font-style: italic; color: var(--brand); }

/* --- map: places we are not in yet (v1.11) ------------------------------ */
/* A hollow pin reads as "pinned, but not there yet" without needing a label. */
.map-popup.is-soon strong { color: var(--brand); }
.map-list li.is-soon a { opacity: .72; }
.map-list li.is-soon small { color: var(--brand); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; font-weight: 600; }

/* --- private preview bar, shown only while the site is held (v1.11) ----- */
.holding-bar { position: relative; z-index: 60; display: flex; flex-wrap: wrap; gap: 8px 20px;
    align-items: center; justify-content: space-between; padding: 9px var(--gutter);
    background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: .02em; }
.holding-bar strong { font-weight: 700; }
.holding-bar a { text-decoration: underline; text-underline-offset: 3px; margin-left: 18px; }
.holding-bar a:hover { color: var(--brand); }

/* --- the way in (v1.12) --------------------------------------------------
   Once per visit: the mark draws itself, a red rule opens under it, and the
   sheet lifts. Everything here is CSS — the veil removes itself whether or
   not site.js ever runs, and site.js only remembers that it has been seen. */
.intro-veil { display: none; }
html.intro .intro-veil { display: grid; position: fixed; inset: 0; z-index: 2000;
    place-content: center; justify-items: center; gap: 22px; background: var(--paper);
    animation: intro-lift 1.75s var(--ease) forwards; }
html.intro .intro-mark { opacity: 0; transform: translateY(14px); animation: intro-mark .85s var(--ease) .1s forwards; }
html.intro .intro-mark .brand-svg { height: clamp(46px, 7vw, 78px); width: auto; }
html.intro .intro-rule { width: min(220px, 42vw); height: 1px; background: var(--brand);
    transform: scaleX(0); transform-origin: 50% 50%; animation: intro-rule .7s var(--ease) .5s forwards; }
@keyframes intro-mark { to { opacity: 1; transform: none; } }
@keyframes intro-rule { to { transform: scaleX(1); } }
@keyframes intro-lift {
    0%, 62%  { opacity: 1; clip-path: inset(0 0 0 0); }
    99.9%    { opacity: 0; clip-path: inset(0 0 100% 0); }
    100%     { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* Nobody who asked for less motion wants a splash screen. */
@media (prefers-reduced-motion: reduce) {
    html.intro .intro-veil { display: none; }
}

/* ------------------------------------- v1.21: the three home-page layouts */
/* The blocks are identical in all three; only their order changes, and that
   is decided in PHP. The two things CSS has to say are what the first screen
   looks like without a cover, and where the buy button sits. */

/* Grid — no cover in the first screen, straight into the stories. The hero
   becomes a band: the words, and nothing competing with them. */
body.home-grid .hero { grid-template-columns: 1fr; align-items: start;
    padding-bottom: clamp(26px, 4vw, 54px); border-bottom: 1px solid var(--line); }
body.home-grid .hero-visual { display: none; }
body.home-grid .hero-copy { max-width: 46ch; }
body.home-grid .hero-intro { max-width: 52ch; }

/* Shop — buying it leads, reading it follows. */
body.home-shop .hero-actions { gap: 10px; }
body.home-shop .hero-buy { order: -1; }
body.home-shop .hero-actions .pill-button.solid:not(.hero-buy) { background: transparent; color: var(--ink); border-color: var(--ink); }

/* While the admin is previewing it in an iframe, nothing should animate in
   from below — the preview is a still, and half-faded blocks read as broken. */
body.is-home-preview .reveal { opacity: 1 !important; transform: none !important; }