/*
Theme Name: Hey Master
Theme URI: https://heymaster.ca
Author: Hey Master
Description: A city publication theme — news, culture, food, events, and a local business directory.
Version: 1.0.24
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hey-master
*/

/* ─── RESET & VARIABLES ─────────────────────────────────────────────────── */
/* Google Fonts are now loaded via wp_enqueue_style in functions.php (with
 * preconnect hints). They previously lived here as a CSS font import, which was
 * a render-blocking 3rd hop the browser could not discover until this 146KB
 * sheet had downloaded and parsed. */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --black: #0d0d0d;
  --white: #fafaf8;
  --red: #e8341c;
  --amber: #f59e0b;
  --grey-bg: #f0efed;
  --grey-mid: #c8c6c2;
  --grey-text: #6b6863;
  --border: rgba(0,0,0,0.07);
  --shadow: 0 24px 64px rgba(0,0,0,0.11), 0 4px 16px rgba(0,0,0,0.05);
  --green: #0f7b55;
  --purple: #8b5cf6;
  --blue: #0891b2;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Category accents. A child re-brands by re-pointing these — PHP prints them
     as var(--accent-<token>, #hex) via hm_accent_var(), and tints them with
     hm_tint()'s color-mix(), so both the solid and the translucent forms follow
     the re-point. Keep in lockstep with hm_accent_tokens() in functions.php. */
  --accent-news: #e8341c;
  --accent-culture: #8b5cf6;
  --accent-food: #f59e0b;
  --accent-thingstodo: #16a34a;
  --accent-lifestyle: #0891b2;
  --accent-travel: #2563eb;
  --accent-bestof: #db2777;

  /* Type — a child rebrands by re-pointing these three, no parent edit needed */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-serif: 'DM Serif Display', serif;

  /* Error/validation semantics — deliberately NOT the brand token. A child that
     re-points --red must not turn its form errors into the brand colour. */
  --danger: #e8341c;

  /* Offset for every sticky sidebar/rail, keyed to the sticky masthead height.
     Desktop masthead = .main-nav 62px + 1px border + .nav-editorial 50px + 1px
     border = 114px, plus 16px breathing room. The editorial row no longer
     collapses on scroll, so this must clear the FULL two-row header — a bare
     80px (the old value, tuned to the collapsed 63px header) tucks sidebars
     under it. Re-pointed to the mobile header's height below 1280px. */
  --hm-sticky-top: 130px;
}

/* min-height, NOT height. `height:100%` pins body's box to the VIEWPORT, which
   truncates the containing block of the sticky masthead — .header-wrap then
   detached and scrolled away at scrollY ≈ 788 on every page (it only looked
   fine on pages too short to reach that point). min-height keeps the
   full-height background this was for while letting body grow to the document,
   so the masthead stays pinned for the whole page. */
html, body { min-height:100%; }
html { scrollbar-gutter:stable; }
body {
  background: var(--white);
  font-family:var(--font-body);
  color: var(--black);
}

a { text-decoration:none; color:inherit; }
button { font-family:var(--font-body); }
img { max-width:100%; height:auto; display:block; }

@keyframes blink {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.4; transform:scale(.7); }
}

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#c8c6c2; border-radius:3px; }

.screen-reader-text {
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0;
  position:absolute; width:1px; word-wrap:normal;
}

/* ─── PAGE CONTAINER ─────────────────────────────────────────────────────── */
.wrap {
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:32px;
  padding-right:32px;
}
@media (max-width:639px) {
  .wrap { padding-left:16px; padding-right:16px; }
}

/* ─── TOP BAR ────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--black);
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: max(16px, calc((100vw - 1200px) / 2));
}
.tb-left { display:flex; align-items:center; gap:14px; }
.tb-chip {
  font-size:10px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:#888;
}
.tb-chip em { color:var(--red); font-style:normal; margin-right:5px; }
.tb-sep { width:1px; height:12px; background:#2e2e2e; }
.tb-right { display:flex; gap:16px; }
.tb-link {
  font-size:10px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:#666; transition:color .15s;
}
.tb-link:hover { color:var(--white); }

/* ─── MAIN NAV ───────────────────────────────────────────────────────────── */
.header-wrap {
  position:sticky; top:0; z-index:1000;
  background:var(--white); transition:box-shadow .25s;
}
.header-wrap.scrolled {
  box-shadow:0 1px 0 rgba(0,0,0,0.07), 0 6px 24px rgba(0,0,0,0.06);
}
.main-nav {
  height:62px; display:flex; align-items:center;
  padding-block:0; padding-inline:max(16px, calc((100vw - 1200px) / 2));
  border-bottom:1px solid var(--border);
  position:relative; z-index:1000;
}
.logo {
  display:flex; align-items:baseline; gap:3px;
  flex-shrink:0; cursor:pointer; text-decoration:none;
}
.logo-hey {
  font-family:var(--font-serif); font-style:italic;
  font-size:26px; color:var(--red); line-height:1;
}
.logo-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--red); margin:0 1px 5px; flex-shrink:0;
}
.logo-city {
  font-family:var(--font-display); font-size:29px;
  color:var(--black); line-height:1; letter-spacing:.03em;
}
.nav-list {
  display:flex; align-items:center; gap:1px;
  margin-left:22px; list-style:none;
}
.nav-btn {
  font-size:12.5px; font-weight:600; color:var(--black);
  background:none; border:none; padding:7px 10px;
  cursor:pointer; border-radius:7px;
  display:flex; align-items:center; gap:4px;
  transition:background .14s, color .14s; white-space:nowrap;
}
.nav-btn:hover,
.nav-btn.is-open,
.nav-btn.is-active { background:var(--grey-bg); color:var(--red); }
/* Wayfinding glyph on the Events / Directory triggers. Inherits the button's
   colour via stroke="currentColor", so the accents below drive it and a child
   that re-points --red/--green needs no icon override. */
.nav-btn__ico { flex:none; display:block; margin-right:2px; }
.nav-btn.is-events { color:var(--red); }
.nav-btn.is-events:hover,
.nav-btn.is-events.is-open { background:#fef2f0; }
.nav-btn.is-dir { color:var(--green); }
.nav-btn.is-dir:hover,
.nav-btn.is-dir.is-open { background:#edf7f3; color:var(--green); }
.nav-chevron {
  font-size:8px; opacity:.45;
  transition:transform .18s, opacity .18s;
}
.nav-btn.is-open .nav-chevron { transform:rotate(180deg); opacity:.9; }
.nav-sep {
  width:1px; height:18px; background:var(--grey-mid);
  margin:0 5px; opacity:.5; flex-shrink:0;
}
.nav-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.btn-icon {
  width:34px; height:34px; border-radius:50%; border:none;
  background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--black); transition:background .14s;
}
.btn-icon:hover { background:var(--grey-bg); }
.btn-trending {
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; background:var(--grey-bg);
  border:none; padding:7px 13px; border-radius:100px;
  cursor:pointer; transition:background .14s, color .14s;
  white-space:nowrap; color:var(--black);
}
.btn-trending:hover,
.btn-trending-active { background:var(--black) !important; color:#fff !important; }
.btn-trending-active .trend-dot { background:#fff; }
.trend-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--red); animation:blink 1.8s ease-in-out infinite;
}
.btn-sub {
  font-size:12px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--white);
  background:var(--black); border:none;
  padding:9px 17px; border-radius:100px;
  cursor:pointer; transition:background .14s, transform .1s;
}
.btn-sub:hover { background:var(--red); transform:translateY(-1px); }

/* ─── TWO-ROW MASTHEAD: utility row (row 1) + editorial row (row 2) ───────── */
/* Row 1: logo stays left; this cluster (utility dropdowns + actions) sits right */
.nav-utility-right { display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav-utility-right .nav-list { margin-left:0; }
.nav-utility-right .nav-actions { margin-left:4px; }

/* Row 2: the 7 editorial roots — treatment B (centered, accent dots).
   Always visible: it rides the sticky .header-wrap at every scroll position. */
.nav-editorial {
  position:relative; z-index:1000; background:var(--white);
  display:flex; align-items:center; justify-content:center;
  height:50px; padding-inline:max(16px, calc((100vw - 1200px) / 2));
  border-bottom:1px solid var(--border);
  overflow:hidden; visibility:visible;
}
.ed-list {
  display:flex; align-items:center; justify-content:center; gap:9px;
  list-style:none; margin:0; padding:0; max-width:1200px; flex-wrap:nowrap;
}
.ed-list > li { display:flex; }
.nav-btn.ed-root {
  font-size:13px; font-weight:600; color:var(--black);
  background:none; border:none; padding:0 12px; height:38px;
  border-radius:9px; display:inline-flex; align-items:center; gap:8px;
  cursor:pointer; white-space:nowrap; transition:background .14s, color .14s;
}
.ed-root .ed-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--ac, var(--red)); flex-shrink:0; transition:transform .15s;
}
.nav-btn.ed-root:hover { color:var(--ac); background:transparent; }
.nav-btn.ed-root:hover .ed-dot { transform:scale(1.35); }
.nav-btn.ed-root.is-open,
.nav-btn.ed-root.is-active { color:var(--ac); background:color-mix(in srgb, var(--ac) 11%, transparent); }
.nav-btn.ed-root.is-open .ed-dot,
.nav-btn.ed-root.is-active .ed-dot { transform:scale(1.35); }

/* ─── MEGA SHELL ─────────────────────────────────────────────────────────── */
.mega-shell {
  position:absolute; top:calc(100% + 1px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--white); border:1px solid rgba(0,0,0,0.09);
  border-radius:18px; box-shadow:var(--shadow); z-index:1001;
  overflow:hidden; opacity:0; pointer-events:none;
  transition:opacity .17s ease, transform .17s ease;
}
.mega-shell.editorial { width:min(820px, 97vw); }
.mega-shell.wide { width:min(1020px, 97vw); }
.mega-shell.dir { width:min(720px, 97vw); }
.mega-shell.open {
  opacity:1; transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.nav-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.16);
  z-index:999; opacity:0; pointer-events:none; transition:opacity .2s;
}
.nav-backdrop.show { opacity:1; pointer-events:auto; }

/* ─── SEARCH OVERLAY ─────────────────────────────────────────────────────── */
.so-backdrop {
  position:fixed; inset:0; background:rgba(10,10,10,0.55);
  backdrop-filter:blur(3px); z-index:1100; opacity:0;
  pointer-events:none; transition:opacity .22s ease;
}
.so-backdrop.so-open { opacity:1; pointer-events:auto; }
.so-panel {
  position:fixed; top:0; left:0; right:0; z-index:1101;
  background:var(--white); box-shadow:0 8px 40px rgba(0,0,0,0.18);
  transform:translateY(-100%); opacity:0;
  transition:transform .26s cubic-bezier(0.22,1,0.36,1), opacity .2s ease;
  max-height:85vh; overflow-y:auto;
}
.so-panel.so-open { transform:translateY(0); opacity:1; }
.so-bar-row {
  display:flex; align-items:center; gap:14px;
  padding:18px 32px; border-bottom:1px solid var(--border);
  background:var(--white); position:sticky; top:0; z-index:1;
}
.so-bar {
  flex:1; display:flex; align-items:center; gap:12px;
  background:var(--grey-bg); border-radius:12px;
  padding:0 6px 0 18px; border:1.5px solid transparent;
  transition:border-color .15s, background .15s;
}
.so-bar:focus-within {
  background:var(--white); border-color:var(--red);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 8%, transparent);
}
.so-bar-icon { color:var(--grey-text); flex-shrink:0; }
.so-input {
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-size:17px;
  color:var(--black); padding:14px 0;
}
.so-input::placeholder { color:var(--grey-text); }
.so-clear {
  width:28px; height:28px; border-radius:50%; border:none;
  background:var(--grey-mid); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--white); transition:background .13s;
}
.so-clear:hover { background:#aaa; }
.so-close-btn {
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--grey-text);
  background:none; border:1px solid var(--grey-mid);
  padding:7px 12px; border-radius:8px; cursor:pointer;
  transition:border-color .13s, color .13s; white-space:nowrap;
}
.so-close-btn:hover { border-color:var(--black); color:var(--black); }
.so-body { padding:28px 32px 36px; }
.so-default { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.so-section-title {
  font-size:10px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--grey-text); margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.so-clear-all {
  font-size:10px; font-weight:600; color:var(--grey-text);
  background:none; border:none; cursor:pointer;
  letter-spacing:.08em; text-transform:uppercase; transition:color .13s;
}
.so-clear-all:hover { color:var(--red); }
.so-trending-list { list-style:none; display:flex; flex-direction:column; gap:2px; }
.so-trending-item {
  display:flex; align-items:center; gap:12px; width:100%;
  background:none; border:none; cursor:pointer;
  padding:9px 10px; border-radius:9px; text-align:left;
  transition:background .12s;
}
.so-trending-item:hover { background:var(--grey-bg); }
.so-trending-rank { font-size:11px; font-weight:700; color:var(--grey-mid); min-width:16px; }
.so-trending-text { flex:1; font-size:14px; color:var(--black); }
.so-trending-arrow {
  color:var(--grey-mid); flex-shrink:0; opacity:0; transition:opacity .12s;
}
.so-trending-item:hover .so-trending-arrow { opacity:1; }
.so-recent-chips { display:flex; flex-wrap:wrap; gap:7px; }
.so-recent-chip {
  display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--black);
  background:var(--grey-bg); border:none;
  border-radius:100px; padding:6px 13px;
  cursor:pointer; transition:background .13s;
}
.so-recent-chip:hover { background:#e4e3e0; }
.so-browse-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.so-browse-tile {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:14px 8px 12px; border-radius:11px;
  border:1px solid var(--border); background:var(--white);
  cursor:pointer; transition:border-color .13s, background .13s, transform .12s;
  --tile-color:var(--red);
}
.so-browse-tile:hover {
  border-color:var(--tile-color); background:var(--white);
  transform:translateY(-2px);
}
.so-browse-icon { font-size:22px; line-height:1; }
.so-browse-label { font-size:11.5px; font-weight:600; color:var(--black); }
.so-tabs {
  display:flex; align-items:center; gap:4px;
  margin-bottom:20px; border-bottom:1px solid var(--border);
}
.so-tab {
  display:flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--grey-text);
  background:none; border:none; padding:10px 14px 13px;
  cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color .14s, border-color .14s;
}
.so-tab:hover { color:var(--black); }
.so-tab-active { color:var(--black); border-bottom-color:var(--red); }
.so-tab-count {
  font-size:10.5px; font-weight:700; background:var(--grey-bg);
  color:var(--grey-text); border-radius:100px; padding:2px 7px;
}
.so-tab-active .so-tab-count { background:var(--red); color:var(--white); }
.so-tabs-meta { margin-left:auto; font-size:12px; color:var(--grey-text); }
.so-tabs-meta em { font-style:normal; color:var(--black); font-weight:500; }
.so-articles { display:flex; flex-direction:column; gap:4px; }
.so-article-row {
  display:flex; align-items:center; gap:14px;
  padding:10px 12px; border-radius:10px;
  transition:background .12s; cursor:pointer;
}
.so-article-row:hover { background:var(--grey-bg); }
.so-article-thumb {
  width:56px; height:56px; border-radius:9px;
  flex-shrink:0; position:relative; overflow:hidden;
}
.so-article-info { flex:1; }
.so-article-label {
  display:inline-block; font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:100px; padding:2px 7px; margin-bottom:5px;
}
.so-article-title {
  font-size:14px; font-weight:500; color:var(--black);
  line-height:1.38; margin-bottom:5px;
}
.so-article-meta {
  font-size:11.5px; color:var(--grey-text);
  display:flex; align-items:center; gap:5px;
}
.so-article-cat { color:var(--black); font-weight:500; }
.so-meta-dot { color:var(--grey-mid); font-size:10px; }
.so-businesses { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.so-biz-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px;
  border:1px solid var(--border); background:var(--white);
  transition:box-shadow .13s, border-color .13s; cursor:pointer;
}
.so-biz-row:hover { box-shadow:0 3px 12px rgba(0,0,0,0.07); border-color:var(--grey-mid); }
.so-biz-avatar {
  width:38px; height:38px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,#dff2eb,#b0d9c9);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:var(--green);
  border:1px solid color-mix(in srgb, var(--green) 14%, transparent);
}
.so-biz-info { flex:1; }
.so-biz-name { font-size:13.5px; font-weight:500; color:var(--black); }
.so-biz-meta {
  font-size:11.5px; color:var(--grey-text);
  margin-top:2px; display:flex; gap:5px;
}
.so-biz-badge {
  font-size:9px; font-weight:700; color:#92400e;
  background:#fef3c7; border:1px solid #fcd34d;
  border-radius:100px; padding:2px 7px;
  white-space:nowrap; flex-shrink:0;
}
.so-all-results {
  display:block; margin-top:14px; font-size:13px;
  font-weight:600; color:var(--red);
  padding:10px 12px; border-radius:9px; transition:background .12s;
}
.so-all-results:hover { background:var(--grey-bg); }

/* ─── SHARED MEGA COMPONENTS ────────────────────────────────────────────── */
.mm-col-title {
  font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey-text); margin-bottom:12px;
}
.mm-post-label {
  display:inline-block; font-size:9.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:100px; padding:2px 8px; margin-bottom:7px;
}
.mm-post-meta { display:flex; align-items:center; gap:5px; }
.mm-meta-text { font-size:11.5px; color:var(--grey-text); }
.mm-meta-dot { font-size:10px; color:var(--grey-mid); }
.mm-footer {
  background:var(--grey-bg); padding:11px 24px;
  display:flex; align-items:center; gap:8px;
  border-top:1px solid var(--border);
}
.mm-footer-label { font-size:11px; font-weight:500; color:var(--grey-text); margin-right:2px; }
.mm-tag {
  font-size:11.5px; font-weight:500; color:var(--black);
  background:var(--white); border:1px solid var(--grey-mid);
  border-radius:100px; padding:3px 11px; cursor:pointer;
  transition:border-color .14s, color .14s;
}
.mm-tag:hover { border-color:var(--red); color:var(--red); }

/* ─── EDITORIAL MEGA ────────────────────────────────────────────────────── */
.mm-ed {
  display:grid;
  grid-template-columns:210px 1fr 1fr;
  grid-template-rows:auto auto;
  grid-template-areas:"nav hero recents" "footer footer footer";
}
.mm-ed-nav {
  grid-area:nav; padding:24px 20px 24px 24px;
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; background:#f8f7f5;
}
.mm-subs { list-style:none; display:flex; flex-direction:column; gap:1px; flex:1; }
.mm-sub-link {
  display:block; font-size:13.5px; color:var(--black);
  padding:6px 10px; border-radius:7px;
  transition:background .12s, color .12s, padding-left .12s;
}
.mm-sub-link:hover { background:var(--white); color:var(--red); padding-left:14px; }
.mm-view-all {
  display:block; margin-top:16px; padding:10px 14px;
  border-radius:9px; font-size:12.5px; font-weight:700;
  color:var(--white); text-align:center;
  transition:opacity .15s, transform .1s;
}
.mm-view-all:hover { opacity:.87; transform:translateY(-1px); }
.mm-ed-hero-col {
  grid-area:hero; padding:24px 18px 24px 22px;
  border-right:1px solid var(--border);
}
.mm-hero-card {
  display:block; border-radius:12px;
  border:1px solid var(--border); overflow:hidden; margin-top:12px;
  background:var(--white);
  transition:box-shadow .15s, border-color .15s;
}
.mm-hero-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.08); border-color:var(--grey-mid); }
/* W2-B: was an inline style on the wrapper + an inline `style` attr passed to
   get_the_post_thumbnail(). The CDN branch builds its own <img>, so the crop has
   to live in CSS for both branches to look the same. */
.mm-hero-thumb { aspect-ratio:3/2; overflow:hidden; position:relative; }
.mm-hero-thumb img { width:100%; height:100%; object-fit:cover; }
.mm-hero-body { padding:12px 14px 14px; }
.mm-hero-title-ed {
  font-family:var(--font-serif); font-size:15.5px;
  line-height:1.4; color:var(--black); margin-bottom:10px;
  display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden;
}
.mm-ed-recents-col { grid-area:recents; padding:24px 22px 24px 18px; }
.mm-recents { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.mm-compact-card {
  display:flex; gap:11px; align-items:flex-start;
  padding:9px 10px; border-radius:9px;
  transition:background .12s; cursor:pointer;
}
.mm-compact-card:hover { background:var(--grey-bg); }
/* W2-B: same move for the 48px compact-row thumb. The class is also applied to the
   no-image placeholder div, which used to repeat the same four inline properties. */
.mm-compact-thumb { width:48px; height:48px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.mm-compact-thumb img { width:100%; height:100%; object-fit:cover; }
.mm-compact-body { flex:1; }
.mm-compact-title {
  font-size:13px; font-weight:500; color:var(--black);
  line-height:1.38; margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden;
}

/* ─── NEIGHBOURHOODS MEGA ────────────────────────────────────────────────── */
.mm-hoods { display:grid; grid-template-columns:1fr 300px; }
.mega-shell.no-spotlight .mm-hoods { grid-template-columns:1fr; }
.mega-shell.no-spotlight { width:min(760px, 97vw); }
.mm-hoods-left { padding:24px 28px; }
.mm-hoods-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.mm-hoods-all { font-size:12px; font-weight:600; color:var(--red); }
.mm-hoods-all:hover { text-decoration:underline; }
.mm-zones { display:flex; flex-direction:column; gap:16px; }
.mm-zone {
  border-radius:10px; padding:12px 14px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.025);
  transition:border-color .15s, background .15s;
}
.mm-zone:hover,
.mm-zone-active { background:rgba(0,0,0,0.05); }
.mm-zone-name {
  display:flex; align-items:center; gap:8px;
  font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey-text); margin-bottom:10px;
}
.mm-zone-name-link { text-decoration:none; color:inherit; }
.mm-zone-name-link .mm-zone-label { color:var(--black); }
.mm-zone-name-link .mm-zone-viewall {
  margin-left:auto; padding-left:10px;
  font-size:10px; font-weight:600; letter-spacing:.05em;
  text-transform:none; color:var(--zone-color, var(--red));
  opacity:.85; transition:opacity .15s, transform .15s;
}
.mm-zone-name-link:hover .mm-zone-label { text-decoration:underline; }
.mm-zone-name-link:hover .mm-zone-viewall { opacity:1; transform:translateX(3px); }
.mm-zone-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--zone-color, var(--red)); flex-shrink:0;
}
.mm-zone-hoods { display:flex; flex-wrap:wrap; gap:6px; }
.mm-hood-pill {
  font-size:13px; color:var(--black); background:var(--white);
  border:1px solid var(--grey-mid); border-radius:100px;
  padding:4px 12px; display:flex; align-items:center; gap:6px;
  transition:border-color .13s, color .13s;
}
.mm-hood-pill:hover { border-color:var(--subzone-color, var(--zone-color, var(--red))); color:var(--subzone-color, var(--zone-color, var(--red))); }
.mm-subzone { display:flex; flex-direction:column; gap:6px; padding:6px 0 4px 8px; border-left:2px solid var(--subzone-color, var(--zone-color, var(--red))); margin-top:6px; }
.mm-subzone-name { display:flex; align-items:center; gap:6px; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grey-text); text-decoration:none; }
.mm-subzone-name:hover { color:var(--subzone-color, var(--zone-color, var(--red))); }
.mm-subzone-dot { width:7px; height:7px; border-radius:50%; background:var(--subzone-color, var(--zone-color, var(--red))); flex-shrink:0; }
.mm-subzone-hoods { display:flex; flex-wrap:wrap; gap:6px; }
.mm-hood-vibe {
  font-size:10.5px; color:var(--grey-text);
  border-left:1px solid var(--grey-mid);
  padding-left:6px; margin-left:2px;
}
.mm-hoods-right {
  background:var(--black); padding:28px 24px;
  display:flex; flex-direction:column;
}
.mm-spot-label {
  font-size:9px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin-bottom:14px;
}
.mm-spot-name {
  font-family:var(--font-display); font-size:38px;
  color:var(--white); line-height:1; margin-bottom:4px;
}
.mm-spot-tagline {
  font-family:var(--font-serif); font-style:italic;
  font-size:14px; color:rgba(255,255,255,.55); margin-bottom:16px;
}
.mm-spot-stats { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.mm-spot-stats span { font-size:12.5px; color:rgba(255,255,255,.7); }
.mm-spot-links { display:flex; flex-direction:column; gap:4px; }
.mm-spot-link {
  font-size:12.5px; font-weight:500; color:rgba(255,255,255,.6);
  display:flex; align-items:center; gap:6px; transition:color .14s;
}
.mm-spot-link::before { content:'→'; opacity:.4; }
.mm-spot-link:hover { color:var(--white); }
/* Contrasting CTA button below the arrow links — sends users to the
   spotlight neighbourhood's main archive page. The link target updates
   automatically whenever the spotlight rotates because it's built from
   $spotlight['url'] (resolved from the _is_spotlight=1 term). */
.mm-spot-cta {
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:14px; padding:11px 18px;
  background:#ffd76a; color:#0d0d0d;
  border-radius:8px;
  font-size:13px; font-weight:700; letter-spacing:.01em;
  text-decoration:none;
  transition:background .14s, transform .14s;
}
.mm-spot-cta:hover {
  background:#ffe28a;
  transform:translateY(-1px);
}
.mm-spot-footer {
  margin-top:auto; padding-top:20px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.mm-spot-footer .mm-footer-label { color:rgba(255,255,255,.4); }
.mm-spot-footer .mm-tag {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.65);
}
.mm-spot-footer .mm-tag:hover { border-color:var(--red); color:var(--white); }

/* ─── EVENTS MEGA ────────────────────────────────────────────────────────── */
.mm-events { display:grid; grid-template-columns:200px 1fr 188px; }
.mm-events-heroes { display:flex; flex-direction:column; border-right:1px solid var(--border); }
.mm-hero {
  flex:1; padding:22px 20px;
  display:flex; flex-direction:column; justify-content:space-between;
  cursor:pointer; transition:opacity .14s;
  position:relative; overflow:hidden;
}
.mm-hero:first-child { border-bottom:1px solid var(--border); }
.mm-hero-week { background:var(--black); }
.mm-hero-week::before {
  content:''; position:absolute; bottom:-30px; right:-30px;
  width:100px; height:100px; border-radius:50%;
  background:var(--red); opacity:.2;
}
.mm-hero-weekend { background:#1a1207; }
.mm-hero-weekend::before {
  content:''; position:absolute; bottom:-30px; right:-30px;
  width:100px; height:100px; border-radius:50%;
  background:var(--amber); opacity:.25;
}
.mm-hero:hover { opacity:.88; }
.mm-hero-eyebrow {
  font-size:8.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:8px;
}
.mm-hero-title-ev {
  font-family:var(--font-display); font-size:28px;
  letter-spacing:.02em; line-height:1.05;
}
.mm-hero-week .mm-hero-title-ev { color:var(--red); }
.mm-hero-weekend .mm-hero-title-ev { color:var(--amber); }
.mm-hero-sub { font-size:10px; color:rgba(255,255,255,.4); margin-top:8px; }
.mm-hero-arrow { font-size:18px; color:rgba(255,255,255,.3); margin-top:auto; padding-top:10px; }
.mm-events-upcoming { padding:22px 20px; border-right:1px solid var(--border); }
.mm-event-list { display:flex; flex-direction:column; gap:2px; margin-top:14px; margin-bottom:14px; }
.mm-event-row {
  display:flex; align-items:center; gap:12px;
  padding:8px 10px; border-radius:8px;
  transition:background .12s; cursor:pointer;
}
.mm-event-row:hover { background:var(--grey-bg); }
.mm-event-date {
  display:flex; flex-direction:column; align-items:center;
  min-width:34px; background:var(--grey-bg);
  border-radius:7px; padding:5px 6px; flex-shrink:0;
}
.mm-event-day { font-size:9px; font-weight:700; text-transform:uppercase; color:var(--grey-text); letter-spacing:.06em; }
.mm-event-num { font-size:17px; font-weight:700; color:var(--black); line-height:1.1; }
.mm-event-info { flex:1; }
.mm-event-name { font-size:13px; font-weight:500; color:var(--black); line-height:1.3; }
.mm-event-meta { font-size:11.5px; color:var(--grey-text); margin-top:1px; }
.mm-event-cat {
  font-size:10px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; border-radius:100px;
  padding:3px 8px; flex-shrink:0;
}
.mm-cal-link { font-size:12px; font-weight:600; color:var(--red); display:block; padding:4px 10px; }
.mm-cal-link:hover { text-decoration:underline; }
.mm-events-cats { padding:22px 16px; display:flex; flex-direction:column; }
.mm-cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:14px; }
.mm-cat-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9px 6px; border-radius:10px;
  border:1px solid var(--border); background:var(--white);
  cursor:pointer; transition:border-color .13s, background .13s;
}
.mm-cat-btn:hover { border-color:var(--grey-mid); background:var(--grey-bg); }
.mm-cat-icon { font-size:17px; line-height:1; }
.mm-cat-label { font-size:10px; font-weight:600; color:var(--grey-text); letter-spacing:.03em; }
.mm-events-footer { margin-top:auto; padding-top:12px; }
.mm-submit-event { font-size:11.5px; font-weight:600; color:var(--red); }
.mm-submit-event:hover { text-decoration:underline; }
/* Empty state for the Coming Up Soon column. Same vertical rhythm as
   .mm-event-list so the panel does not jump when events start landing. */
.mm-event-empty { font-size:12px; line-height:1.5; color:var(--grey-text); margin:14px 0; }

/* ─── DIRECTORY MEGA ─────────────────────────────────────────────────────── */
.mm-dir {
  display:grid; grid-template-columns:1fr 280px;
  min-height:0;
}

/* Left zone: common searches + categories */
.mm-dir-left {
  padding:20px 24px 16px;
  display:flex; flex-direction:column; gap:16px;
}

/* Common search shortcuts */
.mm-dir-quick {
  display:flex; gap:8px; flex-wrap:wrap;
}
.mm-dir-quick-link {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:10px;
  background:color-mix(in srgb, var(--q-color) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--q-color) 18%, transparent);
  text-decoration:none;
  transition:background .15s, border-color .15s, transform .12s;
}
.mm-dir-quick-link:hover {
  background:color-mix(in srgb, var(--q-color) 14%, transparent);
  border-color:color-mix(in srgb, var(--q-color) 35%, transparent);
  transform:translateY(-1px);
}
.mm-dir-quick-icon {
  font-size:16px; flex-shrink:0; line-height:1;
}
.mm-dir-quick-label {
  font-size:13.5px; font-weight:700; color:var(--q-color);
  letter-spacing:-.01em;
}

/* Category list */
.mm-dir-cats {
  flex:1;
}
.mm-dir-cats .mm-col-title {
  margin-bottom:8px;
}
.mm-dir-cat-list {
  display:flex; flex-direction:column; gap:1px;
}
.mm-dir-cat-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:10px;
  text-decoration:none;
  transition:background .12s;
  border-left:3px solid transparent;
}
.mm-dir-cat-row:hover {
  background:var(--grey-bg);
  border-left-color:var(--cat-color);
}
.mm-dir-cat-icon {
  font-size:17px; width:24px; text-align:center; flex-shrink:0;
}
.mm-dir-cat-label {
  font-size:13.5px; font-weight:600; color:var(--black); flex:1;
}
.mm-dir-cat-count {
  font-size:10.5px; color:var(--grey-text); flex-shrink:0;
  background:var(--grey-bg); border-radius:100px;
  padding:2px 8px; min-width:24px; text-align:center;
}
.mm-dir-cat-row:hover .mm-dir-cat-count {
  background:var(--white);
}
.mm-dir-cat-arrow {
  font-size:13px; color:var(--grey-text); flex-shrink:0;
  opacity:0; transition:opacity .12s, transform .12s;
}
.mm-dir-cat-row:hover .mm-dir-cat-arrow {
  opacity:1; transform:translateX(2px);
}

/* Footer link */
.mm-dir-footer {
  padding-top:4px;
  border-top:1px solid var(--border);
}
.mm-dir-explore {
  font-size:12.5px; font-weight:700; color:var(--green);
}
.mm-dir-explore:hover { text-decoration:underline; }

/* Right zone: featured card */
.mm-dir-right {
  border-left:1px solid var(--border);
  background:#fafaf8;
  display:flex;
}
.mm-dir-featured {
  display:flex; flex-direction:column;
  text-decoration:none; width:100%;
  transition:background .12s;
}
.mm-dir-featured:hover { background:var(--grey-bg); }
.mm-dir-featured-img {
  position:relative; aspect-ratio:4/3; overflow:hidden;
}
.mm-dir-featured-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s ease;
}
.mm-dir-featured:hover .mm-dir-featured-img img {
  transform:scale(1.03);
}
.mm-dir-featured-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.15) 0%, transparent 50%);
  pointer-events:none;
}
.mm-dir-featured-badge {
  position:absolute; top:10px; left:10px;
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em;
  color:#fff; background:color-mix(in srgb, var(--green) 88%, transparent);
  border-radius:6px; padding:4px 9px;
  backdrop-filter:blur(4px);
}
.mm-dir-featured-body {
  padding:14px 16px 16px;
  display:flex; flex-direction:column; gap:4px;
}
.mm-dir-featured-cat {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em;
}
.mm-dir-featured-name {
  font-size:16px; font-weight:700; color:var(--black);
  line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.mm-dir-featured-hood {
  font-size:11.5px; color:var(--grey-text); font-weight:500;
}

/* Empty state for featured card */
.mm-dir-featured-empty {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px 20px; text-align:center; flex:1;
}
.mm-dir-featured-empty-icon {
  font-size:28px; margin-bottom:8px;
}
.mm-dir-featured-empty-text {
  font-size:13px; font-weight:600; color:var(--grey-text);
  margin-bottom:6px;
}
.mm-dir-featured-empty-link {
  font-size:12px; font-weight:700; color:var(--green);
}
.mm-dir-featured-empty-link:hover { text-decoration:underline; }

/* ─── TRENDING FLYOUT ────────────────────────────────────────────────────── */
.trending-backdrop {
  position:fixed; inset:0; z-index:1200;
  background:rgba(10,10,10,0.3);
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.trending-backdrop.open { opacity:1; pointer-events:auto; }
.trending-panel {
  position:fixed; top:0; right:0; bottom:0;
  width:360px; z-index:1201;
  background:var(--white);
  box-shadow:-8px 0 40px rgba(0,0,0,0.12);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(0.22,1,0.36,1);
  display:flex; flex-direction:column; overflow-y:auto;
}
.trending-panel.open { transform:translateX(0); }
.trending-header {
  padding:24px 24px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; background:var(--white); z-index:1;
}
.trending-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 24px; text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.trending-item:hover { background:var(--grey-bg); }
.trending-rank {
  font-family:var(--font-display); font-size:28px;
  line-height:1; min-width:32px; margin-top:-2px;
}
.trending-rank.top3 { color:var(--red); }
.trending-rank.other { color:var(--grey-mid); }
.trending-footer {
  margin-top:auto; padding:16px 24px;
  border-top:1px solid var(--border); background:var(--grey-bg);
}

/* ─── ARTICLE CARDS ──────────────────────────────────────────────────────── */
/* The root of article-card.php is an <article>, not an <a> — the chips inside
   it are links and anchors cannot nest. Everything from `position` down exists
   to replace what the UA gave the card for free as an anchor.
   position:relative is MANDATORY and has to live here, in the parent: the
   title link's stretched ::after resolves against the nearest positioned
   ancestor, and not one of the wrappers the card sits in is positioned
   (.feed-grid, .feed-wrap, .cat-content, .cat-layout, .cat-article-grid,
   .hood-articles-grid, .hood-section, .idx-main, .idx-inner — all checked).
   Without it the ::after resolves against the initial containing block and
   covers the whole page. 30 of the 31 child themes will never learn about it.
   cursor:pointer likewise: there is no `cursor` declaration in this sheet,
   extra.css or any child sheet, so the pointer came entirely from the UA's
   a[href] rule and left with the anchor. */
.article-card {
  display:flex; flex-direction:column;
  border-radius:14px; border:1px solid var(--border);
  overflow:hidden; background:var(--white); text-decoration:none;
  transition:box-shadow .2s;
  position:relative; cursor:pointer;
}
/* Whole-card hit area. Scoped to the card and no narrower: the thumbnail is
   clickable today on every archive, the front page, both taxonomy templates
   and the AJAX load-more results.
   The ::after hangs off the inline link INSIDE .article-card__title rather
   than off the title box itself, because at mobile that box is
   `display:-webkit-box` with `-webkit-line-clamp:3` and `overflow:hidden` —
   an out-of-flow pseudo on a line-clamped element is engine-dependent, and an
   inline anchor inside it is the interoperable form. The title box is
   position:static, so the pseudo escapes its overflow and is clipped by the
   card. */
.article-card__title-link::after {
  content:''; position:absolute; inset:0;
}
.article-card:hover { box-shadow:0 8px 32px rgba(0,0,0,0.1); }
.article-card--wide { grid-column:span 2; }
.article-card__thumb {
  aspect-ratio:3/2; width:100%;
  position:relative; overflow:hidden; flex-shrink:0;
}
/* The featured image had NO sizing rule of its own on either card — it was laid
   out by the global `img{max-width:100%;height:auto}` reset alone, which sizes
   it from its OWN intrinsic ratio and never from this box. Every other thumb in
   the theme already carries the pair (.rail-related__thumb img,
   .dir-more-card__thumb img, .mm-hero-thumb img, .mm-dir-featured-img img);
   this one was the omission.
   On the DESKTOP card it was invisible: the box is 3/2 and hm-card resolves to
   the 884x589 CDN variant, so the two ratios agree to a sub-pixel.
   On the MOBILE card it drew a coloured bar under every thumbnail on the home
   page and every archive. That card is `flex-direction:row`, so the thumb is a
   flex item at the default `align-self:stretch` — the stretch hands it a
   definite cross size (the card's height, which the title's 3-line clamp pushes
   to ~120-130px) and a stretched cross size WINS OVER `aspect-ratio`, so the
   box is not the square the rule below asks for. The image stayed 96x96 and the
   leftover 15-35px showed the `thumb-bg--*` gradient this box carries for the
   no-image case: navy, because `hm_cat_thumb_class()` lands every unmapped
   category on `thumb-bg--news`.
   Absolutely positioned rather than a plain `width/height:100%`, because the
   parent's height is DERIVED both times — from `aspect-ratio` on desktop, from
   flex stretch on mobile — and only a containing block resolves a percentage
   height against that in every engine. The parent is already
   `position:relative; overflow:hidden` and its no-image `__thumb-overlay`
   sibling is positioned exactly this way, so nothing new is asked of it; the
   box never sized itself from this image, so taking it out of flow moves no
   layout. */
.article-card__thumb img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.article-card__thumb-overlay {
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 75% 25%,rgba(255,255,255,0.1) 0%,transparent 60%);
}
.article-card__body { padding:16px 18px 18px; flex:1; display:flex; flex-direction:column; justify-content:space-between; }
.article-card--wide .article-card__body { padding:20px 22px 22px; }
/* The chips sit above the stretched ::after or their clicks are swallowed by
   it. z-index:1 needs a position to bite, hence relative on the row too. */
.article-card__tags {
  display:flex; align-items:center; gap:7px; margin-bottom:9px;
  flex-wrap:wrap; position:relative; z-index:1;
}
.article-card__cat {
  font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; border-radius:100px; padding:2px 9px;
  /* Was an inline style="color:…;background:…18" on the span. color-mix, not a
     concatenated 8-digit hex, so the tint holds whatever form --card-accent
     takes; the flat fallback above it is for engines without color-mix. */
  color:var(--card-accent,var(--red));
  background:transparent;
  background:color-mix(in srgb, var(--card-accent,var(--red)) 9%, transparent);
}
/* Option E, light surface: the hood is the outline half of the pair, the
   category stays the filled half.
   1px of vertical padding against the category's 2px is deliberate — the 1px
   border adds to the box height, and the two chips have to end up the same
   height for the pair to read as one family. Same call as the hero; see
   .article-hero__hood-pill for why the category pill is not the one that
   moves. */
.article-card__hood {
  display:inline-flex; align-items:center; gap:4px;
  font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; border-radius:100px;
  padding:1px 9px 1px 7px;
  color:var(--grey-text); border:1px solid var(--grey-mid);
  transition:border-color .13s, color .13s;
}
.article-card__hood:hover { border-color:#8a867f; color:var(--black); }
/* The category chip's accent is a custom property now, but `background` still
   cannot be strengthened on hover without a second token, so the affordance is
   an inset ring in the accent — the same one the hero pill uses.
   Desktop card and anchors only: the mobile card has no pill for a ring to
   trace, and when there is no primary category the chip is a <span>. */
.article-card--desktop a.article-card__cat:hover { box-shadow:inset 0 0 0 1px currentColor; }
/* Tap targets. Both chips render ~17-22px tall; this lifts the hit area to
   26-32px (measured) without moving the visual box. It is not the 44px of
   WCAG 2.5.5 AAA: the row sits directly above the title, and 44px would reach
   into the title's own tap area and turn article mis-taps into category
   navigations. It does clear the 24px of WCAG 2.5.8 (AA). */
.article-card__chip { position:relative; z-index:1; }
.article-card__chip::before {
  content:''; position:absolute; inset:-5px -3px;
}
.article-card__label {
  font-size:9.5px; font-weight:500; color:var(--grey-text);
  letter-spacing:.04em;
}
.article-card__title {
  font-family:var(--font-body); font-size:15px;
  font-weight:600; line-height:1.4;
  color:var(--black); transition:color .15s; margin-bottom:6px;
}
.article-card--wide .article-card__title {
  font-family:var(--font-serif); font-size:21px;
  font-weight:400; line-height:1.32; margin-bottom:10px;
}
.article-card:hover .article-card__title { color:var(--card-accent,var(--red)); }
/* :hover was never anchor-only, so the two .article-card:hover rules keep
   firing on the <article> — but the accent flip now fires while the pointer is
   over a chip that navigates somewhere else. On hey-child-londonly the flip is
   the card's ONLY hover affordance (its sheet kills the box-shadow), so it has
   to say the truth about where a click will land.
   Restated at equal specificity AFTER the rule above rather than folded into
   it with :not(:has(…)): an engine without :has would drop the combined
   selector entirely and londonly would lose the affordance outright. Inside
   @supports, the worst case is the pre-change behaviour.
   Focus, likewise, is new work — no :focus or :focus-visible rule existed for
   .article-card or any descendant in any sheet. As an anchor the card drew the
   UA ring around itself; the title link alone would draw it around a clamped,
   possibly ellipsised inline box, so the ring is put back on the card. */
@supports selector(:has(*)) {
  .article-card:has(.article-card__chip:hover) .article-card__title { color:var(--black); }
  .article-card:has(.article-card__title-link:focus-visible) {
    outline:2px solid var(--card-accent,var(--black)); outline-offset:2px;
  }
  .article-card__title-link:focus-visible { outline:none; }
}
.article-card__chip:focus-visible {
  outline:2px solid var(--black); outline-offset:3px;
}
.article-card__sub {
  font-size:13.5px; color:var(--grey-text); line-height:1.62;
}
.article-card__meta {
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--grey-text); margin-top:8px;
}
.article-card--wide .article-card__meta { margin-top:14px; }
.article-card__meta-sep { color:var(--grey-mid); font-size:10px; }

/* Mobile article card (horizontal) */
.article-card--mobile {
  flex-direction:row; border-radius:12px;
}
.article-card--mobile .article-card__thumb {
  width:96px; aspect-ratio:1/1; flex-shrink:0;
}
.article-card--mobile .article-card__body {
  padding:12px 14px; min-width:0;
}
/* The mobile card strips the pill to plain type. The hood chip follows it —
   pin plus uppercase text, no border, no fill — with a hairline between the
   two, because with no pill boundary there is nothing else separating them.
   `margin-bottom` moved off the category and onto the row, which now holds two
   chips; 7px rather than 5px so the enlarged chip hit areas below stop short
   of the title's own.
   display was `block`, which made the whole body-width row tappable directly
   above a 3-line clamped title once the category became a link — a mis-tap
   hazard on the narrowest layout. Note hey-child-londonly retunes this
   selector's font-size to 11.5px; that override was written against `block`
   but reads the same as inline-flex. */
.article-card--mobile .article-card__tags { margin-bottom:7px; }
.article-card--mobile .article-card__cat {
  display:inline-flex; padding:0;
  background:none; font-size:9px;
}
.article-card--mobile .article-card__hood {
  padding:0; border:0; font-size:9px;
}
.article-card--mobile .article-card__chip::before { inset:-7px -3px; }
.article-card__tag-sep {
  width:1px; height:9px; background:var(--grey-mid); flex-shrink:0;
}
.article-card--mobile .article-card__title {
  font-size:14px; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

/* ─── NEWSLETTER STRIP ───────────────────────────────────────────────────── */
.newsletter-strip {
  background:var(--black); border-radius:16px;
  padding:38px 48px; display:flex; align-items:center;
  justify-content:space-between; gap:40px;
  position:relative; overflow:hidden;
}
.newsletter-strip__glow {
  position:absolute; right:-60px; top:-60px;
  width:280px; height:280px; border-radius:50%;
  background:color-mix(in srgb, var(--red) 7%, transparent); pointer-events:none;
}
.newsletter-strip__content { flex:1; position:relative; }
.newsletter-strip__eyebrow {
  font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); margin-bottom:10px;
}
.newsletter-strip__heading {
  font-family:var(--font-serif); font-size:25px;
  color:#fff; line-height:1.22; margin-bottom:8px;
}
.newsletter-strip__heading em { font-style:italic; color:rgba(255,255,255,.5); }
.newsletter-strip__desc {
  font-size:13.5px; color:rgba(255,255,255,.4);
  line-height:1.55; max-width:380px;
}
.newsletter-strip__form { flex-shrink:0; width:330px; position:relative; }
.newsletter-strip__form-row {
  display:flex; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.1); transition:border-color .15s;
}
.newsletter-strip__form-row.error { border-color:var(--red); }
.newsletter-strip__input {
  flex:1; border:none; outline:none;
  background:rgba(255,255,255,.06); color:#fff;
  font-family:var(--font-body); font-size:14px;
  padding:14px 18px;
}
.newsletter-strip__btn {
  background:var(--red); border:none; color:#fff;
  font-family:var(--font-body); font-size:12.5px;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:0 22px; cursor:pointer; transition:opacity .15s;
}
.newsletter-strip__btn:disabled { opacity:.6; cursor:not-allowed; }
.newsletter-strip__error {
  font-size:11px; color:var(--red); margin-top:6px;
}
.newsletter-strip__note {
  font-size:11px; color:rgba(255,255,255,.25);
  margin-top:8px; text-align:center;
}
.newsletter-strip__done {
  text-align:center;
}
.newsletter-strip__done-icon {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg,var(--red),#f59e0b);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px; font-size:20px; color:#fff;
}
.newsletter-strip__done-title {
  font-family:var(--font-serif); font-size:18px;
  color:#fff; margin-bottom:4px;
}
.newsletter-strip__done-sub {
  font-size:13px; color:rgba(255,255,255,.4);
}

/* ─── HERO BANNER (Homepage) ─────────────────────────────────────────────── */
.hero-banner { background:var(--black); overflow:hidden; }
.hero-banner__inner {
  max-width:1200px; margin:0 auto;
  position:relative; overflow:hidden;
}
.hero-banner__image {
  margin-left:auto; width:42%; aspect-ratio:3/2;
  position:relative; overflow:hidden; background:#1a1a2e;
}
.hero-banner__image-fade {
  position:absolute; inset:0;
  background:linear-gradient(to right, #0d0d0d 0%, rgba(13,13,13,0.45) 22%, transparent 52%);
}
.hero-banner__text {
  position:absolute; top:0; left:0; bottom:0;
  width:62%; padding:0 48px 0 32px;
  display:flex; flex-direction:column; justify-content:center;
  z-index:2; cursor:pointer;
}
.hero-banner__overline {
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.hero-banner__latest {
  font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.35);
}
/* Three items now — pill, hood label, optional article label — inside
   .hero-banner__text, which on desktop is an absolutely positioned 62%-wide
   box. Without wrap, a long hood name has nowhere to go and runs out under the
   dark end of .hero-banner__image-fade. */
.hero-banner__cat-row {
  display:flex; align-items:center; gap:8px; margin-bottom:18px;
  flex-wrap:wrap;
}
.hero-banner__cat-pill {
  font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; border-radius:100px;
  padding:3px 11px;
}
/* Option E on the front hero: the hood is the outline half of the pair, the
   category stays the filled half — the same ranking signal as the card and the
   article hero.
   It follows .article-hero__hood-pill (the DARK member of that family) rather
   than .article-card__hood (the light one), because this banner is
   background:var(--black). Measured in-browser, not inferred: --grey-text on
   the banner is 3.50:1 on the parent's #0d0d0d and 2.52:1 on
   hey-child-londonly's #16311F, both under the 4.5:1 AA floor and both at
   10px; the white-alpha pair below measures 10.69:1 and 8.37:1 on the same two
   backgrounds. Same shape either way, so this costs nothing.
   A <span>, not an <a> — hence no :hover and no :focus-visible rule. The two
   are not decoration on the linking chips; adding them here would promise a
   click that does nothing.
   2px of vertical padding against the pill's 3px is deliberate: the 1px border
   adds to the box height, so equal padding renders the pair 2px apart. Same
   call as the card and the article hero. */
.hero-banner__hood {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; border-radius:100px;
  padding:2px 11px 2px 9px;
  color:rgba(255,255,255,.74); border:1px solid rgba(255,255,255,.26);
}
.hero-banner__cat-label {
  font-size:10px; font-weight:500; color:rgba(255,255,255,.3);
  letter-spacing:.06em;
}
.hero-banner__title {
  font-family:var(--font-serif); font-size:40px;
  font-weight:400; line-height:1.2; color:#fff;
  margin-bottom:18px; max-width:500px;
}
.hero-banner__sub {
  font-size:14.5px; color:rgba(255,255,255,.48);
  line-height:1.68; margin-bottom:26px; max-width:460px;
}
.hero-banner__meta {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:rgba(255,255,255,.32);
}
.hero-banner__author { color:rgba(255,255,255,.55); font-weight:500; }
.hero-banner__meta-sep { color:rgba(255,255,255,.18); }

/* ─── FEED GRID ──────────────────────────────────────────────────────────── */
.feed-wrap {
  max-width:1200px; margin:0 auto;
  padding:36px 32px 80px;
}
.feed-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px; padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.feed-header__label {
  font-size:9.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey-text);
}
.feed-header__live {
  display:flex; align-items:center; gap:5px;
  font-size:11px; color:var(--grey-text);
}
.feed-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.feed-grid__full { grid-column:1 / span 3; }
.ad-slot {
  height:90px; border:1.5px dashed var(--grey-mid); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.ad-slot__text {
  font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey-mid);
}
.load-more-btn {
  font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--black);
  background:none; border:2px solid var(--black);
  padding:13px 36px; border-radius:100px;
  cursor:pointer; transition:background .15s, color .15s;
}
.load-more-btn:hover { background:var(--black); color:#fff; }

/* ─── CATEGORY PAGE ──────────────────────────────────────────────────────── */
.cat-header {
  background:var(--black); position:relative; overflow:hidden;
  border-bottom:3px solid;
}
.cat-header__glow {
  position:absolute; right:-80px; top:-80px;
  width:360px; height:360px; border-radius:50%;
  opacity:.06; pointer-events:none;
}
.cat-header__inner {
  max-width:1200px; margin:0 auto; padding:0 32px; position:relative;
}
.cat-header__top {
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-top:36px;
}
.cat-header__tagline {
  font-family:var(--font-serif); font-style:italic;
  font-size:13.5px; color:rgba(255,255,255,.4); margin-bottom:6px;
}
.cat-header__title {
  font-family:var(--font-display); font-size:68px;
  letter-spacing:.02em; color:#fff; line-height:.95; margin:0;
}
.cat-header__desc {
  font-size:14px; color:rgba(255,255,255,.38);
  max-width:310px; line-height:1.65; text-align:right; padding-bottom:6px;
}
.cat-tabs {
  display:flex; gap:0; overflow-x:auto; margin-top:12px; margin-bottom:-3px;
}
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  color:rgba(255,255,255,.38); background:none; border:none;
  padding:11px 16px; cursor:pointer;
  border-bottom:3px solid transparent;
  white-space:nowrap; transition:color .14s; flex-shrink:0;
}
.cat-tab:hover { color:rgba(255,255,255,.7); }
.cat-tab.active { color:#fff; border-bottom-color:var(--accent); }
/* Mobile cat dropdown */
.cat-select-wrap { margin-top:18px; padding-bottom:16px; position:relative; }
.cat-select {
  width:100%; appearance:none; -webkit-appearance:none;
  font-family:var(--font-body); font-size:14px; font-weight:600;
  color:#fff; background:rgba(255,255,255,0.1);
  border-radius:10px; padding:11px 40px 11px 14px;
  cursor:pointer; outline:none;
}
.cat-select option { background:#1a1a1a; color:#fff; }
.cat-select-chevron {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none;
}

.cat-content {
  max-width:1200px; margin:0 auto; padding:32px 32px 80px;
}
.cat-layout { display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:start; }
.cat-article-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:20px;
}
.cat-sidebar { display:flex; flex-direction:column; gap:16px; position:sticky; top:var(--hm-sticky-top); }
.sidebar-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.sidebar-card__header {
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}
.sidebar-card__dot { width:6px; height:6px; border-radius:50%; }
.sidebar-card__label {
  font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey-text);
}
.sidebar-item {
  display:flex; gap:12px; align-items:flex-start;
  padding:11px 18px; text-decoration:none;
  transition:background .12s;
}
.sidebar-item:hover { background:var(--grey-bg); }
.sidebar-item + .sidebar-item { border-top:1px solid var(--border); }
.sidebar-rank {
  font-family:var(--font-display); font-size:22px;
  line-height:1; min-width:22px; margin-top:-1px;
}
.sidebar-item-title {
  font-size:12.5px; font-weight:500; color:var(--black); line-height:1.4;
}

/* ─── ARTICLE / SINGLE PAGE ──────────────────────────────────────────────── */
.article-hero { background:var(--black); overflow:hidden; border-bottom:3px solid; }
.article-hero__inner {
  max-width:1200px; margin:0 auto; position:relative;
}
.article-hero__image {
  margin-left:auto; width:54%; aspect-ratio:3/2;
  position:relative; overflow:hidden;
}
.article-hero__image figcaption { display:none; }
.article-hero__image-fade {
  position:absolute; inset:0;
  background:linear-gradient(to right, #0d0d0d 0%, rgba(13,13,13,0.5) 18%, transparent 42%);
}
.article-hero__text {
  position:absolute; top:0; left:0; bottom:0;
  width:44%; padding:0 10px 0 32px;
  display:flex; flex-direction:column; justify-content:center; z-index:2;
}
.article-hero__breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:rgba(255,255,255,.38); margin-bottom:24px;
}
.article-hero__breadcrumb a {
  color:rgba(255,255,255,.38); transition:color .13s;
}
.article-hero__breadcrumb a:hover { color:#fff; }
.article-hero__breadcrumb .sep { color:rgba(255,255,255,.18); }
.article-hero__pills {
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
  /* The row lives in a fixed column — 44% here, 58% at <=1279px — and neither
     pill has min-width:0, so category + hood + label on a long hood name
     squashed or overflowed rather than wrapping. Note extra.min.css restates
     this rule (gap/margin only) and does NOT set flex-wrap, so this survives
     the cascade. */
  flex-wrap:wrap;
}
.article-hero__cat-pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; border-radius:100px;
  padding:4px 13px; width:fit-content;
}
/* Wrapper anchor around the category pill (see variant-standard.php for why it
   is a wrapper and not an href on the pill). inline-flex, not inline: the
   template puts the pill on its own line, and in a flex container those
   newlines are not laid out as anonymous flex items, so the link box hugs the
   pill exactly. */
.article-hero__cat-link { display:inline-flex; }
.article-hero__cat-link:hover .article-hero__cat-pill {
  /* The variants set `background` and `color` inline, which out-specifies any
     stylesheet rule — an inset ring is the one hover affordance that can be
     authored here. currentColor is the accent. */
  box-shadow:inset 0 0 0 1px currentColor;
}
/* Option E: the hood chip is the same shape as the category pill, outline
   instead of filled. Fill-vs-outline is the whole ranking signal, so the
   category pill is left filled and un-outlined.
   Vertical padding is 3px against the category's 4px on purpose. The 1px
   border adds to the box height (border-box only caps a box with an explicit
   height), so equal padding would render the pair 2px apart — the height
   parity defect from design review. The alternative, a transparent 1px border
   on the category pill, cannot be authored from a stylesheet: the variants set
   `border-color:<accent>40` inline, which wins, and would revive a tinted ring
   the design does not ask for. */
.article-hero__hood-pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; border-radius:100px;
  padding:3px 13px 3px 11px; width:fit-content;
  color:rgba(255,255,255,.74); border:1px solid rgba(255,255,255,.26);
  transition:border-color .13s, color .13s;
}
.article-hero__hood-pill:hover {
  border-color:rgba(255,255,255,.55); color:#fff;
}
/* No :focus-visible rule existed anywhere in this sheet, so both hero chips
   would fall back to the UA ring on a near-black band. */
.article-hero__cat-link:focus-visible,
.article-hero__hood-pill:focus-visible {
  outline:2px solid rgba(255,255,255,.8); outline-offset:2px; border-radius:100px;
}
.hm-hood-pin { flex-shrink:0; }
/* Image-first header row. The rest of `.article-header__*` lives in
   assets/css/extra.css, but that source sheet is not the one served
   (functions.php enqueues extra.min.css and there is no minifier in the repo),
   so new rules go here in the sheet that ships raw. Nothing in extra.min.css
   names these selectors, so there is no cascade fight.
   Flat, not pilled: metrics are `.article-header__cat`'s (10px / .11em), and
   the row is light, so the chip takes --grey-text. */
.article-header__hood {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--grey-text);
  transition:color .13s;
}
.article-header__hood:hover {
  color:var(--black); text-decoration:underline; text-underline-offset:3px;
}
/* The category is now a link too. Its colour is set inline by the variant, so
   a colour hover is not authorable here — an underline is. */
a.article-header__cat:hover { text-decoration:underline; text-underline-offset:3px; }
a.article-header__cat:focus-visible,
.article-header__hood:focus-visible {
  outline:2px solid var(--black); outline-offset:3px;
}
.article-hero__label {
  font-size:10px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.35);
}
.article-hero__title {
  font-family:var(--font-display); font-size:56px;
  font-weight:400; letter-spacing:.02em; line-height:.9; color:#fff;
  margin:0 0 8px 0;
}
.article-hero__sub {
  font-family:var(--font-serif); font-style:italic;
  font-size:16px; color:rgba(255,255,255,.5);
  line-height:1.55; margin-bottom:20px; max-width:430px;
}
.article-hero__byline {
  display:flex; align-items:center; gap:12px;
}
.article-hero__byline-text {
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:rgba(255,255,255,.5);
}
.article-hero__author-avatar {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; flex-shrink:0;
}
.article-hero__author-name {
  font-weight:600; color:rgba(255,255,255,.75);
}
.article-hero__sep {
  color:rgba(255,255,255,.22);
}
.article-hero__author-info {
  font-size:11.5px; color:rgba(255,255,255,.32);
}

/* Article body */
.article-body-wrap {
  background:#f0efed;
}
.article-body-layout {
  max-width:1200px; margin:0 auto;
  padding:36px 32px 80px;
  display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start;
}
.article-body {
  min-width:0;
}
.article-body p {
  font-family:var(--font-serif); font-size:17.5px;
  line-height:1.84; color:#2a2826; margin-bottom:26px;
}
.article-body a {
  color:inherit; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:opacity .13s;
}
.article-body a:hover { opacity:.65; }
.article-body h2 {
  font-family:var(--font-display); font-size:28px;
  letter-spacing:.03em; color:var(--black);
  margin:44px 0 22px; padding-top:22px;
  border-top:1px solid var(--border);
}
.article-body h3 {
  font-size:16px; font-weight:700; color:var(--black);
  margin:32px 0 14px;
}
.article-body blockquote {
  margin:44px 0; padding:22px 28px;
  border-radius:0 8px 8px 0;
}
.article-body blockquote p {
  font-family:var(--font-serif); font-style:italic;
  font-size:21px; line-height:1.52; color:var(--black);
  margin:0 0 10px;
}
.article-body blockquote cite {
  font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; font-style:normal;
}
.article-body figure.article-image {
  margin:36px 0; border-radius:12px; overflow:hidden;
  border:1px solid var(--border);
}
.article-body figure.article-image .placeholder-img {
  aspect-ratio:16/9; position:relative;
}
.article-body figure.article-image .placeholder-img__overlay {
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 60% 40%,rgba(255,255,255,0.1) 0%,transparent 55%);
}
.article-body figcaption {
  padding:12px 16px; background:var(--grey-bg);
  border-top:1px solid var(--border);
}
.article-body figcaption .caption-text {
  font-size:12.5px; color:var(--grey-text); line-height:1.5;
}
.article-body figcaption .caption-credit {
  font-size:11px; color:var(--grey-mid); margin-top:4px;
}
.article-tags {
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:36px; padding-top:24px;
  border-top:1px solid var(--border);
}
.article-tag {
  font-size:12px; font-weight:500; color:var(--black);
  background:var(--grey-bg); border:1px solid var(--border);
  border-radius:100px; padding:5px 14px;
  transition:color .13s, border-color .13s;
}
.article-tag:hover { color:var(--red); border-color:var(--red); }

/* Article sidebar */
.article-sidebar {
  display:flex; flex-direction:column; gap:14px;
  position:sticky; top:var(--hm-sticky-top);
}
.share-row {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.share-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 0; border-radius:10px;
  border:1px solid var(--border); background:var(--white);
  cursor:pointer; font-size:12.5px; font-weight:600;
  color:var(--black); font-family:var(--font-body);
  transition:all .15s;
}
.share-btn:hover { background:var(--grey-bg); }

/* ─── EVENTS PAGE ────────────────────────────────────────────────────────── */
.events-hero { background:var(--black); overflow:hidden; border-bottom:3px solid var(--red); }
.events-hero__inner {
  max-width:1200px; margin:0 auto; position:relative; min-height:380px;
}
.events-hero__image {
  margin-left:auto; width:42%; aspect-ratio:3/2;
  background:linear-gradient(150deg,#1a0a2e 0%,#3d0f3f 45%,#7c2d12 100%);
  position:relative; overflow:hidden;
}
.events-hero__image-fade {
  position:absolute; inset:0;
  background:linear-gradient(to right, #0d0d0d 0%, rgba(13,13,13,0.5) 28%, transparent 58%);
}
.events-hero__text {
  position:absolute; top:0; left:0; bottom:0;
  width:64%; padding:0 52px 0 32px;
  display:flex; flex-direction:column; justify-content:center; z-index:2;
}
.events-hero__desc {
  font-size:14.5px; color:rgba(255,255,255,.52); line-height:1.72;
  max-width:420px; margin:0 0 24px;
}
.events-hero__byline {
  display:flex; align-items:center; gap:12px; margin-bottom:26px;
}
.events-hero__avatar {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--red),#9b1c0e);
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700; color:#fff; flex-shrink:0;
}
.events-hero__cta {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:var(--red);
  border-radius:100px; padding:11px 24px; width:fit-content;
  text-decoration:none; transition:background .15s,transform .1s;
}
.events-hero__cta:hover { background:#c0392b; transform:translateY(-1px); }
@media (max-width:1279px) {
  .events-hero__inner { min-height:auto; }
  .events-hero__image { margin-left:0; width:100%; aspect-ratio:21/9; }
  .events-hero__text {
    position:static; width:auto;
    padding:24px 18px 28px; background:#0d0d0d;
  }
  .events-hero__desc { display:none; }
}
@media (max-width:639px) {
  .events-hero__image { aspect-ratio:16/7; }
}
.events-picks-strip {
  border-top:1px solid rgba(255,255,255,.06);
}
.events-picks-strip__inner {
  max-width:1200px; margin:0 auto; padding:18px 32px 22px;
}
.events-picks-strip__label {
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
}
.events-picks-strip__label span {
  font-size:9.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.28); white-space:nowrap;
}
.events-picks-strip__line {
  flex:1; height:1px; background:rgba(255,255,255,.07);
}
.events-picks-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.events-pick-card {
  display:flex; flex-direction:column; gap:8px;
  padding:14px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  transition:border-color .14s, background .14s;
}
.events-pick-card:hover {
  border-color:color-mix(in srgb, var(--red) 35%, transparent);
  background:color-mix(in srgb, var(--red) 7%, transparent);
}

.events-calendar { background:var(--grey-bg); }
.events-calendar__inner {
  max-width:1200px; margin:0 auto; padding:0 32px;
}
@media (max-width:639px) {
  .events-calendar__inner { padding:0; }
  .events-day-tab { font-size:12px; padding:10px 14px 14px; flex:none; text-align:center; }
  .events-main-layout { padding:20px 16px 48px !important; }
}
.events-calendar__header {
  padding:28px 0 0; border-bottom:1px solid rgba(0,0,0,0.08);
}
.events-day-tabs {
  display:flex; flex:1;
}
.events-day-tab {
  font-family:var(--font-body); font-size:13px; font-weight:600;
  color:var(--grey-text); background:none; border:none;
  padding:10px 20px 14px; cursor:pointer;
  border-bottom:3px solid transparent;
  margin-bottom:-1px; white-space:nowrap; transition:color .13s;
}
.events-day-tab.active { color:var(--black); border-bottom-color:var(--red); }
.events-main-layout {
  display:grid; grid-template-columns:1fr 280px;
  gap:28px; padding:28px 16px 72px; align-items:start;
}

/* Event cards */
.event-card-featured {
  display:flex; flex-direction:column;
  border-radius:14px; border:1px solid var(--border);
  overflow:hidden; background:var(--white);
  transition:box-shadow .2s; text-decoration:none;
}
.event-card-featured:hover { box-shadow:0 8px 32px rgba(0,0,0,0.10); }
.event-card-featured__thumb {
  aspect-ratio:3/2; position:relative; overflow:hidden;
}
.event-card-featured__starting {
  position:absolute; top:12px; left:12px;
  display:flex; align-items:center; gap:6px;
  background:rgba(13,13,13,0.85); backdrop-filter:blur(4px);
  border-radius:100px; padding:5px 12px;
}
.event-card-featured__starting-text {
  font-size:9.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:#fff;
}
.event-card-featured__price-badge { position:absolute; top:12px; right:12px; }
.event-card-featured__body {
  padding:16px 18px 20px; flex:1;
  display:flex; flex-direction:column; gap:10px;
}
.event-card-featured__title {
  font-family:var(--font-serif); font-size:19px;
  line-height:1.3; color:var(--black); transition:color .15s;
}
.event-card-featured:hover .event-card-featured__title { color:var(--red); }
.event-card-featured__desc {
  font-size:13px; color:var(--grey-text); line-height:1.58; margin:0;
}
.event-card-featured__meta {
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  margin-top:auto; font-size:12.5px;
}

.event-row {
  display:flex; align-items:stretch;
  border-radius:12px; border:1px solid var(--border);
  background:var(--white); overflow:hidden;
  transition:background .14s, box-shadow .14s; text-decoration:none;
}
.event-row:hover { background:#f8f7f5; box-shadow:0 4px 16px rgba(0,0,0,0.07); }
.event-row__thumb {
  width:130px; flex-shrink:0; position:relative; overflow:hidden;
  aspect-ratio:3/2; align-self:stretch; min-height:100%;
}
.event-row__body {
  flex:1; padding:13px 16px;
  display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0;
}
.event-row__title {
  font-size:15px; font-weight:600; color:var(--black);
  line-height:1.32; transition:color .14s;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.event-row:hover .event-row__title { color:var(--red); }
.event-row__meta {
  display:flex; align-items:center; gap:4px;
  font-size:12px; color:var(--grey-text); flex-wrap:wrap;
}
.event-row__arrow {
  display:flex; align-items:center; padding:0 16px;
  color:var(--grey-mid); font-size:16px; flex-shrink:0;
}

.ongoing-row {
  display:flex; align-items:center; gap:14px;
  padding:13px 16px; border-radius:10px;
  border:1px solid var(--border); background:var(--white);
  transition:background .13s; text-decoration:none;
}
.ongoing-row:hover { background:#f8f7f5; }
.ongoing-row__icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; flex-shrink:0;
}
.ongoing-row__info { flex:1; min-width:0; }
.ongoing-row__title {
  font-size:14px; font-weight:600; color:var(--black);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .13s; margin-bottom:3px;
}
.ongoing-row:hover .ongoing-row__title { color:var(--red); }
.ongoing-row__meta {
  display:flex; align-items:center; gap:4px;
  font-size:11.5px; color:var(--grey-text); flex-wrap:wrap;
}

/* Event category pill */
.ev-cat-pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; border-radius:100px; padding:3px 10px;
  flex-shrink:0; white-space:nowrap;
}
.ev-cat-pill--sm { font-size:9px; gap:4px; padding:2px 8px; }
.ev-cat-pill--lg { font-size:11px; padding:5px 14px; border:1px solid; }

/* Event Category Taxonomy Archive */
.ev-tax-hero { padding:0 0 0; }
.ev-tax-hero__inner { max-width:900px; margin:0 auto; padding:20px 24px 28px; }
.ev-tax-hero__heading { margin-top:14px; }
.ev-tax-hero__title {
  font-size:32px; font-weight:800; color:var(--black);
  margin:10px 0 0; line-height:1.15;
}
.ev-tax-hero__desc {
  font-size:14px; color:var(--grey-text); margin:8px 0 0;
  max-width:540px; line-height:1.5;
}
.ev-tax-hero__count {
  display:inline-block; margin-top:10px;
  font-size:12px; font-weight:600; color:var(--grey-text);
  letter-spacing:.04em; text-transform:uppercase;
}
.ev-tax-body { background:var(--grey-bg); min-height:40vh; }
.ev-tax-body__inner { max-width:900px; margin:0 auto; padding:28px 24px 60px; }

/* Price pill */
.price-pill {
  font-size:10px; font-weight:700; letter-spacing:.06em;
  border-radius:100px; padding:2px 9px;
  white-space:nowrap; flex-shrink:0;
}
.price-pill--free {
  color:var(--green); background:#edf7f3;
  border:1px solid color-mix(in srgb, var(--green) 20%, transparent);
}
.price-pill--paid {
  color:var(--grey-text); background:var(--grey-bg);
  border:1px solid rgba(0,0,0,0.09);
}

/* Mini calendar */
.mini-cal {
  background:var(--white); border:1px solid var(--border);
  border-radius:14px; overflow:hidden;
}
.mini-cal__header {
  background:var(--black); padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
}
.mini-cal__month {
  font-family:var(--font-display); font-size:17px;
  letter-spacing:.05em; color:#fff;
}
.mini-cal__nav {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none;
  cursor:pointer; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .13s;
}
.mini-cal__nav:hover { background:rgba(255,255,255,.22); }
.mini-cal__body { padding:12px 14px 14px; }
.mini-cal__days {
  display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px;
}
.mini-cal__day-name {
  text-align:center; font-size:9.5px; font-weight:700;
  letter-spacing:.07em; color:var(--grey-text); padding:3px 0;
}
.mini-cal__grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
}
.mini-cal__cell {
  width:100%; aspect-ratio:1; border-radius:7px;
  border:none; cursor:pointer;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
  background:transparent; color:var(--black); font-weight:400;
  font-family:var(--font-body); font-size:12px;
  transition:background .12s;
}
.mini-cal__cell:hover { background:var(--grey-bg); }
.mini-cal__cell--today { background:var(--black); color:#fff; font-weight:700; }
.mini-cal__cell--today:hover { background:var(--black); }
.mini-cal__cell--selected { background:var(--red); color:#fff; font-weight:700; }
.mini-cal__cell--selected:hover { background:var(--red); }
.mini-cal__cell-dot {
  width:3px; height:3px; border-radius:50%; background:var(--red);
}
.mini-cal__cell--today .mini-cal__cell-dot { background:rgba(255,255,255,.55); }

/* ─── EVENT DETAIL PAGE ──────────────────────────────────────────────────── */
.event-detail-breadcrumb {
  background:var(--white); border-bottom:1px solid rgba(0,0,0,0.06);
}
.event-detail-breadcrumb__inner {
  max-width:1200px; margin:0 auto; padding:12px 32px;
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--grey-text);
}
.event-detail-breadcrumb a { transition:color .13s; }
.event-detail-breadcrumb a:hover { color:var(--black); }
.event-detail-breadcrumb .sep { color:var(--grey-mid); }

.event-detail-hero { background:var(--black); overflow:hidden; }
.event-detail-hero__inner {
  max-width:1200px; margin:0 auto; position:relative;
}
.event-detail-hero__text {
  position:absolute; top:0; left:0; bottom:0;
  width:62%; padding:0 56px 0 32px;
  display:flex; flex-direction:column; justify-content:center; z-index:2;
}

.event-detail-content { background:var(--grey-bg); }
.event-detail-layout {
  max-width:1200px; margin:0 auto; padding:32px 32px 80px;
  display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start;
}
.event-detail-card {
  background:var(--white); border-radius:16px;
  border:1px solid var(--border); padding:32px 36px;
}
.event-detail-card h2 {
  font-family:var(--font-display); font-size:26px;
  letter-spacing:.04em; color:var(--black); margin-bottom:18px;
}
.event-detail-card p {
  font-family:var(--font-serif); font-size:15px;
  line-height:1.78; color:#3a3836; margin-bottom:16px;
}
.what-to-expect-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.what-to-expect-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px 16px; border-radius:12px;
  background:var(--grey-bg); border:1px solid rgba(0,0,0,0.05);
}
.what-to-expect-item__icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; flex-shrink:0;
}
.what-to-expect-item__label {
  font-size:13.5px; font-weight:600; color:var(--black); margin-bottom:3px;
}
.what-to-expect-item__note {
  font-size:12.5px; color:var(--grey-text); line-height:1.5;
}

/* Map placeholder */
.map-placeholder {
  height:220px; position:relative; overflow:hidden;
  border-top:1px solid var(--border);
  background:linear-gradient(135deg,#e8e6e1 0%,#dbd8d2 100%);
}
.map-pin {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-60%);
  display:flex; flex-direction:column; align-items:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.22));
}
.map-pin__marker {
  width:40px; height:40px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  display:flex; align-items:center; justify-content:center;
}
.map-pin__marker-icon { transform:rotate(45deg); font-size:16px; }
.map-pin__label {
  margin-top:4px; background:#fff; border-radius:8px;
  padding:4px 10px; font-size:11px; font-weight:600;
  color:var(--black); box-shadow:0 2px 8px rgba(0,0,0,0.14);
  white-space:nowrap;
}

/* Event detail sidebar */
.event-detail-sidebar {
  display:flex; flex-direction:column; gap:14px;
  position:sticky; top:var(--hm-sticky-top); padding:28px 0 28px 8px;
}
.event-cta-card {
  background:var(--black); border-radius:16px; overflow:hidden;
}
.event-cta-card__body { padding:24px 22px; }
.event-cta-card__admission-label {
  font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:8px;
}
.event-cta-card__price {
  font-family:var(--font-display); font-size:42px;
  letter-spacing:.02em; color:#fff; line-height:.9; margin-bottom:4px;
}
.event-cta-card__price--free { color:#2ecc71; }
.event-cta-card__note {
  font-size:12px; color:rgba(255,255,255,.38);
  margin-bottom:20px; line-height:1.5;
}
.event-cta-card__btn {
  display:block; text-align:center;
  font-size:13px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; border-radius:10px;
  padding:14px 0; text-decoration:none;
  transition:opacity .14s, transform .1s;
}
.event-cta-card__btn:hover { opacity:.88; transform:translateY(-1px); }
.event-cta-card__details {
  border-top:1px solid rgba(255,255,255,.07);
  padding:14px 22px;
}
.event-cta-card__detail-row {
  display:flex; align-items:flex-start; gap:10px; margin-bottom:9px;
}
.event-cta-card__detail-icon { font-size:13px; flex-shrink:0; }
.event-cta-card__detail-text {
  font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.4;
}

.calendar-add-card {
  background:var(--white); border-radius:14px;
  border:1px solid var(--border); padding:18px 20px;
}
.calendar-add-card__title {
  font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey-text); margin-bottom:12px;
}
.calendar-add-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:9px;
  font-size:13px; color:var(--black); transition:background .12s;
}
.calendar-add-item:hover { background:var(--grey-bg); }
.calendar-add-item__icon { font-size:14px; }

/* ─── DIRECTORY PAGES ────────────────────────────────────────────────────── */
.dir-hero {
  background:var(--black); overflow:hidden; position:relative;
}
.dir-hero__inner {
  max-width:1200px; margin:0 auto; padding:48px 32px 28px;
  position:relative;
}
.dir-hero__stats {
  display:flex; gap:32px; margin-top:28px;
}
.dir-hero__stat-num {
  font-family:var(--font-display); font-size:32px;
  letter-spacing:.02em; color:#fff; line-height:.9;
}
.dir-hero__stat-label {
  font-size:11px; color:rgba(255,255,255,.38);
  margin-top:4px;
}

.dir-content { background:var(--grey-bg); }
.dir-content__inner {
  max-width:1200px; margin:0 auto; padding:32px 32px 80px;
}
.dir-cat-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
}
.dir-cat-card {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:24px 16px 20px; border-radius:14px;
  border:1px solid var(--border); background:var(--white);
  text-decoration:none; transition:box-shadow .15s, border-color .15s;
}
.dir-cat-card:hover { box-shadow:0 6px 24px rgba(0,0,0,0.08); border-color:var(--green); }
.dir-cat-card__icon { font-size:28px; }
.dir-cat-card__label { font-size:14px; font-weight:700; color:var(--black); }
.dir-cat-card__count { font-size:11.5px; color:var(--grey-text); }

.dir-listing-card {
  display:flex; gap:16px; padding:18px; border-radius:14px;
  border:1px solid var(--border); background:var(--white);
  transition:box-shadow .15s; text-decoration:none;
}
.dir-listing-card:hover { box-shadow:0 6px 24px rgba(0,0,0,0.08); }
.dir-listing-card__avatar {
  width:52px; height:52px; border-radius:12px; flex-shrink:0;
  background:var(--green); display:flex; align-items:center;
  justify-content:center; font-size:18px; font-weight:700; color:#fff;
}
.dir-listing-card__info { flex:1; min-width:0; }
.dir-listing-card__name {
  font-size:15px; font-weight:700; color:var(--black); margin-bottom:3px;
}
.dir-listing-card__meta {
  font-size:12.5px; color:var(--grey-text);
  display:flex; align-items:center; gap:5px;
}

/* ─── SINGLE DIRECTORY LISTING ───────────────────────────────────────────── */
.listing-hero {
  background:var(--black); overflow:hidden; position:relative;
}
.listing-hero__inner {
  max-width:1200px; margin:0 auto; position:relative;
}
.listing-detail-content { background:var(--grey-bg); }
.listing-detail-layout {
  max-width:1200px; margin:0 auto; padding:32px 32px 80px;
  display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start;
}

/* ─── SUBSCRIBE PAGE ─────────────────────────────────────────────────────── */
.subscribe-page { background:var(--black); min-height:100vh; }

/* Hero */
.sub-hero {
  position:relative; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sub-hero__grid-bg {
  position:absolute; inset:0; pointer-events:none; opacity:.018;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:48px 48px;
}
.sub-hero__glow {
  position:absolute; right:-120px; top:-80px;
  width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--red) 14%, transparent) 0%,transparent 68%);
  pointer-events:none;
}
.sub-hero__inner {
  max-width:1100px; margin:0 auto;
  padding:80px 32px 72px; position:relative;
}
.sub-hero__logo {
  display:flex; align-items:center; gap:10px; margin-bottom:52px;
}
.sub-hero__logo-hey {
  font-family:var(--font-serif); font-style:italic;
  font-size:20px; color:var(--red);
}
.sub-hero__logo-mtl {
  font-family:var(--font-display); font-size:20px;
  letter-spacing:.12em; color:rgba(255,255,255,.7);
}
.sub-hero__logo-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--red); margin-left:1px;
}
.sub-hero__title {
  font-family:var(--font-display);
  font-size:96px; letter-spacing:.01em;
  color:#fff; line-height:.82;
  margin-bottom:32px; max-width:700px;
}
.sub-hero__title .red { color:var(--red); }
.sub-hero__desc {
  font-family:var(--font-serif); font-style:italic;
  font-size:19px; color:rgba(255,255,255,.38);
  line-height:1.65; max-width:480px; margin-bottom:52px;
}
.sub-hero__form-wrap { max-width:580px; }
.sub-hero__form-row {
  display:flex; gap:0;
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.05);
  transition:border-color .15s;
}
.sub-hero__form-row:focus-within {
  border-color:rgba(255,255,255,.5);
}
.sub-hero__input {
  flex:1; font-family:var(--font-body); font-size:16px;
  color:#fff; padding:18px 22px;
  background:transparent; border:none; outline:none;
}
.sub-hero__input::placeholder { color:rgba(255,255,255,.25); }
.sub-hero__btn {
  flex-shrink:0; font-family:var(--font-body);
  font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--black); background:#fff;
  border:none; padding:0 28px; cursor:pointer;
  white-space:nowrap; transition:background .14s,color .14s;
}
.sub-hero__btn:hover { background:var(--red); color:#fff; }
.sub-hero__error {
  font-size:12px; color:var(--red); margin-top:8px; margin-bottom:0;
}
.sub-hero__fine {
  font-size:11.5px; color:rgba(255,255,255,.2);
  margin-top:12px; margin-bottom:0;
}

/* Success */
.sub-success {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:80px 32px; text-align:center;
}
.sub-success__logo {
  display:flex; align-items:center; gap:10px; margin-bottom:56px;
}
.sub-success__logo .sub-hero__logo-hey { font-size:22px; }
.sub-success__logo .sub-hero__logo-mtl { font-size:22px; color:#fff; }
.sub-success__title {
  font-family:var(--font-display);
  font-size:80px; letter-spacing:.01em;
  color:#fff; line-height:.85; margin-bottom:24px;
}
.sub-success__title em {
  font-family:var(--font-serif);
  font-style:italic; font-size:56px;
  color:rgba(255,255,255,.3); letter-spacing:0;
}
.sub-success__desc {
  font-size:15px; color:rgba(255,255,255,.35);
  line-height:1.7; max-width:400px; margin-bottom:48px;
}
.sub-success__btn {
  font-family:var(--font-body);
  font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--black); background:#fff;
  border:none; border-radius:100px; padding:14px 36px;
  cursor:pointer; text-decoration:none;
  transition:opacity .13s;
}
.sub-success__btn:hover { opacity:.75; }

/* Editions */
/* ─── ABOUT PAGE ─────────────────────────────────────────────────────────── */
.about-hero {
  background:var(--black); position:relative; overflow:hidden;
  min-height:560px; display:flex; align-items:flex-end;
}
.about-hero__photo {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.about-hero:not(.about-hero--photo)::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 75% 30%,color-mix(in srgb, var(--red) 35%, transparent) 0%,transparent 55%),
    radial-gradient(circle at 20% 80%,rgba(139,92,246,.22) 0%,transparent 55%),
    linear-gradient(160deg,#0d1929 0%,#1a0a2e 60%,#2d0f1a 100%);
}
.about-hero__scrim {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.88) 100%);
}
.about-hero__inner {
  position:relative; z-index:2;
  max-width:1200px; margin:0 auto;
  padding:120px 32px 72px; width:100%;
}
.about-hero__text { max-width:720px; }
.about-hero__overline {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.7);
  margin-bottom:28px;
}
.about-hero__overline .dash {
  display:inline-block; width:28px; height:2px; background:var(--red);
}
.about-hero__title {
  font-family:var(--font-serif);
  font-size:clamp(40px,6vw,80px); font-weight:400;
  line-height:1.02; color:#fff; margin:0 0 24px;
}
.about-hero__title em { font-style:italic; color:rgba(255,255,255,.72); }
.about-hero__desc {
  font-size:17px; line-height:1.6; color:rgba(255,255,255,.78);
  max-width:560px; margin:0 0 32px;
}
.about-hero__btns { display:flex; gap:14px; flex-wrap:wrap; }

/* About — body prose, single column */
.about-body { max-width:760px; margin:0 auto; padding:88px 32px 24px; }
.about-body__divider {
  width:48px; height:3px; background:var(--red); border-radius:2px; margin-bottom:32px;
}
.about-body__content { font-size:17px; line-height:1.75; color:var(--black); }
.about-body__content p { margin:0 0 1.2em; }
.about-body__content h2 {
  font-family:var(--font-serif);
  font-size:30px; font-weight:400; line-height:1.2;
  margin:2em 0 .6em; color:var(--black);
}

/* About — values: typographic grid, no icons */
.about-values { max-width:1200px; margin:0 auto; padding:48px 32px 96px; }
.about-values__head { margin-bottom:40px; }
.about-values__kicker {
  display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red);
  padding-bottom:8px; border-bottom:2px solid var(--red);
}
.about-values__grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:40px;
}
.about-value { border-top:1px solid rgba(0,0,0,0.12); padding-top:20px; }
.about-value__num {
  font-family:var(--font-display);
  font-size:14px; letter-spacing:.12em;
  color:var(--red); margin-bottom:14px;
}
.about-value__heading {
  font-family:var(--font-serif);
  font-size:22px; font-weight:400; line-height:1.2;
  color:var(--black); margin-bottom:10px;
}
.about-value__body {
  font-size:14px; color:var(--grey-text); line-height:1.65; margin:0;
}

/* About — section divider */
.about-section-divider {
  max-width:1200px; margin:0 32px;
  border-top:1px solid rgba(0,0,0,0.08);
}

/* About — Work with us: two-card layout */
.about-work { max-width:1200px; margin:0 auto; padding:72px 32px 80px; }
.about-work__grid {
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.about-work-card {
  border-radius:20px; padding:44px 40px; position:relative; overflow:hidden;
}
.about-work-card--dark { background:var(--black); }
.about-work-card--light {
  background:var(--white);
  border:1px solid rgba(0,0,0,0.07);
}
.about-work-card__glow {
  position:absolute; top:-40px; right:-40px;
  width:180px; height:180px; border-radius:50%;
  background:color-mix(in srgb, var(--red) 8%, transparent); pointer-events:none;
}
.about-work-card__body { position:relative; }
.about-work-card__label {
  font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:16px;
}
.about-work-card__title {
  font-family:var(--font-display);
  font-size:32px; letter-spacing:.03em;
  line-height:.92; margin-bottom:16px;
}
.about-work-card--dark .about-work-card__title { color:#fff; }
.about-work-card--light .about-work-card__title { color:var(--black); }
.about-work-card__desc {
  font-size:14px; color:rgba(255,255,255,.4); line-height:1.65; margin-bottom:28px;
}
.about-work-card__desc--light { color:var(--grey-text); }
.about-work-card__link {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-body);
  font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:2px; transition:border-color .13s;
}
.about-work-card__link:hover { border-color:rgba(255,255,255,.7); }
.about-work-card__link--dark {
  color:var(--black);
  border-bottom-color:rgba(0,0,0,0.2);
}
.about-work-card__link--dark:hover { border-color:rgba(0,0,0,.7); }

/* ─── ADVERTISE PAGE ─────────────────────────────────────────────────────── */
.adv-page { background:var(--black); min-height:100vh; }

/* Hero */
.adv-hero {
  border-bottom:1px solid rgba(255,255,255,.07);
  position:relative; overflow:hidden;
}
.adv-hero__grid-bg {
  position:absolute; inset:0; opacity:.025; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:60px 60px;
}
.adv-hero__glow {
  position:absolute; right:-80px; top:50%; transform:translateY(-50%);
  width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--red) 18%, transparent) 0%,transparent 70%);
  pointer-events:none;
}
.adv-hero__inner {
  max-width:1200px; margin:0 auto;
  padding:80px 32px 72px; position:relative;
}
.adv-hero__cols {
  display:flex; align-items:flex-end; justify-content:space-between; gap:40px;
}
.adv-hero__left { max-width:580px; }
.adv-hero__eyebrow {
  display:flex; align-items:center; gap:10px; margin-bottom:28px;
}
.adv-hero__eyebrow .dash {
  display:inline-block; width:24px; height:1px; background:var(--red);
}
.adv-hero__eyebrow span:last-child {
  font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.35);
}
.adv-hero__title {
  font-family:var(--font-display);
  font-size:80px; letter-spacing:.01em;
  color:#fff; line-height:.85; margin:0 0 28px;
}
.adv-hero__title em {
  font-family:var(--font-serif); font-style:italic;
  font-size:64px; color:var(--red); letter-spacing:0;
}
.adv-hero__desc {
  font-size:16px; color:rgba(255,255,255,.38);
  line-height:1.72; max-width:460px; margin:0;
}
.adv-hero__right {
  flex-shrink:0; width:260px;
  border-left:1px solid rgba(255,255,255,.08);
  padding-left:36px; padding-bottom:8px;
}
.adv-hero__why-label {
  font-size:9px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); margin-bottom:16px;
}
.adv-hero__why-list {
  list-style:none; margin:0; padding:0;
}
.adv-hero__why-list li {
  display:flex; gap:10px; align-items:flex-start; margin-bottom:12px;
  font-size:13px; color:rgba(255,255,255,.4); line-height:1.55;
}
.adv-hero__why-list li::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.2); flex-shrink:0; margin-top:6px;
}

/* Formats */
.adv-formats {
  border-bottom:1px solid rgba(255,255,255,.07);
}
.adv-formats .wrap {
  max-width:1200px; margin:0 auto; padding:0 32px;
}
.adv-formats__label {
  display:flex; align-items:center; gap:12px;
  padding-top:48px; padding-bottom:32px;
}
.adv-formats__label span {
  font-size:9.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.25);
}
.adv-formats__label .line {
  flex:1; height:1px; background:rgba(255,255,255,.06);
}
.adv-format {
  display:grid; grid-template-columns:80px 1fr 1fr; gap:0;
  border-top:1px solid rgba(255,255,255,.06);
  padding:28px 0; transition:background .15s; cursor:default;
}
.adv-format:hover { background:rgba(255,255,255,.02); }
.adv-format__num {
  font-family:var(--font-display); font-size:40px;
  letter-spacing:.04em; color:rgba(255,255,255,.12);
  line-height:1; padding-top:4px; transition:color .15s;
}
.adv-format:hover .adv-format__num {
  color:var(--fmt-accent, rgba(255,255,255,.12));
}
.adv-format__info { padding-right:48px; }
.adv-format__name {
  font-family:var(--font-display); font-size:32px;
  letter-spacing:.04em; color:#fff; line-height:.95; margin-bottom:5px;
}
.adv-format__sub {
  font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; opacity:.6; transition:opacity .15s;
}
.adv-format:hover .adv-format__sub { opacity:1; }
.adv-format__desc {
  font-size:14px; color:rgba(255,255,255,.35); line-height:1.7;
  border-left:1px solid rgba(255,255,255,.06); padding-left:36px;
  transition:color .15s;
}
.adv-format:hover .adv-format__desc { color:rgba(255,255,255,.55); }

/* Body: manifesto + form */
.adv-body {
  max-width:1200px; margin:0 auto; padding:64px 32px 80px;
}
.adv-body__cols {
  display:grid; grid-template-columns:1fr 420px; gap:64px; align-items:start;
}
.adv-manifesto__label {
  font-size:9.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.25);
  margin-bottom:40px; display:flex; align-items:center; gap:12px;
}
.adv-manifesto__label .line {
  flex:1; height:1px; background:rgba(255,255,255,.06);
}
.adv-manifesto__item {
  border-top:1px solid rgba(255,255,255,.06);
  padding:32px 0;
}
.adv-manifesto__item--first { border-top:none; padding-top:0; }
.adv-manifesto__item h3 {
  font-family:var(--font-serif); font-style:italic;
  font-size:22px; font-weight:400; line-height:1.3;
  color:#fff; margin:0 0 10px;
}
.adv-manifesto__item p {
  font-size:14.5px; color:rgba(255,255,255,.38);
  line-height:1.72; margin:0; max-width:480px;
}
.adv-manifesto__cta {
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:32px; display:flex; align-items:center; gap:16px;
}
.adv-manifesto__cta span {
  font-family:var(--font-serif); font-style:italic;
  font-size:17px; color:rgba(255,255,255,.3); line-height:1.5;
}
.adv-manifesto__cta a {
  flex-shrink:0; font-family:var(--font-body);
  font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--red); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--red) 30%, transparent); padding-bottom:1px;
  transition:border-color .13s;
}
.adv-manifesto__cta a:hover { border-color:var(--red); }

/* Form card */
.adv-form-wrap { position:sticky; top:var(--hm-sticky-top); }
.adv-form-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px; overflow:hidden;
}
.adv-form-card__head {
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:24px 28px;
}
.adv-form-card__label {
  font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.25); margin-bottom:8px;
}
.adv-form-card__sub {
  font-family:var(--font-serif);
  font-size:21px; color:#fff; line-height:1.25;
}
.adv-form-card__sub em {
  font-style:italic; color:rgba(255,255,255,.35);
}
.adv-form { padding:24px 28px; }
.adv-field { margin-bottom:14px; }
.adv-field label {
  display:block; font-size:11.5px; font-weight:600;
  color:rgba(255,255,255,.5); margin-bottom:5px;
}
.adv-field .req { color:var(--danger); }
.adv-field input,
.adv-field select,
.adv-field textarea {
  width:100%; box-sizing:border-box;
  font-family:var(--font-body); font-size:14px;
  color:#fff; padding:11px 14px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:9px; outline:none;
  transition:border-color .15s;
}
.adv-field input::placeholder,
.adv-field textarea::placeholder { color:rgba(255,255,255,.25); }
.adv-field input:focus,
.adv-field select:focus,
.adv-field textarea:focus { border-color:rgba(255,255,255,.35); }
.adv-field select {
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.adv-field select option {
  background:var(--black); color:#fff;
}
.adv-type-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:7px;
}
.adv-type-btn {
  font-family:var(--font-body); font-size:12.5px; font-weight:600;
  color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(255,255,255,.09);
  border-radius:8px; padding:9px 12px; cursor:pointer;
  text-align:center; transition:all .14s;
}
.adv-type-btn.active {
  color:var(--black); background:#fff; border-color:#fff;
}
.adv-form__error {
  font-size:12px; color:var(--red); margin-top:8px;
}
.adv-form__submit {
  width:100%; font-family:var(--font-body);
  font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--black); background:#fff;
  border:none; border-radius:10px; padding:14px 0;
  cursor:pointer; margin-top:8px; transition:background .14s,color .14s;
}
.adv-form__submit:hover { background:var(--red); color:#fff; }
.adv-form__fine {
  font-size:11px; color:rgba(255,255,255,.22);
  text-align:center; margin-top:10px;
}

/* Form success */
.adv-form-success { padding:48px 28px; text-align:center; }
.adv-form-success__icon {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--red),#f59e0b);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; font-size:22px; color:#fff;
}
.adv-form-success__title {
  font-family:var(--font-display);
  font-size:28px; color:#fff; margin-bottom:8px;
}
.adv-form-success p {
  font-size:13.5px; color:rgba(255,255,255,.4);
  line-height:1.6; margin-bottom:24px;
}

/* ─── CONTACT PAGE ───────────────────────────────────────────────────────── */
/* ─── CONTACT PAGE — editorial v2 ─────────────────────────────────────────── */
.contact-page { background:var(--grey-bg); min-height:100vh; }

/* HERO — matches .hood-hero treatment */
.contact-hero {
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent,var(--red)) 12%, #0d0d0d) 0%,
    #0d0d0d 60%,
    color-mix(in srgb, var(--accent,var(--red)) 6%, #0d0d0d) 100%);
  overflow:hidden; position:relative;
  border-bottom:3px solid var(--accent,var(--red));
}
.contact-hero__glow1 {
  position:absolute; right:-80px; top:-80px;
  width:400px; height:400px; border-radius:50%;
  background:var(--accent,var(--red)); opacity:.07; pointer-events:none;
}
.contact-hero__glow2 {
  position:absolute; left:38%; bottom:-60px;
  width:360px; height:360px; border-radius:50%;
  background:var(--accent,var(--red)); opacity:.04; pointer-events:none;
}
.contact-hero__inner {
  max-width:1200px; margin:0 auto;
  padding:72px 32px 60px; position:relative;
}
.contact-hero__label {
  font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:18px;
}
.contact-hero__title {
  font-family:var(--font-display);
  font-size:96px; letter-spacing:.01em;
  color:#fff; line-height:.85; margin:0 0 18px 0;
}
.contact-hero__body { max-width:620px; margin-top:24px; }
.contact-hero__body p {
  font-family:var(--font-serif);
  font-size:18px; line-height:1.75;
  color:rgba(255,255,255,.72);
  margin:0 0 18px 0;
}
.contact-hero__sign {
  font-style:italic;
  color:rgba(255,255,255,.5) !important;
  font-size:15px !important;
}

/* BODY — reasons left, form right, no card chrome */
.contact-body { background:var(--grey-bg); }
.contact-body__inner {
  max-width:1100px; margin:0 auto;
  padding:32px 32px 96px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:72px; align-items:start;
}

/* Section labels — match .bestof and .hood styling */
.contact-left__label,
.contact-form-head__label {
  font-family:var(--font-body);
  font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grey-text);
  margin-bottom:18px;
}

/* REASONS — flat editorial list, no buttons-on-cards */
.contact-reasons {
  display:flex; flex-direction:column;
  border-top:1px solid rgba(0,0,0,0.09);
}
.contact-reason {
  display:block; width:100%; text-align:left;
  background:transparent; border:0;
  border-bottom:1px solid rgba(0,0,0,0.09);
  padding:16px 0; cursor:pointer;
  font-family:var(--font-body);
  position:relative; transition:padding .18s;
}
.contact-reason::before {
  content:""; position:absolute; left:-14px; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent,var(--red));
  transform:translateY(-50%) scale(0);
  transition:transform .18s;
}
.contact-reason:hover { padding-left:14px; }
.contact-reason:hover::before { transform:translateY(-50%) scale(1); }
.contact-reason.is-active {
  padding-left:14px;
}
.contact-reason.is-active::before { transform:translateY(-50%) scale(1); }
.contact-reason.is-active .contact-reason__label { color:var(--accent,var(--red)); }
.contact-reason__label {
  font-size:14px; font-weight:700; color:var(--black);
  letter-spacing:.01em; margin-bottom:3px;
  transition:color .15s;
}
.contact-reason__desc {
  font-size:12.5px; line-height:1.55; color:var(--grey-text);
}

/* FORM — open layout, no card */
.contact-right { min-width:0; }
.contact-form-head {
  margin-bottom:22px; padding-bottom:18px;
  border-bottom:1px solid rgba(0,0,0,0.09);
}
.contact-form-head__target {
  font-family:var(--font-display);
  font-size:42px; letter-spacing:.02em;
  color:var(--black); line-height:.9;
}
.contact-form { display:block; }
.contact-field { margin-bottom:22px; }
.contact-field label {
  display:block;
  font-family:var(--font-body);
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey-text); margin-bottom:8px;
}
.contact-field .req { color:var(--accent,var(--danger)); }
.contact-field input,
.contact-field textarea {
  width:100%; box-sizing:border-box;
  font-family:var(--font-serif);
  font-size:18px; color:var(--black);
  padding:10px 0; background:transparent;
  border:0; border-bottom:1.5px solid rgba(0,0,0,0.18);
  border-radius:0; outline:none;
  transition:border-color .18s;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color:var(--grey-mid); font-style:italic;
}
.contact-field textarea {
  resize:vertical; min-height:160px; line-height:1.6;
}
.contact-field input:focus,
.contact-field textarea:focus { border-color:var(--accent,var(--red)); }
.contact-form__error {
  font-family:var(--font-body);
  font-size:12.5px; color:var(--accent,var(--danger)); margin:0 0 12px 0;
}
.contact-form__submit {
  display:inline-block; margin-top:14px;
  font-family:var(--font-body);
  font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff; background:var(--black);
  border:0; border-radius:0;
  padding:18px 36px; cursor:pointer;
  transition:background .18s, transform .18s;
}
.contact-form__submit:hover {
  background:var(--accent,var(--red)); transform:translateX(4px);
}

/* SUCCESS state */
.contact-form-success { padding:32px 0 0 0; text-align:left; }
.contact-form-success__rule {
  width:60px; height:3px; background:var(--accent,var(--red));
  margin-bottom:22px;
}
.contact-form-success__title {
  font-family:var(--font-display);
  font-size:48px; color:var(--black);
  line-height:.9; margin-bottom:12px;
}
.contact-form-success p {
  font-family:var(--font-serif);
  font-size:18px; color:var(--grey-text);
  line-height:1.7; margin:0 0 28px 0; max-width:480px;
}
.contact-form-success__link {
  font-family:var(--font-body);
  font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--black);
  text-decoration:none;
  border-bottom:2px solid var(--accent,var(--red));
  padding-bottom:4px; transition:color .15s;
}
.contact-form-success__link:hover { color:var(--accent,var(--red)); }

/* RESPONSIVE */
@media (max-width:880px) {
  .contact-hero__inner { padding:56px 24px 44px; }
  .contact-hero__title { font-size:64px; }
  .contact-hero__body p { font-size:16px; line-height:1.7; }
  .contact-body__inner {
    grid-template-columns:1fr; gap:48px;
    padding:24px 24px 72px;
  }
  .contact-form-head__target { font-size:34px; }
  .contact-form-success__title { font-size:38px; }
}

/* ─── NEIGHBOURHOOD PAGE ─────────────────────────────────────────────────── */
.hood-hero {
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--accent,var(--red)) 12%, #0d0d0d) 0%,
    #0d0d0d 60%,
    color-mix(in srgb, var(--accent,var(--red)) 6%, #0d0d0d) 100%);
  overflow:hidden; position:relative;
  border-bottom:3px solid var(--accent,var(--red));
}
.hood-hero__glow1 {
  position:absolute; right:-80px; top:-80px;
  width:400px; height:400px; border-radius:50%;
  background:var(--accent,var(--red)); opacity:.07; pointer-events:none;
}
.hood-hero__glow2 {
  position:absolute; left:40%; bottom:-60px;
  width:360px; height:360px; border-radius:50%;
  background:var(--accent,var(--red)); opacity:.04; pointer-events:none;
}
.hood-hero__inner {
  max-width:1200px; margin:0 auto;
  padding:36px 32px 32px; position:relative;
}
.hood-hero__stats {
  display:flex; gap:16px; flex-wrap:wrap; margin-top:24px;
}
.hood-stat {
  font-size:13px; color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:100px; padding:5px 14px;
}

.hood-content { background:var(--grey-bg); }
.hood-content__inner {
  max-width:1200px; margin:0 auto; padding:28px 32px 80px;
}

/* ─── BEST-OF ENTRY — v30-1 open typographic layout ─────────────────────── */

/* === Entry wrapper — no card borders, open layout === */
.bestof-entry { margin-bottom:88px; }

/* === Rank + name head row === */
.bestof-entry__head {
  display:flex; gap:24px; align-items:flex-start;
  margin-bottom:18px; position:relative;
}
.bestof-entry__rank {
  flex-shrink:0; width:60px;
  font-family:var(--font-display);
  font-size:80px; letter-spacing:-.01em; line-height:.85;
  padding-top:4px; user-select:none;
}
.bestof-entry__rank-mobile { display:none; }
.bestof-entry__info { flex:1; min-width:0; }

/* Location line */
.bestof-entry__loc {
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.bestof-entry__loc span {
  font-size:11.5px; color:var(--grey-text); font-weight:500;
  letter-spacing:.02em;
}
.bestof-dot { color:var(--grey-mid); font-size:9px; }

/* Name row (mobile rank hidden on desktop) */
.bestof-entry__name-row { display:block; }
.bestof-entry__name {
  font-family:var(--font-display); font-size:48px;
  letter-spacing:.02em; color:var(--black);
  line-height:.88; margin:0 0 14px 0;
}

/* Tagline */
.bestof-entry__tagline {
  font-family:var(--font-serif); font-style:italic;
  font-size:18px; line-height:1.5; color:var(--grey-text);
  margin:0 0 16px 0;
}

/* Price + Badges row */
.bestof-entry__badges {
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
}
.bestof-price {
  font-size:13.5px; font-weight:700; color:var(--black);
  letter-spacing:.01em;
}
.bestof-price-note { font-size:12.5px; color:var(--grey-text); }
.bestof-badge-pill {
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; border-radius:3px; padding:2px 7px;
}
.bestof-badge-pill--gold {
  color:#b45309 !important;
  background:rgba(251,191,36,0.1) !important;
}

/* === 3:2 Image === */
.bestof-entry__image {
  aspect-ratio:3/2; border-radius:10px; overflow:hidden;
  position:relative; margin-bottom:28px;
}
.bestof-entry__image img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.bestof-entry__image-caption {
  position:absolute; bottom:0; left:0; right:0;
  padding:32px 18px 14px;
  background:linear-gradient(to top,rgba(0,0,0,0.45),transparent);
  display:flex; align-items:flex-end; justify-content:space-between;
}
.bestof-entry__image-hood {
  font-size:10.5px; color:rgba(255,255,255,.5);
  font-family:var(--font-body); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
}
.bestof-entry__image-credit {
  font-size:11px; color:rgba(255,255,255,.45); font-style:italic;
}

/* === Body copy === */
.bestof-entry__body { margin-bottom:32px; }
.bestof-entry__body p {
  font-family:var(--font-serif);
  font-size:17px; line-height:1.9; color:#2a2826; margin-bottom:22px;
}

/* === Must Try / Best For highlights === */
.bestof-entry__highlights {
  border-top:1px solid rgba(0,0,0,0.08);
  border-bottom:1px solid rgba(0,0,0,0.08);
  padding:22px 0; margin-bottom:28px;
  display:flex; flex-direction:column; gap:16px;
}
.bestof-hl {
  display:flex; align-items:flex-start; gap:18px;
}
.bestof-hl__label {
  flex-shrink:0; width:82px;
  font-family:var(--font-display);
  font-size:11.5px; letter-spacing:.15em;
  line-height:1.4; padding-top:3px;
}
.bestof-hl__label--grey { color:var(--grey-text) !important; }
.bestof-hl__text {
  margin:0; font-size:15px; font-weight:500;
  color:var(--black); line-height:1.65; flex:1;
}

/* === Contact strip === */
.bestof-entry__contact {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.bestof-contact__left {
  display:flex; flex-direction:column; gap:6px;
}
.bestof-addr {
  display:flex; align-items:flex-start; gap:8px;
}
.bestof-addr svg { flex-shrink:0; margin-top:2px; }
.bestof-addr span { font-size:13px; color:#2a2826; line-height:1.45; }
.bestof-addr-meta {
  display:flex; align-items:center; gap:6px; padding-left:20px;
}
.bestof-addr-meta span { font-size:12.5px; color:var(--grey-text); }
.bestof-contact__right {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-top:2px;
}
.bestof-website {
  font-size:13px; font-weight:700; letter-spacing:.01em;
  text-decoration:none; transition:opacity .13s;
}
.bestof-website:hover { opacity:.6; }
.bestof-instagram {
  font-size:13px; color:var(--grey-text); text-decoration:none;
  transition:color .13s;
}
.bestof-instagram:hover { color:var(--black); }
.bestof-verified {
  font-size:11.5px; color:var(--grey-mid); font-style:italic;
}
.bestof-dir-link {
  font-size:13px; font-weight:700; letter-spacing:.01em;
  text-decoration:none; transition:opacity .13s;
}
.bestof-dir-link:hover { opacity:.6; }

/* === Star divider between entries === */
.bestof-divider {
  display:flex; align-items:center; gap:14px;
  margin:0 0 48px;
}
.bestof-divider::before,
.bestof-divider::after {
  content:''; flex:1; height:1px; background:rgba(0,0,0,0.09);
}
.bestof-divider span {
  font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; flex-shrink:0;
}

/* === Best-of Intro (body content) === */
.bestof-intro { margin-bottom:40px; padding-bottom:36px; border-bottom:1px solid rgba(0,0,0,0.08); }
.bestof-intro p {
  font-family:var(--font-serif);
  font-size:17.5px; line-height:1.82; color:#2a2826; margin-bottom:20px;
}

/* === Mobile TOC (shown on tablet/mobile) === */
.bestof-mobile-toc {
  background:var(--white); border-radius:14px;
  border:1px solid rgba(0,0,0,0.07); padding:18px 20px;
  margin-bottom:40px; display:none;
}
.bestof-mobile-toc__title {
  font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey-text); margin-bottom:14px;
}
.bestof-mobile-toc__item {
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.06);
  text-decoration:none;
}
.bestof-mobile-toc__item:last-child { border-bottom:none; }
.bestof-mobile-toc__rank {
  font-family:var(--font-display); font-size:14px;
  width:20px; text-align:center; flex-shrink:0;
}
.bestof-mobile-toc__name {
  font-size:14px; font-weight:600; color:var(--black);
}
.bestof-mobile-toc__hood {
  font-size:12px; color:var(--grey-text); margin-left:auto;
}

/* === Quick Reference Table === */
.bestof-quick-ref {
  background:var(--white); border-radius:16px;
  border:1px solid rgba(0,0,0,0.07); overflow:hidden;
  margin-top:16px;
}
.bestof-quick-ref__header {
  background:var(--black); padding:16px 24px;
  display:flex; align-items:center; gap:12px;
}
.bestof-quick-ref__star {
  font-size:13px; font-weight:700; letter-spacing:.08em;
}
.bestof-quick-ref__title {
  font-family:var(--font-display); font-size:20px;
  letter-spacing:.06em; color:#fff;
}
.bestof-quick-ref__count {
  font-size:12px; color:rgba(255,255,255,.35); margin-left:4px;
}
.bestof-quick-ref__row {
  display:grid; grid-template-columns:40px 1fr auto auto;
  gap:14px; align-items:center; padding:13px 24px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.bestof-quick-ref__row:last-child { border-bottom:none; }
.bestof-quick-ref__row--alt { background:rgba(0,0,0,0.01); }
.bestof-quick-ref__rank {
  font-family:var(--font-display); font-size:17px;
  text-align:center;
}
.bestof-quick-ref__name {
  font-size:14px; font-weight:600; color:var(--black);
}
.bestof-quick-ref__meta {
  font-size:11.5px; color:var(--grey-text);
}
.bestof-quick-ref__price {
  font-size:13px; font-weight:700; color:var(--grey-text);
}
.bestof-quick-ref__link {
  font-size:11.5px; font-weight:600; text-decoration:none;
  transition:text-decoration .13s;
}
.bestof-quick-ref__link:hover { text-decoration:underline; }

/* === Right Rail — Table of Contents === */
.rail-toc {
  background:var(--white); border-radius:14px;
  border:1px solid rgba(0,0,0,0.07); overflow:hidden;
}
.rail-toc__header {
  background:var(--black); padding:12px 18px;
  display:flex; align-items:center; gap:8px;
}
.rail-toc__star {
  font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase;
}
.rail-toc__title {
  font-family:var(--font-display); font-size:16px;
  letter-spacing:.06em; color:#fff;
}
.rail-toc__list { padding:8px 0; }
.rail-toc__item {
  display:flex; align-items:center; gap:11px;
  padding:9px 18px; text-decoration:none;
  transition:background .12s;
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.rail-toc__item:last-child { border-bottom:none; }
.rail-toc__item:hover { background:var(--grey-bg); }
.rail-toc__rank {
  font-family:var(--font-display); font-size:15px;
  width:22px; text-align:center; flex-shrink:0;
}
.rail-toc__item-text { flex:1; min-width:0; }
.rail-toc__item-name {
  font-size:13px; font-weight:600; color:var(--black);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rail-toc__item-hood { font-size:11px; color:var(--grey-text); }
.rail-toc__item-price {
  font-size:12px; font-weight:700; color:var(--grey-text);
  flex-shrink:0;
}

/* === Hero badge (entry count pill on hero image) === */
.bestof-badge {
  position:absolute; bottom:20px; right:20px;
  display:flex; align-items:center; gap:6px;
  background:rgba(13,13,13,0.7); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px; padding:6px 14px;
}
.bestof-badge__star { font-size:13px; font-weight:700; color:var(--accent-bestof, var(--red)); }
.bestof-badge__count {
  font-size:11px; font-weight:700; letter-spacing:.08em; color:#fff;
}

/* === Mobile responsive overrides === */
@media (max-width:1279px) {
  .bestof-mobile-toc { display:block; }
}
@media (max-width:639px) {
  .bestof-entry { margin-bottom:52px; }
  .bestof-entry__head { gap:12px; }
  .bestof-entry__rank { width:36px; font-size:44px; }
  .bestof-entry__rank-mobile { display:none; }
  .bestof-entry__name { font-size:32px; margin-bottom:10px; }
  .bestof-entry__tagline { font-size:15px; margin-bottom:12px; }
  .bestof-entry__body p { font-size:15px; line-height:1.75; margin-bottom:16px; }
  .bestof-hl__label { width:auto; }
  .bestof-entry__contact { flex-direction:column; }
  .bestof-quick-ref__row { grid-template-columns:28px 1fr auto; gap:10px; padding:10px 16px; }
  .bestof-quick-ref__price { display:none; }
}

/* ─── LEGAL PAGES (Privacy, Terms) ───────────────────────────────────────── */
.legal-page { background:var(--grey-bg); min-height:100vh; }
.legal-page__hero {
  background:var(--black); padding:64px 0 48px; text-align:center;
  border-bottom:3px solid var(--red); position:relative; overflow:hidden;
}
.legal-page__hero .wrap { position:relative; z-index:2; }
.legal-page__title {
  font-family:var(--font-display); font-size:56px; font-weight:400;
  color:#fff; margin:0 0 8px; letter-spacing:.02em; line-height:.9;
}
.legal-page__updated {
  font-size:13px; font-weight:500; color:rgba(255,255,255,.35);
  letter-spacing:.03em; margin:0;
}
.legal-page__body {
  max-width:720px; margin:0 auto; padding:48px 24px 80px;
  font-size:15.5px; line-height:1.8; color:var(--black);
  background:var(--white); border-radius:0 0 var(--radius-lg) var(--radius-lg);
}
.legal-page__body h2 {
  font-family:var(--font-serif); font-size:24px; font-weight:400;
  margin:40px 0 16px; color:var(--black); line-height:1.25;
}
.legal-page__body h3 {
  font-size:17px; font-weight:700;
  margin:28px 0 12px; color:var(--black);
}
.legal-page__body p { margin:0 0 16px; }
.legal-page__body ul {
  margin:0 0 16px; padding-left:24px;
}
.legal-page__body li { margin-bottom:6px; }
.legal-page__body a {
  color:var(--red); text-decoration:underline;
  text-underline-offset:2px;
}
.legal-page__body a:hover { color:var(--black); }

@media (max-width:767px) {
  .legal-page__hero { padding:48px 0 36px; }
  .legal-page__title { font-size:40px; }
  .legal-page__body { padding:32px 16px 60px; font-size:15px; }
  .legal-page__body h2 { font-size:21px; margin:32px 0 12px; }
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.site-footer { background:var(--black); padding:48px 32px 32px; }
.site-footer__inner { max-width:1200px; margin:0 auto; }
.site-footer__top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:32px;
}
.site-footer__logo { display:flex; align-items:baseline; gap:3px; }
.site-footer__logo-hey {
  font-family:var(--font-serif); font-style:italic;
  font-size:32px; color:var(--red); line-height:1;
}
.site-footer__logo-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--red); margin:0 1px 6px;
}
.site-footer__logo-city {
  font-family:var(--font-display); font-size:36px;
  color:#fff; line-height:1; letter-spacing:.03em;
}
.site-footer__social { display:flex; gap:10px; }
.site-footer__social-btn {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.45); font-size:15px;
  transition:color .18s, border-color .18s, background .18s;
  text-decoration:none;
}
.site-footer__social-btn:hover { color:#fff; border-color:rgba(255,255,255,.3); }
.site-footer__social-btn--instagram:hover { color:#E1306C; border-color:rgba(225,48,108,.4); }
.site-footer__social-btn--facebook:hover  { color:#1877F2; border-color:rgba(24,119,242,.4); }
.site-footer__social-btn--twitter:hover   { color:#fff;    border-color:rgba(255,255,255,.3); }
.site-footer__social-btn--tiktok:hover    { color:#00f2ea; border-color:rgba(0,242,234,.4); }
.site-footer__social-btn--youtube:hover   { color:#FF0000; border-color:rgba(255,0,0,.4); }
/* Inline SVGs replaced the Font Awesome @font-face glyphs; without display:block
   they sit on the text baseline and render off-centre in the 34px circle. */
.site-footer__social-btn svg { display:block; }
.site-footer__columns {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:32px; margin-bottom:40px;
}
.site-footer__col-title {
  font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:12px;
}
.site-footer__col-title-link {
  color:inherit; text-decoration:none; transition:color .14s;
}
.site-footer__col-title-link:hover { color:rgba(255,255,255,.7); }
.site-footer__col-link {
  display:block; font-size:12.5px; color:rgba(255,255,255,.45);
  line-height:1.4; margin-bottom:8px; transition:color .14s;
}
.site-footer__col-link:hover { color:#fff; }
.site-footer__bottom {
  border-top:1px solid rgba(255,255,255,.08); padding-top:20px;
  display:flex; justify-content:space-between; align-items:center;
}
.site-footer__copy { font-size:12px; color:rgba(255,255,255,.22); }
.site-footer__links { display:flex; gap:20px; }
.site-footer__link {
  font-size:12px; color:rgba(255,255,255,.28);
  transition:color .14s; cursor:pointer;
}
.site-footer__link:hover { color:rgba(255,255,255,.7); }

/* ─── MOBILE HEADER ──────────────────────────────────────────────────────── */
.mobile-header {
  display:none; /* shown via media query */
  position:sticky; top:0; z-index:1000;
  background:rgba(250,250,248,0.96); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); height:54px;
  align-items:center; justify-content:space-between; padding:0 14px;
  transition:box-shadow .2s;
}
.mobile-header.scrolled { box-shadow:0 1px 0 rgba(0,0,0,.07), 0 4px 20px rgba(0,0,0,.07); }
.mobile-header__btn {
  width:38px; height:38px; border-radius:50%; border:none;
  background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--black); transition:background .13s;
}
.mobile-header__btn:hover { background:var(--grey-bg); }
.hamburger-bars {
  display:flex; flex-direction:column; gap:5px; transition:all .2s;
}
.hamburger-bar {
  width:20px; height:2px; border-radius:1px;
  background:var(--black); transition:all .2s;
}
.mobile-header.drawer-open .hamburger-bar:nth-child(1) {
  transform:rotate(45deg) translate(5px,5px);
}
.mobile-header.drawer-open .hamburger-bar:nth-child(2) {
  opacity:0;
}
.mobile-header.drawer-open .hamburger-bar:nth-child(3) {
  transform:rotate(-45deg) translate(5px,-5px);
}
.mobile-logo {
  display:flex; align-items:baseline; gap:3px;
}
.mobile-logo__hey {
  font-family:var(--font-serif); font-style:italic;
  font-size:22px; color:var(--red); line-height:1;
}
.mobile-logo__dot {
  width:4px; height:4px; border-radius:50%;
  background:var(--red); margin:0 1px 4px;
}
.mobile-logo__city {
  font-family:var(--font-display); font-size:24px;
  color:var(--black); line-height:1; letter-spacing:.03em;
}

/* Mobile drawer */
.mobile-drawer-scrim {
  position:fixed; inset:0; z-index:1100;
  background:rgba(10,10,10,0.55); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.mobile-drawer-scrim.open { opacity:1; pointer-events:auto; }
.mobile-drawer {
  position:fixed; left:0; right:0; bottom:0;
  height:88vh; z-index:1101; background:var(--white);
  border-radius:22px 22px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.22);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(0.22,1,0.36,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.mobile-drawer.open { transform:translateY(0); }
.mobile-drawer__handle {
  padding-top:12px; padding-bottom:4px;
  display:flex; justify-content:center; flex-shrink:0;
}
.mobile-drawer__handle-bar {
  width:36px; height:4px; border-radius:2px; background:var(--grey-mid);
}
.mobile-drawer__sections {
  overflow-y:auto; flex:1;
  border-top:1px solid var(--border); margin-top:6px;
}
.md-l1 {
  transition:transform .28s cubic-bezier(0.22,1,0.36,1);
}
.mobile-drawer__section-btn {
  display:flex; align-items:center; width:100%;
  padding:0 20px; border-bottom:1px solid var(--border);
  cursor:pointer; background:none; border-left:none; border-right:none;
  text-align:left; font-family:var(--font-body);
  transition:background .13s;
}
.mobile-drawer__section-btn:hover { background:#f5f4f2; }
.mobile-drawer__section-num {
  font-size:10px; font-weight:700; letter-spacing:.06em;
  color:var(--grey-mid); min-width:22px; flex-shrink:0; margin-right:2px;
}
.mobile-drawer__section-text { flex:1; padding:14px 0 13px; }
.mobile-drawer__section-name {
  font-family:var(--font-display); font-size:26px;
  letter-spacing:.03em; line-height:1; color:var(--black);
  display:block; margin-bottom:2px;
}
.mobile-drawer__section-sub {
  font-family:var(--font-serif); font-style:italic;
  font-size:12.5px; color:var(--grey-text); line-height:1;
}
.mobile-drawer__section-dot {
  width:7px; height:7px; border-radius:50%;
  flex-shrink:0; margin:0 14px 0 0; opacity:.7;
}
.mobile-drawer__section-arrow {
  color:var(--grey-mid); flex-shrink:0;
}
.mobile-drawer__utils {
  display:flex; border-top:1px solid var(--border); background:#f8f7f5;
}
.mobile-drawer__util-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 6px 12px; cursor:pointer; background:none; border:none;
  font-family:var(--font-body); transition:background .13s;
}
.mobile-drawer__util-btn + .mobile-drawer__util-btn {
  border-left:1px solid var(--border);
}
.mobile-drawer__util-btn:hover { background:#ede9e4; }
.mobile-drawer__util-icon { font-size:19px; line-height:1; }
.mobile-drawer__util-name {
  font-size:11px; font-weight:700; color:var(--black); letter-spacing:.02em;
}
.mobile-drawer__util-sub {
  font-size:9.5px; color:var(--grey-text); text-align:center; line-height:1.3;
}
.mobile-drawer__footer {
  padding:12px 20px; background:var(--black);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.mobile-drawer__subscribe-btn {
  font-family:var(--font-body); font-size:11.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--black); background:#fff;
  border:none; padding:8px 15px; border-radius:100px;
  text-decoration:none; cursor:pointer;
}

/* Mobile search overlay */
.mobile-search-scrim {
  position:fixed; inset:0; z-index:1200;
  background:rgba(10,10,10,0.55); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.mobile-search-scrim.open { opacity:1; pointer-events:auto; }
.mobile-search-panel {
  position:fixed; top:0; left:0; right:0; z-index:1201;
  background:var(--white); padding:52px 18px 20px;
  border-radius:0 0 20px 20px;
  box-shadow:0 8px 40px rgba(0,0,0,.18);
  transform:translateY(-110%);
  transition:transform .3s cubic-bezier(0.22,1,0.36,1);
}
.mobile-search-panel.open { transform:translateY(0); }
.mobile-search-bar {
  display:flex; align-items:center; gap:10px;
  background:var(--grey-bg); border-radius:14px; padding:0 14px;
  border:1.5px solid transparent;
}
.mobile-search-bar input {
  flex:1; border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-size:16px;
  color:var(--black); padding:14px 0;
}
.mobile-search-chips {
  display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;
}
.mobile-search-chip {
  font-family:var(--font-body); font-size:12px; font-weight:600;
  color:var(--grey-text); background:var(--grey-bg);
  border:1px solid rgba(0,0,0,.08);
  border-radius:100px; padding:6px 12px; cursor:pointer;
}
.mobile-search-cancel {
  position:absolute; top:14px; right:16px;
  font-family:var(--font-body); font-size:12px; font-weight:700;
  color:var(--grey-text); background:none; border:none; cursor:pointer;
  letter-spacing:.04em;
}

/* ─── THUMB BACKGROUNDS ──────────────────────────────────────────────────── */
.thumb-bg--news { background:linear-gradient(150deg,#1a1a2e 0%,#0f3460 100%); }
.thumb-bg--culture { background:linear-gradient(150deg,#2d1b69 0%,#11998e 100%); }
.thumb-bg--food { background:linear-gradient(150deg,#f7971e 0%,#c0392b 100%); }
.thumb-bg--lifestyle { background:linear-gradient(150deg,#0891b2 0%,#164e63 100%); }
.thumb-bg--thingstodo { background:linear-gradient(150deg,#16a34a 0%,#14532d 100%); }
.thumb-bg--travel { background:linear-gradient(150deg,#2563eb 0%,#1e3a8a 100%); }
.thumb-bg--bestof { background:linear-gradient(150deg,#1c1c1c 0%,#3a3a3a 100%); }
.thumb-bg--events { background:linear-gradient(150deg,#1a0a2e 0%,#3d0f3f 45%,#7c2d12 100%); }

/* ─── ACCENT UTILITIES ───────────────────────────────────────────────────── */
.accent--news { --accent:var(--accent-news); }
.accent--culture { --accent:var(--accent-culture); }
.accent--food { --accent:var(--accent-food); }
.accent--thingstodo { --accent:var(--accent-thingstodo); }
.accent--lifestyle { --accent:var(--accent-lifestyle); }
.accent--travel { --accent:var(--accent-travel); }
.accent--bestof { --accent:var(--accent-bestof); }

.text-accent { color:var(--accent, var(--red)); }
.bg-accent { background:var(--accent, var(--red)); }
.bg-accent-light { background:color-mix(in srgb, var(--accent, var(--red)) 10%, transparent); }
.border-accent { border-color:color-mix(in srgb, var(--accent, var(--red)) 25%, transparent); }

/* ─── UTILITY ────────────────────────────────────────────────────────────── */
.hide-scrollbar::-webkit-scrollbar { display:none; }
.hide-scrollbar { scrollbar-width:none; -ms-overflow-style:none; }

.container { max-width:1200px; margin:0 auto; }

.blink-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--red); animation:blink 1.8s ease-in-out infinite;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

/* Nav – two-row masthead has room; just tighten spacing on smaller laptops */
@media (max-width:1399px) {
  .nav-actions { gap:4px; }
  .main-nav { padding-block:0; padding-inline:14px; }
}

@media (max-width:1279px) {
  .header-wrap,
  .topbar { display:none; }
  .mobile-header { display:flex; }

  /* The two-row masthead is gone here; .mobile-header (54px) is the sticky
     element, so sticky rails re-key to it instead of the 114px desktop header. */
  :root { --hm-sticky-top: 70px; }

  .hero-banner__image { width:100%; }
  .hero-banner__text {
    position:static; width:100%; padding:20px 18px 28px;
  }
  .hero-banner__title { font-size:24px; }

  .feed-wrap { padding:30px 24px 60px; }
  .feed-grid { grid-template-columns:repeat(2,1fr); }
  .feed-grid__full { grid-column:1 / span 2; }

  .cat-header__title { font-size:54px; }
  .cat-layout { grid-template-columns:1fr; }
  .cat-sidebar { display:none; }

  .article-hero__inner {
    display:block; max-width:900px; margin:0 auto; position:relative;
  }
  .article-hero__image { width:50%; aspect-ratio:auto; align-self:stretch; background:var(--black); }
  .article-hero__image figure { width:100%; height:100%; margin:0; }
  .article-hero__image img { width:100%; height:100%; object-fit:cover; object-position:center center; }
  .article-hero__text { width:58%; padding:24px 32px 16px 24px; position:static; }
  .article-hero__inner { display:flex; flex-direction:row-reverse; }
  .article-hero__title { font-size:44px; }
  .article-hero__byline { display:none; }
  .article-hero__sub { margin-bottom:0; }
  .article-hero__pills { margin-bottom:10px; }
  .article-body-layout { grid-template-columns:1fr; }
  .article-sidebar { display:none; }

  .events-hero__inner { padding:32px 24px; }
  .events-hero__image { width:100%; aspect-ratio:16/9; }
  .events-hero__text {
    position:static; width:100%; padding:24px 18px 28px; background:var(--black);
  }

  /* Search overlay – tablet */
  .so-bar-row { padding:16px 18px; }
  .so-body { padding:20px 18px 28px; }
  .so-default { grid-template-columns:1fr; gap:24px; }
  .events-picks-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .events-picks-strip__inner { padding:16px 16px 20px; }
  .events-main-layout { grid-template-columns:1fr; }

  .event-detail-layout { grid-template-columns:1fr; }
  .event-detail-sidebar { display:none; }

  .listing-detail-layout { grid-template-columns:1fr; }

  .dir-cat-grid { grid-template-columns:repeat(3,1fr); }

  .contact-cards { grid-template-columns:1fr; gap:12px; }
  .contact-cols { grid-template-columns:1fr; gap:24px; }
  .contact-hero__inner { padding:48px 24px 40px; }

  .adv-hero__cols { flex-direction:column; align-items:flex-start; }
  .adv-hero__inner { padding:56px 24px 48px; }
  .adv-format { grid-template-columns:1fr; gap:12px; }
  .adv-format__desc { border-left:none; padding-left:0; }
  .adv-body__cols { grid-template-columns:1fr; gap:32px; }
  .adv-form-wrap { position:static; }

  .sub-hero__inner { padding:52px 24px 52px; }
  .sub-hero__title { font-size:72px; }

  .about-hero { min-height:460px; }
  .about-hero__inner { padding:80px 24px 56px; }
  .about-body { padding:64px 24px 16px; }
  .about-values { padding:32px 24px 80px; }
  .about-values__grid { grid-template-columns:1fr 1fr; gap:32px; }
  .about-work__grid { grid-template-columns:1fr; }

  .site-footer__columns { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:880px) {
  .article-hero__inner { display:block; }
  .article-hero__image { width:100%; aspect-ratio:3/2; }
  .article-hero__text {
    position:static; width:100%; padding:22px 24px 28px;
  }
  .article-hero__title { font-size:44px; }
}


@media (max-width:639px) {
  .feed-wrap { padding:24px 16px 48px; }
  .feed-grid { grid-template-columns:1fr; gap:16px; }
  .feed-grid__full { grid-column:1; }

  .article-card--wide { grid-column:span 1; }

  .cat-header__title { font-size:44px; }
  .cat-header__inner { padding:0 16px; }
  .cat-content { padding:20px 16px 60px; }
  .cat-article-grid { grid-template-columns:1fr; gap:14px; }

  .article-hero__text { padding:18px 16px 24px; }
  .article-hero__title { font-size:32px; }
  .article-hero__byline { display:flex; }
  .article-body { padding:24px 20px; }

  .events-hero { overflow:visible; }
  .events-hero__inner { padding:28px 16px; }
  .events-hero__image { aspect-ratio:4/3; }
  .events-hero__title { font-size:42px; }

  /* Search overlay – mobile */
  .so-bar-row { padding:14px 16px; gap:10px; }
  .so-body { padding:16px 16px 24px; }
  .so-default { grid-template-columns:1fr; gap:20px; }
  .so-trending-item { padding:8px 8px; gap:10px; }
  .so-trending-text { font-size:13px; }
  .so-browse-grid { grid-template-columns:repeat(3,1fr); gap:6px; }
  .so-browse-tile { padding:10px 6px 9px; }
  .so-browse-label { font-size:10.5px; }
  .so-close-btn span { display:none; }
  .so-close-btn { padding:7px 8px; }
  .so-input { font-size:15px; }
  .events-picks-grid { grid-template-columns:repeat(2,1fr); }
  .events-calendar__inner { padding:0 16px; }

  .contact-hero__inner { padding:36px 16px 32px; }
  .contact-hero__title { font-size:44px; }
  .contact-body { padding:32px 16px 60px; }

  .what-to-expect-grid { grid-template-columns:1fr; }

  .adv-hero__inner { padding:36px 16px 32px; }
  .adv-hero__title { font-size:52px; }
  .adv-hero__title em { font-size:42px; }
  .adv-formats .wrap { padding:0 16px; }
  .adv-body { padding:32px 16px 48px; }
  .adv-form-card__head { padding:20px 20px; }
  .adv-form { padding:20px 20px; }

  .dir-cat-grid { grid-template-columns:repeat(2,1fr); }

  .site-footer__top { flex-direction:column; align-items:center; gap:16px; }
  .site-footer__social { justify-content:center; }
  .site-footer__columns { grid-template-columns:1fr 1fr; }
  .site-footer__bottom { flex-direction:column; align-items:center; gap:12px; text-align:center; }
  .site-footer__links { flex-wrap:wrap; justify-content:center; gap:12px; }

  .newsletter-strip {
    flex-direction:column; align-items:flex-start;
    padding:28px 22px; gap:24px;
  }
  .newsletter-strip__heading { font-size:20px; }
  .newsletter-strip__form { width:100%; }

  .about-hero { min-height:400px; }
  .about-hero__inner { padding:56px 16px 32px; }
  .about-hero__overline { margin-bottom:18px; }
  .about-hero__desc { font-size:15px; margin-bottom:24px; }
  .about-hero__btns .btn { flex:1 1 auto; text-align:center; }
  .about-body { padding:40px 16px 8px; }
  .about-body__content { font-size:16px; }
  .about-body__content h2 { font-size:24px; }
  .about-values { padding:24px 16px 56px; }
  .about-values__grid { grid-template-columns:1fr; gap:28px; }
  .about-value__heading { font-size:20px; }
  .about-work { padding:28px 16px 60px; }
  .about-work-card { padding:32px 24px; }

  .sub-hero__inner { padding:36px 16px 48px; }
  .sub-hero__title { font-size:52px; }
  .sub-success__title { font-size:48px; }
  .sub-success__title em { font-size:32px; }

  .hood-hero__inner { padding:24px 16px 20px; }
  .hood-content__inner { padding:20px 16px 60px; }

  .evt-hero__inner { padding:40px 16px 36px; }
  .evt-hero__title { font-size:48px; }
  .evt-body { padding:32px 16px 60px; }
  .evt-body__cols { grid-template-columns:1fr; gap:32px; }
  .evt-info { display:none; }
  .evt-form-wrap { max-width:100%; }
  .evt-field-row { grid-template-columns:1fr; }
  .evt-cat-grid { grid-template-columns:1fr 1fr; }
}

/* ─── ADD EVENT PAGE ────────────────────────────────────────────────────── */
.evt-page { background:#f7f7f8; min-height:100vh; }

/* Hero (dark, matching events-hero) */
.evt-hero {
  border-bottom:3px solid var(--red);
  position:relative; overflow:hidden;
  background:var(--black);
}
.evt-hero__glow {
  position:absolute; right:-80px; top:50%; transform:translateY(-50%);
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb, var(--red) 18%, transparent) 0%,transparent 70%);
  pointer-events:none;
}
.evt-hero__inner {
  max-width:1200px; margin:0 auto;
  padding:72px 32px 60px; position:relative;
}
.evt-hero__eyebrow {
  display:flex; align-items:center; gap:10px; margin-bottom:24px;
}
.evt-hero__eyebrow .dash {
  display:inline-block; width:24px; height:1px; background:var(--red);
}
.evt-hero__eyebrow span:last-child {
  font-size:10px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.32);
}
.evt-hero__title {
  font-family:var(--font-display);
  font-size:72px; letter-spacing:.01em;
  color:#fff; line-height:.88; margin:0 0 20px;
}
.evt-hero__desc {
  font-size:16px; color:rgba(255,255,255,.48);
  line-height:1.72; max-width:480px; margin:0;
}

/* Body layout */
.evt-body {
  max-width:1200px; margin:0 auto; padding:56px 32px 80px;
}
.evt-body__cols {
  display:grid; grid-template-columns:1fr 480px; gap:56px; align-items:start;
}

/* Info column */
.evt-info__label {
  font-size:9.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(0,0,0,.3);
  margin-bottom:36px; display:flex; align-items:center; gap:12px;
}
.evt-info__label .line {
  flex:1; height:1px; background:rgba(0,0,0,.08);
}
.evt-info__steps {
  display:flex; flex-direction:column; gap:0;
}
.evt-info__step {
  display:flex; gap:20px; align-items:flex-start;
  border-top:1px solid rgba(0,0,0,.06);
  padding:28px 0;
}
.evt-info__step:first-child { border-top:none; padding-top:0; }
.evt-info__step-num {
  font-family:var(--font-display); font-size:36px;
  letter-spacing:.04em; color:rgba(0,0,0,.08);
  line-height:1; flex-shrink:0; width:48px;
}
.evt-info__step-title {
  font-family:var(--font-serif); font-style:italic;
  font-size:19px; color:var(--black); margin-bottom:6px; line-height:1.3;
}
.evt-info__step p {
  font-size:14px; color:rgba(0,0,0,.45); line-height:1.65; margin:0;
}
.evt-info__note {
  border-top:1px solid rgba(0,0,0,.06);
  padding-top:28px; font-size:13px; color:rgba(0,0,0,.4); line-height:1.6;
}
.evt-info__note strong { color:rgba(0,0,0,.65); }

/* Form card */
.evt-form-wrap { position:sticky; top:var(--hm-sticky-top); }
.evt-form-card {
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:20px; overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.evt-form-card__head {
  border-bottom:1px solid rgba(0,0,0,.07);
  padding:22px 28px;
}
.evt-form-card__label {
  font-size:9.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(0,0,0,.35); margin-bottom:4px;
}
.evt-form-card__sub {
  font-size:13px; color:rgba(0,0,0,.45);
}
.evt-form-card__sub .req { color:var(--danger); }

/* Form layout */
.evt-form { padding:24px 28px; }
.evt-fieldset {
  border:none; padding:0; margin:0 0 20px;
}
.evt-fieldset legend {
  font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin-bottom:14px;
  padding:0;
}
.evt-field { margin-bottom:12px; }
.evt-field label {
  display:block; font-size:11.5px; font-weight:600;
  color:rgba(0,0,0,.55); margin-bottom:5px;
}
.evt-field .req { color:var(--danger); }
.evt-field input,
.evt-field select,
.evt-field textarea {
  width:100%; box-sizing:border-box;
  font-family:var(--font-body); font-size:14px;
  color:var(--black); padding:11px 14px;
  background:#fff;
  border:1.5px solid rgba(0,0,0,.14);
  border-radius:9px; outline:none;
  transition:border-color .15s;
}
.evt-field input::placeholder,
.evt-field textarea::placeholder { color:rgba(0,0,0,.3); }
.evt-field input:focus,
.evt-field select:focus,
.evt-field textarea:focus { border-color:rgba(0,0,0,.4); }
.evt-field input:disabled {
  opacity:.4; cursor:not-allowed;
}
.evt-field-row {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}

/* Category buttons */
.evt-cat-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
}
.evt-cat-btn {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-body); font-size:12px; font-weight:600;
  color:rgba(0,0,0,.5);
  background:rgba(0,0,0,.03);
  border:1.5px solid rgba(0,0,0,.1);
  border-radius:8px; padding:8px 10px; cursor:pointer;
  text-align:left; transition:all .14s;
  min-width:0; overflow:hidden;
}
.evt-cat-btn__icon { font-size:14px; flex-shrink:0; }
.evt-cat-btn__label { overflow:hidden; text-overflow:ellipsis; min-width:0; }
.evt-cat-btn:hover {
  border-color:var(--cat-color, rgba(0,0,0,.25));
  color:rgba(0,0,0,.75);
}
.evt-cat-btn.active {
  color:#fff; background:var(--cat-color, var(--black));
  border-color:var(--cat-color, var(--black));
}

/* Schedule type buttons */
.evt-schedule-btns {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
}
.evt-sched-btn {
  font-family:var(--font-body); font-size:12px; font-weight:600;
  color:rgba(0,0,0,.5);
  background:rgba(0,0,0,.03);
  border:1.5px solid rgba(0,0,0,.1);
  border-radius:8px; padding:9px 10px; cursor:pointer;
  text-align:center; transition:all .14s;
}
.evt-sched-btn.active {
  color:#fff; background:var(--black); border-color:var(--black);
}
.evt-schedule-panel { margin-top:10px; }

/* Day-of-week buttons */
.evt-day-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:5px;
}
.evt-day-btn {
  font-family:var(--font-body); font-size:12px; font-weight:600;
  color:rgba(0,0,0,.5);
  background:rgba(0,0,0,.03);
  border:1.5px solid rgba(0,0,0,.1);
  border-radius:7px; padding:8px 0; cursor:pointer;
  text-align:center; transition:all .14s;
}
.evt-day-btn.active {
  color:#fff; background:var(--black); border-color:var(--black);
}

/* Time row */
.evt-time-row {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:4px;
}

/* Checkbox label */
.evt-checkbox-label {
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:500; color:rgba(0,0,0,.5);
  cursor:pointer; margin-bottom:6px;
}
.evt-checkbox-label input[type="checkbox"] {
  width:16px; height:16px; accent-color:var(--red);
}
.evt-free-row { margin-bottom:8px; }
.evt-price-input { display:flex; align-items:center; gap:6px; margin-top:8px; }
.evt-price-input__currency { font-size:18px; font-weight:700; color:var(--black); }
.evt-price-input input[type="number"] { width:100px; }

/* Error & submit */
.evt-form__error {
  font-size:12px; color:var(--red); margin-top:8px;
}
.evt-form__submit {
  width:100%; font-family:var(--font-body);
  font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:var(--black);
  border:none; border-radius:10px; padding:14px 0;
  cursor:pointer; margin-top:8px; transition:background .14s,color .14s;
}
.evt-form__submit:hover { background:var(--red); color:#fff; }
.evt-form__submit:disabled { opacity:.6; cursor:not-allowed; }
.evt-form__fine {
  font-size:11px; color:rgba(0,0,0,.3);
  text-align:center; margin-top:10px;
}

/* Success state */
.evt-form-success { padding:48px 28px; text-align:center; }
.evt-form-success__icon {
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,#10b981,#0891b2);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; font-size:22px; color:#fff;
}
.evt-form-success__title {
  font-family:var(--font-display);
  font-size:28px; color:var(--black); margin-bottom:8px;
}
.evt-form-success p {
  font-size:13.5px; color:rgba(0,0,0,.45);
  line-height:1.6; margin-bottom:24px;
}

/* Price toggle buttons */
.evt-price-btns {
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  margin-bottom:8px;
}

/* Time selects */
.evt-time-selects {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
}
.evt-time-selects select {
  font-family:var(--font-body); font-size:14px;
  color:var(--black); padding:11px 10px;
  background:#fff;
  border:1.5px solid rgba(0,0,0,.14);
  border-radius:9px; outline:none;
  transition:border-color .15s;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(0,0,0,.3)'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:26px;
}
.evt-time-selects select:focus {
  border-color:rgba(0,0,0,.4);
}
.evt-time-selects select option {
  background:#fff; color:var(--black);
}

/* Venue autocomplete */
.evt-venue-search__wrap {
  position:relative;
}
.evt-venue-dropdown {
  position:absolute; top:100%; left:0; right:0;
  z-index:50; margin-top:4px;
  background:#fff;
  border:1.5px solid rgba(0,0,0,.12);
  border-radius:10px; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  max-height:280px; overflow-y:auto;
}
.evt-venue-item {
  display:flex; flex-direction:column; gap:2px;
  width:100%; text-align:left;
  font-family:var(--font-body);
  padding:12px 14px;
  background:none; border:none; border-bottom:1px solid rgba(0,0,0,.06);
  cursor:pointer; transition:background .12s;
  color:rgba(0,0,0,.5);
}
.evt-venue-item:last-child { border-bottom:none; }
.evt-venue-item:hover { background:rgba(0,0,0,.03); }
.evt-venue-item strong {
  font-size:13.5px; font-weight:600; color:var(--black);
}
.evt-venue-item span {
  font-size:12px; color:rgba(0,0,0,.45);
}
.evt-venue-item__hood {
  font-size:11px !important; color:rgba(0,0,0,.3) !important;
  font-style:italic;
}
.evt-venue-empty {
  padding:14px; text-align:center;
  font-size:12.5px; color:rgba(0,0,0,.35);
}

/* Venue chip (selected venue) */
.evt-venue-chip {
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,0,0,.03);
  border:1.5px solid rgba(0,0,0,.1);
  border-radius:9px; padding:10px 14px;
  margin-top:8px;
}
.evt-venue-chip__info {
  display:flex; flex-direction:column; gap:2px;
}
.evt-venue-chip__info strong {
  font-size:13.5px; color:var(--black);
}
.evt-venue-chip__info span {
  font-size:12px; color:rgba(0,0,0,.45);
}
.evt-venue-chip__clear {
  background:none; border:none; color:rgba(0,0,0,.35);
  font-size:20px; cursor:pointer; padding:0 0 0 12px;
  transition:color .12s; line-height:1;
}
.evt-venue-chip__clear:hover { color:var(--black); }

/* Manual entry link */
.evt-venue-manual-link {
  background:none; border:none;
  font-family:var(--font-body);
  font-size:12px; color:rgba(0,0,0,.4);
  cursor:pointer; padding:6px 0 0;
  text-decoration:underline; text-underline-offset:2px;
  transition:color .12s;
}
.evt-venue-manual-link:hover { color:rgba(0,0,0,.7); }

/* ── Image Upload & Crop ── */
.evt-field__hint {
  font-size:12px; color:rgba(0,0,0,.45);
  margin:2px 0 8px; line-height:1.4;
}
.evt-upload__dropzone {
  border:2px dashed rgba(0,0,0,.15);
  border-radius:12px;
  padding:36px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s, background .15s;
  background:rgba(0,0,0,.015);
}
.evt-upload__dropzone:hover,
.evt-upload__dropzone.dragover {
  border-color:var(--red);
  background:rgba(220,38,38,.04);
}
.evt-upload__icon {
  display:block; font-size:32px; margin-bottom:8px;
}
.evt-upload__text {
  font-size:13px; color:rgba(0,0,0,.5);
}
.evt-upload__browse {
  background:none; border:none; padding:0;
  font-family:var(--font-body);
  font-size:13px; color:var(--red);
  cursor:pointer; text-decoration:underline;
  text-underline-offset:2px;
}
.evt-upload__browse:hover { color:#b91c1c; }
.evt-upload__preview {
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1.5px solid rgba(0,0,0,.08);
}
.evt-upload__preview img {
  display:block; width:100%;
  aspect-ratio:884/589;
  object-fit:cover;
}
.evt-upload__remove {
  position:absolute; top:8px; right:8px;
  background:rgba(0,0,0,.65); color:#fff;
  border:none; border-radius:50%;
  width:28px; height:28px;
  font-size:16px; line-height:28px;
  text-align:center; cursor:pointer;
  transition:background .15s;
}
.evt-upload__remove:hover { background:rgba(0,0,0,.85); }
.evt-upload__error {
  color:#dc2626; font-size:12px;
  margin-top:6px;
}

/* Crop modal */
.evt-crop-modal {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.evt-crop-modal__inner {
  background:#fff;
  border-radius:16px;
  padding:24px;
  max-width:720px; width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.evt-crop-modal__title {
  font-size:18px; font-weight:600;
  margin:0 0 16px; color:#111;
}
.evt-crop-modal__canvas {
  max-height:55vh;
  overflow:hidden;
  border-radius:8px;
  background:#f5f5f5;
}
.evt-crop-modal__canvas img {
  display:block; max-width:100%;
}
.evt-crop-modal__actions {
  display:flex; gap:10px;
  justify-content:flex-end;
  margin-top:16px;
}

/* Flatpickr light-theme overrides for event form */
.flatpickr-calendar {
  border:1.5px solid rgba(0,0,0,.1);
  box-shadow:0 8px 32px rgba(0,0,0,.1);
  border-radius:10px;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background:var(--red); border-color:var(--red);
}

/* Responsive — add event page */
@media (max-width:1279px) {
  .evt-body__cols { grid-template-columns:1fr; }
  .evt-info { display:none; }
  .evt-form-wrap { position:static; max-width:560px; margin:0 auto; }
}
@media (max-width:639px) {
  .evt-hero__title { font-size:48px; }
  .evt-hero__inner { padding:48px 20px 40px; }
  .evt-body { padding:24px 12px 60px; }
  .evt-form { padding:18px 16px; }
  .evt-form-card { border-radius:14px; }
  .evt-form-card__head { padding:18px 16px; }
  .evt-crop-modal { padding:10px; }
  .evt-crop-modal__inner { padding:16px; border-radius:12px; }
  .evt-crop-modal__canvas { max-height:45vh; }
  .evt-cat-grid { grid-template-columns:1fr 1fr; }
  .evt-schedule-btns { grid-template-columns:1fr 1fr 1fr; gap:5px; }
  .evt-sched-btn { padding:9px 6px; font-size:11px; }
  .evt-time-row { grid-template-columns:1fr; }
  .evt-field-row { grid-template-columns:1fr; }
  .evt-time-selects { gap:4px; }
  .evt-time-selects select { padding:11px 6px; font-size:13px; padding-right:22px; }
  .evt-price-btns { grid-template-columns:1fr 1fr; }
  .evt-day-grid { grid-template-columns:repeat(7,1fr); gap:3px; }
  .evt-day-btn { padding:8px 0; font-size:11px; }
  .evt-venue-chip { flex-direction:column; align-items:flex-start; gap:8px; }
  .evt-venue-chip__clear { padding:0; align-self:flex-end; }
}
@media (max-width:374px) {
  .evt-hero__title { font-size:38px; }
  .evt-cat-grid { grid-template-columns:1fr; }
  .evt-schedule-btns { grid-template-columns:1fr; }
  .evt-day-grid { grid-template-columns:repeat(4,1fr); }
}

/* ─── TIERED NEIGHBOURHOODS MENU ─────────────────────────────────────────── */
/* State classes for the capped region cards, the day-trip row, the mobile
 * drawer's grouped hood list, and the /neighbourhoods/ index + "around"
 * sections. Tokens only — no literal colour outside :root. Section colours and
 * dots are untouched: everything here inherits --zone-color (mega, drawer) or
 * --zone-clr (landing) from the container the PHP already sets.
 *
 * Child themes restyle this menu through these classes; see
 * THEME-DESIGN-RUNBOOK.md §8. */

/* Region cards ------------------------------------------------------------ */
.mm-zone--empty .mm-zone-hoods { align-items:center; }
.mm-zone__tagline {
  font-size:12px; color:var(--grey-text); line-height:1.4;
  flex:1 1 auto; min-width:0;
}
.mm-zone__more {
  font-size:12px; font-weight:600; letter-spacing:.01em;
  color:var(--zone-color, var(--red));
  border:1px dashed var(--grey-mid); border-radius:100px;
  padding:4px 12px; white-space:nowrap;
  display:flex; align-items:center;
  transition:border-color .13s, background .13s;
}
.mm-zone__more:hover {
  border-color:var(--zone-color, var(--red));
  background:var(--grey-bg);
}
/* A self-duplicate region collapses to a single link, so the card chrome goes
 * with it — it keeps the dot and the label only. */
.mm-zone--single {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--black);
  text-decoration:none;
}
.mm-zone--single:hover .mm-zone-label { text-decoration:underline; }

/* Pill states. `--has-content` is the default look; `--pinned` is the operator
 * override, marked by weight and a solid edge rather than by colour, so a
 * child theme that repaints the zone accent cannot lose the distinction. */
.mm-hood-pill--has-content { font-weight:500; }
.mm-hood-pill--pinned {
  font-weight:700;
  border-color:var(--zone-color, var(--red));
}

/* Day-trip row ------------------------------------------------------------ */
.mm-daytrips {
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--border);
}
.mm-daytrips__label {
  font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey-text);
  margin-bottom:9px;
}
.mm-daytrips__items { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mm-daytrips__item {
  font-size:12px; color:var(--grey-text); background:transparent;
  border:1px solid var(--border); border-radius:100px;
  padding:3px 10px; white-space:nowrap;
  transition:border-color .13s, color .13s;
}
.mm-daytrips__item:hover { border-color:var(--grey-mid); color:var(--black); }
.mm-daytrips__all {
  font-size:11px; font-weight:600; color:var(--red);
  padding:3px 4px; white-space:nowrap;
}
.mm-daytrips__all:hover { text-decoration:underline; }

/* Mobile drawer ----------------------------------------------------------- */
/* A full-width disclosure row shaped like the editorial rows above it. It sits
 * OUTSIDE .mobile-drawer__utils on purpose — that strip is a three-up flex row
 * of icon tiles, and an expanding panel inside it escapes the row. */
.mobile-drawer__hoods { display:block; border-bottom:1px solid var(--border); }
.mobile-drawer__hoods > summary { list-style:none; }
.mobile-drawer__hoods > summary::-webkit-details-marker { display:none; }
.mobile-drawer__hoods-summary {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:14px 20px 13px; cursor:pointer;
  font-family:var(--font-body); text-align:left;
  transition:background .13s;
}
.mobile-drawer__hoods-summary:hover { background:var(--grey-bg); }
.mobile-drawer__hoods-icon { font-size:19px; line-height:1; flex-shrink:0; }
.mobile-drawer__hoods-text { flex:1; min-width:0; }
.mobile-drawer__hoods-name {
  font-family:var(--font-display); font-size:26px;
  letter-spacing:.03em; line-height:1; color:var(--black);
  display:block; margin-bottom:2px;
}
.mobile-drawer__hoods-sub {
  font-family:var(--font-serif); font-style:italic;
  font-size:12.5px; color:var(--grey-text); line-height:1;
}
.mobile-drawer__hoods-summary::after {
  content:'▾'; color:var(--grey-mid); flex-shrink:0;
  font-size:13px; transition:transform .2s;
}
.mobile-drawer__hoods[open] .mobile-drawer__hoods-summary::after { transform:rotate(180deg); }
.mobile-drawer__hoods-body { padding:2px 20px 16px; }
.mobile-drawer__hood-group { padding:10px 0 2px; }
.mobile-drawer__hood-heading {
  display:block; margin-bottom:7px;
  font-family:var(--font-body);
  font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey-text);
  text-decoration:none;
}
.mobile-drawer__hood-heading:hover { color:var(--zone-color, var(--black)); }
.mobile-drawer__hood-pills { display:flex; flex-wrap:wrap; gap:6px; }
.mobile-drawer__hoods-all {
  display:inline-block; margin-top:14px;
  font-size:13px; font-weight:600; color:var(--red); text-decoration:none;
}
.mobile-drawer__hoods-all:hover { text-decoration:underline; }

/* /neighbourhoods/ index --------------------------------------------------- */
.hoods-featured { margin-bottom:44px; }
.hoods-index { margin-bottom:44px; }
.hoods-index__group { margin-bottom:22px; }
.hoods-index__heading {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:9px;
  font-family:var(--font-body);
  font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--black); text-decoration:none;
}
.hoods-index__heading::before {
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--zone-clr, var(--red)); flex-shrink:0;
}
.hoods-index__heading:hover { text-decoration:underline; }
.hoods-index__links { display:flex; flex-wrap:wrap; gap:6px; }
.hoods-index__link {
  font-size:13px; color:var(--black); background:var(--white);
  border:1px solid var(--grey-mid); border-radius:100px;
  padding:4px 12px; text-decoration:none;
  transition:border-color .13s, color .13s;
}
.hoods-index__link:hover { border-color:var(--zone-clr, var(--red)); color:var(--zone-clr, var(--red)); }
/* Still linked, still crawlable — just visibly quieter until it has coverage. */
.hoods-index__link--empty { color:var(--grey-text); border-color:var(--border); background:transparent; }

/* "Around {city}" ---------------------------------------------------------- */
.hoods-around { margin-bottom:44px; }
.hoods-around__group { margin-bottom:16px; }
.hoods-around__heading {
  display:block; margin-bottom:6px;
  font-family:var(--font-body);
  font-size:11px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--grey-text); text-decoration:none;
}
.hoods-around__heading:hover { color:var(--black); text-decoration:underline; }
.hoods-around__group--single .hoods-around__heading { color:var(--black); }
.hoods-around__links { display:flex; flex-wrap:wrap; gap:5px 14px; }
.hoods-around__link {
  font-size:13px; color:var(--grey-text); text-decoration:none;
  transition:color .13s;
}
.hoods-around__link:hover { color:var(--black); text-decoration:underline; }
.hoods-around__link--empty { opacity:.72; }

@media (max-width:639px) {
  .hoods-index__group { margin-bottom:18px; }
  .hoods-around__links { gap:4px 12px; }
}