/*
  Go Tagaytay — main.css
  - Mobile-first, lean CSS
  - Breakpoints: 640px, 768px, 900px, 1200px
*/

/* -------------------- Theme tokens -------------------- */
:root{
  --bg:#0f172a;         /* slate-900 */
  --card:#111827;       /* gray-900 */
  --line:#1f2937;       /* gray-800 */
  --text:#e5e7eb;       /* gray-200 */
  --muted:#94a3b8;      /* slate-400 */
  --accent:#22c55e;     /* green-500 */
  --accent-2:#a7f3d0;   /* green-200 */

  --shadow-sm: 0 1px 4px rgba(0,0,0,.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);

  --header-h:56px;      /* used by mobile nav panel */
}

/* -------------------- Base & layout -------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px; scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:where(p,li){margin:0 0 .85rem; max-width:72ch}
h1,h2,h3{line-height:1.25;margin:0 0 .75rem}
h1{font-size:24px}
h2{font-size:20px}
h3{font-size:18px}
.muted{color: color-mix(in oklab, var(--muted) 92%, white 8%)}

.wrap{max-width:980px;margin:auto;padding:18px}
@media(min-width:900px){
  html{font-size:17px}
  .wrap{padding:24px}
}
@media(min-width:1200px){ .wrap{max-width:1120px} }

/* -------------------- Header & brand -------------------- */
header{display:flex;align-items:center;justify-content:space-between;margin:2px 0 14px}
.logo-lockup{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.logo-img{
  width:28px;height:28px;border-radius:8px;object-fit:cover;object-position:center;display:block
}
@media(min-width:768px){ .logo-img{width:32px;height:32px;border-radius:10px} }
.brand::before{content:none !important}

/* -------------------- Nav (mobile panel → desktop inline) -------------------- */
.nav-toggle{background:none;border:0;color:var(--text);font-size:28px;line-height:1;padding:4px 8px;position:relative;z-index:1000}

#siteNav{
  position:fixed; top:var(--header-h); left:0; right:0;
  background:rgba(12,17,22,.98);
  padding:12px 16px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  box-shadow:var(--shadow-md);
  z-index:999;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  display:block; /* allow JS toggling even though hidden by opacity/pointer-events */
}
#siteNav a{display:block;padding:12px 6px;font-weight:600;color:var(--muted)}
#siteNav.is-open, body.nav-open #siteNav{ opacity:1; transform:none; pointer-events:auto }
body.nav-open::before{
  content:''; position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:998;
}

@media(min-width:768px){
  #siteNav{
    position:static; opacity:1; transform:none; pointer-events:auto;
    background:transparent; box-shadow:none; border:0; padding:0;
    display:flex; gap:12px;
  }
  body.nav-open::before{display:none}
  .nav-toggle{display:none}
}

/* -------------------- Cards, hero, grid -------------------- */
.hero,.card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.hero{padding:20px}
.card{padding:16px}
.grid{display:grid;gap:12px;margin-top:14px}
.grid.cols-2{grid-template-columns:1fr}
.grid.cols-3{grid-template-columns:1fr}
@media(min-width:640px){
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr 1fr}
}
@media(min-width:900px){
  .card,.hero{padding:20px}
  .grid{gap:14px}
}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#0b111b;
  font-weight:800; padding:12px 16px; border-radius:12px; min-height:44px;
  box-shadow:0 1px 0 rgba(0,0,0,.22) inset, var(--shadow-sm);
  border:0; line-height:1; cursor:pointer; -webkit-appearance:none
}
.btn.secondary{background:#e5e7eb;color:#0b111b}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid #10b981; outline-offset:2px}

/* Newsletter trigger (desktop gets button look) */
@media(min-width:641px){
  #openNewsletter, a#openNewsletter{
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--accent);color:#0b111b;
    padding:.6rem 1rem;border-radius:12px;text-decoration:none;border:0;
    box-shadow:0 1px 0 rgba(0,0,0,.22) inset, var(--shadow-sm);font-weight:700;line-height:1
  }
  #openNewsletter:hover{filter:brightness(1.05)}
  #openNewsletter:focus-visible{outline:2px solid #fff; outline-offset:2px}
}

/* Small helper for stacked CTAs on narrow screens */
@media(max-width:520px){
  .hero .btn + .btn{ margin-top:12px }
}

/* -------------------- Lists & badges -------------------- */
ul.clean{list-style:none;margin:0;padding:0}
.list-item{display:flex;gap:12px;padding:10px;border-top:1px solid var(--line)}
.list-item:first-child{border-top:0}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; color:#0b111b; background:#fef08a;
  border-radius:999px; padding:2px 8px; line-height:1; white-space:nowrap
}

/* -------- Featured badge: GOLD SHIMMER (Option B) -------- */
/* Reset any older effects so shimmer can own it */
.badge--featured{
  position:relative;
  font-weight:800;
  border-radius:999px;
  padding:.28rem .55rem;
  color:#0b111b;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.12)) padding-box,
    linear-gradient(100deg,#8d6b27 0%, #f3d37a 25%, #c59a3a 45%, #f3d37a 65%, #6e5420 100%) border-box;
  background-size:220% 100%;
  box-shadow:0 1px 0 rgba(0,0,0,.35) inset, 0 6px 14px rgba(0,0,0,.25);
}
.badge--featured::before,
.badge--featured::after{ content:none !important; } /* kill any prior pseudo-elements */

@keyframes goldShimmer{
  0%   { background-position: 0% 50%; }
  100% { background-position: 150% 50%; }
}
.badge--featured.shimmer{
  animation: goldShimmer 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .badge--featured.shimmer{ animation:none }
}

/* -------------------- Areas (cards + “More in this area”) -------------------- */

.area-card{padding:16px}
.area-card h3{margin:0 0 6px}
.area-card p{margin:0 0 10px}

/* Native <details> styling */
details.more{margin-top:.5rem}
details.more summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:.35rem;
}
details.more summary::-webkit-details-marker{display:none}
details.more summary::marker{content:""; display:none}
details.more summary::after{
  content:"▸"; font-size:.9em; line-height:1; opacity:.85; transition:transform .18s ease
}
details.more[open] summary::after{ transform:rotate(90deg) }

/* Show only first 2 items by default (ALL screen sizes) */
#areas .area-card > ul.clean:not(.extra) > li:nth-child(n+3){ display:none; }

/* When the card's <details> is open, reveal all list items */
#areas .area-card:has(details.more[open]) ul.clean > li{ display:flex; }
/* If you have plain <li> (not .list-item), keep them list-style */
#areas .area-card:has(details.more[open]) ul.clean > li:not(.list-item){ display:list-item; }

/* Areas heading should span the full grid row */
#areas > h2{ grid-column:1 / -1; margin:0 0 .5rem }

/* -------------------- Partners grid helper (no empty gaps) -------------------- */
@media(min-width:900px){
  #options.grid{ grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); align-items:stretch }
}
#options .card{ display:flex; flex-direction:column }
#options .card ul.clean{ margin-bottom:auto }
#options .card p:last-of-type{ margin-top:.5rem }

/* Partner tag pill sizing (avoid full-width stretch) */
.tag{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.25rem .6rem; border-radius:999px;
  background:var(--accent-2); color:#0b111b; font-weight:700; font-size:.75rem; line-height:1; white-space:nowrap;
}
.area-card .tag{ align-self:flex-start }
#options .card > .tag{ margin-bottom:.5rem }

/* -------------------- Weather pill -------------------- */
.wx-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.92rem;color:#9fb3c8;white-space:nowrap}
@media(max-width:420px){ .wx-pill{font-size:.85rem;opacity:.9} }

/* -------------------- Modals -------------------- */
dialog{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  color:var(--text); padding:18px; max-width:720px
}
dialog::backdrop{background:rgba(0,0,0,.6)}
.modal-close{float:right;background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 10px}

/* -------------------- Forms: MailerLite look -------------------- */
.ml-form-embedContainer .ml-form-embedSubmit button{
  background:var(--accent) !important; color:#041016 !important; border:none !important;
  border-radius:12px !important; padding:.7rem 1.1rem !important; font-weight:700 !important;
}
.ml-form-embedContainer input[type="email"]{
  background:#0b1222 !important; color:var(--text) !important; border:1px solid var(--line) !important; border-radius:10px !important;
}

/* -------------------- Focus states -------------------- */
:where(a,button,.card):focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent) 75%, white 25%);
  outline-offset:2px;
}

/* -------------------- Mobile polish: perfectly center pills & buttons -------------------- */
@media (max-width: 640px){
  .tag, .badge{
    display:inline-flex;align-items:center;justify-content:center;
    line-height:1; padding:.30rem .60rem; border-radius:999px; font-weight:700; white-space:nowrap; vertical-align:middle;
  }
  .btn, a.btn, button.btn{
    display:inline-flex !important; align-items:center; justify-content:center;
    line-height:1; min-height:44px; padding:.70rem 1rem; border-radius:12px; -webkit-appearance:none;
  }
  #openNewsletter,
  .ml-onclick-form#openNewsletter{
    display:inline-flex !important; align-items:center; justify-content:center;
    line-height:1; min-height:44px; padding:.70rem 1rem; border-radius:12px; font-weight:800;
    background:var(--accent); color:#0b111b; border:1px solid transparent;
    box-shadow:0 1px 0 rgba(0,0,0,.22) inset, 0 1px 4px rgba(0,0,0,.15);
    -webkit-appearance:none;
  }
  .btn.secondary{ background:#e5e7eb; color:#0b111b; }
}

/* === Partners layout fix (desktop) === */
#options {
  display: grid;
  /* let the cards auto-pack without leaving holes */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  grid-auto-flow: dense;          /* back-fills gaps */
  align-items: stretch;           /* equal heights */
}

/* make each option card stretch to same height */
#options .card {
  display: flex;
  flex-direction: column;
}
#options .card ul.clean { margin-bottom: auto; }  /* pushes CTAs down */

/* Ensure the "Partner options" heading spans the grid */
#options-title { grid-column: 1 / -1; }

/* === Tag pill sizing (no stretch) === */
#options .card > .tag {
  /* prevent flex stretch across the card */
  align-self: flex-start;
  display: inline-flex;
  place-items: center;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--accent-2);
  color: #0b111b;
  font-weight: 700;
  font-size: .75rem;
  line-height: 1;
  white-space: nowrap;
  width: max-content;             /* never expand to full width */
}

/* If any global rule makes .tag block-level, override it here */
#options .card > .tag { display: inline-flex !important; }


/* Weekender — add-on eats */
.weekender-addons { margin-top: 10px; }
.weekender-addons__title {
  margin: 6px 0 4px;
  font-size: .95rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .2px;
}
.weekender-addons ul.clean { margin: 0; padding: 0; }
.weekender-addons .list-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.weekender-addons .list-item:first-child { border-top: 0; }
.weekender-addons .list-item > div:first-child { min-width: 0; } /* allow text wrap */
.weekender-addons .list-item strong { display: block; }
.weekender-addons .links { white-space: nowrap; }
.weekender-addons .links a { color: var(--muted); text-decoration: none; }
.weekender-addons .links a:hover { text-decoration: underline; }

/* Weekender — CTA row */
.weekender-cta {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.weekender-cta a { text-decoration: none; }
.weekender-cta a:first-child { font-weight: 600; }
.weekender-cta a + a::before { content: " • "; margin: 0 6px; color: var(--muted); }

/* Weekender image card sugar */
.wkndr-fig { margin: 0 0 .5rem 0; }
.wkndr-fig img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.wkndr-cap { margin-top: .25rem; }
.wkndr-actions { margin-top: .35rem; }
.wkndr-actions a { text-decoration: underline; }

.wkndr-fig { margin: .5rem 0 0 0; }
.wkndr-fig img { width: 100%; height: auto; border-radius: 12px; display: block; object-fit: cover; }
.wkndr-cap { margin-top: .25rem; }

@media (max-width: 640px) {
  #weekend .list-item { padding: 10px 0; }
  #weekend .list-item strong { display:block; font-size:1rem; line-height:1.25; word-break:break-word; }
  #weekend .list-item .muted {
    margin-top: 2px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* clamp description to 2 lines */
    overflow: hidden;
  }
  .wkndr-fig img { aspect-ratio: 4 / 3; }  /* stable image height */
  .wkndr-cap { display: none; }            /* hide credit on phones; shows on desktop */
  .wkndr-actions { margin-top: 4px; }
}

/* Photo credit: smaller + softer */
.wkndr-cap {
  font-size: 0.75rem;   /* ~12px */
  line-height: 1.1;
  opacity: .7;
}

/* keep it readable on desktop, extra small on phones */
@media (max-width: 640px) {
  .wkndr-cap { font-size: 0.7rem; opacity: .65; }
}

/* indicate images are clickable */
.wkndr-fig img { cursor: zoom-in; }

/* ---- Lightbox base ---- */
#wkndrLightbox {
  position: fixed; inset: 0;
  display: none;
  z-index: 9999;
}
#wkndrLightbox.is-open { display: block; }

.wkndr-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.8);
}

.wkndr-lb__figure {
  position: absolute; inset: 0;
  margin: 0; display: grid; place-items: center;
  padding: 24px;
}

.wkndr-lb__img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  cursor: zoom-out;
}

.wkndr-lb__cap {
  margin-top: 8px;
  color: #cbd5e1; /* muted */
  font-size: .8rem;
  text-align: center;
}

.wkndr-lb__close {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,.55); color: #fff;
  border: 0; border-radius: 10px;
  font-size: 22px; width: 36px; height: 36px;
  line-height: 36px; cursor: pointer;
}

.no-scroll { overflow: hidden; }

/* Mobile comfort */
@media (max-width: 640px) {
  .wkndr-lb__img { max-height: 70vh; }
  .wkndr-lb__cap { font-size: .75rem; }
}

/* === Guides — compact mobile header (SAFE + SCOPED) ===
   Usage: add class="hero guide-hero" to the guide header wrapper.
   Inside it, mark the subtitle with .lead (or .subtitle),
   the big green CTA with .cta-weekender (or keep id="openNewsletter"),
   and the map link with .map-link (or .open-map).
*/
@media (max-width: 640px){
  .guide-hero{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "lead"
      "cta"
      "map";
    gap: 10px;
    padding-right: 0; /* relax right padding to reduce crowding */
  }

  .guide-hero :is(h1, .title){
    grid-area: title;
    margin: 0;
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.2;
    letter-spacing: .1px;
  }

  .guide-hero :is(.lead, .subtitle){
    grid-area: lead;
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.45;
    max-width: 65ch;           /* readable line length */
  }

  .guide-hero :is(.cta-weekender, #openNewsletter){
    grid-area: cta;
    width: 100%;
    display: inline-flex;      /* keeps your .btn centering */
    justify-content: center;
    text-decoration: none;     /* no underline in the button */
  }

  .guide-hero :is(.map-link, .open-map){
    grid-area: map;
    justify-self: center;
    font-size: .98rem;
    margin-top: 2px;
  }

  /* If a small inline CTA exists in this block, hide it on phones */
  .guide-hero .cta--inline{ display: none !important; }
}


/* === Guide header: mobile layout (HTML unchanged) ===
   Target: the first <header> inside <main class="page"> that contains #openNewsletter
   Result: title → subtitle → full-width green CTA (underlined text) → centered "Open map →"
*/
@media (max-width: 640px){
  /* Use grid to control order & spacing without touching the markup */
  .page > header{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
    padding-right: 0; /* de-crowd the right edge */
  }

  /* Title size/leading to match the screenshot */
  .page > header h1{
    margin: 0;
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.18;
    letter-spacing: .1px;
  }

  /* "Curated by locals…" small line keeps its place naturally */

  /* Lead/subtitle paragraph (the muted one right before the CTA row) */
  .page > header p.muted{
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 65ch; /* readable line length */
  }

  /* The last <p> holds BOTH the CTA button and "Open map" link.
     Stack them vertically and style each target. */
  .page > header p:last-of-type{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0; /* prevent extra gaps */
  }

  /* Keep your existing MailerLite trigger + button look; make it full-width */
  .page > header p:last-of-type #openNewsletter{
    /* your Mobile Polish block already makes this a green button.
       We extend it to be full-width and pill-like here. */
    width: 100%;
    justify-content: center;
    border-radius: 16px;
    min-height: 46px;
    box-shadow: 0 1px 0 rgba(0,0,0,.22) inset, var(--shadow-sm);
    text-decoration: underline;        /* UNDERLINE text inside the button (as in screenshot) */
    text-underline-offset: 2px;
    font-weight: 800;
    color: #0b111b;                    /* strong contrast on green */
  }

  /* Place the "Open map →" link under the CTA and center it */
  .page > header p:last-of-type a{
    justify-self: center;
    font-size: 1rem;
    text-decoration: underline;        /* ensure underline even with global a{ text-decoration:none } */
    text-underline-offset: 2px;
    color: inherit;
  }
}

@supports not (display: grid) {
  .page > header { display:block; }         /* falls back to normal block flow */
  .page > header p:last-of-type { display:block; }
  .page > header p:last-of-type #openNewsletter { width:100%; display:block; }
  .page > header p:last-of-type a { display:block; text-align:center; margin-top:8px; }
}



/* === Mobile Readability Tweaks — COMPAT SAFE ================================ */
@media (max-width:640px){

  /* 1) Breathing room */
  .wrap{ padding:20px; }
  .card,.hero{ padding:20px; }
  .page > header{ gap:14px; }

  /* 2) Body text: slightly larger & shorter measure */
  p, li{ font-size:1rem; line-height:1.55; max-width:65ch; }
  /* stronger muted on phones without color-mix() */
  .muted{ color:#a4b1c4; } /* approx of your slate-400 + 15% white */

  /* 3) Headings (avoid awkward wraps) */
  .page > header h1{
    margin-bottom:2px;
    font-size:26px;              /* simple fallback for clamp() */
    line-height:1.18;
    letter-spacing:.1px;
  }

  /* 4) CTA row clarity (keeps your existing #openNewsletter button) */
  .page > header p:last-of-type{
    display:block;               /* stack vertically without Grid/Supports */
    margin:0;
  }
  .page > header p:last-of-type #openNewsletter{
    display:block;
    width:100%;
    text-align:center;
    border-radius:16px;
    min-height:46px;
    /* keep underline look inside button text without nested spans */
    text-decoration:underline;
    text-underline-offset:2px;
    font-weight:800;
    color:#0b111b;               /* contrast on green */
    margin-bottom:10px;          /* separates from map link */
    box-shadow:0 1px 0 rgba(0,0,0,.22) inset, 0 1px 4px rgba(0,0,0,.15);
  }
  .page > header p:last-of-type a{
    display:block;
    text-align:center;
    font-size:1rem;
    text-decoration:underline;
    text-underline-offset:2px;
    color:inherit;
  }

  /* 5) Reflow list items into rows (title above details) */
  .list-item{
    display:block;               /* avoids flex parsing quirks */
    padding:12px 0;
    border-top:1px solid #263145;/* slightly lighter than --line */
  }
  .list-item > *{ margin:0 0 4px 0; }
  .list-item > *:last-child{ margin-bottom:0; }
  .list-item .muted{ font-size:.95rem; line-height:1.45; }

  /* 6) Safer tap targets for small links */
  a{ display:inline-block; }
  .list-item a, .page > header p:last-of-type a{ padding:6px 2px; }

  /* 7) Keep badges/pills from crowding */
  .tag,.badge{ padding:.32rem .62rem; font-size:.78rem; }

  /* 8) Prevent image jank (no content-visibility) */
  .wkndr-fig img{ width:100%; height:auto; }
}
/* ============================================================================ */

/* === Guide header: tablet & desktop polish (HTML unchanged, conflict-safe) ==== */

/* Tablet and up */
@media (min-width:641px){

  /* Keep header stacked but with tighter rhythm and larger type */
  .page > header{
    display:flex;            /* overrides mobile block/grid */
    flex-direction:column;
    gap:12px;
    padding-right:0;
    max-width: 860px;        /* keep line length readable on wider screens */
    margin-inline:auto;
  }

  .page > header h1{
    margin:0 0 2px 0;
    font-size:32px;          /* no clamp() for max compatibility */
    line-height:1.2;
    letter-spacing:.1px;
  }

  /* The small “Curated by locals…” line */
  .page > header .small{
    opacity:.9;
    font-size:.95rem;
  }

  /* Lead/subtitle paragraph */
  .page > header p.muted{
    margin:0;
    font-size:1rem;
    line-height:1.5;
    max-width:70ch;
  }

  /* CTA row: show button and “Open map →” inline */
  .page > header p:last-of-type{
    display:flex;            /* inline row on tablet/desktop */
    align-items:center;
    gap:12px;
    margin:0;
    flex-wrap:wrap;          /* prevents overflow on tight widths */
  }

  /* Button: revert to non-underlined label on larger screens */
  .page > header p:last-of-type #openNewsletter{
    display:inline-flex;
    width:auto;              /* no full-width on tablet/desktop */
    min-height:44px;
    padding:12px 16px;
    border-radius:12px;
    text-align:center;
    text-decoration:none;    /* remove underline beyond mobile */
    font-weight:800;
    color:#0b111b;
    box-shadow:0 1px 0 rgba(0,0,0,.22) inset, 0 1px 4px rgba(0,0,0,.15);
  }

  /* Map link: sits to the right of the button; underline on hover */
  .page > header p:last-of-type a{
    display:inline-block;
    font-size:1rem;
    padding:6px 2px;
    text-decoration:none;    /* cleaner by default on larger screens */
  }
  .page > header p:last-of-type a:hover{
    text-decoration:underline;
  }

  /* Lists: return to side-by-side feel */
  .list-item{
    display:flex;            /* we set block on mobile; flex again here */
    gap:12px;
    align-items:flex-start;
    padding:12px 0;
    border-top:1px solid var(--line);
  }
  .list-item .muted{
    font-size:.95rem;
    line-height:1.45;
  }
}

/* Desktop refinements */
@media (min-width:900px){

  /* Slightly larger headline and more breathing room */
  .page > header h1{
    font-size:36px;
    line-height:1.2;
  }

  /* Lead copy can be a touch larger on desktop */
  .page > header p.muted{
    font-size:1.05rem;
  }

  /* Keep the CTA row snug but readable */
  .page > header p:last-of-type{
    gap:14px;
  }
}

/* Wide desktop */
@media (min-width:1200px){

  /* Cap the header content width so it doesn’t stretch too wide */
  .page > header{
    max-width: 960px;
  }

  .page > header h1{
    font-size:40px;
  }
}

/* Tablet and up */
@media (min-width:641px){
  /* Cap content measure without touching global .wrap layout */
  .page{ max-width: 860px; margin-inline: auto; }
  .page > section{ margin-block: 18px 22px; }
  .page > section > h2{ margin-bottom: 8px; }
  .page :where(p,li){ max-width: 70ch; line-height: 1.55; }
}

/* Desktop */
@media (min-width:900px){
  .page{ max-width: 960px; }
  .page > section{ margin-block: 22px 26px; }
  .page :where(p,li){ font-size: 1.02rem; }
}

/* Wide desktop */
@media (min-width:1200px){
  .page{ max-width: 1040px; }
  .page :where(p,li){ max-width: 72ch; }
}

@media (min-width:641px){
  .page > header h1{ font-size: 32px; line-height: 1.2; margin: 0 0 2px; }
  .page > header .small{ font-size: .95rem; opacity: .9; }
  .page > header p.muted{ font-size: 1rem; line-height: 1.5; margin: 0; }
}

@media (min-width:900px){
  .page > header h1{ font-size: 36px; }
  .page > header p.muted{ font-size: 1.05rem; }
}

@media (min-width:1200px){
  .page > header h1{ font-size: 40px; }
}

@media (min-width:641px){
  .page > header p:last-of-type{
    display: flex; align-items: center; gap: 12px; margin: 0; flex-wrap: wrap;
  }
  .page > header p:last-of-type #openNewsletter{
    display: inline-flex; width: auto; min-height: 44px; padding: 12px 16px;
    border-radius: 12px; text-decoration: none; font-weight: 800; color: #0b111b;
    box-shadow: 0 1px 0 rgba(0,0,0,.22) inset, 0 1px 4px rgba(0,0,0,.15);
  }
  .page > header p:last-of-type a{
    display: inline-block; font-size: 1rem; padding: 6px 2px; text-decoration: none;
  }
  .page > header p:last-of-type a:hover{ text-decoration: underline; }
}

@media (min-width:641px){
  .list-item{ display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
  .list-item .muted{ font-size: .95rem; line-height: 1.45; }
}

@media (min-width:641px){
  a:hover{ filter: brightness(1.05); }
  :where(a,button):focus-visible{ outline-offset: 3px; }
}

@media (min-width:641px){
  .page > header p:last-of-type a::after{
    content: none !important;   /* or "" */
  }
}

@media (min-width:641px){
  .page > section{ border-top: 1px solid rgba(255,255,255,.06); padding-top: 14px; }
  .page > section:first-of-type{ border-top: 0; padding-top: 0; }
}

@media (min-width:641px){
  .wkndr-fig img{ max-height: 420px; object-fit: cover; }
}
@media (min-width:1200px){
  .wkndr-fig img{ max-height: 500px; }
}

@media (min-width:768px){
  .page-header{ margin-bottom: 12px; }
}