/* 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; }
.foot .credit { opacity: 0.7; }
.foot .credit a { color: inherit; text-decoration: none; }
.foot .credit a:hover { text-decoration: underline; }


/* ---------- 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; }
.ph:has(> .gcover) { position: relative; overflow: hidden; }
.hguide .gcover { position: relative; inset: auto; width: 112px; height: 84px; border-radius: 6px; overflow: hidden; flex: none; }
@media (max-width: 480px) { .hguide .gcover { width: 88px; height: 66px; } }
.gcover.holi { background: #1E4A3A; } .gcover.holi svg.hx { width: 100%; height: 100%; overflow: hidden; }
.hx .hx-plaque { font-family: var(--body, system-ui); font-weight: 800; letter-spacing: .06em; } .hx .hx-tag { font-family: var(--hand); }
.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); }

/* print: no navigation chrome, the site's name on every sheet */
.print-brand { display: none; }
@media print {
  @page { margin: 16mm 12mm 18mm; }
  .print-brand { display: flex; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; padding: 5px 0 0; border-top: 1px solid #14213F; background: #fff; color: #14213F; font: 600 9pt/1.2 Archivo, Arial, sans-serif; }
  .skip, .burger, .find, .svbtn, .shbtn, .nav, .mail, .smap, .menu { display: none !important; }
  .top { position: static !important; box-shadow: none !important; }
}

/* the edits: tiles, the edit page */
.etiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.etiles.row { margin: 14px 0 26px; }
.etile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 20px; border-radius: var(--r); background: var(--paper); border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .25s, border-color .25s; }
.etile:hover { transform: translateY(-4px) rotate(-.4deg); border-color: var(--ink); }
.etile-art { position: relative; height: 150px; margin-bottom: 8px; background: var(--sky); border-radius: calc(var(--r) - 4px); overflow: hidden; }
.etile-art > img, .etile-art picture, .etile-art picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.etile-art.has-ph span { width: 58px; height: 58px; top: auto; bottom: 6px; } .etile-art.has-ph .et0 { left: 8px; width: 66px; height: 66px; } .etile-art.has-ph .et1 { left: 66px; } .etile-art.has-ph .et2 { display: none; }
.etile-art .eph { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.etile-art span { position: absolute; width: 70px; height: 70px; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.12)); } .etile-art .ico { width: 100%; height: 100%; }
.etile-art .et0 { left: 6%; top: 18px; transform: rotate(-10deg); width: 80px; height: 80px; } .etile-art .et1 { left: 40%; top: 26px; transform: rotate(6deg); } .etile-art .et2 { left: 68%; top: 12px; transform: rotate(-4deg); }
.etile-art .etb { right: 6px; bottom: 4px; width: 40px; height: 40px; opacity: .9; }
.etile .lab { color: var(--brick); } .etile b { font-size: 1.45rem; line-height: 1.1; } .etile .go { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: .92rem; }

/* "Gift guide pick" badge (store cards, shop pages): the product or shop is in one of our gift guides */
.pc-badge{display:inline-flex;align-self:flex-start;width:max-content;align-items:center;gap:.4em;margin:0 0 .55rem;padding:.3em .65em .3em .45em;border:1.5px solid var(--ink);border-radius:4px;background:#F3EADB;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;line-height:1}
.pc-badge span{display:inline-grid;width:1.35em;height:1.35em}
.pc-badge span svg{width:100%;height:100%}
.pc-badge:hover{background:#fff}

/* New Orleans: the same site, retinted. Loaded after site.css, so only the tokens and a few city touches change.
   Wrought-iron plum ink on a warm Creole-plaster cream, Carnival purple as the pen, shutter green for labels and links,
   Carnival gold for the icons, Creole cottage pastels (salmon, ochre, blue, mint) in the drawings and the brown river.
   Headlines in Ultra, the heavy slab of old riverboat and jazz-hall bills; the pen is Parisienne, a French script for
   the old French town; Poiret One (a thin Art Deco face) only for tiny accents such as kickers and the seal, never body
   or headlines. (Load them in FONTS in city.mjs:
   ['Ultra', 'Parisienne', 'Poiret+One', '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 on the paper: ink 14.2:1, the purple pen 9.4:1, shutter green 7.6:1, muted text 6.2:1. The pastels and the
   river and gold are fills for drawings and panels only, never text colours. */
:root {
  --paper: #FAF5EC;      /* Creole plaster cream */
  --ink: #2A2430;        /* wrought-iron plum: all type and line work */
  --deep: #1E1924;
  --brick: #5B2D82;      /* Carnival purple: the pen, kickers, highlights */
  --brick-deep: #43205F;
  --blue: #1F6B4A;       /* shutter green: labels and links */
  --sky: #F4E8DA;        /* warm afternoon sky */
  --sky-2: #A9C8DC;      /* window glass and water in the drawings */
  --river: #B9B48A;      /* the brown Mississippi on the maps */
  --mist: #F6F0E6;
  --stone: #EEE2CF;      /* banquette and plaster */
  --brass: #E2B13C;      /* Carnival gold: icons and display accents only */
  --crust: #C8352E;      /* crawfish red, for drawings */
  --sage: #5E8A48;       /* live-oak green */
  --mut: #5A5560;
  --line: #E6DCCD;
  /* the accent set the shared drawings use: Creole salmon, mint, oak green, ochre, lilac, peach */
  --pink: #EDB3A6; --aqua: #A9D3C8; --mint: #D3E6CC; --lemon: #F2D98A; --lilac: #CFC0E2; --peach: #F4C29C;
  --fog: #E2D6C6;
  --display: 'Ultra', 'Rockwell Extra Bold', Georgia, serif;
  --serif: 'Fraunces', Georgia, serif;
  --accent: 'Parisienne', 'Brush Script MT', cursive;
  --hand: 'Parisienne', 'Brush Script MT', cursive;
  --deco: 'Poiret One', 'Ultra', serif;
  --d-w: 400; --d-ls: 0.01em; --d-tt: none; --d-k: 0.9; --d-lh: 1.06; --a-style: normal; --a-k: 1.08; --a-ls: 0; --a-w: 400;
}
/* a late-afternoon wash behind the hero: warm sky at the top into the plaster cream */
.hero { background: linear-gradient(180deg, color-mix(in srgb, var(--peach) 34%, var(--paper)) 0%, color-mix(in srgb, var(--sky) 80%, var(--paper)) 34%, color-mix(in srgb, var(--lilac) 12%, var(--paper)) 56%, var(--paper) 76%); }
.mapsec.on-dark { background: linear-gradient(180deg, var(--deep), #2E2440); }
@media (min-width: 761px) { .hero-h .l1 { font-size: clamp(2.6rem, 5.2vw, 5.4rem); letter-spacing: 0.01em; } }
.hero-h .l2 { margin-top: 0.08em; }
@media (max-width: 760px) { .hero-h .l1 { font-size: 9.6vw; padding-right: 28vw; } .hero-h .l2 { font-size: 7.6vw; white-space: normal; padding-right: 28vw; } .hero-h .l2 svg { display: none; } }
@media (min-width: 761px) { .hero-h .l2 { font-size: clamp(1.7rem, 0.9rem + 3vw, 3.5rem); } }
.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, 6rem); }
.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(--peach); }
:root { --star: #5B2D82; }
.seal .disc { fill: var(--brick); } .seal text { fill: var(--brass); font-family: var(--deco); font-weight: 700; letter-spacing: 0.06em; }
.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); }
/* Poiret One is a tiny-accent face: the small kicker over a section head, never longer than a word or two */
.kick.deco, .sec-head .kick { font-family: var(--deco); font-weight: 700; letter-spacing: 0.08em; font-size: 0.9em; }
/* the cast-iron touch: a thin dotted rule under section heads, like the lace on a gallery railing */
.sec-head h2 { text-decoration: underline dotted color-mix(in srgb, var(--brass) 80%, var(--brick)); text-decoration-thickness: 2px; text-underline-offset: 0.24em; }

/* New Orleans drawings run tall (spires, galleries, oaks): give them height on the posters */
.poster.block.small .art { top: 40px; height: calc(62% - 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: 44px; }
.poster.block.small .art .ico { height: 100%; max-height: 100%; width: auto; }
.poster.block.wide .art .ico { max-height: 136px; }
.poster.block.wide .art { flex: 0 0 auto; height: 52%; }
.street { height: max(160px, 25.4vw); }
/* Ultra is heavy and wide: keep district names clear of the poster beside them */
main .dhero h1.d { font-size: clamp(1.9rem, 4.1vw, 3.9rem); }
main .dhero h1.d.long { font-size: clamp(1.6rem, 3.4vw, 3.2rem); }
/* Parisienne runs small for its size: a touch larger keeps the street line legible */
main .dhero .pen { font-size: clamp(1.5rem, 0.9rem + 2vw, 2.6rem); }