/* Generated by render/render.mjs from render/styles/site.css. Edit the source, then re-run. */
/* page basics (the prototypes got these from their preview wrapper) */
html, body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Layout: a city guide in Society Hill's colours. White trim, shutter navy and brick red carry everything;
   brass and sage appear only inside the hand-drawn icons. Heavy contemporary type, one pen-script voice
   for notes, and every icon and mark drawn by hand. Full-bleed bands, content on one centred wrap.
   One bright look by choice (no dark theme). */
:root {
  color-scheme: light;
  --paper: #FFFFFF;
  --ink: #14213F;        /* shutter navy: all type and line work */
  --deep: #0E1730;
  --brick: #A63A2B;
  --brick-deep: #8A2E22;
  --blue: #2E4A86;       /* federal blue, for labels and links */
  --sky: #D6E1F1;
  --sky-2: #BFD0EA;
  --mist: #EEF2F8;
  --stone: #F2EFE9;      /* marble stoop */
  --brass: #C9A15A;      /* icons only */
  --crust: #B67A3C;      /* icons only */
  --sage: #7A9A83;       /* icons and the map's squares only */
  --mut: #57617A;
  --line: #D9DEE8;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;      /* headlines */
  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;        /* small italic asides */
  --accent: 'La Belle Aurore', 'Bradley Hand', 'Segoe Print', cursive; /* the pen: the second voice in headlines */
  --hand: 'La Belle Aurore', 'Bradley Hand', 'Segoe Print', cursive;   /* the same pen, for margin notes */
  --d-w: 600; --d-st: 100%; --d-ls: -0.035em; --d-tt: none; --d-k: 1.1; --d-lh: 0.98; --a-style: normal; --a-k: 1.1; --a-ls: 0; --a-w: 400;
  --r: 8px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 3px solid var(--brick); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--sky); }
.wrap { width: 100%; max-width: 1296px; margin-inline: auto; padding-inline: var(--gutter); }
.d { font-family: var(--display); font-weight: var(--d-w); font-stretch: var(--d-st); letter-spacing: var(--d-ls); line-height: var(--d-lh); text-transform: var(--d-tt); }
.lab { font-family: var(--body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.hand { font-family: var(--hand); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.1; color: var(--brick); }
.acc { font-family: var(--accent); font-style: var(--a-style); font-weight: var(--a-w); letter-spacing: var(--a-ls); text-transform: none; }
.ico { display: block; width: 100%; height: 100%; overflow: visible; }
.ico .b { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .boil:hover .ico .a, .boil:focus-visible .ico .a { animation: boilA 0.6s steps(1) infinite; }
  .boil:hover .ico .b, .boil:focus-visible .ico .b { animation: boilB 0.6s steps(1) infinite; }
}
@keyframes boilA { 50% { opacity: 0; } }
@keyframes boilB { 50% { opacity: 1; } }
.sticker { display: grid; place-items: center; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 8px 16px -10px rgba(20, 33, 63, 0.4); flex: none; }
.sticker .ico { width: 72%; height: 72%; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease); }
.btn:hover { background: var(--brick); border-color: var(--brick); color: var(--paper); transform: translateY(-2px); }
.btn:active { transform: none; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.arrow { display: inline-block; transition: transform 0.25s var(--ease); }
a:hover .arrow, button:hover .arrow { transform: translateX(6px); }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brick); padding-bottom: 4px; }
.more:hover { color: var(--brick); }

/* ---------- top bar ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 68px; }
.lockup { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.lockup .mark { width: 34px; height: 34px; flex: none; color: var(--brick); transition: transform 0.7s var(--ease); }
.lockup .mark svg, .tape-run i svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lockup:hover .mark, .lockup:focus-visible .mark { transform: rotate(135deg); }
.lockup b { font-size: calc(var(--d-k) * 1.5rem); line-height: 1; }
.lockup i { font-family: var(--accent); font-style: var(--a-style); font-weight: var(--a-w); letter-spacing: var(--a-ls); font-size: calc(var(--a-k) * 1.42rem); color: var(--brick); display: inline-block; line-height: 1; margin-left: -1px; }
.nav { display: flex; align-items: center; gap: clamp(0px, 0.9vw, 12px); }
.nav a { position: relative; text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 12px 11px; }
.nav a svg { position: absolute; left: 8px; right: 8px; bottom: 5px; width: calc(100% - 16px); height: 8px; color: var(--brick); opacity: 0; transform: scaleX(0.4); transform-origin: left; transition: opacity 0.2s, transform 0.35s var(--ease); }
.nav a:hover svg, .nav a:focus-visible svg { opacity: 1; transform: none; }
.top-act { display: flex; align-items: center; gap: 8px; }
.find { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; font-weight: 500; font-size: 0.92rem; color: var(--mut); transition: border-color 0.2s, color 0.2s; }
.find:hover { border-color: var(--ink); color: var(--ink); }
.find svg { width: 17px; height: 17px; flex: none; color: var(--ink); }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; place-items: center; }
.burger svg { width: 19px; height: 19px; }
.menu { border-top: 1px solid var(--line); background: var(--paper); }
.menu ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding-block: 12px 16px; }
.menu a { display: flex; align-items: center; gap: 10px; min-height: 56px; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.menu a span { width: 44px; height: 44px; flex: none; }
@media (max-width: 900px) { .nav { display: none; } .burger { display: grid; } .find b { display: none; } .find { padding: 0; width: 44px; justify-content: center; } }
@media (min-width: 901px) { .menu { display: none !important; } }

/* ---------- search ---------- */
.search { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--deep) 96%, transparent); color: var(--paper); overflow-y: auto; padding: calc(env(safe-area-inset-top, 0px) + clamp(16px, 4vw, 48px)) 0 48px; }
.search-top { display: flex; align-items: center; gap: 12px; }
.search input { flex: 1; min-width: 0; height: clamp(56px, 8vw, 84px); border: 0; border-bottom: 2px solid var(--sky); background: transparent; color: var(--paper); font-family: var(--display); font-weight: var(--d-w); font-stretch: var(--d-st); letter-spacing: var(--d-ls); font-size: calc(var(--d-k) * clamp(1.7rem, 1rem + 4vw, 4rem)); outline: none; border-radius: 0; }
.search input::placeholder { color: color-mix(in srgb, var(--paper) 45%, transparent); }
.search .x { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--paper); background: transparent; color: var(--paper); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.search .x:hover { background: var(--paper); color: var(--ink); }
.s-hint { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.s-hint .hand { color: var(--sky); margin-right: 6px; }
.s-hint button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--paper) 50%, transparent); background: transparent; color: var(--paper); font-weight: 600; cursor: pointer; }
.s-hint button:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.s-out { margin-top: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(16px, 3vw, 40px); }
.s-out h3 { color: var(--sky); margin-bottom: 8px; }
.s-out a { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); text-decoration: none; min-width: 0; }
.s-out a:hover b { text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.s-out a .sticker { width: 44px; height: 44px; }
.s-out a div { min-width: 0; display: grid; }
.s-out a b { font-weight: 700; overflow-wrap: anywhere; }
.s-out a small { font-size: 0.86rem; opacity: 0.8; }
.s-none { grid-column: 1 / -1; color: var(--sky); }
@media (max-width: 800px) { .s-out { grid-template-columns: minmax(0, 1fr); } }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: clamp(18px, 2.4vw, 32px) clamp(28px, 3.6vw, 52px); overflow-x: clip; }
.eyebrow { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--mut); }
.eyebrow { position: relative; z-index: 6; }
.eyebrow > span { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; }
.eyebrow > span + span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brick); }
.eyebrow > span:first-child { color: var(--ink); }
.wx { position: relative; }
.wx > button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: border-color 0.2s; }
.wx > button:hover, .wx > button[aria-expanded="true"] { border-color: var(--ink); }
.wx-ico { width: 26px; height: 26px; flex: none; }
.wx > button em { font-style: normal; font-weight: 600; color: var(--mut); }
.wx > button .caret { width: 9px; height: 9px; flex: none; transition: transform 0.25s var(--ease); }
.wx > button[aria-expanded="true"] .caret { transform: rotate(180deg); }
.wx-pop { position: absolute; left: 0; top: calc(100% + 8px); width: min(360px, calc(100vw - 2 * var(--gutter))); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 26px 40px -22px rgba(20, 33, 63, 0.5); padding: 14px 16px 12px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.wx-pop h3 { color: var(--brick); margin-bottom: 4px; }
.wx-pop li { display: grid; grid-template-columns: 3.4em 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink); }
.wx-pop li:first-child { border-top: 0; }
.wx-pop li b { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.wx-pop li .wx-ico { width: 30px; height: 30px; }
.wx-pop li span { font-family: var(--serif); font-style: italic; color: var(--mut); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-pop li i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-pop li i small { font-size: inherit; font-weight: 400; color: var(--mut); margin-left: 6px; }
.wx-pop p { margin-top: 8px; font-size: 0.78rem; color: var(--mut); }
.hero-top { position: relative; margin-top: clamp(8px, 1.4vw, 18px); }
.hero-h { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.hero-h .l1 { font-size: calc(var(--d-k) * clamp(3.4rem, 8.2vw, 8.2rem)); white-space: nowrap; }
.hero-h .l1 em { font-style: normal; display: inline-block; }
.hero-h .l2 { position: relative; z-index: 2; font-family: var(--accent); font-style: var(--a-style); letter-spacing: var(--a-ls); font-weight: var(--a-w); color: var(--brick); font-size: calc(var(--a-k) * clamp(1.5rem, 0.5rem + 4.1vw, 4.2rem)); line-height: 1.1; margin: 0.12em 0 0 0.06em; white-space: nowrap; }
.hero-h .l2 svg { position: absolute; right: 0; bottom: -0.12em; width: 46%; height: 0.18em; color: var(--brick); opacity: 0.85; }
.stk { position: absolute; z-index: 4; pointer-events: none; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 6px 8px rgba(20, 33, 63, 0.14)); }
.stk.s2 { --r: -12deg; left: -6%; top: -7%; width: clamp(56px, 6.6vw, 96px); aspect-ratio: 1; }
.stk.s3 { --r: 9deg; right: -2%; bottom: 6%; width: clamp(54px, 6.2vw, 90px); aspect-ratio: 1; }
.seal { position: absolute; z-index: 3; right: 1%; top: 44%; width: clamp(118px, 17vw, 244px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; filter: drop-shadow(0 14px 18px rgba(20, 33, 63, 0.2)); transition: transform 0.45s var(--ease); }
.seal:hover, .seal:focus-visible { transform: translateY(-50%) scale(1.05) rotate(-5deg); }
.seal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.seal .disc { fill: var(--brick); }
.seal .ring { color: var(--paper); opacity: 0.85; }
.seal text { fill: var(--paper); font-family: var(--body); font-weight: 700; }
.seal .around { font-size: 12.6px; letter-spacing: 0.2em; }
.seal .n { font-family: var(--display); font-weight: var(--d-w); font-size: 66px; letter-spacing: -0.04em; }
.seal .l { font-size: 11.5px; letter-spacing: 0.22em; }
.seal .spin { transform-origin: 100px 100px; }
@media (prefers-reduced-motion: no-preference) { .seal .spin { animation: spin 48s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-row { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(22px, 4vw, 64px); align-items: start; margin-top: clamp(22px, 2.8vw, 40px); }
.hero-say { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.lede { font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.42rem); line-height: 1.42; max-width: 33em; color: var(--mut); }
.lede b { color: var(--ink); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.stack { position: relative; height: clamp(300px, 34vw, 470px); min-width: 0; }
.snap { position: absolute; display: block; width: 57%; padding: 7px 7px 0; background: var(--paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 26px 40px -24px rgba(20, 33, 63, 0.5); text-decoration: none; transition: transform 0.6s var(--ease); }
.snap .ph { aspect-ratio: 4 / 3; background: var(--stone); overflow: hidden; display: grid; place-items: center; }
.snap img { width: 100%; height: 100%; object-fit: cover; }
.snap .ph .ico { width: 58%; height: 58%; }
.snap figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 3px 10px; color: var(--ink); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.snap figcaption i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.96rem; letter-spacing: 0; text-transform: none; color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.snap.a { left: 0; top: 8%; transform: rotate(-4deg); }
.snap.b { right: 0; top: 0; transform: rotate(3deg); }
.snap.c { left: 21%; top: 34%; transform: rotate(-1deg); z-index: 2; }
.stack:hover .snap.a { transform: rotate(-6deg) translate(-8px, -4px); }
.stack:hover .snap.b { transform: rotate(5deg) translate(8px, -4px); }
.snap:hover { z-index: 3; }
.snap.c.pop { animation: pop 0.5s var(--ease); }
@keyframes pop { 0% { transform: rotate(-1deg) scale(0.94); } 60% { transform: rotate(0.5deg) scale(1.02); } 100% { transform: rotate(-1deg); } }
@media (max-width: 860px) {
  .hero-row { grid-template-columns: minmax(0, 1fr); }
  .stack { height: clamp(300px, 78vw, 520px); max-width: 560px; }
  .stk.s2 { left: -2%; } .stk.s3 { right: -1%; }
}
@media (max-width: 640px) {
  .hero-h .l1 { font-size: calc(var(--d-k) * 17vw); white-space: normal; padding-right: 26vw; }
  .hero-h .l1 em { display: block; }
  .eyebrow .wx { flex-basis: 100%; }
  .eyebrow > .wx::before { display: none; }
  .hero-h .l2 { font-size: calc(var(--a-k) * 5.9vw); margin: 0.4em 0 0 0.04em; }
  .seal { top: 2%; right: -1%; width: 30vw; transform: none; }
  .seal:hover, .seal:focus-visible { transform: scale(1.04) rotate(-5deg); }
}


/* ---------- hero: today's events ---------- */
.today { max-width: 600px; }
.today-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.today-h .lab { color: var(--brick); }
.today-h .more { font-size: 0.92rem; }
.today .evs { margin-top: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.hguide { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 18px; align-items: center; max-width: 600px; text-decoration: none; }
.hguide img { width: 112px; height: 84px; object-fit: cover; border-radius: 6px; }
.hguide .lab { color: var(--brick); }
.hguide b { display: block; margin-top: 6px; font-size: calc(var(--d-k) * clamp(1.14rem, 1rem + 0.5vw, 1.36rem)); line-height: 1.14; text-wrap: balance; }
.hguide:hover b { color: var(--brick); }
.hguide .go { font-weight: 600; }
@media (max-width: 480px) { .hguide { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; } .hguide img { width: 88px; height: 66px; } }

/* ---------- sections ---------- */
.sec { padding-block: clamp(40px, 5vw, 72px); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(20px, 2.6vw, 34px); }
.sec-head > div { min-width: 0; max-width: 56rem; }
.kick { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--brick); }
.on-dark .kick { color: var(--sky-2); }
.kick .sticker { width: 46px; height: 46px; transform: rotate(-6deg); background: transparent; box-shadow: none; border-radius: 0; }
.kick .sticker .ico { width: 100%; height: 100%; }
.sec-head h2 { font-size: calc(var(--d-k) * clamp(2.2rem, 1.1rem + 4vw, 4.5rem)); text-wrap: balance; }
h2.d em { font-family: var(--accent); font-style: var(--a-style); font-weight: var(--a-w); letter-spacing: var(--a-ls); text-transform: none; color: var(--brick); font-size: calc(var(--a-k) * 0.86em); margin-left: 0.04em; }
.on-dark .sec-head h2 em { color: var(--sky-2); }
.sec-head h2 u { text-decoration: none; position: relative; white-space: nowrap; }
.sec-head h2 u svg { position: absolute; left: -2%; bottom: -0.14em; width: 104%; height: 0.14em; color: var(--brick); }
.sub { margin-top: 26px; font-size: clamp(1.04rem, 0.96rem + 0.4vw, 1.22rem); color: var(--mut); max-width: 40em; }
.on-dark .sub { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.aside-note { display: inline-flex; align-items: flex-end; gap: 6px; transform: rotate(-3deg); white-space: nowrap; }
.aside-note svg { width: 40px; height: 46px; flex: none; }
/* a note that sits directly above the thing its arrow points at */
.lead-note { display: flex; width: fit-content; margin: -6px 0 4px 6px; }
.lead-note svg { margin-bottom: -16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.filter-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.filter-row .chips { margin-bottom: 0; }
.pickme { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 14px; border-radius: 999px; border: 2px solid var(--ink); background: var(--brick); color: var(--paper); font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.5deg); transition: transform .25s var(--ease), box-shadow .25s, background-color .25s; }
.pickme svg { width: 22px; height: 22px; flex: none; transition: transform 0.7s var(--ease); animation: pick-spin 6s var(--ease) infinite; }
.pickme svg circle { fill: var(--brick) !important; }
.pickme::after { content: 'new'; position: absolute; top: -10px; right: -8px; padding: 2px 7px; border-radius: 99px; background: var(--brass); color: var(--ink); font: 700 10px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid var(--ink); transform: rotate(8deg); }
.pickme:hover { background: var(--ink); color: var(--paper); transform: rotate(0deg) translate(-1px, -2px); box-shadow: 5px 5px 0 var(--brick); }
.pickme:hover svg { transform: rotate(135deg); } .pickme:hover svg circle { fill: var(--ink) !important; }
.pickme:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
@keyframes pick-spin { 0%, 80% { transform: rotate(0); } 90% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pickme svg { animation: none; } }
#districts { padding-top: clamp(16px, 2.2vw, 32px); }
.chips button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-weight: 500; font-size: 0.95rem; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.chips button span { font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mut); }
.chips button:hover { border-color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chips button[aria-pressed="true"] span { color: var(--sky-2); }

/* ---------- district cards: a photo-led mosaic of four sizes ---------- */
.c-navy { --pc-bg: var(--ink); --pc-fg: var(--paper); --pc-lab: var(--sky-2); }
.c-brick { --pc-bg: var(--brick); --pc-fg: var(--paper); --pc-lab: var(--paper); }
.c-sky { --pc-bg: var(--sky); --pc-fg: var(--ink); --pc-lab: var(--blue); }
.c-stone { --pc-bg: var(--stone); --pc-fg: var(--ink); --pc-lab: var(--brick); }
.posters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(284px, 20vw, 300px); gap: clamp(10px, 1.2vw, 18px); grid-auto-flow: dense; }
.poster { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 0; border-radius: var(--r); overflow: hidden; isolation: isolate; text-decoration: none; background: var(--ink); color: var(--paper); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.poster:hover { transform: translateY(-4px); box-shadow: 0 28px 36px -26px rgba(20, 33, 63, 0.6); }
.poster > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.poster:hover > img { transform: scale(1.05); }
.poster.photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14, 23, 48, 0.94) 0%, rgba(14, 23, 48, 0.66) 24%, rgba(14, 23, 48, 0) 56%); }
.pb { display: grid; gap: 6px; padding: 18px 60px 18px 20px; min-width: 0; }
.pb .lab { color: var(--sky-2); }
.pb h3 { font-size: calc(var(--d-k) * clamp(1.3rem, 0.86rem + 1.1vw, 1.72rem)); text-wrap: balance; }
.pb .desc { font-size: 1rem; line-height: 1.45; max-width: 33em; opacity: 0.92; }
.pb .tags { font-family: var(--serif); font-style: italic; font-size: 0.98rem; line-height: 1.4; opacity: 0.92; }
.poster .sticker { position: absolute; right: 14px; top: 14px; width: 56px; height: 56px; transform: rotate(6deg); transition: transform 0.4s var(--ease); }
.poster:hover .sticker, .poster:focus-visible .sticker { transform: rotate(-8deg) scale(1.2); }
/* on hover: the photo dims, the icon comes alive, and the card opens to show where to start and what's on */
.poster .dim { position: absolute; inset: 0; z-index: -1; background: var(--deep); opacity: 0; transition: opacity 0.45s; }
.reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s var(--ease), opacity 0.3s; }
.reveal-in { min-height: 0; overflow: hidden; }
.reveal-box { display: grid; gap: 9px; margin-top: 6px; padding-top: 11px; border-top: 1px solid color-mix(in srgb, currentColor 32%, transparent); }
.reveal p { display: grid; gap: 2px; font-size: 0.9rem; line-height: 1.35; min-width: 0; }
.reveal .lab { font-size: 0.7rem; }
.reveal p > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reveal .names { font-family: var(--serif); font-style: italic; font-size: 0.98rem; }
.poster.wide .reveal-box, .poster.big .reveal-box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; }
.poster.wide .reveal p > span:last-child, .poster.big .reveal p > span:last-child { -webkit-line-clamp: 3; }
.poster .note, .poster.block.small .art { transition: opacity 0.3s; }
@media (hover: hover) {
  .poster:hover .reveal { grid-template-rows: 1fr; opacity: 1; }
  .poster.photo:hover .dim { opacity: 0.62; }
  .posters:not(.flt) .poster.wide.photo:hover .dim { opacity: 0.3; }
  .poster:hover .note { opacity: 0; }
  .poster.block.small:hover .art { opacity: 0.14; }
}
.poster:focus-visible .reveal { grid-template-rows: 1fr; opacity: 1; }
.poster.photo:focus-visible .dim { opacity: 0.62; }
.poster:focus-visible .note { opacity: 0; }
.poster.block.small:focus-visible .art { opacity: 0.14; }
/* small and wide cards are short, so opening them folds away the line they can spare */
.poster.small .pb > .lab, .poster.wide .pb > .tags { max-height: 3.2em; overflow: hidden; transition: max-height 0.4s var(--ease), opacity 0.25s; }
@media (hover: hover) { .poster.small:hover .pb > .lab, .poster.wide:hover .pb > .tags { max-height: 0; opacity: 0; } }
.poster.small:focus-visible .pb > .lab, .poster.wide:focus-visible .pb > .tags { max-height: 0; opacity: 0; }
@media (max-width: 1279px) { .poster.small .reveal .names { -webkit-line-clamp: 1; } }
/* Reading Terminal: a spread of things you can buy there */
.poster.block .art:has(.spread) { position: relative; container-type: size; padding: 0; }
.poster.block .art .spread { position: absolute; inset: 26px 22px 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 4% 8%; }
@container (max-height: 250px) { .poster.block .art .spread { grid-template-columns: repeat(3, minmax(0, 1fr)); inset: 30px 16px 4px; gap: 6% 4%; } }
.poster.block .art .spread span { display: block; min-width: 0; min-height: 0; transform: rotate(var(--r)); }
.poster.block .art .spread .ico { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
@media (prefers-reduced-motion: no-preference) {
  .poster.block:hover .art .spread .ico, .poster.block:focus-visible .art .spread .ico { transform: none; animation: jig 0.7s var(--ease) calc(var(--i) * 70ms) both; }
}
@keyframes jig { 0% { transform: none; } 35% { transform: translateY(-9%) rotate(-9deg) scale(1.08); } 70% { transform: translateY(2%) rotate(5deg); } 100% { transform: none; } }
/* a small illustrated card keeps its drawing behind the text, so the text can open over it */
.poster.block.small { justify-content: flex-end; }
.poster.block.small .art { position: absolute; left: 0; right: 0; top: 0; height: 66%; z-index: -1; }
@media (prefers-reduced-motion: reduce) { .reveal, .poster .dim { transition: none; } }
.poster .go { position: absolute; right: 16px; bottom: 16px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); font-weight: 400; font-size: 1rem; opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s var(--ease); }
.poster:hover .go, .poster:focus-visible .go, .poster.big .go, .poster.wide .go { opacity: 1; transform: none; }
.poster .note { position: absolute; left: 18px; top: 16px; font-size: 1.36rem; transform: rotate(-4deg); }
.poster.photo .note { display: none; color: var(--paper); }
.pick-flag { position: absolute; left: 0; top: 16px; z-index: 2; background: var(--paper); color: var(--brick); padding: 7px 14px 7px 16px; }
.pick-flag + .note { top: 58px; }
/* sizes */
.poster.big .pb { padding: 24px 70px 24px 26px; gap: 8px; }
.poster.big h3 { font-size: calc(var(--d-k) * clamp(2.1rem, 1rem + 3.2vw, 3.5rem)); }
.poster.big .sticker { width: 76px; height: 76px; right: 20px; top: 20px; }
.poster.tall h3 { font-size: calc(var(--d-k) * clamp(1.5rem, 0.9rem + 1.5vw, 2.1rem)); }
.poster.wide h3 { font-size: calc(var(--d-k) * clamp(1.7rem, 0.9rem + 2.1vw, 2.6rem)); }
/* illustrated cards for the districts without a photo */
.poster.block { background: var(--pc-bg); color: var(--pc-fg); justify-content: flex-start; }
.poster.block .art { flex: 1; min-height: 0; display: grid; place-items: center; padding: 22px 18px 0; }
.poster.block .art .ico { width: auto; height: 100%; max-height: 210px; aspect-ratio: 1; transition: transform 0.5s var(--ease); }
.poster.block:hover .art .ico { transform: rotate(-4deg) scale(1.05); }
.poster.block .pb .lab { color: var(--pc-lab); }
.poster.block .note { color: var(--brick); }
.poster.block .go { background: var(--ink); color: var(--paper); }
.poster.hot, .poster.picked { outline: 3px solid var(--brick); outline-offset: 3px; }
.poster.picked::before { content: "Today's pick"; position: absolute; left: 0; top: 16px; z-index: 3; background: var(--brick); color: var(--paper); padding: 7px 14px 7px 16px; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.poster.picked .pick-flag, .poster.picked .note { display: none; }
.poster.in { animation: posterIn 0.5s var(--ease) backwards; }
@keyframes posterIn { from { opacity: 0.001; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .poster.in { animation: none; } }
.below { margin-top: clamp(18px, 2.4vw, 30px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
/* the composed layout, desktop only */
@media (min-width: 1041px) {
  .posters:not(.flt) .poster { grid-column: var(--gc); grid-row: var(--gr); }
  .posters:not(.flt) .poster.wide.photo::after { background: linear-gradient(90deg, var(--sc) 0%, color-mix(in srgb, var(--sc) 92%, transparent) 30%, color-mix(in srgb, var(--sc) 0%, transparent) 68%); }
  .posters:not(.flt) .poster.wide { justify-content: center; }
  .posters:not(.flt) .poster.wide .pb { max-width: 58%; padding-right: 20px; }
  .posters:not(.flt) .poster.wide.photo .note { display: block; }
}
/* tablet, and any filtered view: sizes become spans and the grid packs itself */
@media (max-width: 1040px) {
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 36vw, 300px); }
  .posters:not(.flt) .poster.big { grid-column: span 2; grid-row: span 2; }
  .posters:not(.flt) .poster.wide { grid-column: span 2; }
  .posters:not(.flt) .poster.tall { grid-row: span 2; }
}
.posters.flt { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(260px, 26vw, 360px); }
.posters.flt.two { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(280px, 32vw, 440px); }
.posters.flt.three .poster.big { grid-column: span 2; }
@media (max-width: 1040px) { .posters.flt, .posters.flt.two { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 40vw, 320px); } .posters.flt.three .poster.big { grid-column: span 2; } }
@media (max-width: 620px) {
  .posters, .posters.flt, .posters.flt.two { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .posters .poster, .posters.flt.three .poster.big { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
  .posters .poster.big, .posters .poster.tall { aspect-ratio: 5 / 6; }
  .poster .go { opacity: 1; transform: none; }
  .poster.big h3 { font-size: calc(var(--d-k) * 1.9rem); }
  .poster.big .pb { padding: 18px 60px 18px 20px; }
  .pb .desc { display: none; }
}

/* ---------- map ---------- */
.mapsec { background: var(--ink); color: var(--paper); }
.mapsec .hand { color: var(--sky-2); }
.map-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.sheet { position: relative; background: var(--stone); color: var(--ink); border-radius: var(--r); padding: clamp(8px, 1.2vw, 16px); }
.mapbox { position: relative; container-type: inline-size; aspect-ratio: 780 / 796; overflow: hidden; border-radius: 4px; }
.mapbox > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapbox text { font-family: var(--body); fill: var(--ink); paint-order: stroke; stroke: var(--stone); stroke-width: 7px; stroke-linejoin: round; }
.mapbox text.riv { font-family: var(--serif); font-style: italic; fill: var(--blue); font-size: 25px; stroke: none; letter-spacing: 0.04em; }
.mapbox text.st { font-family: var(--serif); font-style: italic; font-size: 15.5px; fill: var(--mut); }
.mapbox text.dl { font-size: 16.5px; font-weight: 700; font-stretch: 92%; letter-spacing: 0.005em; }
.mapbox text.big { font-family: var(--hand); font-size: 23px; fill: var(--brick); stroke: none; }
.pin { position: absolute; width: clamp(30px, 6cqi, 46px); aspect-ratio: 1; margin: 0; padding: 0; translate: -50% -50%; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); cursor: pointer; display: grid; place-items: center; transition: transform 0.25s var(--ease), box-shadow 0.25s; z-index: 1; }
.pin .ico { width: 74%; height: 74%; }
.pin:hover { transform: scale(1.14) rotate(-5deg); z-index: 3; }
.pin[aria-pressed="true"] { transform: scale(1.2); z-index: 2; border-color: var(--brick); box-shadow: 0 0 0 3px var(--brick); }
@media (prefers-reduced-motion: no-preference) { .pin[aria-pressed="true"] { animation: ping 2s ease-out infinite; } }
@keyframes ping { 0% { box-shadow: 0 0 0 3px var(--brick), 0 0 0 3px color-mix(in srgb, var(--brick) 50%, transparent); } 100% { box-shadow: 0 0 0 3px var(--brick), 0 0 0 15px transparent; } }
.trip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 6px 6px; }
.trip .hand { margin-right: 6px; color: var(--brick); }
.trip button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 5px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: var(--paper); font-weight: 500; font-size: 0.94rem; cursor: pointer; transition: border-color 0.2s; }
.trip button .sticker { width: 36px; height: 36px; box-shadow: none; background: transparent; }
.trip button:hover { border-color: var(--ink); }
.trip button[aria-pressed="true"] { border-color: var(--brick); box-shadow: 0 0 0 2px var(--brick); }
.card { background: var(--paper); color: var(--ink); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); }
.card .ph { aspect-ratio: 16 / 9; background: var(--stone); overflow: hidden; display: grid; place-items: center; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card .ph.art { aspect-ratio: 16 / 7; background: var(--mist); }
.card .ph .ico { width: 34%; height: 82%; }
.card-b { position: relative; padding: 20px clamp(16px, 2vw, 26px) clamp(18px, 2vw, 26px); display: grid; gap: 12px; }
.card-b .sticker { position: absolute; right: 20px; top: -44px; width: 80px; height: 80px; transform: rotate(8deg); }
.card-b .lab { color: var(--brick); padding-right: 96px; }
.card-b h3 { font-size: calc(var(--d-k) * clamp(2rem, 1.3rem + 2vw, 3rem)); }
.card-b p { font-size: 1rem; color: var(--mut); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.facts dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.facts dd { font-weight: 600; font-size: 0.98rem; }
.facts .full { grid-column: 1 / -1; }
.shops { margin-top: 4px; }
.shops { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.02rem; line-height: 1.5; }
.shops li { display: inline; }
.shops li + li::before { content: " · "; font-style: normal; color: var(--brick); }
.card-b .btn { justify-self: start; white-space: normal; text-align: left; padding-block: 10px; }
.card.swap .card-b > *, .card.swap .ph { animation: swap 0.4s var(--ease) backwards; }
@keyframes swap { from { opacity: 0.001; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .card.swap .card-b > *, .card.swap .ph { animation: none; } }
.map-cta { margin-top: clamp(20px, 2.6vw, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.map-cta .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.map-cta .btn:hover { background: var(--brick); border-color: var(--brick); color: var(--paper); }
.map-cta p { max-width: 30em; color: color-mix(in srgb, var(--paper) 80%, transparent); }
@media (max-width: 940px) { .map-grid { grid-template-columns: minmax(0, 1fr); } .card { position: static; } }
@media (max-width: 620px) { .mapbox text.st, .mapbox text.dl.minor { display: none; } .mapbox text.dl { font-size: 23px; } .mapbox text.riv { font-size: 32px; } .mapbox text.big { font-size: 27px; } .pin { width: 26px; border-width: 1.5px; } .pin::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; } .pin[aria-pressed="true"] { transform: scale(1.12); animation: none; } }

/* ---------- story rail ---------- */
.story { background: var(--stone); }
.rail { --edge: max(var(--gutter), calc((100vw - 1296px) / 2 + var(--gutter))); display: flex; gap: clamp(12px, 1.4vw, 20px); overflow-x: auto; scroll-snap-type: x proximity; padding: 14px var(--edge) 28px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; scroll-padding-inline: var(--edge); }
.rail li { position: relative; flex: none; width: min(300px, 76vw); scroll-snap-align: start; padding: 20px 4px 4px 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--ink); }
.rail li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--brick); }
.rail li .sticker { position: absolute; right: 8px; top: 16px; width: 66px; height: 66px; background: transparent; box-shadow: none; border-radius: 0; transform: rotate(4deg); }
.rail li .sticker .ico { width: 100%; height: 100%; }
.rail li b.d { font-size: calc(var(--d-k) * clamp(3rem, 2rem + 3vw, 4.2rem)); color: var(--ink); }
.rail li h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--brick); }
.rail li p { font-size: 0.95rem; color: var(--mut); line-height: 1.5; padding-right: 12px; }
.rail li a { font-size: 0.92rem; margin-top: auto; align-self: flex-start; }
.rail-btns { display: flex; gap: 8px; }
.rail-btns button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; font-size: 1.2rem; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.rail-btns button:hover { background: var(--ink); color: var(--paper); }

/* ---------- this week + eat/stay ---------- */
.week-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(18px, 3vw, 44px); align-items: stretch; }
.days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.days button { flex: none; min-width: 60px; min-height: 66px; padding: 6px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: grid; gap: 0; justify-items: center; align-content: center; transition: border-color 0.2s; }
.days button small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.days button b { font-size: calc(var(--d-k) * 1.5rem); font-variant-numeric: tabular-nums; }
.days button:hover { border-color: var(--ink); }
.days button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.days button[aria-pressed="true"] small { color: var(--sky-2); }
.days button i { width: 6px; height: 6px; border-radius: 50%; background: var(--brick); margin-top: 3px; }
.days button i.none { background: transparent; }
.days button[aria-pressed="true"] i { background: var(--brass); }
.evs { margin-top: 14px; border-top: 1px solid var(--ink); }
.evs li a { display: grid; grid-template-columns: 50px minmax(0, 7.4em) minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.evs .sticker { width: 50px; height: 50px; box-shadow: none; background: var(--mist); }
.evs time { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.94rem; }
.evs div { min-width: 0; display: grid; }
.evs div b { font-weight: 600; line-height: 1.25; }
.evs div small { color: var(--mut); font-size: 0.88rem; }
.evs .go { font-weight: 600; }
.evs li a:hover div b { color: var(--brick); }
.evs .quiet { padding: 22px 0; display: flex; align-items: center; gap: 14px; color: var(--mut); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.eatstay { padding-block: clamp(28px, 3.4vw, 48px); }
/* the drawing takes whatever height is left beside a long events list, and disappears when there is none */
.newscol { display: flex; flex-direction: column; min-width: 0; }
.art-fill { position: relative; flex: 1 1 0; min-height: 0; max-height: 350px; margin-top: 20px; container-type: size; }
.art-fill svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.art-fill text { font-family: var(--hand); font-size: 23px; fill: var(--brick); }
@container (max-height: 150px) { .art-fill svg { display: none; } }
@media (max-width: 900px) { .art-fill { flex: none; height: clamp(180px, 52vw, 290px); } }
.evs .morerow button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0; border: 0; background: none; font-weight: 600; cursor: pointer; border-bottom: 1px solid var(--brick); margin: 6px 0; }
.evs .morerow button:hover { color: var(--brick); }
.newscol .heads b { font-size: clamp(1.06rem, 1rem + 0.3vw, 1.24rem); }
.newscol .heads a { padding: 15px 0; }
.tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 26px; border-radius: var(--r); text-decoration: none; background: var(--pc-bg); color: var(--pc-fg); overflow: hidden; min-height: 214px; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.tile:hover { transform: translateY(-5px); box-shadow: 0 26px 34px -24px rgba(20, 33, 63, 0.55); }
.tile .sticker { position: absolute; right: 18px; top: 18px; width: 82px; height: 82px; transform: rotate(8deg); }
.tile h3 { font-size: calc(var(--d-k) * clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem)); margin-top: auto; padding-right: 100px; }
.tile p { font-size: 0.98rem; max-width: 26em; opacity: 0.92; }
@media (max-width: 900px) { .week-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .tiles { grid-template-columns: minmax(0, 1fr); } .evs li a { grid-template-columns: 44px minmax(0, 1fr) auto; } .evs .sticker { width: 44px; height: 44px; grid-row: span 2; } .evs time { grid-column: 2; } .evs div { grid-column: 2; } .evs .go { grid-row: 1 / span 2; grid-column: 3; } }

/* ---------- guides ---------- */
.guides { background: var(--mist); }
.lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r); overflow: hidden; background: var(--ink); color: var(--paper); text-decoration: none; margin-bottom: clamp(18px, 2.4vw, 28px); }
.lead .ph { min-height: 300px; overflow: hidden; }
.lead .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.lead:hover .ph img { transform: scale(1.04); }
.lead-b { position: relative; padding: clamp(22px, 3.2vw, 48px); display: flex; flex-direction: column; gap: 16px; justify-content: center; min-width: 0; }
.lead-b .lab { color: var(--sky-2); }
.lead-b h3 { font-size: calc(var(--d-k) * clamp(1.7rem, 1rem + 2.1vw, 2.8rem)); text-wrap: balance; }
.lead-b p { color: color-mix(in srgb, var(--paper) 80%, transparent); max-width: 30em; }
.lead-b .go { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 600; transition: background-color 0.25s, color 0.25s; }
.lead:hover .lead-b .go { background: var(--brick); color: var(--paper); }
.lead-b .hand { color: var(--sky-2); position: absolute; right: clamp(14px, 2vw, 28px); top: clamp(14px, 1.8vw, 24px); transform: rotate(5deg); }
.gcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.gcard { display: flex; flex-direction: column; min-width: 0; background: var(--paper); border-radius: var(--r); overflow: hidden; text-decoration: none; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.gcard:hover { transform: translateY(-5px); box-shadow: 0 24px 32px -24px rgba(20, 33, 63, 0.5); }
.gcard .ph { aspect-ratio: 3 / 2; overflow: hidden; background: var(--pc-bg, var(--stone)); display: grid; place-items: center; }
.gcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.gcard:hover .ph img { transform: scale(1.05); }
.gcard .ph .ico { width: 46%; height: 74%; }
.gcard-b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gcard-b .lab { color: var(--brick); }
.gcard-b h3 { font-size: 1.14rem; font-weight: 600; line-height: 1.24; letter-spacing: -0.01em; text-wrap: balance; }
.gcard-b p { font-size: 0.92rem; color: var(--mut); line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gcard-b .go { margin-top: auto; font-weight: 600; font-size: 0.94rem; padding-top: 4px; }
@media (max-width: 1040px) { .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .lead { grid-template-columns: minmax(0, 1fr); } .lead .ph { min-height: 0; aspect-ratio: 16 / 10; } .lead-b .hand { display: none; } }
@media (max-width: 520px) { .gcards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- ad slot, news, newsletter, footer ---------- */
.ad { margin-top: clamp(22px, 3vw, 36px); border: 1px dashed color-mix(in srgb, var(--ink) 34%, transparent); border-radius: 12px; min-height: 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; padding: 12px 16px; color: var(--mut); text-align: center; font-size: 0.92rem; }
.news-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(18px, 4vw, 64px); align-items: start; }
.news-grid h2 { font-size: calc(var(--d-k) * clamp(2.1rem, 1.1rem + 3.4vw, 3.8rem)); text-wrap: balance; }
.heads { border-top: 1px solid var(--ink); }
.heads a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.heads small { grid-column: 1 / -1; color: var(--brick); }
.heads b { font-family: var(--serif); font-size: clamp(1.14rem, 1.04rem + 0.5vw, 1.42rem); font-weight: 400; line-height: 1.28; }
.heads a:hover b { color: var(--brick); }
.fine { font-size: 0.84rem; color: var(--mut); margin-top: 12px; }
@media (max-width: 800px) { .news-grid { grid-template-columns: minmax(0, 1fr); } }
.mail { background: var(--sky); color: var(--ink); padding-bottom: 0; overflow: hidden; }
.mail-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(18px, 4vw, 64px); align-items: center; }
.mail h2 { font-size: calc(var(--d-k) * clamp(2.5rem, 1.2rem + 5.2vw, 5.4rem)); }
.mail h2 i { font-family: var(--accent); font-style: var(--a-style); font-weight: var(--a-w); letter-spacing: var(--a-ls); text-transform: none; color: var(--brick); font-size: calc(var(--a-k) * 0.86em); }
.mail .sub { color: var(--ink); opacity: 0.82; margin-top: 36px; }
.mail form { display: grid; gap: 12px; }
.mail .row { display: flex; gap: 8px; flex-wrap: wrap; }
.mail input { flex: 1 1 220px; min-width: 0; height: 56px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: var(--paper); color: var(--ink); padding: 0 24px; font-size: 1.02rem; }
.mail .btn { min-height: 56px; }
.mail .msg { font-size: 0.95rem; min-height: 1.5em; opacity: 0.86; }
.street { display: block; width: 100%; height: max(120px, 17.2vw); margin-top: clamp(22px, 3vw, 40px); margin-bottom: -2px; }
@media (max-width: 800px) { .mail-in { grid-template-columns: minmax(0, 1fr); } }
.foot { background: var(--deep); color: var(--paper); border-top: 3px solid var(--ink); padding-block: clamp(32px, 4vw, 54px) clamp(22px, 2.6vw, 34px); }
.foot-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.foot .big { font-size: calc(var(--d-k) * clamp(3rem, 12.4vw, 11.4rem)); color: var(--paper); }
.foot .birds { color: var(--brass); font-family: var(--hand); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); transform: rotate(-4deg); display: inline-block; line-height: 1; padding-bottom: 0.5em; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); }
.foot nav a { text-decoration: none; font-weight: 600; padding: 10px 0; }
.foot nav a:hover { color: var(--sky-2); }
.foot small { display: block; margin-top: 10px; color: color-mix(in srgb, var(--paper) 62%, transparent); font-size: 0.86rem; }


/* ---------- skip link ---------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ad slots stay hidden until AdSense approves the site and real units go in (same as the old design) */
.ad { display: none !important; }

/* district cards: on hover, the short description (the big cards already show theirs) */
.reveal p.rdesc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; grid-column: 1 / -1; font-size: 0.92rem; line-height: 1.4; }
.poster.wide .reveal p.rdesc { -webkit-line-clamp: 3; max-width: 34em; }
.reveal-box:not(:has(> p:not([hidden]))) { border-top: 0; padding-top: 0; margin-top: 0; }
@media (max-width: 1279px) { .poster.small .reveal p.rdesc { -webkit-line-clamp: 3; } }

/* hand-drawn guide covers, used wherever a guide has no photo of its own */
.gart { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 4%; padding: 10% 12%; background: var(--pc-bg); color: var(--pc-fg); overflow: hidden; }
.gart > span { display: block; transform: rotate(var(--r)) translateY(calc((var(--i) - 1) * -6%)); }
.gart > span:nth-child(2) { transform: rotate(var(--r)) translateY(8%) scale(1.12); }
.gart .ico { width: 100%; height: auto; aspect-ratio: 1; }
.gart em { position: absolute; left: 7%; bottom: 7%; font-style: normal; font-size: clamp(1rem, 0.7rem + 0.9vw, 1.5rem); color: var(--pc-lab); transform: rotate(-3deg); transform-origin: left; }
.ph:has(> .gart) { position: relative; }
.hguide .gart { position: relative; width: 112px; height: 84px; padding: 10px; border-radius: 6px; flex: none; }
.hguide .gart em { display: none; }
.c-paper { --pc-bg: var(--mist); --pc-fg: var(--ink); --pc-lab: var(--blue); }
.gart { grid-template-columns: 1fr 1.35fr 1fr; gap: 0; padding: 6% 9% 10%; }
.gcard .ph .gart .ico, .lead .ph .gart .ico, .hguide .gart .ico { width: 100%; height: auto; }
.gcard .ph .gart em { font-size: 1.2rem; }
.lead .ph:has(> .gart) { position: relative; }

/* a guide's own drawn cover (the Michelin table) */
.gcover { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 92%, var(--blue)); overflow: hidden; }
.gcover svg { width: 92%; height: 92%; overflow: visible; }
.gcover text.note { font-family: var(--hand); font-size: 26px; fill: var(--brick); }
.gphoto.drawn .gcover { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); }
/* the button from a shop's row to its own page */
.btn.shop-go { min-height: 38px; padding: 0 16px; font-size: 0.86rem; gap: 8px; color: var(--paper); }
.btn.shop-go:hover { background: var(--brick); border-color: var(--brick); }
.slinks .btn.shop-go { margin-right: 6px; }

/* Mobile polish (Oct 2026 audit): breadcrumb links get a 24px+ tap height */
.crumbs { align-items: center; } .crumbs a { display: inline-block; padding: 4px 0; }
@media (max-width: 480px) { .hguide .gart { width: 88px; height: 66px; padding: 8px; } }
/* links inside the shop page fact boxes get a 24px+ tap height */
b > a[target="_blank"] { display: inline-block; padding: 3px 0; }

/* park names on the Leaflet maps (js/parks.js) */
.park-label { background: none; border: 0; white-space: nowrap; pointer-events: none; }
.park-label span { display: inline-block; transform: translate(-50%, -50%) rotate(-6deg); font-family: var(--hand); font-size: 19px; line-height: 1; color: #46703C; text-shadow: 0 0 3px #F4F8EE, 0 0 3px #F4F8EE; }
.park-label.major span { font-size: 24px; font-weight: 700; color: #3E6634; }

/* saved places: the heart in the header and the Save buttons */
.saved-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--ink); margin-right: 4px; }
.saved-link svg { width: 22px; height: 22px; }
.saved-link span { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--brick); color: var(--paper); font: 700 11px/17px var(--sans, system-ui); text-align: center; }
.svbtn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); border-radius: 999px; padding: 5px 12px 5px 10px; font: 600 13px var(--sans, system-ui); cursor: pointer; margin-left: 8px; }
.svbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.svbtn[aria-pressed="true"] { background: var(--brick); border-color: var(--brick); color: var(--paper); }
.svbtn[aria-pressed="true"] svg { fill: currentColor; }
/* store: team gear, throwbacks and local-maker gifts (render/pages/store.mjs) */
.sp-hero { padding: clamp(18px, 2.4vw, 30px) 0 clamp(26px, 3vw, 40px); background: linear-gradient(180deg, var(--paper) 0%, #F3EADB 100%); border-bottom: 1.5px solid var(--ink); }
.sp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.sp-hero h1 { font-size: calc(var(--d-k, 1) * clamp(2.6rem, 1.2rem + 5vw, 5.6rem)); margin-top: 10px; }
.sp-hero h1 em { color: var(--brick, #B4553C); }
.sp-hero .lede { max-width: 54ch; margin-top: 10px; }
.sp-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sp-jump a { padding: 7px 14px; border: 1.5px solid var(--ink); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9rem; background: #FFF; }
.sp-jump a:hover { background: var(--ink); color: var(--paper); }
.sp-hero-art { position: relative; aspect-ratio: 1; max-width: 360px; width: 100%; justify-self: center; }
.sp-hero-art span { position: absolute; width: 52%; aspect-ratio: 1; padding: 6%; background: #FFF; border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 4px 5px 0 var(--ink); }
.sp-hero-art svg { width: 100%; height: 100%; }
.sp-hero-art .h0 { left: 0; top: 0; rotate: -6deg; } .sp-hero-art .h1 { right: 0; top: 6%; rotate: 5deg; } .sp-hero-art .h2 { left: 6%; bottom: 0; rotate: 4deg; } .sp-hero-art .h3 { right: 4%; bottom: 4%; rotate: -4deg; }
.sp-disclose { margin-top: 18px; font-size: .8rem; color: var(--mut); }
.sp-team { --c1: #2B4C7E; --c2: #C8382B; position: relative; }
.sp-team::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--c1) 0 70%, var(--c2) 70% 100%); }
.sp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; }
.sp-head h2 { font-size: calc(var(--d-k, 1) * clamp(2rem, 1.2rem + 2.6vw, 3.6rem)); }
.sp-team .kick { color: var(--c1); }
.sp-head .sub { max-width: 60ch; margin-top: 6px; color: var(--mut); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chips a { padding: 7px 13px; border-radius: 999px; background: var(--c1); color: #FFF; text-decoration: none; font-weight: 600; font-size: .85rem; border: 1.5px solid var(--ink); }
.sp-chips a:hover { background: var(--c2); }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.sp-card { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 14px 16px 16px; background: #FFF; border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 4px 5px 0 var(--ink); text-decoration: none; color: inherit; rotate: var(--t); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s, rotate .25s; }
.sp-card:hover { transform: translateY(-5px); rotate: 0deg; box-shadow: 6px 9px 0 var(--c1, var(--ink)); }
.sp-art { position: relative; display: block; aspect-ratio: 1.25; background: #FAF6EE; border-radius: 10px; margin-bottom: 6px; }
.sp-art svg { width: 100%; height: 100%; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.sp-card:hover .sp-art svg { transform: rotate(-4deg) scale(1.05); }
.sp-tag { position: absolute; left: 8px; top: 8px; font-style: normal; font: 700 .62rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 4px 7px; border-radius: 4px; }
.sp-card .lab { color: var(--mut); }
.sp-card h3 { font-size: 1.02rem; line-height: 1.3; }
.sp-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding-top: 10px; border-top: 1.5px dashed var(--line, #D9D3C7); }
.sp-price { font-size: 1.2rem; }
.sp-buy { font-weight: 700; font-size: .85rem; color: var(--c1, var(--brick, #B4553C)); }
.sp-inperson { margin-top: 16px; color: var(--mut); }
.sp-inperson .hand { color: var(--c1, var(--brick)); font-size: 1.3rem; margin-right: 6px; }
.sp-legends { background: #1F2A44; color: #F7F3EA; --c1: #E6B655; }
.sp-legends h2 { color: #FFF; } .sp-legends .kick, .sp-legends .sp-inperson .hand { color: #E6B655; } .sp-legends .sub, .sp-legends .sp-inperson { color: rgba(247, 243, 234, .8); }
.sp-legends .sp-card { color: var(--ink); box-shadow: 4px 5px 0 #000; }
.sp-gifts { --c1: #B4553C; }
.sp-fine { font-size: .8rem; color: var(--mut); margin-top: 14px; max-width: 80ch; }
.sp-strip { --c1: #B4553C; }
@media (max-width: 760px) { .sp-hero-grid { grid-template-columns: minmax(0, 1fr); } .sp-hero-art { max-width: 240px; } }
@media (prefers-reduced-motion: reduce) { .sp-card, .sp-art svg { transition: none; } }
@media (max-width: 600px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sp-card { padding: 10px 10px 12px; rotate: 0deg; box-shadow: 3px 4px 0 var(--ink); } .sp-card h3 { font-size: .9rem; } .sp-price { font-size: 1rem; } .sp-buy { font-size: .75rem; } .sp-strip .sp-card:nth-child(n+3) { display: none; } }

/* share button and its small menu (desktop; phones get their own share sheet) */
.shbtn svg path { fill: none !important; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shmenu { position: absolute; z-index: 50; margin-top: 6px; display: grid; min-width: 170px; padding: 6px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.shmenu a, .shmenu button { display: block; padding: 9px 12px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.shmenu a:hover, .shmenu button:hover { background: var(--stone); }
.cta .shbtn { align-self: center; }
.cta:has(.shbtn), .sfacts > div:has(.shbtn) { position: relative; } .shmenu { top: 100%; right: 0; }

/* "Help me pick": a three-question quiz that lands on a district */
.qz { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(20, 23, 30, 0.55); backdrop-filter: blur(3px); animation: qz-in .25s ease; }
@keyframes qz-in { from { opacity: 0; } }
.qz-card { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--paper); border-radius: 22px; padding: 22px 26px 24px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.qz-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.qz-dots { display: flex; gap: 6px; } .qz-dots i { width: 26px; height: 6px; border-radius: 9px; background: var(--line); transition: background .3s; } .qz-dots i.on { background: var(--brick); } .qz-dots i.done { background: var(--ink); }
.qz-x { border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ink); padding: 4px 8px; }
.qz-body { animation: qz-slide .3s var(--ease, ease); } @keyframes qz-slide { from { opacity: 0; transform: translateX(18px); } }
.qz-n { color: var(--brick); margin: 6px 0 2px; } .qz-q { font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.08; margin: 0; } .qz-hand { color: var(--brick); font-size: 1.25rem; margin: 2px 0 14px; }
.qz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qz-opt { --qc: var(--brick); --qb: var(--ink); position: relative; overflow: hidden; display: grid; grid-template-rows: 1fr auto; min-height: 150px; text-align: left; padding: 0; border-radius: 16px; border: 0; background: var(--qc); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 10px 22px -18px rgba(20,33,63,.6); transition: transform .2s, box-shadow .2s; }
.qz-c1 { --qc: var(--sky-2, #BFD0EA); } .qz-c2 { --qc: var(--brass); } .qz-c3 { --qc: var(--sage); } .qz-c4 { --qc: var(--deep, var(--ink)); --qb: var(--brick); }
.qz-stk { display: flex; align-items: center; justify-content: space-evenly; gap: 0; padding: 18px 6px 14px; min-width: 0; }
.qz-stk .sticker { width: 60px; height: 60px; background: none; box-shadow: none; border-radius: 0; transition: transform .3s var(--ease, ease); }
.qz-stk .sticker .ico { width: 100%; height: 100%; }
.qz-stk .sticker:nth-child(1) { transform: rotate(-8deg); } .qz-stk .sticker:nth-child(2) { transform: rotate(4deg) scale(1.18); } .qz-stk .sticker:nth-child(3) { transform: rotate(-3deg); }
.qz-opt:hover .qz-stk .sticker:nth-child(1), .qz-opt:focus-visible .qz-stk .sticker:nth-child(1) { transform: rotate(-16deg) translateY(-4px); }
.qz-opt:hover .qz-stk .sticker:nth-child(2), .qz-opt:focus-visible .qz-stk .sticker:nth-child(2) { transform: rotate(10deg) scale(1.26) translateY(-2px); }
.qz-opt:hover .qz-stk .sticker:nth-child(3), .qz-opt:focus-visible .qz-stk .sticker:nth-child(3) { transform: rotate(6deg) translateY(-5px); }
.qz-opt-b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 9px 13px 10px; background: var(--qb); color: var(--paper); }
.qz-opt:hover, .qz-opt:focus-visible { transform: translateY(-3px) rotate(-0.5deg); box-shadow: 0 0 0 2px var(--ink), 0 16px 26px -16px rgba(20,33,63,.6); }
.qz-opt:active { transform: scale(.97); }
.qz-opt b { flex: 1 1 100%; min-width: 0; font-size: 1rem; line-height: 1.2; } .qz-opt small { color: color-mix(in srgb, var(--paper) 75%, transparent); font-size: .78rem; line-height: 1.3; }
.qz-foot { display: flex; gap: 16px; justify-content: space-between; margin: 16px 0 0; } .qz-foot button.more { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--mut); }
.qz-img { display: block; width: 100%; height: 170px; object-fit: cover; border-radius: 14px; margin: 6px 0 12px; } .qz-art { display: grid; place-items: center; height: 120px; } .qz-art .ico { width: 96px; height: 96px; }
.qz-why { margin: 0 0 14px; color: var(--ink); }
.qz-shops { list-style: none; margin: 6px 0 16px; padding: 0; display: grid; gap: 6px; } .qz-shops a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--stone); color: var(--ink); text-decoration: none; } .qz-shops small { color: var(--mut); }
.qz-go { width: 100%; }
@media (max-width: 480px) { .qz-card { padding: 18px 18px 20px; } .qz-opt { min-height: 132px; } .qz-stk .sticker { width: 42px; height: 42px; } }

.gf-cta { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: 999px; background: color-mix(in srgb, var(--brass) 22%, var(--paper)); border: 1.5px dashed var(--brick); color: var(--ink); text-decoration: none; font-weight: 600; margin-right: 16px; }
.gf-cta .hand { color: var(--brick); font-size: 1.2rem; font-weight: 400; } .gf-cta:hover { background: var(--brick); color: var(--paper); } .gf-cta:hover .hand { color: var(--paper); }

/* Las Vegas: the same site, retinted. Loaded after site.css, so only the tokens and a few city touches change.
   Desert-night indigo ink on warm sand paper, hot pink as the pen, neon teal for labels and water, marquee gold for the
   icons, sunset orange and Red Rock sandstone in the drawings. Headlines in Righteous, the rounded mid-century lettering
   of motel and lounge signs; the pen is Yellowtail, a neon-tube script; Monoton (the inline neon face) only for tiny
   accents such as kickers and the seal, never body or headlines. (Load them in FONTS in city.mjs:
   ['Righteous', 'Yellowtail', 'Monoton', 'Caveat:wght@500;700', 'Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700', 'Archivo:wdth,wght@62..125,400..800'].)
   Contrast: ink 13.9:1 and the pink pen 5.3:1 on paper (4.7:1 on sand); teal 5.6:1; muted text 6.4:1. The pastels
   (pink, aqua, lilac, lemon, peach) are fills for drawings and panels only, never text colours. */
:root {
  --paper: #FCF6EC;
  --ink: #241F45;        /* desert-night indigo: all type and line work */
  --deep: #1A1634;
  --brick: #B8246A;      /* hot pink, deepened for small text: the pen, kickers, highlights */
  --brick-deep: #9A1C58;
  --blue: #0F6E6A;       /* neon teal, deepened for labels and links */
  --sky: #F1ECF7;        /* desert dawn lilac */
  --sky-2: #9FDCD6;      /* pool and fountain water */
  --mist: #F7F3F9;
  --stone: #F3E3C6;      /* desert sand */
  --brass: #F2B533;      /* marquee gold: icons and display accents only */
  --crust: #C45E3A;      /* Red Rock sandstone */
  --sage: #5F7F45;       /* Joshua-tree green */
  --mut: #57536E;
  --line: #EADCC6;
  /* the accent set the shared drawings use: neon pink, neon aqua, sage, marquee gold, lilac dusk, sunset peach */
  --pink: #F7A1C6; --aqua: #8EE0D8; --mint: #D6E6C8; --lemon: #F8D77C; --lilac: #D9CDEE; --peach: #F7B48E;
  --neon: #EC4E92;       /* the bright tube colour, for glows on dark panels only */
  --display: 'Righteous', 'Bungee', 'Arial Rounded MT Bold', sans-serif;
  --serif: 'Fraunces', Georgia, serif;
  --accent: 'Yellowtail', 'Pacifico', cursive;
  --hand: 'Yellowtail', 'Pacifico', cursive;
  --marquee: 'Monoton', 'Righteous', sans-serif;
  --d-w: 400; --d-ls: 0.01em; --d-tt: none; --d-k: 0.96; --d-lh: 1.04; --a-style: normal; --a-k: 1; --a-ls: 0; --a-w: 400;
}
/* a dusk wash behind the hero: lilac at the top through sunset peach into the paper */
.hero { background: linear-gradient(180deg, color-mix(in srgb, var(--lilac) 40%, var(--paper)) 0%, color-mix(in srgb, var(--peach) 22%, var(--paper)) 36%, var(--paper) 68%); }
.mapsec.on-dark { background: linear-gradient(180deg, var(--deep), #2E2858); }
@media (min-width: 761px) { .hero-h .l1 { font-size: clamp(2.8rem, 5.8vw, 6rem); letter-spacing: 0.01em; } }
.hero-h .l2 { margin-top: 0.08em; }
@media (max-width: 760px) { .hero-h .l1 { font-size: 10.6vw; padding-right: 28vw; } .hero-h .l2 { font-size: 7.4vw; white-space: normal; padding-right: 28vw; } .hero-h .l2 svg { display: none; } }
@media (min-width: 761px) { .hero-h .l2 { font-size: clamp(1.5rem, 0.7rem + 2.9vw, 3.3rem); } }
.d em, h1 em, h2 em, h3 em { text-transform: none; font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
.hero-h .l1 em { text-transform: var(--d-tt); color: var(--ink); font-family: var(--display); font-style: normal; font-weight: 400; }
.foot .big { white-space: nowrap; font-size: min(8vw, 6.2rem); }
.block.c-navy .note, .block.c-navy .lab, .on-dark .hand, .on-dark .kick { color: var(--lemon); }
.block.c-brick .note { color: var(--paper); } .on-dark .trip .hand { color: var(--lemon); }
:root { --star: #B8246A; }
.seal .disc { fill: var(--brick); } .seal text { fill: var(--paper); font-family: var(--marquee); letter-spacing: 0.04em; }
.lockup i, .lockup .mark, .hero-h em, .hero-h .l2, .phero h1 em, .sec-head h2 em, h1 em, h2 em, .es-mid h1 em { color: var(--star); }
.hero-h .l2 svg path, .lockup .mark svg { color: var(--star); fill: currentColor; }
.pin-tag .hand { color: var(--ink); }
/* Monoton is a tiny-accent face: the small kicker over a section head, never longer than a word or two */
.kick.neon, .sec-head .kick { font-family: var(--marquee); font-weight: 400; letter-spacing: 0.06em; font-size: 0.82em; }
/* on dark panels the pen glows a little, like tube light */
.on-dark .hand, .mapsec.on-dark .big { text-shadow: 0 0 10px color-mix(in srgb, var(--neon) 55%, transparent); }

/* Las Vegas drawings run wide and low (the Strip, motels, the monorail): give them width on the posters */
.poster.block.small .art { top: 40px; height: calc(60% - 40px); padding-top: 0; display: flex; align-items: center; justify-content: center; }
.poster.block .art .spread { inset: 50px 22px 6px; }
.poster.block:not(.small) .art { padding-top: 48px; }
.poster.block.small .art .ico { height: 100%; max-height: 100%; width: auto; }
.poster.block.wide .art .ico { max-height: 130px; }
.poster.block.wide .art { flex: 0 0 auto; height: 52%; }
.street { height: max(160px, 25.4vw); }
/* Righteous is wide: keep district names clear of the poster beside them */
main .dhero h1.d { font-size: clamp(2.1rem, 4.6vw, 4.4rem); }
main .dhero h1.d.long { font-size: clamp(1.8rem, 3.8vw, 3.6rem); }
/* Yellowtail runs narrow and tall: a touch larger than LA's pen keeps the street line legible */
main .dhero .pen { font-size: clamp(1.35rem, 0.8rem + 1.9vw, 2.4rem); }