/* SB Savvy — design system. Travel-poster Santa Barbara: sandstone paper, red tile, Pacific blue, golden hour. */

@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/fonts/fraunces-latin-full-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-display: swap; font-weight: 100 900;
  src: url(/fonts/fraunces-latin-full-italic.woff2) format("woff2-variations"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-standard-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-display: swap; font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-standard-italic.woff2) format("woff2-variations"); }

:root {
  --paper: #faf4ea;
  --paper-2: #f3e8d6;
  --paper-3: #e8d6bb;
  --ink: #18222e;
  --ink-2: #47515d;
  --ink-3: #656d77;
  --line: rgba(24, 34, 46, .12);
  --tile: #b9472a;
  --tile-2: #d4643f;
  --tile-deep: #8a3119;
  --sun: #efa13a;
  --sun-2: #f7c56f;
  --sea: #1d5a6e;
  --sea-deep: #0e3343;
  --seaglass: #9cc5bb;
  --sage: #6f8467;
  --dusk: #5b4c82;
  --jacaranda: #8f7cc4;
  --night: #0a1424;
  --night-2: #111f36;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(24, 34, 46, .06), 0 6px 24px -10px rgba(24, 34, 46, .18);
  --shadow-2: 0 2px 4px rgba(24, 34, 46, .05), 0 22px 60px -24px rgba(24, 34, 46, .35);
  --wrap: 1200px;
  --ease: cubic-bezier(.2, .7, .1, 1);

  /* Default sky: golden hour (the script repaints this for the real sun) */
  --sky-top: #2f4a82; --sky-mid: #c9738a; --sky-bot: #f7b267; --haze: #f3b38a;
  --sun-c: #ffe2a0; --sun-glow: #ffb867;
  --mtn-far: #9a7a9c; --mtn-mid: #7b6187; --foot: #6c5679;
  --bd-a: #f4cfa6; --bd-b: #eebf95; --bd-c: #f8dcb9; --roof: #c24b2c; --roof-shade: #8e3119; --trim: #fff0dc;
  --win: #b07e66; --win-lit: #ffd27a; --win-op: .25;
  --palm: #3a2a42; --shore: #e8b07f; --sea-top: #e08a6c; --sea-bot: #2b3a6b;
  --glitter: #ffe6ad; --glitter-op: .9; --wave: rgba(255, 240, 220, .22);
  --stars-op: 0; --moon-op: 0; --hero-ink: #fffaf2;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 18px/1.6 var(--sans); font-feature-settings: "ss01", "kern";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2.5px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sun-2); color: var(--ink); }

/* Paper grain over everything, like a printed poster */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.night-page::after { mix-blend-mode: screen; opacity: .05; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 48px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }

/* Type */
.display, h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.02; margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0; }
h1, .h1 { font-size: clamp(2.9rem, 7.4vw, 6.6rem); }
h2, .h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
h3, .h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; letter-spacing: -.01em; font-variation-settings: "opsz" 48, "SOFT" 50; }
em, .it { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
h1 em, h2 em { color: inherit; font-weight: 500; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.55; color: var(--ink-2); max-width: 38em; }
.eyebrow { font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tile); display: inline-flex; align-items: center; gap: .6em; }
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; }
.eyebrow.plain::before { display: none; }
.kicker { font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* Buttons and fields */
.btn { --b: var(--ink); --c: var(--paper); display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: 600 1rem/1 var(--sans); letter-spacing: .01em; padding: 1.02em 1.6em; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--b); color: var(--c); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--b) 80%, transparent); }
.btn:active { transform: translateY(0); }
.btn-sun { --b: var(--sun); --c: var(--ink); }
.btn-tile { --b: var(--tile); --c: #fff8ef; }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px currentColor, 0 10px 26px -14px rgba(0, 0, 0, .4); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.field { width: 100%; font: 500 1.02rem/1.2 var(--sans); color: var(--ink); background: #fffdf8; border: 1.5px solid var(--line);
  border-radius: 14px; padding: 1em 1.1em; transition: border-color .2s, box-shadow .2s; }
.field::placeholder { color: var(--ink-3); }
.field:focus { outline: none; border-color: var(--sun); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 25%, transparent); }

.subscribe { display: flex; gap: 8px; padding: 7px; border-radius: 999px; background: rgba(255, 250, 242, .95);
  box-shadow: 0 18px 50px -20px rgba(10, 20, 36, .55), inset 0 0 0 1px rgba(255, 255, 255, .6); max-width: 520px; }
.subscribe input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 1.05rem var(--sans); padding: 0 1.1em; color: var(--ink); }
.subscribe input:focus { outline: none; }
.subscribe:focus-within { box-shadow: 0 18px 50px -20px rgba(10, 20, 36, .55), 0 0 0 3px var(--sun); }
.subscribe .btn { padding: 1em 1.4em; }
.sub-note { font-size: .86rem; margin-top: 12px; opacity: .85; }
.sub-msg { font-weight: 600; margin-top: 12px; min-height: 1.4em; }
.subscribe.done { background: rgba(255, 250, 242, .18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }

/* Header */
.site-head { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--hero-ink); transition: background .35s, color .35s, box-shadow .35s, transform .35s var(--ease); }
.site-head .bar { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.site-head.solid { background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
.night-page .site-head.solid { background: color-mix(in srgb, var(--night) 84%, transparent); color: #f6efe2; box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.page-light .site-head { color: var(--ink); }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.logo svg { width: 38px; height: 38px; flex: none; }
.logo .wm { font: 600 1.5rem/1 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 72, "SOFT" 80; }
.logo .wm em { font-weight: 500; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { text-decoration: none; font-weight: 600; font-size: .96rem; padding: .62em .95em; border-radius: 999px; transition: background .2s; }
.nav a:hover, .nav a[aria-current="page"] { background: color-mix(in srgb, currentColor 12%, transparent); }
.nav .btn { margin-left: 8px; padding: .85em 1.3em; font-size: .95rem; }
.menu-btn { display: none; background: none; border: 0; color: inherit; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; }
.menu-btn span { display: block; width: 22px; height: 2px; background: currentColor; margin: 5px auto; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1140px) {
  .menu-btn { display: block; position: relative; z-index: 2; }
  .nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 4px; background: var(--night); color: #fbf3e6;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .nav a { font: 600 clamp(1.3rem, 2.9vh, 1.85rem)/1 var(--serif); padding: .38em .8em; }
  .nav .btn { margin: 24px 0 0; font: 600 1.1rem/1 var(--sans); padding: 1.1em 2em; }
  .menu-open .nav { opacity: 1; visibility: visible; }
  .menu-open .site-head { color: #fbf3e6; background: transparent; box-shadow: none; backdrop-filter: none; }
  .site-head .logo { position: relative; z-index: 2; }
  .nav { background: radial-gradient(130% 55% at 50% 112%, rgba(239, 161, 58, .5), rgba(185, 71, 42, .22) 42%, transparent 72%), linear-gradient(180deg, #0a1424 0%, #16213f 62%, #33284a 100%); }
  .menu-open .nav > * { animation: menu-in .55s var(--ease) both; }
  .menu-open .nav > :nth-child(2) { animation-delay: .05s; } .menu-open .nav > :nth-child(3) { animation-delay: .1s; }
  .menu-open .nav > :nth-child(4) { animation-delay: .15s; } .menu-open .nav > :nth-child(5) { animation-delay: .2s; }
  .menu-open .nav > :nth-child(6) { animation-delay: .25s; } .menu-open .nav > :nth-child(7) { animation-delay: .3s; } .menu-open .nav > :nth-child(8) { animation-delay: .35s; }
  .menu-open .nav > :nth-child(9) { animation-delay: .4s; } .menu-open .nav > :nth-child(10) { animation-delay: .45s; } .menu-open .nav > :nth-child(n+11) { animation-delay: .5s; }
  .nav-foot { display: block; position: absolute; left: 0; right: 0; bottom: 40px; margin: 0; text-align: center; font: 500 .92rem/1.4 var(--sans); color: rgba(251, 243, 230, .78); }
  .nav .nav-foot a { font: inherit; padding: 0; color: #ffe0b0; border-radius: 0; text-decoration: underline; text-underline-offset: 3px; }
  .nav .nav-foot a:hover { background: none; }
  body.menu-open { overflow: hidden; }
  .nav::after { content: ""; position: absolute; left: 50%; bottom: -190px; width: 300px; height: 300px; margin-left: -150px; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, #ffe2a6 0%, #f7b45c 34%, rgba(239, 140, 70, .35) 56%, transparent 70%); }
  .nav { isolation: isolate; overflow: hidden; }
  .nav-foot { bottom: 128px; }
  /* ten links: centre them between the header and the footer line so the last never runs into it */
  .nav { padding: 76px 0 170px; }
}
@media (max-width: 1140px) and (max-height: 780px) {
  .nav a { font-size: clamp(1.3rem, 3.4vh, 1.9rem); }
  .nav .btn { margin-top: 14px; }
  .nav-foot { bottom: 26px; }
  .nav { padding: 64px 0 60px; }
}
@media (min-width: 1141px) { .nav-foot { display: none; } }
/* seven menu items: labels never wrap; tighter spacing until there's room (Launch Watch added 2026-10-30) */
.nav a { white-space: nowrap; }
@media (min-width: 1141px) and (max-width: 1259px) { .nav > a:not(.btn), .nav-more-btn { padding-left: .7em; padding-right: .7em; } }
/* "More" dropdown: site.js moves the links that don't fit (last first) into it on desktop (Beaches + Happy Hours added 2026-10-30) */
.nav-more { position: relative; }
.nav-more-btn { display: inline-flex; align-items: center; gap: .4em; font: inherit; font-weight: 600; font-size: .96rem; color: inherit; background: none; border: 0; padding: .62em .95em; border-radius: 999px; cursor: pointer; transition: background .2s; }
.nav-more-btn:hover, .nav-more-btn[aria-expanded="true"], .nav-more-btn.is-current { background: color-mix(in srgb, currentColor 12%, transparent); }
.nav-more-btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.nav-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-more-list { display: none; position: absolute; right: 0; top: calc(100% + 10px); min-width: 200px; padding: 8px; border-radius: 16px; background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 18px 40px -14px rgba(10, 20, 36, .4); }
.nav-more.open .nav-more-list { display: grid; gap: 2px; animation: more-in .18s var(--ease) both; }
.nav .nav-more-list a { display: block; padding: .7em 1em; border-radius: 10px; }
.night-page .nav-more-list { background: #16213f; color: #f6efe2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px -14px rgba(0, 0, 0, .6); }
@keyframes more-in { from { opacity: 0; transform: translateY(-6px); } }
@media (min-width: 1141px) { .nav > .btn { order: 2; } .nav-more { order: 1; } .nav > a.is-over { display: none; } }
/* the header bar may run wider than the page (1400px) so 1440px screens fit every link; the logo never shrinks */
.site-head .bar { width: min(1400px, 100% - 48px); }
.site-head .logo { flex: none; }
@media (max-width: 1140px) {
  .nav-more { display: none !important; }
  .menu-open .nav > :nth-child(9) { animation-delay: .4s; } .menu-open .nav > :nth-child(10) { animation-delay: .45s; } .menu-open .nav > :nth-child(11) { animation-delay: .5s; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(14px); } }

/* Hero with the live sky */
.hero { position: relative; min-height: max(640px, 100svh); color: var(--hero-ink); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; }
.hero .skyline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-inner { padding-top: clamp(118px, 16vh, 190px); position: relative; }
.hero h1 { max-width: 11ch; font-size: clamp(2.7rem, 6.2vw, 5.7rem); text-shadow: 0 2px 30px rgba(10, 18, 40, .25); }
.hero .lede { color: inherit; opacity: .95; margin: 22px 0 28px; max-width: 34em; font-size: clamp(1.05rem, 1.4vw, 1.22rem); text-shadow: 0 1px 18px rgba(10, 18, 40, .3); }
.hero .eyebrow { color: inherit; opacity: .92; margin-bottom: 20px; }
.hero .sub-note { text-shadow: 0 1px 12px rgba(10, 18, 40, .4); }
@media (max-width: 560px) {
  .hero-inner { padding-top: 104px; }
  .hero .lede { margin: 16px 0 22px; }
  .subscribe .btn { padding: 1em 1.15em; }
  .sky-chip { left: 14px; right: 14px; bottom: 18px; justify-content: space-between; }
  .sky-chip input[type=range] { width: 92px; }
}
.sky-chip { position: absolute; right: max(24px, calc((100vw - var(--wrap)) / 2)); bottom: 26px; z-index: 3; display: flex; align-items: center; gap: 10px;
  font: 600 .82rem/1 var(--sans); letter-spacing: .02em; color: #fffaf2; padding: 9px 10px 9px 14px; border-radius: 999px;
  background: rgba(10, 20, 36, .32); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.sky-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff6a4a; box-shadow: 0 0 0 0 rgba(255, 106, 74, .6); animation: pulse 2.2s infinite; }
.sky-chip.scrub .dot { background: var(--sun-2); animation: none; }
.sky-chip input[type=range] { width: 130px; accent-color: var(--sun); }
.sky-chip button { font: 600 .78rem/1 var(--sans); border: 0; border-radius: 999px; padding: 7px 11px; background: rgba(255, 255, 255, .16); color: inherit; cursor: pointer; }
.sky-chip button:hover { background: rgba(255, 255, 255, .28); }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(255, 106, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 106, 74, 0); } }

/* Skyline art colors */
.skyline { --t: .8s; }
.skyline .mtn-far { fill: var(--mtn-far); }
.skyline .mtn-mid { fill: var(--mtn-mid); }
.skyline .foot { fill: var(--foot); }
.skyline .bd-a { fill: var(--bd-a); } .skyline .bd-b { fill: var(--bd-b); } .skyline .bd-c { fill: var(--bd-c); }
.skyline .roof { fill: var(--roof); } .skyline .roof-shade { fill: var(--roof-shade); } .skyline .trim { fill: var(--trim); }
.skyline .win { fill: var(--win); }
.skyline .win.lit, .skyline .riv-lit { fill: var(--win-lit); opacity: var(--win-op); }
.skyline .lit-ish { fill: var(--win); }
.skyline .clock { fill: var(--trim); } .skyline .clock-hands { stroke: var(--roof-shade); }
.skyline .flag { fill: var(--palm); } .skyline .flagcloth { fill: var(--roof); }
.skyline .palms { fill: var(--palm); stroke: var(--palm); }
.skyline .shore { fill: var(--shore); }
.skyline .waves { stroke: var(--wave); fill: none; stroke-linecap: round; animation: drift 14s ease-in-out infinite alternate; }
.skyline .glitter rect { fill: var(--glitter); opacity: var(--glitter-op); animation: glint 2.6s ease-in-out infinite; }
.skyline .deck { fill: var(--palm); } .skyline .pilings { stroke: var(--palm); }
.skyline .hull { fill: var(--palm); } .skyline .mast { fill: var(--palm); }
.skyline .sail { fill: var(--trim); } .skyline .sail2 { fill: var(--bd-b); }
.skyline .boat { animation: bob 5s ease-in-out infinite; transform-box: fill-box; }
.skyline .flock { fill: var(--palm); }
.skyline .pel { animation: glide 3.4s ease-in-out infinite alternate; }
.skyline .flock { animation: fly 70s linear infinite; }
.skyline .stars { fill: #fff; opacity: var(--stars-op); }
.skyline .stars .tw { animation: twinkle 3.5s ease-in-out infinite; }
.skyline .sun-disc { fill: var(--sun-c); }
.skyline .moon { opacity: var(--moon-op); }
.skyline .moon-disc { fill: #f7efd9; } .skyline .moon-cut { fill: var(--sky-top); }
@keyframes drift { to { transform: translateX(-26px); } }
@keyframes glint { 50% { opacity: calc(var(--glitter-op) * .35); } }
@keyframes bob { 50% { transform: translateY(2.5px) rotate(.8deg); } }
@keyframes glide { to { transform: translateY(-5px); } }
@keyframes fly { from { transform: translate(-260px, 722px); } to { transform: translate(1860px, 700px); } }
@keyframes twinkle { 50% { opacity: .25; } }

/* Shoreline divider (foam edge from the hero sea into the sand-colored page) */
.foam { position: relative; height: 0; z-index: 2; pointer-events: none; }
.foam svg { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 56px; }

/* Sections */
section { position: relative; }
.sec { padding: clamp(80px, 11vw, 150px) 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: clamp(36px, 5vw, 60px); flex-wrap: wrap; }
.sec-head h2 { max-width: 14ch; margin-top: 16px; }
.sec-head .lede { margin: 0; max-width: 28em; }

/* Barrel-tile edge — red tile roofline used as a section border */
.tile-edge { height: 22px; background:
  radial-gradient(circle at 50% 100%, var(--tile) 10.5px, transparent 11px) 0 0 / 26px 22px repeat-x,
  linear-gradient(var(--tile-deep), var(--tile-deep)) 0 100% / 100% 3px no-repeat; }
.tile-edge.flip { transform: scaleY(-1); }

/* Weekend picks (home + weekend page) */
.picks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.pick { grid-column: span 4; display: flex; flex-direction: column; background: #fffaf2; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); position: relative; }
.pick:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.pick a.cover { position: absolute; inset: 0; z-index: 2; }
.pick a.cover:focus-visible { outline-offset: -4px; border-radius: var(--radius); }
.poster { --pc: var(--sea); --pa: var(--sun-2); position: relative; aspect-ratio: 16 / 10; background: var(--pc); color: #fff8ec; padding: 22px 24px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.poster .day { font: 600 .78rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.poster .time { font: 600 clamp(3rem, 5vw, 4.4rem)/.9 var(--serif); letter-spacing: -.03em; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-style: italic; position: relative; z-index: 1; }
.poster .time small { font-size: .38em; font-style: normal; letter-spacing: .02em; margin-left: .15em; }
.poster .motif { position: absolute; right: -6%; bottom: -14%; width: 64%; opacity: .9; color: var(--pa); }
.poster .tag { position: absolute; top: 20px; right: 20px; font: 600 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.c-music { --pc: #1d5a6e; --pa: #9cc5bb; }
.c-stage { --pc: #5b4c82; --pa: #f0a6b8; }
.c-family { --pc: #e0902f; --pa: #ffe1a6; }
.c-drink { --pc: #9b3a22; --pa: #f4b07c; }
.c-out { --pc: #4f6b4c; --pa: #c9dbb2; }
.c-art { --pc: #2c3c63; --pa: #f2c36b; }
.c-community { --pc: #b9472a; --pa: #ffd39a; }
.c-learn { --pc: #3c5f73; --pa: #f6d8a8; }
.pick .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pick h3 { font-size: 1.42rem; }
.pick .meta { font-size: .9rem; color: var(--ink-3); font-weight: 500; }
.pick .blurb { font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
.pick .also { font-size: .85rem; color: var(--ink-3); }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 .74rem/1 var(--sans); letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.badge.kids { background: #fde9c7; color: #8a5300; }
.badge.free { background: #dcebdc; color: #2f5b33; }
.pick.is-hidden { display: none; }
.picks-done { margin: 0; font-size: 1.1rem; }
.picks-done a { font-weight: 600; }
.pick.feature { grid-column: span 12; display: grid; grid-template-columns: 1.08fr 1fr; min-height: 420px; }
.pick.feature .poster { aspect-ratio: auto; padding: 36px; }
.pick.feature .poster .time { font-size: clamp(4.4rem, 8vw, 7.6rem); }
.pick.feature .body { padding: clamp(28px, 4vw, 52px); justify-content: center; gap: 16px; }
.pick.feature h3 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.04; }
.pick.feature .blurb { font-size: 1.12rem; }
.why { font: 500 italic 1.2rem/1.45 var(--serif); font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1; color: var(--ink); border-left: 3px solid var(--sun); padding-left: 16px; }
@media (max-width: 1000px) { .pick { grid-column: span 6; } }
@media (max-width: 680px) { .pick, .pick.feature { grid-column: span 12; } .pick.feature { grid-template-columns: 1fr; min-height: 0; } .pick.feature .poster { aspect-ratio: 16 / 11; padding: 26px; } }


/* Night band (Glow Map promo) */
.night { background: radial-gradient(120% 90% at 70% 0%, #1b2d52 0%, var(--night) 60%); color: #f6eedf; overflow: hidden; }
.night .eyebrow { color: var(--sun-2); }
.night .lede { color: rgba(246, 238, 223, .78); }
.lights { position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; }
.lights .bulb { animation: blink 3.2s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.glow-promo { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.glow-promo h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
.glow-title { text-shadow: 0 0 22px rgba(255, 196, 110, .55), 0 0 60px rgba(255, 150, 60, .35); }
.minimap { position: relative; aspect-ratio: 1 / .82; border-radius: 26px; overflow: hidden; background: #0d1a2e; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.minimap svg { width: 100%; height: 100%; }
.timeline { list-style: none; padding: 0; margin: 34px 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 112px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); align-items: baseline; }
.timeline li b { font: 600 italic 1.15rem/1 var(--serif); color: var(--sun-2); font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1; }
.timeline li span { color: rgba(246, 238, 223, .86); }
.timeline li.now span::after { content: "Open now"; margin-left: 10px; font: 600 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--sun); color: var(--ink); vertical-align: 2px; }
@media (max-width: 900px) { .glow-promo { grid-template-columns: 1fr; } }

/* Editor note */
.editor { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.editor blockquote { margin: 0; font: 500 clamp(1.5rem, 2.6vw, 2.15rem)/1.3 var(--serif); letter-spacing: -.012em; font-variation-settings: "opsz" 72, "SOFT" 80; }
.editor blockquote p { margin-bottom: .7em; }
.sig { font: 500 italic 2.4rem/1 var(--serif); color: var(--tile); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.editor-art { aspect-ratio: 4 / 5; border-radius: 200px 200px 22px 22px; overflow: hidden; position: relative; box-shadow: var(--shadow-2); }
.editor-art svg { width: 100%; height: 100%; }
@media (max-width: 860px) { .editor { grid-template-columns: 1fr; } .editor-art { max-width: 340px; } }

/* Final CTA */
.cta { position: relative; overflow: hidden; color: #fff8ee; text-align: center; padding: clamp(110px, 14vw, 190px) 0; isolation: isolate;
  background: linear-gradient(180deg, #23365f 0%, #6b4f86 38%, #d9707a 66%, #f6a961 88%, #f9c879 100%); }
.cta h2 { font-size: clamp(2.8rem, 7vw, 6rem); max-width: 12ch; margin: 18px auto 18px; }
.cta .lede { color: rgba(255, 248, 238, .9); margin: 0 auto 34px; }
.cta .subscribe { margin: 0 auto; }
.cta .eyebrow { color: #ffe0b0; }
.cta .sun-big { position: absolute; left: 50%; bottom: -300px; width: 560px; height: 560px; margin-left: -280px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, #ffe3a3 0 40%, rgba(255, 210, 140, .35) 41%, rgba(255, 190, 120, 0) 70%); }
.cta .sea-lines { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: -1;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(255, 240, 210, .35) 9px 11px); mask: linear-gradient(transparent, #000); -webkit-mask: linear-gradient(transparent, #000); }

/* Footer */
.site-foot { background: var(--night); color: rgba(246, 238, 223, .78); padding: 80px 0 40px; font-size: .95rem; }
.site-foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; }
.site-foot .f-h { font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sun-2); margin: 6px 0 18px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-foot a { text-decoration: none; color: #f6eedf; }
.site-foot a:hover { color: var(--sun-2); }
.site-foot .logo { color: #f6eedf; margin-bottom: 18px; }
.site-foot .fine { margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .84rem; color: rgba(246, 238, 223, .55); }
@media (max-width: 860px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } .site-foot .cols > :first-child { grid-column: 1 / -1; } }

/* Reveal on scroll */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* signup step 2: neighborhood picker (poster map + chips) */
.hoods { position: relative; z-index: 3; max-width: 760px; margin-top: 16px; text-align: left; color: var(--ink); background: var(--paper);
  border-radius: 24px; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 30px 70px -30px rgba(10, 20, 36, .7), 0 0 0 1px rgba(24, 34, 46, .06);
  opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease), max-height .45s var(--ease); }
.hoods.in { opacity: 1; transform: none; }
.hoods.gone { opacity: 0; transform: translateY(8px) scale(.98); }
.hero-inner:has(.hoods) { padding-bottom: 110px; } /* clear the Live sky chip pinned to the hero's bottom */
.cta .hoods { margin-left: auto; margin-right: auto; }
.hoods-map { position: relative; line-height: 0; border-bottom: 1px solid var(--line); }
.hoods-map::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0, transparent 60%, rgba(24, 34, 46, .08)); }
.hm { display: block; width: 100%; height: auto; }
.hm-far { fill: #c9a7a4; opacity: .55; }
.hm-mid { fill: #a7848f; opacity: .55; }
.hm-land { fill: var(--paper-3); }
.hm-sea { fill: url(#hm-sea); }
.hm-wave { fill: none; stroke: rgba(255, 240, 220, .28); stroke-width: 1.4; animation: hm-drift 9s linear infinite; }
.hm-wave2 { stroke: rgba(255, 240, 220, .16); animation-duration: 13s; animation-direction: reverse; }
.hm-isle { fill: rgba(255, 240, 220, .14); }
.hm-cap { font: 600 9px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; fill: rgba(255, 240, 220, .55); }
.hm-pin { cursor: pointer; }
.hm-drop { transform-box: fill-box; transform-origin: 50% 100%; animation: hm-in .7s var(--ease) both; animation-delay: var(--d); }
.hm-body { fill: var(--paper); stroke: var(--tile); stroke-width: 2; transition: fill .25s var(--ease), stroke .25s; }
.hm-eye { fill: var(--tile); transition: fill .25s; }
.hm-halo { fill: var(--sun); opacity: 0; transform: translateY(-14px) scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .3s, transform .45s var(--ease); }
.hm-label { font: 700 12.5px/1 var(--sans); text-anchor: middle; fill: var(--ink); paint-order: stroke; stroke: rgba(251, 238, 221, .9); stroke-width: 4px; stroke-linejoin: round; transition: fill .2s; }
.hm-pin:hover .hm-body { fill: #fde9c8; }
.hm-pin.on .hm-body { fill: var(--tile); stroke: var(--tile-deep); }
.hm-pin.on .hm-eye { fill: #fff8ef; }
.hm-pin.on .hm-drop { animation: hm-hop .5s var(--ease); }
.hm-pin.on .hm-halo { opacity: .45; transform: translateY(-14px) scale(1); animation: hm-pulse 2.4s var(--ease) infinite .5s; }
.hm-pin.on .hm-label { fill: var(--tile-deep); }
.hm-sea-label { fill: #fff8ef; stroke: rgba(14, 51, 67, .65); }
.hm-pin.on .hm-sea-label { fill: #ffd9a8; }
@keyframes hm-in { from { opacity: 0; transform: translateY(-26px) scale(.6); } 60% { opacity: 1; transform: translateY(2px) scale(1.04); } to { transform: none; } }
@keyframes hm-hop { 0% { transform: none; } 35% { transform: translateY(-7px) scale(1.12); } 70% { transform: translateY(1px) scale(.97); } 100% { transform: none; } }
@keyframes hm-pulse { 0%, 100% { opacity: .45; transform: translateY(-14px) scale(1); } 50% { opacity: .15; transform: translateY(-14px) scale(1.5); } }
@keyframes hm-drift { to { transform: translateX(-60px); } }

.hoods-body { padding: 20px 22px 22px; }
.hoods-kick { margin: 0 0 6px; font: 700 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tile); }
.hoods-h { margin: 0; font: 600 clamp(1.45rem, 3.4vw, 1.9rem)/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.hoods-h em { font-style: italic; font-weight: 500; color: var(--tile); }
.hoods-lede { margin: 8px 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.45; }
.hoods-chips { border: 0; margin: 16px 0 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.hchip { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 14px 10px 10px; border-radius: 14px; cursor: pointer;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, background .25s, transform .2s var(--ease);
  animation: hchip-in .5s var(--ease) both; animation-delay: var(--d); }
.hchip:hover { box-shadow: inset 0 0 0 1.5px rgba(185, 71, 42, .45); transform: translateY(-1px); }
.hchip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hchip-tick { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(24, 34, 46, .25);
  background: var(--paper); transition: background .25s var(--ease), box-shadow .25s, transform .3s var(--ease); }
.hchip-tick svg { width: 15px; height: 15px; fill: none; stroke: #fff8ef; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .3s var(--ease) .05s; }
.hchip-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.hchip-txt b { font-weight: 650; font-size: .98rem; }
.hchip-txt small { font-size: .78rem; color: var(--ink-3); margin-top: 2px; }
.hchip:has(input:checked) { background: #fff4ec; box-shadow: inset 0 0 0 2px var(--tile); }
.hchip:has(input:checked) .hchip-tick { background: var(--tile); box-shadow: none; transform: scale(1.08); }
.hchip:has(input:checked) .hchip-tick svg { stroke-dashoffset: 0; }
.hchip:has(input:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; }
@keyframes hchip-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hoods-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 18px; }
.hoods .hoods-save { padding: .9em 1.5em; transition: transform .2s var(--ease), box-shadow .2s, opacity .2s; }
.hoods:not(.has-picks) .hoods-save { opacity: .55; }
.hoods-skip { background: none; border: 0; padding: .6em .4em; font: 600 .95rem var(--sans); color: var(--ink-3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(24, 34, 46, .25); }
.hoods-skip:hover { color: var(--ink); }
.hoods-msg { flex-basis: 100%; margin: 2px 0 0; min-height: 1.2em; font-weight: 600; font-size: .92rem; color: var(--tile-deep); }
.hoods-msg:empty { display: none; }
.hoods.saved .hoods-body { animation: hchip-in .5s var(--ease) both; }
.hoods.saved .hoods-h em { color: var(--sea); }

@media (max-width: 520px) {
  .hoods-body { padding: 18px 16px 18px; }
  .hm-label { font-size: 17px; }
  .hm-cap { display: none; }
  .hoods-chips { grid-template-columns: 1fr; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .hoods, .hm-drop, .hm-wave, .hchip, .hm-pin.on .hm-drop, .hm-pin.on .hm-halo, .hoods.saved .hoods-body { animation: none !important; transition: none !important; }
}

/* home: "what a typical issue looks like", a shortened mock of this week's email under Inside the issue */
.sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px 56px; align-items: start; margin-top: clamp(40px, 6vw, 64px); }
.sample-copy h3 { font-size: 1.5rem; margin-bottom: 10px; }
.sample-copy p { color: var(--ink-2); max-width: 30em; }
.sample-mail { margin: 0; padding: 26px 28px; border-radius: var(--radius); background: #fffaf2; border: 1.5px solid var(--line); box-shadow: var(--shadow-1); }
.sample-mail p, .sample-mail ul { margin: 0; }
.sample-from { font: 600 .78rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.sample-title { font: 500 1.35rem/1.25 var(--serif); color: var(--ink); margin: 6px 0 18px !important; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sample-sec { font: 600 1rem var(--sans); color: var(--ink); }
.sample-day { font: 500 italic 1rem var(--serif); color: var(--tile); margin-top: 12px !important; }
.sample-mail ul { list-style: none; padding: 0; }
.sample-mail li { color: var(--ink-2); padding: 3px 0; overflow-wrap: anywhere; }
.sample-mail li b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.sample-more { margin-top: 16px !important; padding-top: 12px !important; border-top: 1px dashed var(--line); }
.sample-more li { font-weight: 600; color: var(--ink); }
.sample-sign { margin-top: 14px !important; color: var(--ink-2); font-style: italic; }
@media (max-width: 760px) { .sample { grid-template-columns: 1fr; } .sample-mail { padding: 22px 20px; } }

/* home: "Right now / Up next" strip above the weekend picks (home-picks.js) */
.now-strip { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: -6px 0 26px; padding: 14px 18px; border-radius: var(--radius); background: #fffaf2; border: 1.5px solid var(--line); font-size: 1rem; }
.now-strip[hidden] { display: none; }
.ns-item { min-width: 0; }
.ns-k { font: 600 .74rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tile); margin-right: 6px; }
.ns-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tile); margin-right: 7px; vertical-align: 1px; animation: ns-pulse 2s ease-in-out infinite; }
@keyframes ns-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ns-dot { animation: none; } }
.now-strip a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.ns-meta { color: var(--ink-3); }

/* Ask Savvy (/ask/) */
.ask-hero { padding-bottom: 20px; overflow: hidden; }
.ask-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
.ask-hero h1 { max-width: 9ch; }
.ask-art { width: 100%; height: auto; display: block; }
.ask-vote { padding-top: clamp(50px, 7vw, 90px); scroll-margin-top: 70px; }
.ask-panel { max-width: 860px; margin: 0 auto; padding: clamp(28px, 5vw, 54px); border-radius: 28px; background: #fffaf2; box-shadow: var(--shadow-2); }
.ask-panel h2 { margin: 14px 0 10px; font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.ask-lede { color: var(--ink-2); font-size: 1.1rem; margin: 0 0 6px; }
.ask-lede a, .ask-done a { color: var(--tile); font-weight: 600; }
.ask-ballot { margin-top: 24px; display: grid; gap: 16px; }
.ask-ballot fieldset { border: 0; margin: 0; padding: 0; }
.ask-qs { display: grid; gap: 10px; }
.ask-q { position: relative; display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.ask-q:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.ask-q input { position: absolute; opacity: 0; pointer-events: none; }
.ask-q:has(input:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; }
.ask-q.on { border-color: var(--tile); box-shadow: 0 0 0 3px rgba(185, 71, 42, .14); }
.ask-q:has(input:disabled) { cursor: default; transform: none; }
.ask-q-n { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2); font: 600 1.05rem var(--serif); color: var(--ink-2); transition: background .2s, color .2s; }
.ask-q.on .ask-q-n { background: var(--tile); color: #fff; }
.ask-q-t { font: 500 1.18rem/1.35 var(--serif); color: var(--ink); display: grid; gap: 4px; }
.ask-q-t small { font: 500 .86rem var(--sans); color: var(--ink-3); }
.ask-send { display: flex; gap: 10px; flex-wrap: wrap; }
.ask-send .field { flex: 1 1 240px; }
.ask-fine { margin: 0; font-size: .9rem; color: var(--ink-3); }
.ask-done { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: #e3ead9; color: #2e4127; }
.ask-done p { margin: 0; }

.ask-how { padding-top: clamp(40px, 6vw, 70px); }
.ask-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ask-steps li { padding: 30px 28px; border-radius: 22px; background: #fffaf2; box-shadow: var(--shadow-1); }
.ask-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sun); color: var(--ink); font: 600 1.1rem var(--serif); }
.ask-steps h3 { font-size: 1.5rem; margin: 18px 0 8px; }
.ask-steps p { margin: 0; color: var(--ink-2); }
.ask-steps a { color: var(--tile); font-weight: 600; word-break: break-word; }
.ask-send-q { margin-top: clamp(40px, 6vw, 60px); padding: clamp(26px, 4vw, 40px); border-radius: 24px; background: var(--paper-2); display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; }
.ask-send-q h2 { margin: 0 0 6px; }
.ask-send-q p { margin: 0; color: var(--ink-2); max-width: 36em; }

@media (max-width: 860px) {
  .ask-hero-grid { grid-template-columns: 1fr; }
  .ask-art-wrap { max-width: 440px; margin: 0 auto; }
  .ask-steps { grid-template-columns: 1fr; }
}

/* Which South Coast Beach Are You? (/quiz/beach/). .fine-print and .cta-short come from weekend.css */
.bq-sec { padding-top: 10px; }
.bq { max-width: 760px; margin: 0 auto; padding: clamp(20px, 3.4vw, 34px); border-radius: 22px; background: #fffaf2; box-shadow: var(--shadow-1); scroll-margin-top: 96px; }
.bq-bar { height: 6px; border-radius: 999px; background: var(--paper-2); overflow: hidden; margin-bottom: 22px; }
.bq-bar i { display: block; height: 100%; width: 0; background: var(--sea); border-radius: inherit; transition: width .35s var(--ease); }
.bq-q { border: 0; margin: 0; padding: 0; min-width: 0; animation: bq-in .3s var(--ease) both; }
.bq-q legend { padding: 0; margin: 0 0 16px; font: 600 clamp(1.45rem, 3vw, 1.9rem)/1.15 var(--serif); color: var(--ink); }
.bq-n { display: block; margin-bottom: 8px; font: 600 .76rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tile); }
.bq-as { display: grid; gap: 9px; }
.bq-a { position: relative; display: block; cursor: pointer; }
.bq-a input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bq-a span { display: block; padding: 15px 18px; border-radius: 14px; background: #fffdf8; border: 1.5px solid var(--line); font-weight: 600; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease); }
.bq-a:hover span { border-color: var(--ink-3); transform: translateY(-1px); }
.bq-a input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.bq-a input:checked + span { background: var(--sea); border-color: var(--sea); color: #fff; }
.bq-nav { margin-top: 14px; min-height: 40px; }
.bq-back { font: 600 .95rem/1 var(--sans); background: none; border: 0; color: var(--ink-2); padding: 10px 2px; cursor: pointer; }
.bq-back:hover { color: var(--ink); }
.bq-result { text-align: center; animation: bq-in .4s var(--ease) both; }
.bq-result .eyebrow { margin: 0 0 6px; }
.bq-r-name { margin: 0 0 14px; font: 600 clamp(2.4rem, 7vw, 3.8rem)/1 var(--serif); letter-spacing: -.025em; color: var(--sea); }
.bq-r-name:focus { outline: none; }
.bq-r-blurb { margin: 0 auto 12px; max-width: 34em; font-size: 1.08rem; color: var(--ink); text-align: left; }
.bq-r-dogs { margin: 0 auto 10px; max-width: 34em; color: var(--ink-2); text-align: left; }
.bq-r-src { margin: 0 auto 18px; max-width: 34em; font-size: .85rem; color: var(--ink-3); text-align: left; }
.bq-r-src a { color: var(--sea); }
.bq-r-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bq-r-btns .btn { padding: .9em 1.3em; }
.bq-shared { min-height: 1.4em; margin: 12px 0 0; font-weight: 600; color: var(--sea); overflow-wrap: anywhere; }
.bq-all { max-width: 760px; margin: 26px auto 0; color: var(--ink-2); font-size: .94rem; }
.bq-all summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.bq-all ul { margin: 10px 0 0; padding-left: 1.1em; }
.bq-all li { margin: 0 0 8px; }
.bq-all a { color: var(--sea); }
.bq-sec .fine-print { max-width: 760px; margin: 18px auto 0; }
@keyframes bq-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .bq { padding: 18px 16px; border-radius: 18px; }
  .bq-r-btns .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .bq-q, .bq-result { animation: none; } .bq-bar i { transition: none; } }

/* Beaches page (/beaches/). .ds-score badges live in weekend.css, .bs-adv and .sn-date in sunset.css */
.beach-today[hidden] { display: none; }
.bt-answer { margin: 0 0 30px; padding: 22px 24px; border-radius: var(--radius); background: #fffaf2; border: 1.5px solid var(--line); }
.bt-answer .eyebrow { margin: 0 0 8px; }
.bt-answer-text { margin: 0; font: 400 clamp(1.15rem, 2.2vw, 1.4rem)/1.45 var(--serif); color: var(--ink); }
.bt-pick { margin: 12px 0 0; color: var(--ink-2); }
.bt-pick b { color: var(--ink); }

.bday { margin: 0 0 22px; }
.bday h2 { margin: 0 0 12px; display: inline; }
.bday > h2 { display: block; }
details.bday { border-top: 1px solid var(--line); padding-top: 14px; }
details.bday > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
details.bday > summary::-webkit-details-marker { display: none; }
details.bday > summary::after { content: '+'; font: 500 1.4rem/1 var(--sans); color: var(--ink-3); margin-left: auto; }
details.bday[open] > summary::after { content: '\2212'; }
details.bday[open] > summary { margin-bottom: 12px; }
.bday .bs-adv { margin: 0 0 12px; }

.bt-wrap { overflow-x: auto; }
.bt { width: 100%; border-collapse: collapse; font-size: .97rem; }
.bt th, .bt td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bt thead th { font: 600 .78rem var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.bt tbody th { font: 600 1rem var(--sans); color: var(--ink); }
.bt td { color: var(--ink-2); }
.bt-score { width: 46px; height: 46px; font-size: 1.15rem; vertical-align: middle; margin-right: 8px; }
.bt-when, .bt-why, .bt-note { display: block; font-size: .86rem; color: var(--ink-3); margin-top: 3px; }
.bt td:nth-child(2) { display: flex; align-items: center; gap: 4px; }
.bt-grade small { display: block; font-size: .8rem; color: var(--ink-3); }
.swim { display: inline-block; font: 600 .82rem/1 var(--sans); letter-spacing: .03em; padding: 6px 10px; border-radius: 999px; }
.swim-go { background: #dcebdc; color: #2f5b33; }
.swim-check { background: #fde9c7; color: #8a5300; }
.swim-skip { background: #f6d5cc; color: var(--tile-deep); }

.beach-guide h2, .beach-faq h2 { margin: 0 0 24px; }
.beach-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.beach-card { padding: 20px 22px; border-radius: var(--radius); background: #fffaf2; border: 1.5px solid var(--line); }
.beach-card .eyebrow { margin: 0 0 6px; }
.beach-card h3 { margin: 0 0 8px; font: 500 1.3rem/1.2 var(--serif); color: var(--ink); }
.beach-card p { margin: 0 0 8px; color: var(--ink-2); }
.bc-dogs { font-size: .93rem; }

.bfaq { border-top: 1px solid var(--line); padding: 14px 0; }
.bfaq:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.bfaq summary { cursor: pointer; font: 600 1.05rem/1.4 var(--sans); color: var(--ink); }
.bfaq p { margin: 10px 0 0; color: var(--ink-2); max-width: 68ch; }

/* Today's answer: swim call + water on the left, best beach on the right */
.bt-answer { display: grid; gap: 18px 34px; }
.bt-water { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; color: var(--ink-2); font-size: .97rem; }
.bt-water b { color: var(--ink); }
.bt-temp { flex: none; font: 500 2rem/1 var(--serif); color: var(--sea); }
.bt-temp small { font-size: .55em; margin-left: 1px; }
.bt-best { padding-top: 16px; border-top: 1px dashed var(--line); }
.bt-best .eyebrow { margin: 0 0 8px; }
.bt-best-n { margin: 0 0 10px; display: flex; align-items: center; gap: 4px; font: 500 1.35rem/1.2 var(--serif); }
.bt-best-n a { color: var(--ink); text-decoration: none; }
.bt-best-n a:hover { text-decoration: underline; }
.bt-best-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .95rem; color: var(--ink-2); }
.bt-best-why .swim { margin-right: 4px; padding: 4px 8px; font-size: .76rem; }
@media (min-width: 820px) {
  .bt-answer { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .bt-best { padding: 0 0 0 30px; border-top: 0; border-left: 1px dashed var(--line); }
}

/* Map of today's calls. On phones the off-screen beaches are chips along the bottom, over the water */
.bmap-wrap { margin: -12px 0 34px; }
.bmap { height: 280px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); background: #a9cfd5; }
.bmap-key { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 .86rem var(--sans); color: var(--ink-2); }
.bmap-key li::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; vertical-align: -1px; }
.bmap-key .k-go::before { background: #3f7d47; }
.bmap-key .k-check::before { background: #c98a1d; }
.bmap-key .k-skip::before { background: #b9472a; }
.bmap-key .k-num { color: var(--ink-3); }
.bmap-key .k-num::before { display: none; }
/* under the key: the hint, or (after the reader moves the map) how many beaches are in view and the way back */
.bmap-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 40px; margin-top: 8px; }
.bmap-hint, .bmap-area { margin: 0; font-size: .86rem; color: var(--ink-3); }
.bmap-area { font-weight: 500; color: var(--ink-2); }
.bmap-area:empty { display: none; }
.bmap-hint:focus { outline: none; }
.bmap-all { font: 600 .9rem/1 var(--sans); min-height: 40px; padding: .6em 1.05em; border-radius: 999px; border: 1.5px solid var(--sea); background: #fffaf2; color: var(--sea); cursor: pointer; transition: background .2s, color .2s; }
.bmap-all:hover { background: var(--sea); color: #fff; }
.bt-none { margin: 14px 0 0; color: var(--ink-3); font: 500 italic 1.05rem var(--serif); }
.bmap-edges { position: absolute; bottom: 12px; z-index: 2; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.bmap-edges.is-l { left: 8px; align-items: flex-start; }
.bmap-edges.is-r { right: 44px; align-items: flex-end; }
.bmap-edge { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px 4px 8px; border: 0; border-radius: 999px; background: #fffaf2; box-shadow: var(--shadow-1); font: 600 .8rem/1 var(--sans); color: var(--ink); cursor: pointer; }
.bmap-edge i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-style: normal; font-size: .76rem; }
.bmap-edge span { color: var(--ink-3); }
.bpop { padding: 14px 16px 12px; }
.bpop p { margin: 0; }
.bpop-n { font: 600 1.08rem/1.2 var(--serif); color: var(--ink); padding-right: 22px; }
.bpop-s { margin-top: 8px !important; font-size: .88rem; color: var(--ink-2); }
.bpop-s .swim { padding: 4px 8px; font-size: .74rem; margin-right: 4px; }
.bpop-b { margin-top: 6px !important; font-size: .86rem; color: var(--ink-2); }
.bpop-l { display: inline-block; margin-top: 8px; font: 600 .86rem var(--sans); color: var(--sea); }
@media (min-width: 760px) { .bmap { height: 340px; } }

/* Tide chart and sand strips under each day's table */
.btide { margin: 22px 0 6px; padding: 18px 20px 14px; border-radius: var(--radius); background: #f6f0e4; }
.btide-h { margin: 0 0 8px; font-size: .95rem; color: var(--ink-2); }
.btide-h b { font: 600 .78rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: 8px; }
.btc-wrap { position: relative; height: 104px; margin-top: 22px; }
.btc { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.btc-night { fill: #18222e; opacity: .06; }
.btc-line { fill: none; stroke: var(--sea); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.btc-mark { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--sea); box-shadow: 0 0 0 2px #f6f0e4; }
.btc-mark b { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 600 .78rem/1 var(--sans); color: var(--ink-2); }
.btc-H b { bottom: 12px; }
.btc-L b { top: 12px; }
.btc-mark.is-l b { left: -2px; transform: none; }
.btc-mark.is-r b { left: auto; right: -2px; transform: none; }
.btc-ticks { position: relative; height: 18px; margin-top: 6px; font: 500 .74rem/1 var(--sans); color: var(--ink-3); }
.btc-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.btc-ticks span:first-child { transform: none; }
.btc-ticks span:last-child { transform: translateX(-100%); }
.btc-now { stroke: var(--tile); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.bts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.bts li { display: grid; grid-template-columns: 7.5em 1fr; gap: 4px 12px; align-items: center; font-size: .9rem; }
.bts-name { font-weight: 600; color: var(--ink); }
.bts-bar { position: relative; height: 12px; border-radius: 999px; background: #e7cf9f; overflow: hidden; }
.bts-wet { position: absolute; top: 0; bottom: 0; background: #5f9fb0; }
.bts-now { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--tile); }
.bts-txt { grid-column: 2; color: var(--ink-2); font-size: .86rem; }
.btide-note { margin: 10px 0 0; font-size: .8rem; color: var(--ink-3); }

@media (max-width: 720px) {
  .bt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bt, .bt tbody, .bt tr, .bt th, .bt td { display: block; width: 100%; }
  .bt tr { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
  .bt th, .bt td { border: 0; padding: 0; }
  .bt tbody th { grid-column: 1 / -1; }
  .bt td:nth-child(2) { grid-column: 1 / -1; }
  .bt td.bt-grade { text-align: left; }
  .bt td.bt-crowd { text-align: right; align-self: end; font-size: .86rem; }
  .bt td.bt-crowd:not(:empty)::before { content: 'Crowds: '; color: var(--ink-3); }
}

/* The checklist (/checklist/). .fine-print and .cta-short come from weekend.css */
.cl-sec { padding-top: 10px; }
.cl-bar { position: sticky; top: 86px; z-index: 5; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 20px; margin: 0 0 10px;
  padding: 16px 20px; border-radius: 18px; background: color-mix(in srgb, #fffaf2 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow-1); }
.cl-score { margin: 0; font: 500 1.15rem/1.2 var(--serif); color: var(--ink-2); }
.cl-score b { font: 600 1.9rem/1 var(--serif); color: var(--ink); }
.cl-meter { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--paper-2); overflow: hidden; order: 3; }
.cl-meter i { display: block; height: 100%; width: 0; background: var(--sea); border-radius: inherit; transition: width .35s var(--ease); }
.cl-btns { display: flex; gap: 8px; align-items: center; }
.cl-btns .btn { padding: .75em 1.15em; font-size: .95rem; }
.cl-reset { font: 600 .9rem/1 var(--sans); background: none; border: 0; color: var(--ink-3); padding: 10px 6px; cursor: pointer; }
.cl-reset:hover { color: var(--ink); }
.cl-said { grid-column: 1 / -1; order: 4; margin: 0; font-size: .9rem; font-weight: 600; color: var(--sea); overflow-wrap: anywhere; }
.cl-said:empty { display: none; }
.cl-h { margin: 38px 0 14px; font: 600 1.5rem/1.1 var(--serif); scroll-margin-top: 190px; }
.cl-h span { font: 600 .8rem/1 var(--sans); color: var(--ink-3); margin-left: 6px; letter-spacing: .04em; }
.cl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cl-item { position: relative; padding: 16px 18px 14px; border-radius: 18px; background: #fffaf2; border: 1.5px solid var(--line); transition: border-color .2s var(--ease), background .2s var(--ease); }
.cl-item:has(.cl-box:checked) { border-color: color-mix(in srgb, var(--sea) 55%, transparent); background: #f1f6f4; }
.cl-box { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cl-item label { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.cl-item label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card is the tap target */
.cl-tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(24, 34, 46, .3); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.cl-tick svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .25s var(--ease); }
.cl-box:checked + label .cl-tick { background: var(--sea); box-shadow: none; }
.cl-box:checked + label .cl-tick svg { stroke-dashoffset: 0; }
.cl-box:focus-visible + label .cl-tick { outline: 3px solid var(--sun); outline-offset: 2px; }
.cl-name { font: 600 1.12rem/1.2 var(--serif); color: var(--ink); }
.cl-fact { margin: 8px 0 0 40px; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.cl-link { position: relative; z-index: 1; margin: 6px 0 0 40px; font-size: .8rem; color: var(--ink-3); }
.cl-link a { color: var(--sea); }
.cl-sec .fine-print { margin-top: 34px; }
@media (max-width: 560px) {
  .cl-bar { top: 76px; grid-template-columns: 1fr; padding: 12px 14px; gap: 8px; }
  .cl-score b { font-size: 1.6rem; }
  .cl-btns .btn { flex: 1; }
  .cl-list { grid-template-columns: 1fr; }
  .cl-fact, .cl-link { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .cl-meter i, .cl-tick, .cl-tick svg { transition: none; } }

/* What's Coming (/coming/) */
.cm-hero { padding-bottom: 20px; }
.cm-hero h1 { max-width: 9ch; }
.cm-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.cm-jump a { font: 600 .95rem/1 var(--sans); padding: .8em 1.2em; border-radius: 999px; background: #fffaf2; box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s; }
.cm-jump a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--tile-deep); }
.cm-sec { scroll-margin-top: 70px; }
.cm-alt { background: var(--paper-2); }
.cm-consent { margin-top: 18px; }
.cm-consent summary { cursor: pointer; display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--line); }
.cm-consent summary::-webkit-details-marker { display: none; }
.cm-consent summary .cm-dh { margin: 0; color: var(--sea); }
.cm-consent summary .cm-dh::after { content: " +"; }
.cm-consent[open] summary .cm-dh::after { content: " −"; }
.cm-consent summary .cm-dsub { margin: 0; }
.cm-stamp { display: inline-block; margin: 0 0 22px; padding: .7em 1.1em; border-radius: 999px; background: #fffaf2; box-shadow: var(--shadow-1); font: 500 .95rem var(--sans); color: var(--ink-2); }
.cm-stamp b { font: 600 1.15rem/1 var(--serif); color: var(--tile); }

.cm-map-wrap { margin-bottom: clamp(22px, 3vw, 34px); }
.cm-map { height: clamp(320px, 46vw, 470px); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-1); background: var(--paper-2); }
.cm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 2px 0; font-size: .88rem; color: var(--ink-3); }
.cm-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; border: 1px solid rgba(24, 34, 46, .5); }
.cm-key-new { background: #00809b; } .cm-key-over { background: #d4643f; margin-left: 6px; }
.cm-key-permit { background: #00809b; border-radius: 3px; } .cm-key-done { background: #d4643f; border-radius: 3px; margin-left: 8px; }
.cm-ramp { display: inline-flex; gap: 2px; }
.cm-ramp i { width: 18px; height: 12px; border-radius: 3px; }

.cm-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cm-filter button, .cm-seg button { font: 600 .92rem/1 var(--sans); min-height: 40px; padding: .7em 1.1em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.cm-filter button:hover, .cm-seg button:hover { border-color: var(--ink-3); color: var(--ink); }
.cm-filter button[aria-pressed="true"], .cm-seg button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cm-filter span { color: var(--ink-3); margin-left: 3px; font-weight: 500; }
.cm-filter button[aria-pressed="true"] span { color: rgba(250, 244, 234, .8); }
.cm-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.cm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.cm-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 16px; border-radius: var(--radius); background: #fffaf2; box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); scroll-margin-top: 80px; }
.cm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.cm-card:target { box-shadow: 0 0 0 3px var(--sea), var(--shadow-2); }
.cm-card h3 { font-size: 1.35rem; line-height: 1.15; margin: 0; }
.cm-noname { font: 500 italic 1.1rem var(--serif); color: var(--ink-2); }
.cm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-tag { font: 600 .72rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: .45em .7em; border-radius: 999px; background: #f6e2c8; color: #7a3b14; }
.cm-tag-new { background: #f8dcd2; color: #8a3119; }
.cm-over { margin: 0; font-size: .9rem; color: var(--ink-3); }
.cm-addr { margin: 0; display: flex; gap: 6px; align-items: flex-start; color: var(--ink-2); font-weight: 500; }
.cm-addr svg { flex: none; margin-top: 4px; color: var(--tile); }
.cm-foot { margin: auto 0 0; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .86rem; color: var(--ink-3); }
.cm-foot a, .cm-links a, .cm-next a, .cm-cover a { color: var(--sea); font-weight: 600; text-decoration: none; }
.cm-foot a:hover, .cm-links a:hover, .cm-next a:hover { text-decoration: underline; }
.cm-foot a svg, .cm-links a svg { display: inline-block; vertical-align: -2px; width: 13px; height: 13px; }
.cm-none { color: var(--ink-3); font: 500 italic 1.15rem var(--serif); }

.cm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; }
.cm-stat { padding: 18px 18px 16px; border-radius: var(--radius); background: #fffaf2; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 4px; }
.cm-stat b { font: 600 clamp(1.9rem, 4vw, 2.6rem)/1 var(--serif); color: var(--ink); }
.cm-stat span { font-size: .9rem; color: var(--ink-3); line-height: 1.35; }
.cm-stat-q b { color: var(--tile); }

.cm-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.cm-chart, .cm-areas { margin: 0; padding: 20px; border-radius: var(--radius); background: #fffaf2; box-shadow: var(--shadow-1); }
.cm-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-bottom: 14px; font-size: .9rem; color: var(--ink-3); }
.cm-chart figcaption b { font: 600 1.05rem var(--sans); color: var(--ink); }
.cm-chart-key { display: inline-flex; align-items: center; gap: 6px; }
.cm-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; align-items: end; height: calc(var(--h) + 24px); border-bottom: 1px solid var(--line); }
.cm-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.cm-pair { display: flex; gap: 2px; align-items: flex-end; }
.cm-bar { display: block; width: clamp(5px, 1.4vw, 13px); min-height: 2px; border-radius: 4px 4px 0 0; }
.cm-bar:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.cm-bar-permit { background: #00809b; } .cm-bar-done { background: #d4643f; }
.cm-yr { font-size: .7rem; color: var(--ink-3); margin-top: 6px; font-variant-numeric: tabular-nums; transform: translateY(18px); }
.cm-chart-note { margin: 22px 0 0; font-size: .8rem; color: var(--ink-3); }
.cm-table { margin-top: 26px; font-size: .9rem; }
.cm-table summary { cursor: pointer; font-weight: 600; color: var(--sea); }
.cm-table table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.cm-table th, .cm-table td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--line); }
.cm-table th:first-child { text-align: left; }
.cm-areas h3 { margin: 0 0 12px; }
.cm-areas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cm-areas li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; font-size: .92rem; color: var(--ink-2); }
.cm-areas li b { font-variant-numeric: tabular-nums; color: var(--ink); }
.cm-areas li i { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 4px; background: #3f97a8; }
.cm-areas .cm-chart-note { margin-top: 14px; }

.cm-cover { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; margin-bottom: 24px; padding: 18px 22px; border-radius: var(--radius); background: var(--paper-2); font-size: .95rem; color: var(--ink-2); }
.cm-cover p { margin: 0; }
.cm-meet { padding: clamp(18px, 3vw, 28px); border-radius: 22px; background: #fffaf2; box-shadow: var(--shadow-1); margin-bottom: 14px; }
.cm-meet header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 6px; }
.cm-meet h3 { margin: 0; font-size: 1.5rem; }
.cm-when { font: 700 .75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tile); }
.cm-count { font-size: .9rem; color: var(--ink-3); }
.cm-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; font-size: .9rem; }
.cm-dh { margin: 20px 0 4px; font: 700 .8rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cm-dh span { color: var(--ink-3); font-weight: 600; margin-left: 4px; }
.cm-dsub { margin: 0 0 6px; font-size: .86rem; color: var(--ink-3); }
.cm-decs { list-style: none; margin: 0; padding: 0; }
.cm-dec a { display: grid; grid-template-columns: 1fr minmax(150px, 34%); gap: 4px 18px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cm-dec a:hover .cm-dec-t { color: var(--sea); text-decoration: underline; }
.cm-dec-t { font-size: .97rem; line-height: 1.4; }
.cm-dec-o { font-size: .88rem; color: var(--ink-2); line-height: 1.35; }
.cm-dec-o b { font-weight: 600; color: #2f6b3a; }
.cm-fail .cm-dec-o b { color: var(--tile-deep); }
.cm-vote { display: inline-block; margin-left: 4px; padding: .15em .5em; border-radius: 999px; background: var(--paper-2); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cm-past { box-shadow: none; border: 1.5px solid var(--line); background: transparent; }
.cm-past summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-weight: 600; }
.cm-past[open] summary { margin-bottom: 8px; }
.cm-next { margin-top: 20px; font-size: .97rem; color: var(--ink-2); }
.cm-next p { margin: 0 0 6px; }

.cm-pop-s { margin: 0 0 2px; font: 700 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cm-pop-n { margin: 0; font: 600 1.02rem/1.25 var(--serif); color: var(--ink); }
.cm-pop-a { margin: 3px 0 6px; font-size: .84rem; color: var(--ink-3); }
.cm-pop-l { font: 600 .85rem var(--sans); color: var(--sea); text-decoration: none; }
.cm-pop-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: .86rem; color: var(--ink-2); }

@media (max-width: 860px) {
  .cm-stats { grid-template-columns: repeat(2, 1fr); }
  .cm-two, .cm-cover { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cm-dec a { grid-template-columns: 1fr; }
  .cm-stat { padding: 14px; }
}
/* Sand background: darker muted text and eyebrow keep 4.5:1 contrast */
.cm-alt { --ink-3: var(--ink-2); }
.cm-alt .eyebrow { color: var(--tile-deep); }

/* Reader comments and the "From readers" box */
.cm-sec { border-top: 1px solid var(--line); }
.cm-grid { display: grid; gap: clamp(36px, 5vw, 64px); }
.cm-grid:has(.cm-recent:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .cm-grid:has(.cm-recent:not([hidden])) { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.cm-main { max-width: 680px; }
.cm-h { margin: 14px 0 8px; }
.cm-prompt { color: var(--ink-2); margin: 0 0 18px; max-width: 34em; }
.cm-form { margin-top: 18px; }
.cm-form textarea { min-height: 54px; resize: none; line-height: 1.45; }
.cm-more { display: none; }
.cm-form.open .cm-more { display: block; }
.cm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .cm-two { grid-template-columns: 1fr; } }
.cm-form .lbl span { font-weight: 500; color: var(--ink-3); }
.cm-check { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: .92rem; color: var(--ink-2); }
.cm-send { display: flex; gap: 16px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.cm-rules { margin: 0; font-size: .85rem; color: var(--ink-3); flex: 1; min-width: 14em; }
.cm-form .form-err { margin: 10px 0 0; }
.cm-msg { margin: 10px 0 0; font-weight: 600; color: var(--sea); }
.cm-msg:empty { display: none; }

.cm-list { list-style: none; margin: 28px 0 0; padding: 0; }
.cm-item { padding: 18px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.cm-item.cm-hl { animation: cm-hl 2.4s ease-out; }
@keyframes cm-hl { from { background: color-mix(in srgb, var(--sun) 22%, transparent); } to { background: transparent; } }
.cm-who { margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cm-who b, .cm-recent-who b { font: 600 .98rem var(--sans); }
.cm-who span, .cm-recent-who span { font-size: .85rem; color: var(--ink-3); }
.cm-body p { margin: 0 0 .6em; overflow-wrap: anywhere; }
.cm-body p:last-child { margin: 0; }
.cm-acts { margin-top: 6px; }
.cm-acts button { background: none; border: 0; padding: 4px 0; font: 500 .82rem var(--sans); color: var(--ink-3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cm-acts button:hover { color: var(--tile); }
.cm-acts button:disabled { text-decoration: none; cursor: default; }

.cm-recent { background: #fffaf2; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 8px; box-shadow: var(--shadow-1); }
@media (min-width: 960px) { .cm-sec .cm-recent { position: sticky; top: 96px; } }
.cm-recent-h { font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tile); margin: 0 0 6px; }
.cm-recent-list { list-style: none; margin: 0; padding: 0; }
.cm-recent-list li + li { border-top: 1px solid var(--line); }
.cm-recent-list a { display: block; padding: 14px 0; color: inherit; text-decoration: none; }
.cm-recent-list a:hover q { color: var(--tile); }
.cm-recent-list q { display: block; font: 400 1rem/1.4 var(--serif); quotes: "\201C" "\201D"; }
.cm-recent-who { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 6px; }
.cm-recent-who b { font-size: .88rem; }
.cm-recent-on { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 2px; }
/* On the home page the box stands alone: a row of quotes on wide screens */
.cm-recent-solo { padding: 26px 26px 12px; }
@media (min-width: 900px) {
  .cm-recent-solo .cm-recent-list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
  .cm-recent-solo .cm-recent-list li + li { border-top: 0; }
  .cm-recent-solo .cm-recent-list li { border-top: 1px solid var(--line); }
}

/* Eat & Drink (/eat/, /eat/find/, place pages, Savvy Picks guides). Mobile first. Prefixes: eat- shared, ef- full
   list, ep- place page, eg- guide; this file joins the shared site.css. Filter controls reuse .hh-sel / .hh-tog. */
.ph.eat-hero { padding-bottom: 10px; background: radial-gradient(80% 70% at 90% 0%, rgba(239, 161, 58, .2), transparent 60%); }
.ph.eat-hero h1 { max-width: 14ch; }
.eat-sec, .ef-sec, .ep-sec, .eg-sec { padding-top: clamp(20px, 4vw, 44px); }
.eat-h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: clamp(40px, 6vw, 64px) 0 16px; }

/* Search box (hub) */
.eat-search { display: flex; gap: 8px; max-width: 34em; margin-top: 6px; }
.eat-search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 1.1em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; font: 500 1.05rem var(--sans); color: var(--ink); box-shadow: var(--shadow-1); }
.eat-search input:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; }
.eat-search .btn { min-height: 52px; }

/* Trackers */
.eat-trackers { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.eat-track a { position: relative; display: grid; gap: 6px; padding: 24px 56px 24px 24px; border-radius: var(--radius); text-decoration: none; color: #fffaf2; box-shadow: var(--shadow-1); transition: transform .25s var(--ease), box-shadow .25s; min-height: 100%; }
.eat-track a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.eat-track-hh a { background: linear-gradient(135deg, #c9738a, #ef9a5a 70%, #f6c47a); }
.eat-track-new a { background: linear-gradient(135deg, var(--sea-deep), var(--sea) 70%, #2f7d8c); }
.eat-track-k { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.eat-track-h { font: 600 clamp(1.6rem, 4vw, 2.1rem)/1.05 var(--serif); }
.eat-track-s { font-size: .98rem; line-height: 1.45; max-width: 30em; opacity: .95; }
.eat-track-go { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; transition: transform .25s var(--ease); }
.eat-track a:hover .eat-track-go { transform: translate(4px, -50%); }

/* Guide cards */
.eat-guides { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.eat-guide a { display: grid; gap: 6px; padding: 22px; border-radius: var(--radius); background: #fffaf2; box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); border-top: 5px solid var(--sun); position: relative; }
.eat-guide a:hover { box-shadow: var(--shadow-2); }
.eat-guide-k { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tile); }
.eat-guide-h { font: 600 1.6rem/1.1 var(--serif); }
.eat-guide-s { color: var(--ink-2); font-size: .98rem; line-height: 1.45; }
.eat-guide-n { color: var(--ink-3); font-size: .88rem; }
.eat-draft-tag { position: absolute; right: 16px; top: 16px; font: 600 .72rem/1 var(--sans); padding: .45em .7em; border-radius: 999px; background: var(--ink); color: #fffaf2; letter-spacing: .06em; text-transform: uppercase; }

/* Kind tiles */
.eat-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eat-tile a { display: grid; grid-template-rows: auto auto 1fr; gap: 4px; height: 100%; padding: 16px 16px 14px; border-radius: var(--radius-sm); background: #fffaf2; box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); border-left: 5px solid var(--c, var(--tile)); transition: transform .2s var(--ease), box-shadow .2s; }
.eat-tile a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.eat-tile-n { font: 600 1.7rem/1 var(--serif); color: var(--c, var(--tile)); }
.eat-tile-h { font: 600 1.02rem/1.2 var(--sans); }
.eat-tile-s { font-size: .84rem; line-height: 1.35; color: var(--ink-3); }
.eat-t-restaurants { --c: var(--tile); } .eat-t-coffee { --c: #8a5a2b; } .eat-t-quick { --c: #a8651a; }
.eat-t-bars { --c: var(--dusk); } .eat-t-breweries { --c: var(--sage); } .eat-t-sweets { --c: #b8507a; }

/* Town chips */
.eat-towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eat-towns a { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: 0 1.1em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink); text-decoration: none; font: 600 .95rem var(--sans); }
.eat-towns a:hover { border-color: var(--ink-3); }
.eat-towns span { font-weight: 500; color: var(--ink-3); }
.eat-all { margin: 30px 0 0; }

/* How it works, credits */
.eat-how { margin-top: clamp(50px, 7vw, 80px); max-width: 46em; padding: 24px; border-radius: var(--radius); background: var(--paper-2); }
.eat-how .h3 { margin-top: 0; }
.eat-how p { color: var(--ink-2); font-size: .98rem; }
.eat-credits { margin: 26px 0 0; font-size: .84rem; color: var(--ink-3); max-width: 50em; }
.eat-credits a { color: inherit; }

/* Badges */
.eat-b { display: inline-flex; align-items: center; font: 600 .74rem/1 var(--sans); letter-spacing: .03em; padding: 6px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.eat-b-hh { background: #fde9c7; color: #7a4600; }
.eat-b-hh::before { content: ""; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--sun); }
a.eat-b-hh:hover { background: #fbdcab; }
.eat-b-soon { background: #dcebe8; color: var(--sea-deep); }

/* ---------- the full list ---------- */
.ef-bar { margin-bottom: 10px; }
.ef-bar-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px 0; }
.ef-q { grid-column: 1 / -1; display: block; }
.ef-q input { width: 100%; min-height: 46px; padding: 0 1.1em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; font: 500 1rem var(--sans); color: var(--ink); }
.ef-q input:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; }
.ef-bar .hh-sel { grid-column: auto; min-width: 0; }
.ef-bar .hh-sel select { min-width: 0; width: 100%; text-overflow: ellipsis; }
.ef-bar .hh-sel span { padding-left: .9em; }
.ef-maptog::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: currentColor; vertical-align: -1px; }
.ef-countrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 12px; }
.ef-count { margin: 0; font: 500 1rem var(--sans); color: var(--ink-3); }
.ef-count:focus { outline: none; }
/* list narrowed to the map view: the way back */
.ef-areaall { font: 600 .9rem/1 var(--sans); min-height: 40px; padding: .6em 1.05em; border-radius: 999px; border: 1.5px solid var(--sea); background: #fffaf2; color: var(--sea); cursor: pointer; transition: background .2s, color .2s; }
.ef-areaall:hover { background: var(--sea); color: #fff; }
.ef-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ef-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 16px 18px 12px; border-radius: var(--radius-sm); background: #fffaf2; box-shadow: var(--shadow-1); scroll-margin-top: 190px; }
.ef-row:target { box-shadow: 0 0 0 3px var(--sun), var(--shadow-2); }
.ef-name { margin: 0; font: 600 1.25rem/1.15 var(--serif); }
.ef-name a { color: inherit; text-decoration-color: color-mix(in srgb, var(--tile) 55%, transparent); text-underline-offset: 3px; }
.ef-name a:hover { color: var(--tile); }
.ef-meta { margin: 3px 0 0; font-size: .92rem; color: var(--ink-2); }
.ef-addr { margin: 2px 0 0; font-size: .92rem; }
.ef-addr a { color: var(--ink-3); text-decoration: none; }
.ef-addr a:hover { color: var(--sea); text-decoration: underline; }
.ef-side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ef-links { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .92rem; }
.ef-links a { color: var(--sea); font-weight: 600; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.ef-links a:hover { text-decoration: underline; }
.ef-foot { margin: 2px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .82rem; color: var(--ink-3); }
.eat-fix { font: 600 .82rem var(--sans); color: var(--ink-3); background: none; border: 0; padding: 6px 0; min-height: 32px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.eat-fix:hover { color: var(--tile); text-decoration-color: currentColor; }
.ef-empty { color: var(--ink-3); font: 500 italic 1.15rem var(--serif); margin: 10px 0 0; }
.ef-morewrap { margin: 22px 0 0; text-align: center; }
.ef-mapbox { margin: 0 0 16px; }
.ef-mapel { height: min(62vh, 520px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); background: var(--paper-2); }
.ef-mapfoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; margin-top: 8px; }
.ef-mapnote, .ef-maphint { margin: 0; font-size: .84rem; color: var(--ink-3); }
.ef-pop-n { margin: 0; font: 600 1.05rem/1.2 var(--serif); color: var(--ink); }
.ef-pop-k, .ef-pop-a { margin: 2px 0 0; font-size: .84rem; color: var(--ink-2); }
.ef-pop-l { display: inline-block; margin-top: 6px; font: 600 .86rem var(--sans); color: var(--sea); }

/* ---------- report dialog ---------- */
.eat-report { width: min(92vw, 480px); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius); background: #fffaf2; color: var(--ink); box-shadow: var(--shadow-2); }
.eat-report::backdrop { background: rgba(10, 20, 36, .55); }
.eat-report-f, .eat-report-done { padding: 24px; }
.eat-report .h3 { margin: 0 0 6px; font-size: 1.4rem; }
.eat-report-sub { margin: 0 0 14px; color: var(--ink-3); font-size: .92rem; }
.eat-report fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.eat-report legend { font: 600 .92rem var(--sans); margin-bottom: 6px; }
.eat-radio { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: .98rem; cursor: pointer; }
.eat-radio input { width: 18px; height: 18px; accent-color: var(--tile); }
.eat-report .lbl span { font-weight: 500; color: var(--ink-3); }
.eat-report .field { width: 100%; }
.eat-report-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ---------- a place page ---------- */
.ph.ep-hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); max-width: 16ch; margin: 12px 0 10px; }
.ep-crumbs { display: flex; gap: 8px; align-items: center; font: 600 .86rem var(--sans); }
.ep-crumbs a { color: var(--tile); text-decoration: none; }
.ep-crumbs a:hover { text-decoration: underline; }
.ep-crumbs span { color: var(--ink-3); }
.ep-kind { margin: 0; font: 500 1.15rem var(--sans); color: var(--ink-2); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ep-grid { display: grid; gap: 28px; }
.ep-card { padding: 22px; border-radius: var(--radius); background: #fffaf2; box-shadow: var(--shadow-1); }
.ep-addr { margin: 0; font: 600 1.1rem var(--sans); }
.ep-addr a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.ep-addr a:hover { color: var(--sea); }
.ep-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.ep-links:empty { display: none; }
.ep-facts { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 4px; font-size: .95rem; color: var(--ink-2); }
.ep-facts span { display: inline-block; min-width: 11em; font: 600 .74rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ep-fixrow { margin: 10px 0 0; }
.ep-block .eat-h2 { margin-top: 36px; }
.ep-hh { grid-template-columns: 1fr; max-width: 34em; }
.ep-hh .hh-name, .ep-hh .hh-addr { display: none; }
.ep-more { margin: 12px 0 0; font-weight: 600; }
.ep-more a, .ep-back a { color: var(--sea); text-decoration: none; }
.ep-more a:hover, .ep-back a:hover { text-decoration: underline; }
.ep-glist, .ep-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ep-events li { display: flex; gap: 14px; }
.ep-events span { min-width: 7.5em; color: var(--ink-3); font-size: .92rem; }
.ep-map { height: 240px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); background: var(--paper-2); }
.ep-pin { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--tile); border: 3px solid #fffaf2; box-shadow: 0 0 0 1px var(--ink), 0 4px 10px rgba(0, 0, 0, .25); }
.ep-side-h { font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tile); margin: 24px 0 10px; }
.ep-near { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ep-near li { display: grid; gap: 1px; }
.ep-near a { font: 600 1.02rem var(--sans); color: var(--ink); text-decoration: none; }
.ep-near a:hover { color: var(--tile); text-decoration: underline; }
.ep-near span { font-size: .86rem; color: var(--ink-3); }
.ep-back { margin: 22px 0 0; font-weight: 600; }

/* ---------- a guide ---------- */
.eg-draftbar { position: fixed; inset: auto 0 0; z-index: 60; margin: 0; padding: 12px 20px; background: var(--ink); color: #fffaf2; text-align: center; font: 600 .92rem var(--sans); }
.eg-stats { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eg-stats li { padding: .5em .95em; border-radius: 999px; background: #fffaf2; box-shadow: var(--shadow-1); font: 500 .95rem/1 var(--sans); color: var(--ink-2); }
.eg-stats b { font: 600 1.15rem/1 var(--serif); color: var(--tile); margin-right: 3px; }
.eg-stats .eg-stats-up { background: none; box-shadow: none; padding-inline: 4px; color: var(--ink-3); }
.eg-top, .eg-bottom { max-width: 46em; }
.eg-intro { font-size: 1.12rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; }
.eg-zach { margin: 10px 0 0; padding: 12px 16px; border-left: 4px solid var(--sun); background: #fffaf2; font: italic 500 1.05rem/1.5 var(--serif); color: var(--ink); }
.eg-slot { border-left-color: var(--tile); background: #fbe3da; font: 600 .9rem var(--sans); color: var(--tile-deep); }
.eg-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.eg-pick { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 22px 22px 18px; border-radius: var(--radius); background: #fffaf2; box-shadow: var(--shadow-1); scroll-margin-top: 100px; }
.eg-n { margin: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--tile); color: #fffaf2; font: 600 1.2rem/1 var(--serif); }
.eg-body > p { margin: 8px 0 0; color: var(--ink-2); }
.eg-name { margin: 6px 0 0; font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.1; }
.eg-label { font: 600 1.02rem var(--sans); color: var(--ink) !important; }
.eg-line span { display: inline-block; margin-right: 8px; font: 600 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tile); }
.eg-locs { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .92rem; }
.eg-locs a { color: var(--sea); font-weight: 600; }
.eg-src { font-size: .84rem; color: var(--ink-3) !important; }
.eg-src a { color: inherit; }
.eg-pick { transition: box-shadow .3s; }
.eg-pick.is-on { box-shadow: 0 0 0 2px var(--sun), var(--shadow-2); }
.eg-pick.is-on .eg-n { background: var(--ink); }
.eg-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.eg-foot .eg-locs { flex: 1 1 17em; margin: 0; padding: 0; border: 0; }
.eg-onmap { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: .45em .9em; border: 1.5px solid var(--line); border-radius: 999px; background: #fffaf2; color: var(--ink); font: 600 .86rem/1 var(--sans); cursor: pointer; }
.eg-onmap::before { content: ""; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--tile); }
.eg-onmap:hover { border-color: var(--tile); }
.eg-photo { margin: 0 0 14px; }
.eg-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.eg-photo figcaption { margin-top: 6px; font-size: .8rem; color: var(--ink-3); }
.eg-photo figcaption a { color: inherit; }

/* the guide map: numbered pins match the list; beside it on wide screens, above it on phones */
.eg-layout { display: grid; gap: 20px; margin-top: 26px; }
.eg-layout .eg-list { margin: 0; }
.eg-mapcol { order: -1; }
.no-js .eg-mapcol { display: none; }
.eg-mapcard { position: relative; border-radius: var(--radius); overflow: hidden; background: #efe6d6; box-shadow: var(--shadow-2); }
.eg-map { height: min(52vh, 380px); }
.eg-maphint { margin: 0; padding: 9px 14px 10px; background: #fffaf2; border-top: 1px solid var(--line); font: 500 .84rem var(--sans); color: var(--ink-3); }
.eg-all { position: absolute; left: 12px; top: 12px; z-index: 2; padding: .55em 1em; border: 0; border-radius: 999px; background: var(--ink); color: #fffaf2; font: 600 .86rem/1 var(--sans); box-shadow: var(--shadow-1); cursor: pointer; }
.eg-pinwrap { cursor: pointer; z-index: 1; }
.eg-pinwrap.is-on { z-index: 3; }
.eg-pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tile); color: #fffaf2; border: 2px solid #fffaf2;
  box-shadow: 0 2px 10px rgba(24, 34, 46, .35); font: 600 .95rem/1 var(--serif); transition: transform .25s var(--ease), background .25s, opacity .25s; }
.eg-pinwrap:hover .eg-pin { transform: scale(1.12); }
.eg-map.has-on .eg-pinwrap:not(.is-on) .eg-pin { opacity: .45; }
.eg-pinwrap.is-on .eg-pin { transform: scale(1.3); background: var(--sun); color: var(--ink); }
.eg-map.is-far .eg-pin { width: 23px; height: 23px; border-width: 1.5px; font-size: .78rem; }

@media (min-width: 700px) {
  .eat-trackers, .eat-guides { grid-template-columns: 1fr 1fr; }
  .eat-tiles { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .ef-bar-in { grid-template-columns: minmax(220px, 2fr) minmax(150px, 1.1fr) minmax(170px, 1.2fr) auto auto; align-items: center; }
  .ef-bar { position: sticky; top: 76px; z-index: 20; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--line); margin-bottom: 16px; }
  .ef-q { grid-column: auto; }
  .ef-row { grid-template-columns: 1fr auto; align-items: start; column-gap: 20px; padding: 18px 22px 12px; }
  .ef-side { justify-content: flex-end; max-width: 18em; }
  .ef-links { justify-content: flex-end; }
  .ef-foot { grid-column: 1 / -1; }
  .ep-grid { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); align-items: start; gap: 40px; }
  .ep-side { position: sticky; top: 100px; }
  .ep-map { height: 280px; }
}
@media (min-width: 1000px) {
  .eat-tiles { grid-template-columns: repeat(6, 1fr); }
  .eg-layout.has-map { grid-template-columns: minmax(0, 1fr) minmax(380px, .92fr); gap: 32px; align-items: start; }
  .eg-mapcol { order: 0; position: sticky; top: 96px; }
  .eg-map { height: calc(100vh - 220px); min-height: 420px; max-height: 600px; }
  .ef-list { grid-template-columns: 1fr 1fr; gap: 12px; }
  .ef-row { grid-template-columns: 1fr; }
  .ef-side, .ef-links { justify-content: flex-start; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .eat-track a, .eat-tile a, .eat-track-go, .eg-pin, .eg-pick { transition: none; }
}

/* After Ten (/eat/late/) and the $15 List (/eat/under-15/) */
.el-hero h1 { max-width: 11ch; }
.el-sec { padding-top: clamp(30px, 5vw, 56px); }
.el-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.el-towns { margin-bottom: 26px; }
.el-filter button { font: 600 .92rem/1 var(--sans); min-height: 40px; padding: .7em 1.1em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.el-filter button:hover { border-color: var(--ink-3); color: var(--ink); }
.el-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.el-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.el-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 16px; border-radius: var(--radius); background: #fffaf2; box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.el-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.el-card h3 { margin: 0; font-size: 1.35rem; line-height: 1.15; }
.el-card h3 a, .el-at a { color: inherit; text-decoration: none; }
.el-card h3 a:hover, .el-at a:hover { color: var(--tile); }
.el-town { margin: 0; font: 700 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tile); }
.el-big { margin: 2px 0 0; font: 600 1.05rem/1.35 var(--sans); color: var(--sea); }
.el-price { margin: 0; font: 600 2rem/1 var(--serif); color: var(--tile); }
.el-at { margin: 0; color: var(--ink-2); font-weight: 500; }
.el-note { margin: 0; font-size: .9rem; color: var(--ink-3); }
.el-foot { margin: auto 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .85rem; color: var(--ink-3); }
.el-foot a { color: var(--sea); font-weight: 600; text-decoration: none; }
.el-foot a svg { display: inline-block; vertical-align: -2px; width: 13px; height: 13px; }
.el-none { color: var(--ink-3); font: 500 italic 1.15rem var(--serif); }

/* The Free Five (/free/). .badge comes from site.css, .fine-print and .cta-short from weekend.css */
.ff-five { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .ff-five { grid-template-columns: repeat(2, 1fr); } .ff-five > :first-child { grid-column: 1 / -1; } }
.ff-card { position: relative; display: flex; gap: 16px; padding: 20px 22px; border-radius: 22px; background: #fffaf2; border: 1.5px solid var(--line); box-shadow: var(--shadow-1); }
.ff-n { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--sun); color: var(--ink); font: 600 1.35rem/1 var(--serif); }
.ff-body { min-width: 0; display: flex; flex-direction: column; }
.ff-when { margin: 0 0 4px; font: 500 .9rem var(--sans); color: var(--ink-3); }
.ff-when b { color: var(--tile); font-weight: 650; }
.ff-card h3 { margin: 0 0 6px; font: 500 clamp(1.2rem, 2vw, 1.4rem)/1.25 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.ff-card h3 a { color: inherit; text-decoration: none; }
.ff-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ff-card:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
.ff-card h3 a:focus-visible { outline: none; }
.ff-card:has(h3 a:focus-visible) { outline: 2.5px solid var(--tile); outline-offset: 3px; }
.ff-where, .ff-note { margin: 0 0 8px; color: var(--ink-2); font-size: .95rem; }
.ff-note { font-size: .88rem; color: var(--ink-3); }
.ff-tags { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ff-checked { margin: 8px 0 0; font-size: .8rem; color: var(--ink-3); }

.ff-rest { margin: 0 0 36px; }
.ff-resthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 12px; }
.ff-resthead h2 { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.ff-cnt { font: 600 .82rem/1 var(--sans); color: var(--ink-2); background: var(--paper-2); padding: 5px 9px; border-radius: 999px; }
.ff-tog { font: 600 .9rem/1 var(--sans); min-height: 44px; padding: .7em 1.05em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink-2); cursor: pointer; }
.ff-tog small { font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.ff-tog:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; }
.ff-tog[aria-pressed="true"] { background: var(--sea); border-color: var(--sea); color: #fff; }
.ff-tog[aria-pressed="true"] small { color: rgba(255, 255, 255, .78); }
.ff-day { margin: 0 0 14px; }
.ff-day[hidden] { display: none; }
.ff-dayh { margin: 0 0 4px; font: 600 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tile); }
.ff-dayh span { color: var(--ink-3); font-weight: 500; letter-spacing: .04em; margin-left: 4px; }
.ff-day ul { list-style: none; margin: 0; padding: 0; }
.ff-day li { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ff-day li[hidden] { display: none; }
.ff-t { flex: none; width: 5.6em; font: 600 .92rem var(--sans); color: var(--ink-2); }
.ff-x { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ff-x a { font: 600 1rem/1.35 var(--sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ff-x a:hover { text-decoration: underline; }
.ff-x small { font-size: .86rem; color: var(--ink-3); overflow-wrap: anywhere; }
.ff-empty { margin: 10px 0 0; color: var(--ink-3); font: 500 italic 1.05rem var(--serif); }

.ff-museums { padding: 20px 22px; border-radius: var(--radius); border: 1.5px dashed var(--line); }
.ff-museums h2 { margin: 0 0 10px; }
.ff-museums ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--ink-2); }
.ff-museums a { color: var(--sea); font-weight: 600; }
.ff-museums b { color: var(--ink); font-weight: 600; }
.ff-chk { font-size: .8rem; color: var(--ink-3); white-space: nowrap; }

/* Over or under? (/homes/#over-under) */
.ou-sec { background: var(--paper); }
.ou-sec .eyebrow { color: var(--tile-deep); }
.ou-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.ou-card { padding: 26px 26px 24px; border-radius: 22px; background: #fffaf2; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 6px; }
.ou-card h3 { margin: 0; font: 600 1.35rem/1.2 var(--serif); }
.ou-tag { margin: 0; font: 600 .78rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--sea); }
.ou-meta { margin: 0; color: var(--ink-2); font-size: .95rem; }
.ou-ask { margin: 10px 0 4px; font: 600 2.2rem/1 var(--serif); color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.ou-ask span, .ou-final span:first-child { font: 500 .8rem/1 var(--sans); color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.ou-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ou-pick { font: 600 1.05rem/1 var(--sans); padding: 14px 10px; border-radius: 999px; border: 1.5px solid var(--line); background: #fffdf8; color: var(--ink); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.ou-pick:hover:not(:disabled) { border-color: var(--ink-3); transform: translateY(-1px); }
.ou-pick[data-pick="over"][aria-pressed="true"] { background: var(--sea); border-color: var(--sea); color: #fff; }
.ou-pick[data-pick="under"][aria-pressed="true"] { background: var(--tile); border-color: var(--tile); color: #fff; }
.ou-pick:disabled { cursor: default; }
.ou-locked .ou-pick[aria-pressed="false"] { opacity: .45; }
.ou-send { margin-top: 22px; max-width: 560px; }
.ou-send label { display: block; font-weight: 600; margin-bottom: 8px; }
.ou-row { display: flex; gap: 10px; }
.ou-row .field { flex: 1; min-width: 0; }
.ou-fine, .ou-how { color: var(--ink-3); font-size: .88rem; margin: 10px 0 0; }
.ou-how { margin-top: 26px; }
.ou-h { margin: 40px 0 16px; font: 600 1.3rem var(--serif); }
.ou-final { margin: 10px 0 0; display: flex; justify-content: space-between; gap: 12px; font: 600 1.1rem/1.2 var(--serif); }
.ou-final span:last-child { color: var(--ink); }
.ou-verdict { margin: 6px 0 0; font: 600 1.25rem/1.2 var(--serif); }
.ou-over .ou-verdict { color: var(--sea); }
.ou-under .ou-verdict { color: var(--tile-deep); }
.ou-split { margin-top: 12px; }
.ou-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--paper-2); }
.ou-b-over { background: var(--sea); }
.ou-b-under { background: var(--tile); }
.ou-bar-k { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: .85rem; color: var(--ink-2); }
.ou-you { margin: 8px 0 0; font-size: .95rem; }
@media (max-width: 560px) {
  .ou-row { flex-direction: column; }
  .ou-card { padding: 22px 20px; }
}

/* Glow Map page */
.night-page { background: var(--night); color: #f3ebdc; }
.night-page .lede { color: rgba(243, 235, 220, .8); }
.night-page h2, .night-page h1 { color: #fbf4e6; }
.gm-hero { position: relative; overflow: hidden; padding: 200px 0 110px; isolation: isolate;
  background: radial-gradient(80% 70% at 75% 45%, rgba(255, 170, 90, .16), transparent 60%), radial-gradient(120% 100% at 50% -10%, #1d3058 0%, var(--night) 62%); }
.gm-hero .lights { top: 70px; height: 110px; z-index: 1; }
.night-page .eyebrow { color: var(--sun-2); }
.night-page .night { background: transparent; }
.gm-stars { position: absolute; inset: 0; z-index: -1; opacity: .7;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 28% 32%, #fff 50%, transparent), radial-gradient(1.4px 1.4px at 46% 12%, #fff 50%, transparent),
    radial-gradient(1px 1px at 62% 26%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 78% 14%, #fff 50%, transparent), radial-gradient(1px 1px at 90% 34%, #fff 50%, transparent),
    radial-gradient(1px 1px at 8% 44%, #fff 50%, transparent), radial-gradient(1.3px 1.3px at 36% 52%, #fff 50%, transparent), radial-gradient(1px 1px at 55% 40%, #fff 50%, transparent); }
.gm-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.gm-hero h1 { font-size: clamp(3.4rem, 8.4vw, 7.4rem); margin: 18px 0 24px; }
.gm-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 10px; }
.gm-art { position: relative; }
.glow-house { width: 100%; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5)); }
.glow-house .b { animation: blink 3s ease-in-out infinite; }
.glow-house .flick { animation: flick 1.6s ease-in-out infinite alternate; }
@keyframes flick { to { opacity: .55; transform: scaleY(.88); } }
@media (max-width: 900px) { .gm-hero-grid { grid-template-columns: 1fr; } .gm-art { order: -1; max-width: 460px; margin: -20px auto 0; } .gm-hero { padding-top: 130px; } }

.gm-map-sec { padding: clamp(80px, 9vw, 120px) 0; }
.gm-map-wrap { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .07); }
.gm-map { height: min(74vh, 720px); min-height: 460px; background: #0d1a30; }
.gm-map.dim .maplibregl-canvas { filter: saturate(.8) brightness(.8); }
.gm-map.dim .gpin { filter: blur(1.5px); pointer-events: none; }
.gm-veil { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 50%, rgba(10, 20, 36, .35), rgba(10, 20, 36, .7)); z-index: 2; padding: 20px; }
.gm-veil[hidden] { display: none; }
.gm-veil-card { text-align: center; padding: 38px 42px; border-radius: 24px; background: rgba(13, 25, 46, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -20px rgba(0, 0, 0, .6); max-width: 420px; }
.gm-veil-card .eyebrow { color: var(--sun-2); }
.gm-veil-n { font: 500 clamp(1.8rem, 3vw, 2.4rem)/1.1 var(--serif); margin: 14px 0 24px; font-variation-settings: "opsz" 72, "SOFT" 100; }
.gm-veil-n span { font-style: italic; color: var(--sun-2); }

/* Pins: glowing bulbs */
.gpin { --c: #ffcf6b; width: 16px; height: 16px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: radial-gradient(circle, #fff9e8 0 26%, var(--c) 30% 62%, transparent 66%);
  box-shadow: 0 0 10px 3px color-mix(in srgb, var(--c) 70%, transparent), 0 0 34px 10px color-mix(in srgb, var(--c) 30%, transparent); animation: twinkle-pin 3.6s ease-in-out infinite; transition: transform .2s; }
.gpin:hover, .gpin:focus-visible { transform: scale(1.5); }
@keyframes twinkle-pin { 50% { box-shadow: 0 0 6px 2px color-mix(in srgb, var(--c) 60%, transparent), 0 0 22px 6px color-mix(in srgb, var(--c) 18%, transparent); } }
.maplibregl-popup-content { background: #fffaf0; color: var(--ink); border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .6); font-family: var(--sans); }
.maplibregl-popup-tip { border-top-color: #fffaf0 !important; border-bottom-color: #fffaf0 !important; }
.maplibregl-popup-close-button { font-size: 20px; width: 30px; height: 30px; color: var(--ink); background: rgba(255, 255, 255, .8); border-radius: 50%; right: 6px; top: 6px; z-index: 1; }
.gpop img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gpop-b { padding: 14px 16px 16px; display: grid; gap: 4px; font-size: .9rem; }
.gpop-b b { font: 600 1.15rem/1.2 var(--serif); }
.gpop-b span { color: var(--ink-2); }
.gpop-when { color: var(--tile) !important; font-weight: 600; font-size: .82rem; }
.gpop-b p { margin: 4px 0 2px; color: var(--ink-2); }
.gpop-b a { font-weight: 600; color: var(--sea); }
.maplibregl-ctrl-group { border-radius: 12px !important; overflow: hidden; }
.maplibregl-ctrl-attrib { font-size: 11px; }
.maplibregl-ctrl.maplibregl-ctrl-attrib a { text-decoration: underline; text-underline-offset: 2px; }

.gm-route { position: absolute; top: 18px; left: 18px; bottom: 18px; width: 330px; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px;
  background: rgba(11, 22, 41, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.gm-route[hidden] { display: none; }
.gm-route h3 { font-size: 1.5rem; color: #fbf4e6; }
.gm-route p { margin: 0; font-size: .92rem; color: rgba(243, 235, 220, .75); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.seg-b { font: 600 .8rem/1 var(--sans); padding: .62em .85em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #f3ebdc; cursor: pointer; }
.seg-b.on { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.route-list { list-style: none; counter-reset: s; margin: 4px 0; padding: 0; overflow: auto; flex: 1; display: grid; align-content: start; gap: 2px; }
.route-list li { counter-increment: s; }
.route-list button { width: 100%; text-align: left; display: flex; gap: 12px; align-items: center; background: none; border: 0; color: #f3ebdc; font: 500 .94rem var(--sans); padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.route-list button::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 207, 107, .16); color: var(--sun-2); font-weight: 700; font-size: .78rem; }
.route-list button:hover { background: rgba(255, 255, 255, .07); }
.route-list .empty { color: rgba(243, 235, 220, .6); font-size: .92rem; padding: 8px 4px; }
.gm-route .route-area { color: #f3ebdc; font-weight: 500; }
.route-area:empty { display: none; }
.route-go[hidden] { display: none; }
@media (max-width: 900px) {
  .gm-route { position: static; width: auto; border-radius: 0 0 28px 28px; background: #0f1d34; }
  .route-list { max-height: 220px; }
}

.gm-cats { padding-top: 0; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat { padding: 30px 26px 28px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .4s var(--ease), background .4s; }
.cat:hover { transform: translateY(-6px); background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); }
.cat-ic { width: 58px; height: 58px; margin-bottom: 22px; filter: drop-shadow(0 0 14px rgba(255, 200, 110, .45)); }
.cat h3 { color: #fbf4e6; margin-bottom: 10px; }
.cat p { margin: 0; color: rgba(243, 235, 220, .72); font-size: .98rem; }
@media (max-width: 1000px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cat-grid { grid-template-columns: 1fr; } }

/* Entry form (light card on the night page) */
.gm-form-sec { background: linear-gradient(180deg, var(--night) 0%, #122039 55%, var(--night) 100%); }
.gm-form-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.gm-form-intro { position: sticky; top: 120px; }
.gm-form-intro h2 { margin: 16px 0 20px; }
.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; color: rgba(243, 235, 220, .85); }
.ticks li { display: flex; gap: 12px; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sun-2); box-shadow: 0 0 10px 2px rgba(255, 207, 107, .6); transform: translateY(-1px); }
.gm-form { background: #fffaf2; color: var(--ink); border-radius: 26px; padding: clamp(24px, 3.4vw, 40px); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); scroll-margin-top: 100px; }
.gm-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gm-form .step { display: grid; gap: 10px; }
.gm-form .step[hidden], .gm-form [hidden] { display: none !important; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 26px; }
.steps span { font: 600 .74rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-top: 12px; border-top: 3px solid var(--paper-3); transition: all .3s; }
.steps span.on { color: var(--tile); border-color: var(--tile); }
.lbl { display: block; font: 600 .92rem/1.3 var(--sans); margin-top: 12px; }
.lbl small { font-weight: 500; color: var(--ink-3); }
.row { display: flex; gap: 8px; }
.row .field { flex: 1; }
.hint { font-size: .86rem; color: var(--ink-3); margin: 2px 0 0; }
.hint.err, .form-err { color: #b0301b; font-weight: 600; }
.form-err:empty { display: none; }
.pick-map { height: 260px; border-radius: 16px; overflow: hidden; margin-top: 6px; }
.choice { display: grid; gap: 8px; margin-top: 8px !important; }
.choice label { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; }
.choice label:has(input:checked) { border-color: var(--tile); background: #fff3e6; }
.choice input { accent-color: var(--tile); margin-top: 4px; }
.choice b { display: block; }
.choice small { color: var(--ink-3); font-size: .86rem; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill input { position: absolute; opacity: 0; }
.pill span { display: inline-block; padding: .7em 1.1em; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 600; font-size: .92rem; cursor: pointer; transition: all .2s; }
.pill input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill input:focus-visible + span { outline: 2.5px solid var(--sun); outline-offset: 2px; }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%2318222e' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
textarea.field { resize: vertical; }
.drop { position: relative; display: grid; place-items: center; min-height: 170px; border-radius: 18px; border: 2px dashed var(--paper-3); background: var(--paper); cursor: pointer; overflow: hidden; transition: border-color .2s; }
.drop:hover, .drop:focus-within { border-color: var(--sun); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-empty { display: grid; justify-items: center; gap: 6px; color: var(--ink-2); text-align: center; pointer-events: none; }
.drop-empty small { color: var(--ink-3); }
.drop.has .drop-empty { display: none; }
.drop-prev { width: 100%; height: 240px; object-fit: cover; pointer-events: none; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; margin-top: 10px; cursor: pointer; }
.check input { accent-color: var(--tile); width: 18px; height: 18px; margin-top: 3px; flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nav-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.done { text-align: left; display: grid; gap: 10px; position: relative; }
.done h3 { font-size: 2rem; }
.done-glow { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #fff9e8 0 22%, #ffcf6b 28% 58%, transparent 62%); box-shadow: 0 0 30px 10px rgba(255, 207, 107, .5); margin-bottom: 8px; animation: twinkle-pin 3s infinite; }
.gm-closed { text-align: center; padding: 30px 10px; }
.gm-closed h3 { font-size: 2rem; margin-bottom: 10px; }
@media (max-width: 900px) { .gm-form-grid { grid-template-columns: 1fr; } .gm-form-intro { position: static; } }
@media (max-width: 460px) { .row { flex-direction: column; } .steps span { font-size: .62rem; letter-spacing: .02em; } }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.faq summary { list-style: none; cursor: pointer; font: 600 1.2rem/1.3 var(--serif); padding: 22px 40px 22px 0; position: relative; font-variation-settings: "opsz" 36; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 1.8rem/1 var(--sans); color: var(--sun-2); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 24px; color: rgba(243, 235, 220, .78); max-width: 40em; }
.page-light .faq { border-color: var(--line); } .page-light .faq details { border-color: var(--line); } .page-light .faq p { color: var(--ink-2); } .page-light .faq summary::after { color: var(--tile); }

/* Removal page */
.remove-page { min-height: 100vh; padding: 60px 0; display: flex; align-items: center; }
.remove-page p { color: rgba(243, 235, 220, .82); font-size: 1.1rem; }
.remove-page form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

@media (max-width: 600px) { .gm-hero .lights { height: 76px; top: 72px; } }

/* Reader vote (Dec 10-15) */
.vote-pick { display: block; margin-top: 18px; }
.vote-pick .field { background: rgba(255, 255, 255, .07); color: #fbf4e6; border-color: rgba(255, 255, 255, .18); padding: .8em .9em; font-size: .95rem; cursor: pointer; }
.vote-pick .field option { color: var(--ink); background: #fffdf8; }
.vote-pick .field:disabled { opacity: 1; cursor: default; border-style: dashed; }
.cat.picked { background: linear-gradient(180deg, rgba(255, 200, 110, .14), rgba(255, 200, 110, .04)); box-shadow: inset 0 0 0 1.5px rgba(255, 207, 107, .55), 0 0 40px -12px rgba(255, 190, 100, .45); }
.cat.cast h3::after { content: "Voted"; margin-left: 10px; vertical-align: middle; font: 600 .68rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--sun); color: var(--ink); }
.ballot { margin-top: 26px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: center; padding: 28px 30px; border-radius: 22px;
  background: radial-gradient(90% 140% at 100% 0%, rgba(239, 161, 58, .2), transparent 60%), rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ballot h3 { color: #fbf4e6; margin-bottom: 8px; }
.ballot p { margin: 0; color: rgba(243, 235, 220, .75); font-size: .95rem; }
.ballot .row { display: flex; gap: 10px; }
.ballot .field { flex: 1; }
.ballot .form-err { color: #ffb4a0; margin-top: 10px; min-height: 0; }
.ballot .form-err:empty { display: none; }
.ballot-done { margin-top: 26px; padding: 28px 30px; border-radius: 22px; background: rgba(255, 207, 107, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 207, 107, .4); }
.ballot-done h3 { color: #fbf4e6; margin-bottom: 12px; }
.ballot-done ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.ballot-done li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: rgba(243, 235, 220, .85); }
.ballot-done p { margin: 0; color: rgba(243, 235, 220, .75); }
.vr { font-weight: 600; }
.vr-counted { color: #ffd98a; }
.gpop-vote { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.gpop-vote > span { display: block; font: 600 .7rem/1 var(--sans) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3) !important; margin-bottom: 8px; }
.gpop-vote div { display: flex; flex-wrap: wrap; gap: 6px; }
.gpop-vote button { font: 600 .78rem/1 var(--sans); padding: 7px 10px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.gpop-vote button:hover { border-color: var(--sun); }
.gpop-vote button.on { background: var(--sun); border-color: var(--sun); }
.gpop-vote button.on::before { content: "✓ "; }
.vote-toast { position: fixed; left: 50%; bottom: 26px; z-index: 60; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s var(--ease);
  padding: 13px 18px; border-radius: 999px; background: #fffaf2; color: var(--ink); font: 500 .95rem/1.3 var(--sans); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .5); max-width: calc(100vw - 32px); }
.vote-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.vote-toast a { color: var(--tile); font-weight: 600; margin-left: 6px; }
@media (max-width: 860px) { .ballot { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; } }
@media (max-width: 520px) { .ballot .row { flex-direction: column; } }

/* Local guides: New to Santa Barbara, Lost or found pet */
.guide { padding-top: 10px; }
.guide-grid { display: grid; grid-template-columns: 220px 1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.guide-toc { position: sticky; top: 110px; display: grid; gap: 4px; font-size: .95rem; }
.guide-toc p { font: 600 .78rem var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.guide-toc a { color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.guide-toc a:hover { color: var(--tile); }
.guide-body h2 { margin: 48px 0 14px; scroll-margin-top: 100px; }
.guide-body h2:first-child { margin-top: 0; }
.guide-body p, .guide-body li { color: var(--ink-2); font-size: 1.06rem; }
.guide-body a { color: var(--tile); font-weight: 600; }
.guide-body ul { padding-left: 1.1em; margin: 0 0 12px; }
.guide-body li { margin: 6px 0; }
.guide-body li b { color: var(--ink); }
.guide-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: .98rem; }
.guide-table th, .guide-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide-table th { font: 600 .82rem var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.guide-table td { color: var(--ink-2); }
.guide-steps { counter-reset: step; list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.guide-steps li { counter-increment: step; position: relative; padding: 18px 20px 18px 64px; background: #fffaf2; border-radius: 16px; box-shadow: var(--shadow-1); margin: 0; }
.guide-steps li::before { content: counter(step); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--tile); color: #fff8ee; font: 700 1rem var(--sans); display: grid; place-items: center; }
.guide-card { padding: 22px 24px; border-radius: 18px; background: #fffaf2; box-shadow: var(--shadow-1); margin: 14px 0; }
.guide-card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.guide-card p { margin: 4px 0; }
.guide-note { font-size: .92rem !important; color: var(--ink-3) !important; margin-top: 40px; }
@media (max-width: 860px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-toc { position: static; grid-template-columns: repeat(2, 1fr); gap: 2px 14px; }
  .guide-toc p { grid-column: 1 / -1; }
  .guide-table { font-size: .92rem; }
  .guide-table th, .guide-table td { padding: 8px 6px; }
}

/* Happy hours (/eat/happy-hour/). Mobile first; every class starts with hh- because this file joins the shared site.css. */
.hh-hero { padding-bottom: 6px; overflow: hidden; }
.hh-hero-grid { display: grid; gap: 18px; align-items: end; }
.hh-hero h1 { max-width: 11ch; }
.hh-stamp { display: inline-flex; align-items: center; gap: .5em; margin: 6px 0 0; padding: .7em 1.1em; border-radius: 999px; background: #fffaf2; box-shadow: var(--shadow-1); font: 500 .95rem var(--sans); color: var(--ink-2); }
.hh-stamp b { font: 600 1.25rem/1 var(--serif); color: var(--tile); }
.hh-art-wrap { display: none; }
.hh-art { width: 100%; height: auto; display: block; }
.hh-sec { padding-top: clamp(24px, 4vw, 50px); }

/* Filters: wrap on phones, one sticky row under the header from tablet up */
.hh-bar { margin-bottom: 8px; }
.hh-bar-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0; }
.hh-sel { grid-column: 1 / -1; position: relative; display: inline-flex; align-items: center; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink); font: 600 .92rem/1 var(--sans); }
.hh-sel span { padding-left: 1em; color: var(--ink-3); font-weight: 500; }
.hh-sel select { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: inherit; padding: .78em 2.3em .78em .45em; border-radius: 999px; cursor: pointer; min-height: 44px; }
.hh-sel select:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; }
.hh-sel option { color: var(--ink); background: #fffaf2; }
.hh-sel::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); pointer-events: none; }
.hh-sel:hover { border-color: var(--ink-3); }
.hh-tog { font: 600 .92rem/1 var(--sans); min-height: 44px; padding: .78em 1.15em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.hh-tog:hover { border-color: var(--ink-3); color: var(--ink); }
.hh-tog[aria-pressed="true"] { background: var(--sea); border-color: var(--sea); color: #fff; }
#hh-now::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--sun); vertical-align: 1px; }
.hh-countrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 22px; }
.hh-count { margin: 0; font: 500 1rem var(--sans); color: var(--ink-3); }
.hh-count:focus { outline: none; }
/* list narrowed to the map view: the way back */
.hh-areaall { font: 600 .9rem/1 var(--sans); min-height: 40px; padding: .6em 1.05em; border-radius: 999px; border: 1.5px solid var(--sea); background: #fffaf2; color: var(--sea); cursor: pointer; transition: background .2s, color .2s; }
.hh-areaall:hover { background: var(--sea); color: #fff; }

/* Towns and cards */
.hh-town + .hh-town { margin-top: clamp(40px, 6vw, 70px); }
.hh-th { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1.5px solid var(--line); }
.hh-tn { font: 600 .85rem/1 var(--sans); vertical-align: middle; padding: .35em .7em; border-radius: 999px; background: var(--tile); color: #fff; margin-left: 6px; }
.hh-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.hh-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 16px; border-radius: var(--radius); background: #fffaf2; box-shadow: var(--shadow-1); scroll-margin-top: 150px; }
.hh-card:target { box-shadow: 0 0 0 3px var(--sun), var(--shadow-2); }
.hh-name { font-size: 1.42rem; line-height: 1.12; margin: 0; }
.hh-addr { margin: -4px 0 0; color: var(--ink-3); font-size: .95rem; }
.hh-status { margin: 0; align-self: flex-start; font: 600 .86rem/1.2 var(--sans); padding: .45em .8em; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.hh-status.is-live { background: #fde9c7; color: #7a4600; }
.hh-status.is-live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--sun); vertical-align: 1px; }
.hh-when { margin: 0; display: grid; gap: 2px; font-size: .98rem; }
.hh-when > div { display: grid; grid-template-columns: minmax(6.2em, auto) 1fr; gap: 12px; padding: 4px 8px; margin: 0 -8px; border-radius: 8px; }
.hh-when dt { font-weight: 600; color: var(--ink); }
.hh-when dd { margin: 0; color: var(--ink-2); }
.hh-when > div.is-day { background: color-mix(in srgb, var(--sun-2) 32%, transparent); }
.hh-deals { list-style: none; margin: 2px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 5px; font-size: .97rem; color: var(--ink); }
.hh-deals li { position: relative; padding-left: 16px; }
.hh-deals li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--tile); }
.hh-nodeals { margin: 2px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .93rem; font-style: italic; color: var(--ink-3); }
.hh-ceiling { margin: 0; font-size: .93rem; font-weight: 600; color: var(--sea); }
.hh-where { margin: 0; font-size: .93rem; color: var(--ink-2); }
.hh-where span { font: 600 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.hh-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hh-tags li { font: 600 .74rem/1 var(--sans); letter-spacing: .03em; padding: 6px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.hh-foot { margin: auto 0 0; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: .86rem; color: var(--ink-3); }
.hh-foot a { color: var(--sea); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.hh-foot a:hover { text-decoration: underline; }
.hh-empty { color: var(--ink-3); font: 500 italic 1.15rem var(--serif); margin: 10px 0 0; }
.hh-more { margin: 30px 0 0; color: var(--ink-3); font-size: .95rem; }

/* Quick answers and the method note */
.hh-faq { margin-top: clamp(60px, 8vw, 100px); max-width: 52em; }
.hh-faq > h2 { margin: 0 0 18px; }
.hh-qa { padding: 16px 0; border-top: 1px solid var(--line); }
.hh-qa h3 { font-size: 1.15rem; margin: 0 0 6px; }
.hh-qa p { margin: 0; color: var(--ink-2); }
.hh-how { margin-top: clamp(40px, 6vw, 70px); padding: clamp(22px, 4vw, 40px); border-radius: 24px; background: var(--paper-2); display: grid; gap: 10px; }
.hh-how h2 { margin: 0; }
.hh-how p { margin: 0; color: var(--ink-2); font-size: 1.03rem; }
.hh-how a { color: var(--tile-deep); font-weight: 600; }
.hh-tell { display: inline-block; padding: .2em 0; }
.hh-how p.hh-mapcredit { font-size: .86rem; color: var(--ink-2); }
.hh-how .hh-mapcredit a { color: inherit; font-weight: 500; }

/* Map: on by default, same places as the list; amber pins are on now */
.hh-maptog::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: currentColor; vertical-align: -1px; }
.hh-mapbox { margin: 4px 0 18px; }
.hh-mapel { height: min(52vh, 320px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); background: #a9cfd5; }
.hh-mapfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 18px; margin-top: 10px; }
.hh-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 .88rem var(--sans); color: var(--ink-2); }
.hh-key li::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; vertical-align: -1px; border: 2px solid #fffaf2; box-shadow: 0 0 0 1px var(--line); }
.hh-key .k-live::before { background: var(--sun); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 30%, transparent); }
.hh-key .k-later::before { background: var(--sea); }
.hh-key .k-off::before { background: #a39d93; width: 9px; height: 9px; }
.hh-mapnote, .hh-maphint { margin: 0; font-size: .84rem; color: var(--ink-3); }
.hh-pop { padding: 14px 16px 12px; }
.hh-pop p { margin: 0; }
.hh-pop-n { font: 600 1.08rem/1.2 var(--serif); color: var(--ink); padding-right: 22px; }
.hh-pop-s { display: inline-block; margin-top: 6px !important; font: 600 .8rem/1.2 var(--sans); padding: .35em .7em; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.hh-pop-s.is-live { background: #fde9c7; color: #7a4600; }
.hh-pop-d { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: .86rem; color: var(--ink-2); }
.hh-pop-d li { position: relative; padding-left: 12px; }
.hh-pop-d li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--tile); }
.hh-pop-l { display: inline-block; margin-top: 8px; font: 600 .86rem var(--sans); color: var(--sea); }
@media (min-width: 760px) { .hh-mapel { height: 420px; } }

@media (min-width: 560px) {
  .hh-bar-in { display: flex; flex-wrap: wrap; }
  .hh-sel { grid-column: auto; }
  .hh-sel select { flex: none; }
}
@media (min-width: 640px) {
  .hh-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
}
@media (min-width: 760px) {
  .hh-bar { position: sticky; top: 76px; z-index: 20; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--line); margin-bottom: 18px; }
  .hh-bar-in { flex-wrap: nowrap; }
}
@media (min-width: 900px) {
  .hh-hero-grid { grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 5vw, 70px); }
  .hh-art-wrap { display: block; max-width: 400px; justify-self: end; }
  .hh-how { grid-template-columns: 1fr 2fr; column-gap: 40px; }
  .hh-how h2 { grid-row: span 4; }
}

/* Tonight's sunset box: happy hours with an ocean view in the last hour of light */
.hh-sun[hidden] { display: none; }
.hh-sun { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin: 4px 0 22px; padding: 20px 22px; border-radius: var(--radius); background: linear-gradient(135deg, #fff1db, #fbe0cf); box-shadow: var(--shadow-1); }
.hh-sun .eyebrow { margin: 0 0 4px; }
.hh-sun-h { margin: 0 0 6px; font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.25; }
.hh-sun-sub { margin: 0 0 8px; color: var(--ink-2); font-size: .97rem; }
.hh-sun-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .97rem; }
.hh-sun-list a { font-weight: 600; color: var(--ink); }
.hh-sun-list span { color: var(--ink-2); }
.hh-sun-list em { font-style: normal; font-size: .84rem; color: var(--ink-3); white-space: nowrap; }
.hh-sun-list em::before { content: '· '; }
.hh-sun-list em.is-on { color: #7a4600; font-weight: 600; }
.hh-sun-more { margin: 10px 0 0; font-size: .9rem; }
.hh-sun-more a { color: var(--tile-deep); font-weight: 600; }
@media (max-width: 600px) {
  .hh-sun { grid-template-columns: 1fr; gap: 10px; }
  .hh-sun-list em { display: block; }
  .hh-sun-list em::before { content: none; }
}

/* Home Sales / Record Book (/homes/) */
.hs-hero { padding-bottom: 20px; }
.hs-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.hs-hero h1 { max-width: 11ch; }
.hs-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hs-jump a { font: 600 .9rem/1 var(--sans); padding: .7em 1.05em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink-2); text-decoration: none; transition: border-color .2s, color .2s; }
.hs-jump a:hover { border-color: var(--tile); color: var(--tile); }

/* The ledger: a ruled page with a red margin line */
.hs-ledger { position: relative; margin: 0; padding: 30px 30px 26px 54px; border-radius: 6px 18px 18px 6px; transform: rotate(1.2deg);
  background: repeating-linear-gradient(#fffdf6 0 43px, #e7dcc8 43px 44px), #fffdf6; background-position: 0 58px;
  box-shadow: 0 1px 0 #e8dcc6, 0 3px 0 #fbf5ea, 0 4px 0 #e5d8c1, 0 7px 0 #f9f1e3, 0 8px 0 #e0d2b9, var(--shadow-2); }
.hs-ledger::before { content: ""; position: absolute; top: 0; bottom: 0; left: 38px; width: 2px; background: rgba(185, 71, 42, .45); }
.hs-ledger figcaption { display: flex; justify-content: space-between; gap: 10px; font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tile); height: 28px; }
.hs-ledger figcaption span + span { color: var(--ink-3); letter-spacing: .06em; }
.hs-ledger ol { list-style: none; margin: 0; padding: 0; }
.hs-ledger li { height: 44px; display: flex; align-items: center; gap: 12px; }
.hs-ledger a { flex: 1; display: flex; align-items: baseline; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.hl-area { font: 500 1.08rem var(--sans); white-space: nowrap; }
.hl-dots { flex: 1; border-bottom: 2px dotted rgba(24, 34, 46, .25); transform: translateY(-4px); min-width: 12px; }
.hl-price { font: 600 1.5rem/1 var(--serif); color: var(--tile-deep); font-variant-numeric: tabular-nums; }
.hl-when { font-size: .8rem; color: var(--ink-3); width: 5.6em; text-align: right; flex: none; }
.hs-ledger a:hover .hl-area { color: var(--tile); }

.hs-sec { padding-top: clamp(50px, 7vw, 90px); }
.hs-area { display: grid; grid-template-columns: minmax(200px, .55fr) 1.45fr; gap: 20px clamp(30px, 5vw, 70px); padding: clamp(40px, 6vw, 70px) 0; border-top: 1.5px solid var(--line); scroll-margin-top: 90px; }
.hs-ah { position: sticky; top: 110px; align-self: start; }
.hs-idx { font: 600 .8rem/1 var(--sans); letter-spacing: .14em; color: var(--tile); margin: 0 0 10px; }
.hs-ah h2 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 0 0 12px; }
.hs-ah p:last-child { color: var(--ink-3); margin: 0; max-width: 22em; }
.hs-ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hs-top, .hs-row { display: grid; grid-template-columns: 9.5em 1fr; gap: 6px 26px; align-items: start; }
.hs-top { grid-template-columns: auto 1fr; padding: 28px 28px 24px; margin-bottom: 10px; border-radius: 22px; background: #fffaf2; box-shadow: var(--shadow-1); }
.hs-row { padding: 18px 28px; border-bottom: 1px solid var(--line); }
.hs-row:last-child { border-bottom: 0; }
.hs-price { margin: 0; font: 600 1.7rem/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; display: grid; gap: 6px; }
.hs-top .hs-price { font-size: clamp(2.4rem, 4.4vw, 3.4rem); color: var(--tile-deep); }
.hs-price small { font: 500 .8rem var(--sans); color: var(--ink-3); letter-spacing: .02em; }
.hs-info h3 { font: 600 1.15rem/1.3 var(--sans); margin: 0 0 4px; }
.hs-top .hs-info h3 { font: 600 1.45rem/1.2 var(--serif); }
.hs-meta { margin: 0; color: var(--ink-2); font-size: .97rem; }
.hs-src { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .86rem; }
.hs-src a { color: var(--sea); font-weight: 600; text-decoration: none; display: inline-flex; gap: 3px; align-items: center; }
.hs-src a:hover { text-decoration: underline; }
.hs-conf { font: 600 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: .45em .7em; border-radius: 999px; }
.c-two { background: #e3ead9; color: #3f5238; }
.c-one { background: var(--paper-2); color: var(--ink-2); }
.hs-more { margin-top: 8px; }
.hs-more summary { cursor: pointer; padding: 14px 28px; font-weight: 600; color: var(--ink-2); list-style-position: inside; }
.hs-more summary:hover { color: var(--tile); }
.hs-bundles { margin-top: 22px; padding: 20px 26px; border-radius: 16px; border: 1.5px dashed var(--line); }
.hs-bundles h3 { font: 600 1rem var(--sans); margin: 0 0 4px; }
.hs-bundles p { margin: 0 0 10px; color: var(--ink-3); font-size: .92rem; }
.hs-bundles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; color: var(--ink-2); }
.hs-bundles li b { font: 600 1.05rem var(--serif); color: var(--ink); margin-right: 6px; }
.hs-bundles a { color: var(--sea); font-weight: 600; text-decoration: none; display: inline-flex; gap: 3px; align-items: center; margin-left: 8px; font-size: .86rem; }

.hs-how { margin-top: clamp(40px, 6vw, 70px); padding: clamp(26px, 4vw, 40px); border-radius: 24px; background: var(--paper-2); display: grid; grid-template-columns: 1fr 2fr; gap: 10px 40px; }
.hs-how h2 { margin: 0; grid-row: span 2; }
.hs-how p { margin: 0; color: var(--ink-2); font-size: 1.05rem; }
.hs-how a { color: var(--tile-deep); font-weight: 600; }

.hs-ch { background: var(--paper-2); }
.hs-ch .eyebrow { color: var(--tile-deep); }
.hs-slots, .hs-recent { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hs-slots li, .hs-recent li { padding: 30px 28px; border-radius: 22px; background: #fffaf2; box-shadow: var(--shadow-1); }
.hs-slot-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tile); color: #fff; font: 600 1.1rem var(--serif); }
.hs-slots h3, .hs-recent h3 { font-size: 1.5rem; margin: 18px 0 8px; }
.hs-slots p { margin: 0; color: var(--ink-2); }
.hs-slot { margin: 0; font: 600 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tile); }

@media (max-width: 900px) {
  .hs-hero-grid { grid-template-columns: 1fr; }
  .hs-ledger { max-width: 520px; transform: rotate(.8deg); }
  .hs-area { grid-template-columns: 1fr; }
  .hs-ah { position: static; }
  .hs-how { grid-template-columns: 1fr; }
  .hs-how h2 { grid-row: auto; }
  .hs-slots, .hs-recent { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hs-top, .hs-row { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
  .hs-price { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; }
  .hs-ledger { padding: 24px 18px 20px 42px; }
  .hs-ledger::before { left: 28px; }
  .hl-when { display: none; }
}

/* Jacaranda Watch (/jacarandas/) */
.ja-hero .eyebrow { color: #6a4fae; }
.ja-hero h1 em { color: #6a4fae; }
.ja-bloom { margin: 18px 0 0; display: inline-block; max-width: 40em; padding: 10px 16px; border-radius: 14px; background: color-mix(in srgb, var(--jacaranda) 16%, #fffaf2); color: var(--ink); font-size: .98rem; line-height: 1.45; }
.ja-bloom.is-note { background: color-mix(in srgb, var(--jacaranda) 28%, #fffaf2); }
.ja-sec { padding-top: 10px; }
.ja-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); align-items: start; }
.ja-map { height: min(68vh, 620px); min-height: 380px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-1); background: #efe3cf; }
.ja-mapfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 10px; }
.ja-status { margin: 0; font-size: .92rem; color: var(--ink-2); flex: 1 1 220px; }
.ja-btns { display: flex; gap: 8px; }
.ja-all, .ja-near { font: 600 .9rem/1 var(--sans); padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fffdf8; color: var(--ink); cursor: pointer; }
.ja-near { border-color: color-mix(in srgb, var(--jacaranda) 60%, transparent); }
.ja-all:hover, .ja-near:hover { border-color: var(--ink-3); }
.ja-listcol h2 { margin: 0 0 6px; font: 600 1.5rem/1.15 var(--serif); }
.ja-listcol h2 em { color: #6a4fae; }
.ja-listnote { margin: 0 0 14px; color: var(--ink-3); font-size: .9rem; }
.ja-blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ja-block { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 11px 14px; border-radius: 16px; border: 0; background: #fffaf2; box-shadow: var(--shadow-1); color: var(--ink); font: 500 .96rem/1.25 var(--sans); cursor: pointer; transition: transform .15s var(--ease), background .2s var(--ease); }
.ja-block:hover { transform: translateY(-1px); }
.ja-block[aria-pressed="true"] { background: #4b2f93; color: #fffaf2; }
.ja-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--jacaranda) 25%, #fffaf2); color: #4b2f93; font: 600 .85rem var(--sans); }
.ja-block[aria-pressed="true"] .ja-rank { background: var(--jacaranda); color: #fff; }
.ja-n { font-size: .84rem; color: var(--ink-3); white-space: nowrap; }
.ja-block[aria-pressed="true"] .ja-n { color: rgba(255, 250, 242, .8); }
.ja-credit { margin-top: 28px; }
.ja-pop p { margin: 0; font: 500 .92rem/1.35 var(--sans); color: var(--ink); }
.ja-pop .ja-pop-n { font: 600 .74rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #6a4fae; margin-bottom: 4px; }
.ja-you { width: 16px; height: 16px; border-radius: 50%; background: var(--sea); border: 3px solid #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sea) 30%, transparent); }
@media (max-width: 860px) {
  .ja-grid { grid-template-columns: 1fr; }
  .ja-map { height: 62vh; min-height: 340px; border-radius: 18px; }
}

/* Home page "Next launch" strip */
.nl { padding: 0 0 clamp(60px, 7vw, 90px); }
.nl[hidden] { display: none; }
.nl-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 40px; padding: 30px 36px; border-radius: 24px;
  background: radial-gradient(70% 120% at 85% 20%, rgba(255, 170, 90, .18), transparent 60%), linear-gradient(160deg, #1d3058, var(--night) 70%); color: #f3ebdc; }
.nl-eye { grid-column: 1 / -1; margin: 0; color: #ffcf6b; }
.nl-item { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.nl-item[hidden] { display: none; }
.nl-when { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.nl-day { font: 600 .78rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: rgba(243, 235, 220, .75); }
.nl-time { font: 500 italic 2.2rem/1 var(--serif); color: #ffcf6b; white-space: nowrap; }
.nl-title { margin: 0 0 8px; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: #fbf4e6; }
.nl-text { margin: 0; color: rgba(243, 235, 220, .85); }
@media (max-width: 760px) {
  .nl-wrap { grid-template-columns: 1fr; padding: 24px 22px; }
  .nl-item { grid-template-columns: 1fr; gap: 10px; }
  .nl-when { flex-direction: row; align-items: baseline; gap: 12px; }
  .nl-time { font-size: 1.6rem; }
  .nl-btn { justify-self: start; }
}

/* Launch Watch page (/launches/) */
.sn-launch { margin: 0 0 14px; color: var(--ink-2); }
.sn-launch a { color: var(--tile); font-weight: 600; }
.lw-hero { position: relative; overflow: hidden; padding: 190px 0 40px; isolation: isolate;
  background: radial-gradient(70% 60% at 80% 30%, rgba(255, 170, 90, .14), transparent 60%), radial-gradient(120% 100% at 50% -10%, #1d3058 0%, var(--night) 62%); }
.lw-hero h1 { font-size: clamp(3.2rem, 8vw, 6.8rem); margin: 18px 0 22px; }
.lw-hero .lede { max-width: 40em; }
.lw-map-sec { padding: 40px 0 10px; }
.lw-map-wrap { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .07); }
.lw-map { height: min(66vh, 620px); min-height: 420px; background: #0d1a30; }
.lw-cap { position: absolute; left: 14px; bottom: 14px; right: 60px; margin: 0; max-width: 34em; padding: 12px 16px; border-radius: 14px;
  background: rgba(10, 20, 36, .86); color: #f3ebdc; font-size: .92rem; line-height: 1.45; pointer-events: none; }
.lw-cap:empty { display: none; }
.lw-key { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 16px 4px 0; padding: 0; font-size: .86rem; color: rgba(243, 235, 220, .75); }
.lw-key li { display: flex; align-items: center; gap: 9px; }
.lw-key span { display: inline-block; flex: none; }
.k-path { width: 26px; height: 3px; border-radius: 2px; background: #ffcf6b; }
.k-look { width: 26px; height: 0; border-top: 2px dashed #9cc5bb; }
.k-zone { width: 18px; height: 12px; border-radius: 2px; background: rgba(232, 106, 92, .18); border: 1.2px solid rgba(232, 106, 92, .75); }
.k-boat { width: 11px; height: 11px; border-radius: 50%; background: #f3ebdc; box-shadow: 0 0 0 3px rgba(243, 235, 220, .25); }

.lw-pin { display: flex; align-items: center; gap: 8px; pointer-events: none; }
.lw-dot { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #0a1424; flex: none; }
.lw-lab { font: 600 .78rem/1 var(--sans); color: #fbf4e6; background: rgba(10, 20, 36, .8); padding: 5px 8px; border-radius: 8px; white-space: nowrap; }
.pin-pad .lw-dot { background: #ffb867; box-shadow: 0 0 0 5px rgba(255, 184, 103, .25); }
.pin-town .lw-dot { background: #9cc5bb; box-shadow: 0 0 0 5px rgba(156, 197, 187, .25); }
.pin-boat .lw-dot { width: 11px; height: 11px; background: #f3ebdc; }
.pin-boat .lw-lab { font-weight: 500; }

.lw-sec { padding-top: 40px; }
.lw-list { list-style: none; margin: 0 0 50px; padding: 0; border-top: 1.5px solid rgba(243, 235, 220, .3); }
.lw { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 24px 12px; border-bottom: 1px solid rgba(243, 235, 220, .12); border-radius: 4px; transition: background .3s var(--ease); }
.lw.is-sel { background: rgba(255, 207, 107, .06); }
.lw-when { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.lw-day { font: 600 .78rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: rgba(243, 235, 220, .7); }
.lw-time { font: 500 italic 1.9rem/1 var(--serif); color: #ffcf6b; }
.lw-title { margin: 0 0 8px; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: #fbf4e6; }
.lw-text, .lw-path { margin: 0; color: rgba(243, 235, 220, .85); max-width: 46em; }
.lw-path { margin-top: 6px; font-size: .95rem; color: rgba(243, 235, 220, .7); }
.lw-sky { display: inline-block; margin-right: 6px; padding: .3em .7em; border-radius: 999px; font: 600 .72rem/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; vertical-align: .1em; border: 1.5px solid rgba(243, 235, 220, .3); color: #f3ebdc; }
.sky-prime { background: #ffcf6b; border-color: #ffcf6b; color: #0a1424; }
.sky-possible { border-color: #ffcf6b; color: #ffcf6b; }
.sky-tbd { border-style: dashed; }
.lw-btn { margin-top: 12px; font: 600 .85rem/1 var(--sans); color: #fbf4e6; background: transparent; border: 1.5px solid rgba(243, 235, 220, .35); padding: .7em 1.1em; border-radius: 999px; cursor: pointer; }
.lw-btn:hover, .lw-btn:focus-visible { border-color: #ffcf6b; color: #ffcf6b; }
.lw-btn[aria-pressed="true"] { background: #ffcf6b; border-color: #ffcf6b; color: #0a1424; }
.lw-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0 0 30px; }
.lw-how > div { padding: 24px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.lw-how h2 { margin: 0 0 10px; }
.lw-how p { margin: 0; color: rgba(243, 235, 220, .8); }
.lw-how a { color: #ffcf6b; }
.night-page .fine-print { color: rgba(243, 235, 220, .6); }
@media (max-width: 900px) { .lw-how { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .lw-hero { padding-top: 130px; }
  .lw { grid-template-columns: 1fr; gap: 10px; padding: 20px 4px; }
  .lw-when { flex-direction: row; align-items: baseline; gap: 12px; }
  .lw-time { font-size: 1.5rem; }
  .lw-map { min-height: 380px; height: 58vh; }
  .lw-cap { position: static; max-width: none; border-radius: 0; background: #0a1424; }
}

/* Coming Soon (/openings/) */
.op-hero { padding-bottom: 10px; overflow: hidden; }
.op-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 70px); align-items: end; }
.op-hero h1 { max-width: 8ch; }
.op-stamp { display: inline-flex; align-items: center; gap: .5em; margin-top: 26px; padding: .7em 1.1em; border-radius: 999px; background: #fffaf2; box-shadow: var(--shadow-1); font: 500 .95rem var(--sans); color: var(--ink-2); }
.op-stamp b { font: 600 1.25rem/1 var(--serif); color: var(--tile); }
.op-art-wrap { position: relative; }
.op-art { width: 100%; height: auto; display: block; }
.op-sec { padding-top: clamp(40px, 6vw, 70px); }

.op-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(30px, 4vw, 48px); }
.op-filter.op-cats { margin-bottom: 10px; }
.op-filter button { font: 600 .92rem/1 var(--sans); padding: .75em 1.15em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.op-filter button:hover { border-color: var(--ink-3); color: var(--ink); }
.op-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.op-filter span { color: var(--ink-3); margin-left: 3px; font-weight: 500; }
.op-filter button[aria-pressed="true"] span { color: rgba(250, 244, 234, .8); }

.op-group + .op-group { margin-top: clamp(50px, 7vw, 80px); }
.op-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 30px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1.5px solid var(--line); }
.op-gh h2 { margin: 0; }
.op-gh p { margin: 0; color: var(--ink-3); max-width: 34em; }
.op-n { font: 600 .9rem/1 var(--sans); vertical-align: middle; padding: .35em .7em; border-radius: 999px; background: var(--tile); color: #fff; margin-left: 6px; }
.op-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.op-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border-radius: var(--radius); background: #fffaf2; box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.op-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.op-card h3 { font-size: 1.5rem; line-height: 1.12; margin: 0; }
.op-noname { font: 500 italic 1.2rem var(--serif); color: var(--ink-2); }
.op-kind { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.op-kind span { font: 600 .74rem/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; padding: .5em .75em; border-radius: 999px; background: #f6e2c8; color: #7a3b14; }
.op-kind i { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .8rem; }
.op-bar .op-kind span, .op-kind.op-bar span { background: #f8dcd2; color: #8a3119; }
.op-kind.op-make span { background: #e3ead9; color: #3f5238; }
.op-addr { margin: 0; }
.op-addr a { display: inline-flex; gap: 6px; align-items: flex-start; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.op-addr a svg { flex: none; margin-top: 3px; color: var(--tile); }
.op-addr a:hover { color: var(--tile); }
.op-who { margin: 0; font-size: .92rem; color: var(--ink-3); }
.op-foot { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-3); }
.op-foot a { color: var(--sea); font-weight: 600; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.op-foot a:hover { text-decoration: underline; }
.op-none { color: var(--ink-3); font: 500 italic 1.15rem var(--serif); margin: 6px 0 0; }

.op-how { margin-top: clamp(60px, 8vw, 100px); padding: clamp(26px, 4vw, 40px); border-radius: 24px; background: var(--paper-2); display: grid; grid-template-columns: 1fr 2fr; gap: 10px 40px; }
.op-how h2 { margin: 0; grid-row: span 2; }
.op-how p { margin: 0; color: var(--ink-2); font-size: 1.05rem; }
.op-how a { color: var(--tile-deep); font-weight: 600; }

@media (max-width: 860px) {
  .op-hero-grid { grid-template-columns: 1fr; }
  .op-art-wrap { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .op-art-wrap { max-width: 330px; }
  .op-how { grid-template-columns: 1fr; }
  .op-how h2 { grid-row: auto; }
}

/* certainty ladder, map, stage pills, evidence (openings tracker, 2026-10-30) */
.op-ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 22px; counter-reset: rung; }
.op-rung { --c: #9aa5b1; position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 8px; text-align: left; padding: 14px 14px 12px; border-radius: 16px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink); cursor: pointer; font: inherit; transition: border-color .2s, box-shadow .2s, transform .2s; }
.op-rung:not(:disabled):hover { border-color: var(--c); transform: translateY(-2px); }
.op-rung:disabled { cursor: default; opacity: .55; }
.op-rung[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 2px var(--c) inset; }
.op-rung-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font: 700 .75rem/1 var(--sans); }
.op-rung b { font: 600 1rem/1.1 var(--sans); }
.op-rung-c { font: 600 1.15rem/1 var(--serif); color: var(--c); }
.op-rung-s { grid-column: 1 / -1; font-size: .8rem; line-height: 1.35; color: var(--ink-3); }
.op-s-filed { --c: #5f6975; } .op-s-confirmed { --c: #2f7d8c; } .op-s-under-construction { --c: #93591a; }
.op-s-hiring { --c: #ad4428; } .op-s-soft-open { --c: #7549ad; } .op-s-now-open { --c: #327540; }

.op-map-wrap { margin-bottom: clamp(26px, 4vw, 40px); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-1); background: var(--paper-2); }
.op-map { height: clamp(320px, 48vw, 480px); }
/* under the map: the hint, or (after the reader moves the map) how many listed places are in view and the way back */
.op-map-wrap:has(+ .op-mapfoot:not([hidden])) { margin-bottom: 10px; }
.op-mapfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 40px; margin-bottom: clamp(20px, 3vw, 32px); }
.op-maphint, .op-area { margin: 0; font-size: .9rem; color: var(--ink-3); }
.op-area { font-weight: 500; color: var(--ink-2); }
.op-area:empty { display: none; }
.op-area:focus, .op-maphint:focus { outline: none; }
.op-areaall { font: 600 .9rem/1 var(--sans); min-height: 40px; padding: .6em 1.05em; border-radius: 999px; border: 1.5px solid var(--sea); background: #fffaf2; color: var(--sea); cursor: pointer; transition: background .2s, color .2s; }
.op-areaall:hover { background: var(--sea); color: #fff; }
.op-pop-s { margin: 0 0 2px; font: 700 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.op-pop-n { margin: 0; font: 600 1.05rem/1.2 var(--serif); color: var(--ink); }
.op-pop-a { margin: 2px 0 6px; font-size: .85rem; color: var(--ink-3); }
.op-pop-l { font: 600 .85rem var(--sans); color: var(--sea); text-decoration: none; }

.op-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.op-stage { font: 700 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: .5em .8em; border-radius: 999px; background: var(--c); color: #fff; }
.op-top .op-kind { font: 600 .74rem/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; padding: .5em .75em; border-radius: 999px; background: #f6e2c8; color: #7a3b14; }
.op-top .op-new { background: #e3ead9; color: #3f5238; }
.op-steps { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.op-steps li { height: 5px; border-radius: 3px; background: var(--line); }
.op-steps li.done, .op-steps li.now { background: var(--c); }
.op-card { --c: #5f6975; }
.op-card[data-stage="confirmed"] { --c: #2f7d8c; } .op-card[data-stage="under-construction"] { --c: #93591a; }
.op-card[data-stage="hiring"] { --c: #ad4428; } .op-card[data-stage="soft-open"] { --c: #7549ad; } .op-card[data-stage="now-open"] { --c: #327540; }
.op-ev { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 8px; font-size: .88rem; }
.op-ev li { display: grid; grid-template-columns: 3.6em 1fr; gap: 8px; color: var(--ink-2); }
.op-ev-d { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.op-ev a { color: var(--sea); font-weight: 600; text-decoration: none; }
.op-ev a:hover { text-decoration: underline; }
.op-ev a svg { display: inline-block; vertical-align: -2px; width: 13px; height: 13px; }
.op-ev i { display: block; font-style: normal; color: var(--ink-3); font-size: .82rem; }
.op-sec .fine-print { margin-top: 26px; }

@media (max-width: 980px) { .op-ladder { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) {
  .op-ladder { grid-template-columns: repeat(2, 1fr); }
  .op-rung-s { display: none; }
}

/* About, Contact, Privacy, 404, admin */
.ph { padding: 160px 0 30px; background: radial-gradient(80% 70% at 90% 0%, rgba(239, 161, 58, .2), transparent 60%), var(--paper); }
.ph h1 { font-size: clamp(3rem, 7.6vw, 6.4rem); margin: 18px 0 24px; max-width: 13ch; }
.ph .lede { max-width: 36em; }
.prose-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(30px, 7vw, 110px); align-items: start; }
.prose h2 { margin: 42px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); font-size: 1.08rem; }
.prose a { color: var(--tile); font-weight: 600; }
.prose-art { position: sticky; top: 110px; }
.caption { font: 500 italic 1rem var(--serif); color: var(--ink-3); margin-top: 14px; text-align: center; }
@media (max-width: 860px) { .prose-grid { grid-template-columns: 1fr; } .prose-art { position: static; max-width: 320px; } }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-card { padding: 34px 30px; border-radius: 22px; background: #fffaf2; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.contact-card p { color: var(--ink-2); margin: 0 0 8px; flex: 1; }
.ig-line { display: flex; align-items: center; gap: 10px; margin-top: 40px; color: var(--ink-2); }
.ig-line a { color: var(--tile); font-weight: 600; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.nf { min-height: 100svh; display: flex; align-items: center; }
.nf .h1 { margin: 18px auto; max-width: 12ch; color: #fff8ee; }
.nf-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; color: #fff8ee; }
.nf-page .site-foot { display: none; }

.admin { background: var(--paper); }
.admin::after { display: none; }
.adm { padding: 40px 0 80px; }
.adm-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.adm-modes { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: var(--paper-2); width: fit-content; max-width: max-content; }
.adm-modes button { font: 600 .92rem var(--sans); padding: .6em 1.1em; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.adm-modes button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.adm-head .adm-out { margin-left: auto; }
.adm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.adm-tabs:empty { display: none; }
.adm-tabs button { font: 600 .9rem var(--sans); padding: .6em 1em; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; }
.adm-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.adm-tabs span { opacity: .6; margin-left: 4px; }
.adm-login { max-width: 420px; display: grid; gap: 8px; }
.adm-list { display: grid; gap: 16px; }
.adm-card { display: grid; grid-template-columns: 260px 1fr; gap: 24px; background: #fff; border-radius: 18px; padding: 16px; box-shadow: var(--shadow-1); }
.adm-ph { border-radius: 12px; overflow: hidden; background: var(--paper-2); display: grid; place-items: center; min-height: 180px; color: var(--ink-3); }
.adm-ph img { width: 100%; height: 100%; object-fit: cover; }
.adm-b h2 { font-size: 1.4rem; margin: 6px 0 12px; }
.adm-b dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 14px; margin: 0 0 16px; font-size: .95rem; }
.adm-b dt { color: var(--ink-3); font-weight: 600; }
.adm-b dd { margin: 0; }
.adm-b dd a { color: var(--sea); margin-left: 6px; }
.adm-act { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-act .btn { padding: .8em 1.2em; font-size: .92rem; }
.adm-del { color: #a1301c; }
.adm-empty { color: var(--ink-3); font: 500 italic 1.3rem var(--serif); padding: 40px 0; }
@media (max-width: 700px) { .adm-card { grid-template-columns: 1fr; } }

.adm-polls { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.adm-poll { background: #fff; border-radius: 18px; padding: 22px 22px 18px; box-shadow: var(--shadow-1); display: grid; gap: 10px; align-content: start; }
.adm-poll header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.adm-poll h2 { font-size: 1.3rem; margin: 0; }
.adm-state { font: 600 .78rem var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: .3em .7em; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.adm-state.st-open { background: #e3f1e6; color: #1e6b35; }
.adm-meta { color: var(--ink-3); font-size: .92rem; margin: 0; }
.adm-meta b { color: var(--ink); }
.adm-tally { list-style: none; counter-reset: t; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.adm-tally li { counter-increment: t; display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--paper); }
.adm-tally li::before { content: counter(t); font-weight: 700; color: var(--ink-3); min-width: 1.2em; }
.adm-tally li span { flex: 1; }
.adm-tally li:first-child { background: #fff1d6; }
.adm-tally li.gone, .adm-tally li.gone:first-child { background: var(--paper-2); color: var(--ink-2); }
.adm-tally li.gone small { color: var(--ink-2); }
.adm-tally small, .adm-qs small { color: var(--ink-3); }
.adm-qs { margin: 0; padding-left: 1.2em; color: var(--ink-2); display: grid; gap: 4px; }
.adm-empty.sm { font-size: 1.05rem; padding: 6px 0; }
.adm-conn summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.adm-conn p { color: var(--ink-3); font-size: .88rem; }
.adm-conn ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.adm-conn li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .92rem; }
.adm-conn .btn, .adm-poll > .btn { padding: .5em 1em; font-size: .85rem; justify-self: start; }
.adm-ask { background: #fff; border-radius: 18px; padding: 24px; box-shadow: var(--shadow-1); display: grid; gap: 12px; max-width: 720px; margin-bottom: 24px; }
.adm-ask h2 { margin: 0; font-size: 1.4rem; }
.adm-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-dates > div, .adm-q { display: grid; gap: 6px; }
.adm-q { padding-top: 10px; border-top: 1px solid var(--line); }
.adm-ask .btn { justify-self: start; }
@media (max-width: 560px) { .adm-dates { grid-template-columns: 1fr; } }

/* Ticket Dodger (/parking/). .bfaq comes from beaches.css, .fine-print and .cta-short from weekend.css */
.pk-sec h2 { margin: 0 0 22px; }
.pk-look { margin: 0 0 26px; }
.pk-form { padding: 18px 20px; border-radius: var(--radius); background: #fffaf2; border: 1.5px solid var(--line); }
.pk-form .lbl { display: block; margin: 0 0 8px; font: 600 .95rem var(--sans); color: var(--ink); }
.pk-row { display: flex; gap: 8px; }
.pk-row .field { flex: 1; min-width: 0; min-height: 48px; }
.pk-row .btn { flex: none; min-height: 48px; }
.pk-help { margin: 10px 0 0; font-size: .86rem; color: var(--ink-3); }
.pk-out { margin: 14px 0 0; }
.pk-out:empty { display: none; }
.pk-res { padding: 16px 20px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-1); margin: 0 0 10px; }
.pk-res h3 { margin: 0 0 10px; font: 500 1.25rem/1.25 var(--serif); color: var(--ink); }
.pk-num { font: 500 .9rem var(--sans); color: var(--ink-3); }
.pk-res ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pk-res li { display: flex; gap: 12px; align-items: flex-start; }
.pk-sw { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-top: 4px; }
.pk-when { margin: 0; font: 600 1.02rem/1.35 var(--sans); color: var(--ink); }
.pk-type { font: 500 .82rem var(--sans); color: var(--ink-3); margin-left: 4px; }
.pk-next, .pk-blocks, .pk-note { margin: 3px 0 0; font-size: .92rem; color: var(--ink-2); }
.pk-next b { color: var(--tile-deep); }
.pk-blocks { color: var(--ink-3); font-size: .86rem; }
.pk-note { color: var(--ink-3); margin: -4px 0 10px; }
.pk-miss { margin: 0; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--paper-2); color: var(--ink-2); }

.pk-mapwrap { margin: 16px 0 0; }
.pk-map { height: 380px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); background: #efe3cf; }
@media (min-width: 900px) { .pk-map { height: 480px; } }
.pk-key { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 .86rem var(--sans); color: var(--ink-2); }
.pk-key i { display: inline-block; width: 16px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.pk-pop-n { margin: 0 0 6px; font: 600 1rem/1.25 var(--sans); color: var(--ink); }
.pk-pop-n span { font-weight: 500; font-size: .85rem; color: var(--ink-3); }
.pk-pop-s { margin: 0 0 4px; display: flex; gap: 8px; font-size: .92rem; color: var(--ink); }
.pk-pop-s .pk-sw { margin-top: 2px; }
.pk-pop-x { margin: 0; font-size: .86rem; color: var(--ink-2); }

.pk-swrules { margin: 26px 0 0; padding: 18px 22px; border-radius: var(--radius); border: 1.5px dashed var(--line); }
.pk-rules { margin: 0 0 10px; padding-left: 1.1em; color: var(--ink-2); display: grid; gap: 5px; }
.pk-hol, .pk-hot { margin: 0 0 8px; color: var(--ink-2); }
.pk-hol b, .pk-hot { color: var(--ink); }
.pk-hot a { color: var(--sea); font-weight: 600; }
.pk-src { margin: 8px 0 0; font-size: .84rem; color: var(--ink-3); }
.pk-src a { color: inherit; }

.pk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-bottom: 18px; }
.pk-card { padding: 20px 22px; border-radius: var(--radius); background: #fffaf2; border: 1.5px solid var(--line); display: flex; flex-direction: column; }
.pk-card .eyebrow { margin: 0 0 6px; }
.pk-card h3 { margin: 0 0 6px; font: 500 1.3rem/1.2 var(--serif); color: var(--ink); }
.pk-head { margin: 0 0 12px; font: 600 1rem/1.35 var(--sans); color: var(--tile-deep); }
.pk-card .pk-rules { font-size: .94rem; }
.pk-extra { margin: 0 0 8px; font-size: .92rem; color: var(--ink-2); }
.pk-lots { margin: 4px 0 6px; font-size: .92rem; }
.pk-lots summary { cursor: pointer; font: 600 .92rem var(--sans); color: var(--sea); min-height: 32px; display: flex; align-items: center; }
.pk-lots ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; color: var(--ink-2); }
.pk-lots b { color: var(--ink); font-weight: 600; }
.pk-card .pk-src { margin-top: auto; padding-top: 10px; }
.pk-faq { margin-top: 14px; }

/* Weekend Planner: add buttons, the tray, the plan panel with its day timeline, toasts. */

/* "+" on every listing; a check once it's in the plan */
.pl-add { --s: 40px; flex: none; position: relative; width: var(--s); height: var(--s); padding: 0; border-radius: 50%; border: 1.5px solid var(--ink-3);
  background: #fffaf2; color: var(--ink); cursor: pointer; transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s; }
.pl-add:hover { transform: scale(1.07); border-color: var(--ink); }
.pl-add:active { transform: scale(.94); }
.pl-add:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; }
.pl-add-i, .pl-add-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; border-radius: 2px; }
.pl-add-i::after { margin: 0; left: 0; top: 0; transform: rotate(90deg); }
.pl-add[aria-pressed="true"] { background: var(--sage); border-color: var(--sage); color: #fff; }
.pl-add[aria-pressed="true"] .pl-add-i { width: 7px; height: 13px; margin: -8px 0 0 -4px; background: none; border: solid currentColor; border-width: 0 2.4px 2.4px 0; border-radius: 0 0 1px 0; transform: rotate(45deg); }
.pl-add[aria-pressed="true"] .pl-add-i::after { display: none; }
.poster .pl-add { --s: 50px; position: absolute; right: 16px; bottom: 16px; z-index: 3; border: 0; background: rgba(255, 250, 242, .95); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .55); }
.poster .pl-add[aria-pressed="true"] { background: var(--sage); }
.pick.in-plan { box-shadow: 0 0 0 2.5px var(--sage), var(--shadow-1); }
.ev.in-plan { background: #eef2e6; }
.ongoing li.in-plan a { box-shadow: 0 0 0 2px var(--sage), var(--shadow-1); }

/* Day colors shared by stubs, tabs and blocks */
.d0 { --tc: var(--sea); } .d1 { --tc: var(--tile); } .d2 { --tc: #d98a22; } .d3 { --tc: var(--dusk); } .d4 { --tc: var(--sage); }

/* Tray */
.pl-tray { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; }
.pl-tray-btn { pointer-events: auto; width: min(100%, 520px); display: flex; align-items: center; gap: 14px; padding: 11px 11px 11px 18px; border: 0; border-radius: 22px;
  background: var(--ink); color: var(--paper); text-align: left; font: inherit; cursor: pointer; box-shadow: 0 18px 44px -14px rgba(10, 20, 36, .65);
  animation: pl-rise .5s var(--ease) both; }
.pl-tray-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.pl-stubs { display: flex; flex: none; }
.pl-stubs i { width: 18px; height: 26px; border-radius: 4px; margin-left: -7px; background: var(--tc); border: 2px solid var(--ink); }
.pl-stubs i:first-child { margin-left: 0; }
.pl-tray-txt { display: grid; gap: 2px; min-width: 0; }
.pl-tray-txt b { font: 500 1.1rem/1.1 var(--serif); }
.pl-tray-sub { font-size: .82rem; opacity: .8; }
.pl-tray-sub.warn { color: #f4ab92; opacity: 1; font-weight: 600; }
.pl-open { margin-left: auto; flex: none; background: var(--sun); color: var(--ink); font: 600 .88rem/1 var(--sans); padding: 12px 17px; border-radius: 999px; }
.pl-tray.bump .pl-tray-btn { animation: pl-bump .5s var(--ease); }
body.menu-open .pl-tray { display: none; }
body.pl-has .site-foot { padding-bottom: 120px; }
@media (min-width: 900px) {
  .pl-tray { left: auto; right: 26px; bottom: 26px; }
  .pl-tray-btn { width: 370px; }
  body.pl-has .site-foot { padding-bottom: 0; }
}
@keyframes pl-rise { from { transform: translateY(30px); opacity: 0; } }
@keyframes pl-bump { 30% { transform: translateY(-5px) scale(1.025); } 60% { transform: translateY(1px) scale(.995); } }

.pl-fly { position: fixed; z-index: 80; width: 34px; height: 22px; border-radius: 5px; pointer-events: none; background: var(--tc); box-shadow: 0 10px 20px -8px rgba(24, 34, 46, .55); }
.pl-fly::before, .pl-fly::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--paper); }
.pl-fly::before { left: -4px; } .pl-fly::after { right: -4px; }

/* Panel: full screen on phones, a docked column on wide screens */
.pl-panel { position: fixed; z-index: 60; inset: 0; display: flex; flex-direction: column; background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(26px); transition: transform .4s var(--ease), opacity .25s; }
.pl-panel.open { opacity: 1; transform: none; }
body.pl-modal { overflow: hidden; }
@media (min-width: 1100px) {
  .pl-panel { z-index: 40; inset: 76px 0 0 auto; width: 420px; border-left: 1px solid var(--line); box-shadow: -24px 0 60px -40px rgba(24, 34, 46, .5); transform: translateX(36px); }
  body.pl-docked { padding-right: 420px; }
}
.pl-head { position: sticky; top: 0; z-index: 4; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) 20px 12px; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pl-k { margin: 0; font: 600 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tile); }
.pl-head h2 { margin: 8px 0 0; font-size: 2.1rem; line-height: 1; }
.pl-head h2:focus { outline: none; }
.pl-head h2 em { color: var(--tile); }
.pl-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink); font: 400 1.7rem/1 var(--sans); cursor: pointer; }
.pl-x:hover { border-color: var(--ink-3); }

.pl-note { margin: 4px 20px 12px; padding: 14px 16px; border-radius: 16px; background: #fff1d6; box-shadow: inset 0 0 0 1px rgba(217, 138, 34, .35); font-size: .95rem; }
.pl-note p { margin: 0; }
.pl-note-b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pl-note .btn, .pl-start-in .btn, .pl-empty .btn { padding: .65em 1.1em; font-size: .9rem; }
.pl-link { background: none; border: 0; padding: 6px; font: 600 .9rem var(--sans); color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.pl-copy { display: grid; gap: 6px; font-weight: 600; }
.pl-copy input { font: 500 .9rem var(--sans); padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink); width: 100%; }

.pl-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 2px 20px 0; }
.pl-tabs [role="tab"] { display: grid; justify-items: center; gap: 3px; padding: 10px 4px 9px; border: 0; border-radius: 14px; background: var(--paper-2); color: var(--ink-2);
  font: 600 .7rem/1.1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.pl-tabs [role="tab"] b { font: 500 italic 1.7rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.pl-tabs [role="tab"] small { font-size: .68rem; letter-spacing: 0; text-transform: none; }
.pl-tabs [aria-selected="true"] { background: var(--tc); color: #fff8ee; }
.pl-tabs [aria-selected="true"] b { color: #fff8ee; }
.pl-tabs .d2[aria-selected="true"], .pl-tabs .d2[aria-selected="true"] b { color: var(--ink); }
.pl-tabs [role="tab"]:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; }

.pl-day { padding: 14px 20px 8px; }
.pl-conds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pl-c { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fffaf2; box-shadow: inset 0 0 0 1px var(--line); font: 600 .78rem/1.1 var(--sans); }
.pl-c.rain { background: #e1ecf1; box-shadow: none; color: var(--sea-deep); }
.pl-c.clock { background: var(--dusk); box-shadow: none; color: #fff; }
.pl-c.spot { background: #fff3c4; box-shadow: none; color: #6b3d0a; }
.sc { display: inline-grid; place-items: center; flex: none; width: 21px; height: 21px; border-radius: 50%; font: 600 italic .74rem/1 var(--serif); color: var(--ink); }
.sc.lo { background: radial-gradient(circle at 50% 70%, #e6e1d8 0 45%, #c9c3b8 46%); }
.sc.mid { background: radial-gradient(circle at 50% 70%, #f7d99a 0 45%, #efc06a 46%); }
.sc.hi { background: radial-gradient(circle at 50% 70%, #f7c56f 0 38%, #efa13a 39% 62%, #b9472a 63%); }

.pl-allday { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.pl-lbl { font: 600 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.pl-pill { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: 999px; background: #fffaf2; box-shadow: inset 0 0 0 1px var(--line); font-size: .86rem; }
.pl-pill .pl-name { font-size: .86rem; }

/* The day timeline: hours on the left, the sky band with plan blocks on the right */
.pl-tl { position: relative; display: grid; grid-template-columns: 52px 1fr; margin-top: 4px; }
.pl-hours { position: relative; }
.pl-hours span { position: absolute; right: 9px; transform: translateY(-50%); font: 600 .68rem/1 var(--sans); color: var(--ink-3); white-space: nowrap; }
.pl-hours span:first-child { transform: none; }
.pl-sky { position: relative; border-radius: 16px; overflow: hidden; }
.pl-sky::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(24, 34, 46, .08) 0 1px, transparent 1px 60px); pointer-events: none; }
.pl-lane { position: absolute; inset: 0 2px 0 8px; z-index: 2; }
.pl-blk { position: absolute; display: flex; flex-direction: column; gap: 1px; padding: 7px 32px 7px 11px; border-radius: 12px; overflow: hidden;
  background: rgba(255, 250, 242, .97); box-shadow: 0 6px 18px -8px rgba(24, 34, 46, .5); animation: pl-pop .35s var(--ease) both; }
.pl-blk.est { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), rgba(0, 0, 0, .3)); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), rgba(0, 0, 0, .3)); }
.pl-blk.clash { box-shadow: 0 0 0 2px var(--tile), 0 6px 18px -8px rgba(24, 34, 46, .5); }
.pl-t { font: 600 .7rem/1.25 var(--sans); color: var(--tile); }
.pl-blk.pick .pl-t::before { content: "★ "; color: var(--sun); }
.pl-name { font: 600 .9rem/1.22 var(--sans); color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-name:hover { text-decoration: underline; }
.pl-v { font-size: .76rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-blk.sm .pl-name { -webkit-line-clamp: 1; }
.pl-blk.sm .pl-t, .pl-blk.xs .pl-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-blk.xs { padding-top: 5px; padding-bottom: 5px; }
.pl-blk.xs .pl-name { -webkit-line-clamp: 1; }
.pl-blk.xs .pl-v { display: none; }
.pl-legin { color: var(--sea-deep); }
.pl-legin.tight { color: #6b2412; }
.pl-rm { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); font: 400 1.3rem/1 var(--sans); cursor: pointer; }
.pl-rm:hover { background: var(--paper-2); color: var(--ink); }
.pl-pill .pl-rm, .pl-any .pl-rm { position: static; flex: none; }
.pl-sunset { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; margin-top: -1px; background: #fff3c4; box-shadow: 0 0 10px 3px rgba(255, 214, 120, .85); pointer-events: none; }
.pl-hours .pl-sunh { display: grid; justify-items: end; gap: 2px; transform: translateY(-50%); color: var(--tile); font-size: .74rem; }
.pl-hours .pl-sunh small { font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: #8f520e; }
.pl-hours .pl-sunh::after { content: ""; position: absolute; right: -9px; top: 50%; width: 9px; height: 2px; margin-top: -1px; background: #f2b25c; }

/* Three or more at once: one card listing them */
.pl-stack { position: absolute; left: 0; right: 6px; display: flex; flex-direction: column; border-radius: 14px; overflow: auto; overscroll-behavior: contain;
  background: rgba(255, 250, 242, .97); box-shadow: 0 6px 18px -8px rgba(24, 34, 46, .5); animation: pl-pop .35s var(--ease) both; }
.pl-stack.clash { box-shadow: 0 0 0 2px var(--tile), 0 6px 18px -8px rgba(24, 34, 46, .5); }
.pl-stack-h { position: sticky; top: 0; z-index: 1; margin: 0; padding: 9px 12px 7px; background: inherit; font: 600 .74rem/1.2 var(--sans); color: var(--tile); }
.pl-stack-h b { margin-right: 4px; }
.pl-stack ul { list-style: none; margin: 0; padding: 0 4px 4px 12px; }
.pl-stack li { display: grid; grid-template-columns: 58px 1fr 28px; align-items: start; column-gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.pl-stack .pl-t { padding-top: 2px; }
.pl-stack li.is-pick .pl-t::before { content: "\2605  "; color: var(--sun); }
.pl-sn { display: grid; min-width: 0; }
.pl-stack .pl-rm { position: static; margin-top: -3px; }
@keyframes pl-pop { from { opacity: 0; transform: translateY(6px); } }

.pl-clashes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.pl-clashes li { padding: 10px 13px; border-radius: 12px; background: #f8e2d8; color: #6b2412; font-size: .88rem; line-height: 1.4; }
.pl-empty { padding: 28px 12px 18px; text-align: center; color: var(--ink-3); }
.pl-empty p { margin: 0 0 12px; font: 500 italic 1.15rem/1.3 var(--serif); }
.pl-start-in { margin-bottom: 14px; padding: 18px; border-radius: 16px; background: #fffaf2; box-shadow: var(--shadow-1); text-align: center; }
.pl-start-in p { margin: 0 0 12px; color: var(--ink-2); }
.pl-plus { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1.5px solid var(--ink-3); font: 600 .9em/1 var(--sans); vertical-align: .02em; color: var(--ink); }

.pl-any { padding: 0 20px; }
.pl-any:empty { display: none; }
.pl-any h3 { margin: 14px 0 6px; font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.pl-any ul { list-style: none; margin: 0; padding: 0; }
.pl-any li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.pl-any li span { grid-column: 1; font-size: .8rem; color: var(--ink-3); }
.pl-any li .pl-rm { grid-column: 2; grid-row: 1 / span 2; }

.pl-cal { margin: 12px 20px 4px; padding: 16px; border-radius: 16px; background: #fffaf2; box-shadow: var(--shadow-1); font-size: .92rem; }
.pl-cal p { margin: 0 0 10px; }
.pl-cal .btn { padding: .65em 1.1em; font-size: .9rem; margin-bottom: 16px; }
.pl-cal ul { list-style: none; margin: 0 0 6px; padding: 0; }
.pl-cal li a { display: block; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; }
.pl-cal li a:hover { color: var(--tile); }
.pl-small { font-size: .82rem; color: var(--ink-3); }

.pl-actions { position: sticky; bottom: 0; z-index: 4; margin-top: auto; display: flex; align-items: center; gap: 8px;
  padding: 18px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 0%, transparent), var(--paper) 28%); }
.pl-actions .btn { padding: .8em 1.3em; font-size: .94rem; }
.pl-actions .btn-ghost { color: var(--ink); }
.pl-clear { margin-left: auto; padding: 8px 4px; background: none; border: 0; color: var(--ink-3); font: 600 .86rem var(--sans); text-decoration: underline; cursor: pointer; }

/* Status line */
.pl-toast { position: fixed; z-index: 70; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: .92rem; line-height: 1.35;
  box-shadow: 0 14px 34px -14px rgba(10, 20, 36, .6); opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
.pl-toast:empty { padding: 0; }
.pl-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pl-undo { flex: none; padding: 4px 2px; background: none; border: 0; color: var(--sun); font: 600 .92rem var(--sans); cursor: pointer; }
@media (min-width: 900px) { .pl-toast { bottom: 110px; } }
@media (min-width: 1100px) { body.pl-docked .pl-toast { left: calc((100vw - 420px) / 2); bottom: 26px; } }

/* Ready-made plans: chips on the page, in the empty plan and under a preview */
.pl-ready { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pl-ready .pl-lbl { margin-right: 4px; }
.pl-rd { padding: .6em 1em; font-size: .86rem; }
.pl-rd small { margin-left: 3px; font-weight: 700; color: var(--tile); }
.pl-start-in .pl-ready { justify-content: center; margin-top: 16px; }
.pl-note .pl-ready { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(217, 138, 34, .3); }

/* Ideas for free time: dashed, at their own times, with a "+" for listings */
.pl-idea { position: absolute; display: flex; flex-direction: column; gap: 1px; padding: 6px 44px 6px 11px; border-radius: 12px; overflow: hidden;
  background: rgba(255, 250, 242, .86); border: 1.5px dashed rgba(24, 34, 46, .34); animation: pl-pop .35s var(--ease) both; }
.pl-idea:hover { background: rgba(255, 250, 242, .97); }
.pl-idea .pl-t { color: var(--ink-2); }
.pl-idea .pl-add { --s: 32px; position: absolute; top: 6px; right: 6px; }
.pl-idea.hh { border-color: rgba(185, 71, 42, .5); }
.pl-idea.pool { border-color: rgba(29, 90, 110, .55); }
.pl-wet { color: var(--sea-deep); }
/* Getting there: a small label under a stop */
.pl-go { position: absolute; left: 4px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: rgba(255, 250, 242, .92); color: var(--ink-2); font: 600 .68rem/1.2 var(--sans); white-space: nowrap; }
.pl-go::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--sea); vertical-align: 1px; }
.pl-go.tight { background: #f8e2d8; color: #6b2412; }
.pl-go.tight::before { background: var(--tile); }

/* Tight connections and rain, under the day */
.pl-tips { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pl-clashes + .pl-tips { margin-top: 6px; }
.pl-tips li { padding: 10px 13px; border-radius: 12px; font-size: .88rem; line-height: 1.4; }
.pl-tips .tight { background: #fff1d6; color: #5c3a06; }
.pl-tips .rain { background: #e1ecf1; color: var(--sea-deep); }
.pl-tips .pl-name { display: inline; font-size: inherit; color: inherit; text-decoration: underline; }
.pl-tips .pl-link { padding: 2px 4px; color: inherit; }

/* Plan it for me: three questions as tap-to-pick chips, then Swap on each item */
.pl-ask fieldset { margin: 14px 0 0; padding: 0; border: 0; }
.pl-ask legend { padding: 0; margin-bottom: 8px; font: 600 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.pl-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-opts label { position: relative; cursor: pointer; }
.pl-opts input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pl-opts span { display: inline-block; padding: .55em .95em; border-radius: 999px; border: 1.5px solid rgba(24, 34, 46, .2); background: #fffaf2; color: var(--ink); font: 600 .86rem/1.1 var(--sans); }
.pl-opts input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pl-opts input:focus-visible + span { outline: 2.5px solid var(--tile); outline-offset: 2px; }
.pl-ask-msg { margin-top: 12px !important; font-weight: 600; color: #6b2412; }
.pl-ask .pl-note-b { margin-top: 16px; }
.pl-swap { position: absolute; top: 5px; right: 5px; padding: 4px 9px; border: 1.5px solid var(--line); border-radius: 999px; background: #fffaf2; color: var(--ink); font: 600 .72rem/1 var(--sans); cursor: pointer; }
.pl-swap:hover { border-color: var(--ink-3); }
.pl-blk:has(.pl-swap) { padding-right: 62px; }
.pl-pill .pl-swap, .pl-any .pl-swap, .pl-stack .pl-swap { position: static; flex: none; }
.pl-any li .pl-swap { grid-column: 2; grid-row: 1 / span 2; }
.pl-stack li:has(.pl-swap) { grid-template-columns: 58px 1fr auto; }

/* The story image: a button under the plan, a preview in the note */
.pl-story { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 20px 0; padding: 14px 16px; border-radius: 16px; background: #fffaf2; box-shadow: var(--shadow-1); }
.pl-story[hidden] { display: none; }
.pl-story .btn { padding: .6em 1.05em; font-size: .88rem; color: var(--ink); }
.pl-story span { flex: 1 1 14em; font-size: .84rem; color: var(--ink-2); }
.pl-ticket { margin: 0; display: grid; place-items: center; }
.pl-ticket img { display: block; width: auto; max-width: 100%; max-height: 62vh; border-radius: 14px; box-shadow: 0 14px 34px -14px rgba(24, 34, 46, .5); }
.pl-note .btn-ghost { color: var(--ink); }

/* Timeline or map */
.pl-views { display: flex; gap: 4px; margin: 12px 20px 0; padding: 4px; border-radius: 999px; background: var(--paper-2); width: max-content; }
.pl-views[hidden] { display: none; }
.pl-views button { padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 .84rem/1 var(--sans); cursor: pointer; }
.pl-views button[aria-pressed="true"] { background: #fffaf2; color: var(--ink); box-shadow: 0 1px 3px rgba(24, 34, 46, .18); }
.pl-views button:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; }
.pl-map { height: min(52vh, 360px); border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.pl-pin { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; background: var(--tc); color: #fff8ee;
  font: 700 .82rem/1 var(--sans); border: 2.5px solid #fffaf2; box-shadow: 0 4px 10px -3px rgba(24, 34, 46, .55); }
.pl-map-note { margin: 8px 2px 4px; }
.pl-stops { list-style: none; margin: 10px 0 0; padding: 0; }
.pl-stops li { display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.pl-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tc); color: #fff8ee; font: 700 .8rem/1 var(--sans); }
.pl-n.off { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pl-leg { margin-top: 4px; font-size: .78rem; color: var(--sea-deep); font-weight: 600; }
.pl-route { margin-top: 12px; padding: .65em 1.1em; font-size: .9rem; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .pl-panel, .pl-toast { transition: none; }
  .pl-tray-btn, .pl-blk, .pl-idea, .pl-tray.bump .pl-tray-btn { animation: none; }
}

/* Say It Like a Local (/say-it/). .fine-print and .cta-short come from weekend.css */
.si-sec { padding-top: 10px; }
.si-h { margin: 10px 0 16px; font: 600 1.5rem/1.1 var(--serif); }
.si-h:not(:first-child) { margin-top: 46px; }
.si-note { margin: -6px 0 18px; max-width: 46em; color: var(--ink-2); font-size: .98rem; }
.si-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.si-card { display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 18px; border-radius: 20px; background: #fffaf2; box-shadow: var(--shadow-1); }
.si-card.is-local { box-shadow: none; border: 1.5px solid var(--line); }
.si-card p { margin: 0; }
.si-name { font: 600 1.05rem/1.2 var(--sans); color: var(--ink-3); letter-spacing: .01em; }
.si-say { font: 600 clamp(1.6rem, 3vw, 1.95rem)/1.1 var(--serif); color: var(--tile); letter-spacing: -.01em; overflow-wrap: anywhere; }
.si-not { font-size: .92rem; color: var(--ink-3); }
.si-not span { font: 600 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); margin-right: 4px; vertical-align: 2px; }
.si-why { color: var(--ink-2); font-size: .98rem; flex: 1; }
.si-src { margin-top: 6px !important; font-size: .8rem; color: var(--ink-3); }
.si-src a { color: var(--sea); }
.si-badge { font: 600 .68rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); margin-right: 4px; }
.si-badge.is-src { background: #dcebdc; color: #2f5b33; }
.si-sec .fine-print { margin-top: 34px; }
@media (max-width: 560px) { .si-grid { grid-template-columns: 1fr; gap: 12px; } .si-card { padding: 18px 18px 16px; } }

/* Street Name Decoder (/streets/). .fine-print and .cta-short come from weekend.css */
.sd-sec { padding-top: 10px; }
.sd-mapwrap { position: relative; margin-bottom: 26px; }
.sd-map { height: clamp(360px, 56vh, 560px); border-radius: 22px; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-1); scroll-margin-top: 96px; }
.sd-card { position: relative; margin-top: 14px; padding: 20px 22px 18px; border-radius: 18px; background: #fffaf2; border: 1.5px solid var(--sea); box-shadow: var(--shadow-1); }
.sd-card .sd-c-area { margin: 0 0 4px; font: 600 .78rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sd-card .sd-c-name { margin: 0 0 8px; font: 600 1.6rem/1.1 var(--serif); }
.sd-card .sd-story { font-size: 1.08rem; color: var(--ink); }
.sd-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--paper-2); color: var(--ink); font: 500 1.4rem/1 var(--sans); cursor: pointer; }
.sd-x:hover { background: var(--paper-3); }

.sd-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 8px; }
.sd-q { flex: 1 1 280px; max-width: 460px; border-radius: 999px; padding: .85em 1.2em; }
.sd-count { margin: 0; color: var(--ink-3); font-size: .95rem; }
.sd-h { margin: 34px 0 14px; font: 600 1.5rem/1.1 var(--serif); }
.sd-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sd-item { padding: 16px 18px 14px; border-radius: 18px; background: #fffaf2; border: 1.5px solid var(--line); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); scroll-margin-top: 100px; }
.sd-item.is-on { border-color: var(--sea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 22%, transparent); }
.sd-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.sd-pick:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; border-radius: 8px; }
.sd-name { font: 600 1.25rem/1.15 var(--serif); color: var(--ink); }
.sd-pick:hover .sd-name { color: var(--tile); }
.sd-area { font: 600 .76rem/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.sd-tag { color: var(--tile-deep); }
.sd-story { margin: 10px 0 0; color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.sd-dispute { margin: 8px 0 0; font-size: .92rem; color: var(--ink-2); padding-left: 12px; border-left: 3px solid var(--sun); }
.sd-src { margin: 8px 0 0; font-size: .82rem; color: var(--ink-3); }
.sd-src a { color: var(--sea); }
.sd-none { margin: 20px 0; color: var(--ink-2); }
.sd-sec .fine-print { margin-top: 34px; }
@media (max-width: 560px) {
  .sd-list { grid-template-columns: 1fr; }
  .sd-card { padding: 18px 18px 16px; }
}

/* Sunset Score page (badge styles .ds-score live in weekend.css) */
.sun-list { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1.5px solid var(--ink); }
.sn { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); }
.sn .ds-score { width: 60px; height: 60px; font-size: 1.55rem; }
.sn-day { margin: 2px 0 6px; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.sn-date { font: 500 italic .62em/1 var(--serif); color: var(--tile); margin-left: 8px; }
.sn-text, .sn-spot { margin: 0; color: var(--ink-2); max-width: 46em; }
.sn-text b, .sn-spot b { color: var(--ink); font-weight: 600; }
.sn-spot { margin-top: 6px; font-size: .95rem; }
.sn-hh { margin: 6px 0 0; font-size: .95rem; color: var(--ink-2); max-width: 46em; }
.sn-hh a { color: var(--ink); font-weight: 600; }
.sn-conf { font: 600 .74rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: .55em .8em; border-radius: 999px; border: 1.5px solid var(--line); color: var(--ink-2); white-space: nowrap; margin-top: 6px; }
.conf-good { border-color: var(--sea); color: var(--sea); }
.conf-rough { border-style: dashed; }
@media (max-width: 600px) {
  .sn { grid-template-columns: auto 1fr; gap: 14px; }
  .sn-conf { grid-column: 2; justify-self: start; margin-top: 0; }
  .sn .ds-score { width: 50px; height: 50px; font-size: 1.3rem; }
}
.sn-beach { margin: 6px 0 0; font-size: .95rem; color: var(--ink-2); }
.sn-tide { color: var(--sea); font-weight: 600; }
.sn-adv { color: var(--tile); font-weight: 600; }
.beach-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 30px; margin: 0 0 26px; padding: 18px 22px; border-radius: 16px; background: #fffaf2; border: 1.5px solid var(--line); }
.beach-strip p { margin: 0; display: flex; gap: 14px; align-items: center; color: var(--ink-2); }
.beach-strip b { color: var(--ink); font-weight: 600; }
.bs-temp { font: 500 italic 2.2rem/1 var(--serif); color: var(--sea); }
.bs-temp small { font-size: .5em; }
.bs-links { font-size: .9rem; flex-wrap: wrap; }
.bs-links a { color: var(--tile); font-weight: 600; }
/* Calendars page */
.cal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cal-card { padding: 26px; border-radius: 18px; background: #fffaf2; border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.cal-card h2 { margin: 0; }
.cal-card p { margin: 0; color: var(--ink-2); }
.cal-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.cal-url { font-size: .82rem; }
.cal-url code { word-break: break-all; font-size: .95em; }
@media (max-width: 900px) { .cal-grid { grid-template-columns: 1fr; } }
.bs-pool { font-size: .95rem; }
.bs-adv { font-size: .95rem; color: var(--tile); font-weight: 600; }
.cal-url code { display: block; margin-top: 2px; }
.bs-links { column-gap: 22px; row-gap: 6px; }
.beach-strip[hidden], .sun-list[hidden], .stale-note[hidden] { display: none; }
.sn-king { color: var(--sea); font-weight: 600; }

/* 1928 Then & Now (/then-now/, built only with SB_THEN_NOW=1). .fine-print comes from weekend.css */
.tn-sec { padding-top: 10px; }
.tn-spots { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.tn-spot { font: 600 .92rem/1 var(--sans); padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fffdf8; color: var(--ink); cursor: pointer; }
.tn-spot:hover { border-color: var(--ink-3); }
.tn-spot:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.tn-wrap { position: relative; height: clamp(380px, 64vh, 640px); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-1); background: var(--paper-3); }
.tn-wrap .tn-map { position: absolute; inset: 0; } /* beats maplibre-gl.css .maplibregl-map { position: relative } */
.tn-then { clip-path: inset(0 50% 0 0); }
.tn-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 3; cursor: ew-resize; touch-action: none; }
.tn-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fffaf2; box-shadow: 0 0 0 1px rgba(24, 34, 46, .25); }
.tn-line::after { content: ""; position: absolute; top: 50%; left: -20px; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: #fffaf2; box-shadow: var(--shadow-1);
  background-image: linear-gradient(90deg, transparent 11px, var(--ink-3) 11px, var(--ink-3) 13px, transparent 13px, transparent 27px, var(--ink-3) 27px, var(--ink-3) 29px, transparent 29px); }
.tn-line span { position: absolute; top: 12px; font: 600 .78rem/1 var(--sans); letter-spacing: .08em; padding: 6px 9px; border-radius: 999px; background: rgba(24, 34, 46, .72); color: #fffaf2; white-space: nowrap; pointer-events: none; }
.tn-line span:first-child { right: 12px; }
.tn-line span:last-child { left: 12px; }
.tn-slide { display: flex; align-items: center; gap: 12px; margin: 14px auto 0; max-width: 560px; font: 600 .9rem/1 var(--sans); color: var(--ink-2); }
.tn-slide input { flex: 1; accent-color: var(--sea); }
.tn-sec .fine-print { margin-top: 22px; }

/* Trail check (/trails/ and /trails/<slug>/) */

/* Hero + skyline: the real front range, every hike placed where it tops out */
.tr-hero { padding-bottom: 0; overflow: hidden; }
.tr-hero h1 { max-width: 12ch; }
.tr-hero-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.sk { position: relative; margin-top: clamp(18px, 4vw, 40px); height: clamp(170px, 25vw, 340px); }
.sk-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sk-peak { position: absolute; transform: translate(-50%, calc(-100% - 10px)); font: 600 .72rem/1.15 var(--sans); letter-spacing: .02em; color: var(--ink-2); text-align: center; white-space: nowrap; pointer-events: none; }
.sk-peak.sk-l { transform: translate(-12px, calc(-100% - 10px)); text-align: left; } .sk-peak.sk-r { transform: translate(calc(-100% + 12px), calc(-100% - 10px)); text-align: right; }
.sk-peak.sk-l::after { left: 12px; } .sk-peak.sk-r::after { left: auto; right: 12px; }
.sk-dot.sk-l .sk-tip { left: 0; transform: none; } .sk-dot.sk-r .sk-tip { left: auto; right: 0; transform: none; }
.sk-peak b { display: block; font-weight: 500; color: var(--ink-3); font-size: .68rem; }
.sk-peak::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 1px; height: 6px; background: var(--ink-3); opacity: .5; }
.sk-dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.sk-dot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c, #2f7d5b); box-shadow: 0 0 0 2.5px #fff8ee, 0 2px 6px rgba(0, 0, 0, .35); transition: transform .2s var(--ease); }
.sk-dot:hover::before, .sk-dot:focus-visible::before, .sk-dot.hl::before { transform: scale(1.45); }
.sk-open, .sk-route_open { --c: #2f7d5b; } .sk-partly_closed { --c: #c47a1c; } .sk-closed { --c: #b9472a; } .sk-no_closure_known { --c: #5f6b76; } .sk-unknown { --c: #8a8f96; }
.sk-tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 5px 9px; border-radius: 8px; background: var(--ink); color: var(--paper);
  font: 600 .78rem/1.2 var(--sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.sk-dot:hover .sk-tip, .sk-dot:focus-visible .sk-tip, .sk-dot.hl .sk-tip { opacity: 1; }
.sk-end { position: absolute; bottom: 4px; font: 600 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 248, 238, .78); }
.sk-w { left: 12px; } .sk-e { right: 12px; }
@media (max-width: 700px) { .sk-peak { font-size: .62rem; } .sk-peak b { display: none; } .sk-peak:nth-of-type(2), .sk-peak:nth-of-type(4), .sk-peak:nth-of-type(5) { display: none; } .sk-end { top: 6px; bottom: auto; color: var(--ink-3); } .sk-dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; } .sk-dot::before { width: 9px; height: 9px; } }

/* Today */
.tr-today { background: var(--sea-deep); color: #f3ece0; padding: 34px 0 30px; }
.td-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; }
.td-head h2 { color: #fff8ee; }
.td-when { margin: 0; font-size: .88rem; color: rgba(243, 236, 224, .72); }
.td-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
@media (max-width: 600px) { .td-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .td-closed { grid-column: 1 / -1; } .td-tile { padding: 14px; } .td-big { font-size: 1.6rem; } }
.td-tile { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.td-k { margin: 0 0 6px; font: 600 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--seaglass); }
.td-big { margin: 0; font: 600 2rem/1.05 var(--serif); color: #fff8ee; letter-spacing: -.01em; }
.td-big small { font: 500 .9rem var(--sans); color: rgba(243, 236, 224, .75); }
.td-s { margin: 8px 0 0; font-size: .86rem; line-height: 1.45; color: rgba(243, 236, 224, .8); }
.td-s a { color: var(--sun-2); font-weight: 600; }
.td-gauge { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 10px; }
.td-gauge span { height: 7px; border-radius: 4px; opacity: .3; }
.td-gauge .on { opacity: 1; box-shadow: 0 0 0 2px #fff8ee; }
.td-gauge .g0 { background: #5aa469; } .td-gauge .g1 { background: #4f8fc0; } .td-gauge .g2 { background: #e3c13b; } .td-gauge .g3 { background: #e48a2a; } .td-gauge .g4 { background: #d8452f; }
.td-alerts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.td-alerts li { padding: 10px 14px; border-radius: 12px; background: rgba(239, 161, 58, .16); font-size: .9rem; }

/* Finder */
.tr-explore { padding: 34px 0 0; }
.tr-finder { display: grid; gap: 10px; margin-bottom: 22px; }
.tf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tf-row button { font: 600 .86rem/1 var(--sans); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tf-row button:hover { border-color: var(--ink-3); }
.tf-row button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tf-sort button[aria-pressed="true"] { background: var(--sea); border-color: var(--sea); }
.tf-k { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }
.tf-countrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 40px; margin-top: 2px; }
.tf-count { margin: 0; font-size: .9rem; color: var(--ink-3); }
.tf-count:focus { outline: none; }
.tf-hint { margin: 0; font-size: .84rem; color: var(--ink-3); }
/* list narrowed to the map view: the way back */
.tf-areaall { font: 600 .86rem/1 var(--sans); min-height: 40px; padding: .6em 1.05em; border-radius: 999px; border: 1.5px solid var(--sea); background: #fff; color: var(--sea); cursor: pointer; transition: background .15s, color .15s; }
.tf-areaall:hover { background: var(--sea); color: #fff; }
.tf-count b { color: var(--ink); }

/* List + map */
.tr-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.tr-mapcol { order: -1; }
@media (min-width: 1000px) {
  .tr-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .tr-mapcol { order: 0; position: sticky; top: 92px; }
  .tr-mapcol .tr-map { height: calc(100vh - 120px); max-height: 820px; }
}
.tr-map-wrap { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-2); background: var(--paper-2); }
.tr-map { height: min(52vh, 460px); min-height: 320px; }
.tr-cap { position: absolute; left: 12px; bottom: 12px; right: 56px; margin: 0; max-width: 30em; padding: 10px 14px; border-radius: 12px;
  background: rgba(250, 244, 234, .95); color: var(--ink); font-size: .9rem; pointer-events: none; box-shadow: var(--shadow-1); }
.tr-cap:empty { display: none; }
.tr-cap a { pointer-events: auto; color: var(--tile); font-weight: 600; }
.tr-legend { position: absolute; left: 12px; top: 12px; margin: 0; padding: 8px 12px; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; border-radius: 12px;
  background: rgba(250, 244, 234, .92); font-size: .74rem; color: var(--ink-2); box-shadow: var(--shadow-1); max-width: calc(100% - 70px); }
.tr-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.lg-open { background: #2f7d5b; } .lg-part { background: #c47a1c; } .lg-closed { background: #b9472a; } .lg-known { background: #5f6b76; }

.tr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tr-card { position: relative; display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-1); transition: box-shadow .2s, transform .2s var(--ease); }
.tr-card:hover, .tr-card.hl { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.tr-card.hl { box-shadow: var(--shadow-2), inset 3px 0 0 var(--sun); }
.tr-card[hidden] { display: none; }
.tr-card h3 { margin: 0; font-size: 1.32rem; }
.tr-link { color: inherit; text-decoration: none; }
.tr-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tr-link:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tr-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tr-town { font: 600 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tr-chip { display: inline-block; font: 700 .74rem/1 var(--sans); letter-spacing: .03em; padding: 7px 11px; border-radius: 999px; color: #fff; white-space: nowrap; }
.tr-closed { background: #b9472a; } .tr-part { background: #9a5a0e; } .tr-open { background: #2f7d5b; } .tr-known { background: #5f6b76; } .tr-unk { background: #737980; }
.tr-dest { margin: 0; font-size: .95rem; color: var(--ink-2); }
.ef { font-weight: 600; }
.ef-easy { color: #2f7d5b; } .ef-moderate { color: #1d5a6e; } .ef-hard { color: #9a5a0e; } .ef-very-hard { color: #a23c22; }
.tr-mid { display: grid; gap: 8px; align-items: end; }
@media (min-width: 560px) { .tr-mid { grid-template-columns: auto minmax(0, 1fr); gap: 22px; } .tr-mid .tr-stats { flex-direction: column; gap: 8px; } }
.tr-spark { width: 100%; height: 84px; display: block; }
.sp-fill { fill: color-mix(in srgb, var(--tile-2) 22%, transparent); }
.sp-line { fill: none; stroke: var(--tile); stroke-width: 2; stroke-linejoin: round; }
.tr-web path { fill: none; stroke: var(--sea); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.tr-stats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.tr-stats div { display: grid; }
.tr-stats dt { font: 600 .66rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tr-stats dd { margin: 0; font: 600 1.12rem/1.25 var(--serif); color: var(--ink); }
.tr-order { margin: 0; font-size: .9rem; color: var(--ink-2); }
.tr-order a { color: var(--tile); font-weight: 600; position: relative; z-index: 1; }
.tr-cond { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.tr-cond li { padding: 7px 11px; border-radius: 10px; background: var(--paper); color: var(--ink); }
.tr-cond .tc-red_flag, .tr-cond .tc-flood, .tr-cond .tc-coastal_flood { background: #f8e1d9; }
.tr-cond .tc-hot, .tr-cond .tc-heat_alert { background: #fbeccf; }
.tr-cond .tc-rain { background: #e3eef1; }
.tr-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tr-tags span { font-size: .76rem; padding: 4px 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.tr-acts { display: flex; gap: 8px; margin-top: 2px; }
.tr-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; font: 600 .84rem/1 var(--sans); padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--sea); cursor: pointer; text-decoration: none; }
.tr-btn:hover { border-color: var(--sea); }
.tr-none { color: var(--ink-3); padding: 10px 0; }

.tr-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 56px 0 20px; }
.tr-how p { color: var(--ink-2); }
@media (max-width: 860px) { .tr-how { grid-template-columns: 1fr; gap: 10px; } }

/* One hike */
.hk-hero { padding-bottom: 26px; }
.hk-hero h1 { max-width: 16ch; font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
.hk-crumb { margin: 0; font: 600 .78rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.hk-crumb a { color: var(--tile); text-decoration: none; }
.hk-status { display: flex; gap: 14px; align-items: flex-start; margin: 6px 0 0; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-1); max-width: 46em; }
.hk-status > div { display: grid; gap: 8px; }
.hk-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hk-body { padding: 10px 0 70px; }
.hk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; margin: 0 0 26px; border-radius: 18px; overflow: hidden; background: var(--line); box-shadow: var(--shadow-1); }
.hk-stats div { background: #fff; padding: 16px 18px; }
.hk-stats dt { font: 600 .68rem/1.2 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.hk-stats dd { margin: 4px 0 0; font: 600 1.6rem/1.1 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.hk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 1000px) { .hk-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.hk-main { display: grid; gap: 18px; align-content: start; }
.hk-prof { margin: 0; padding: 18px 18px 12px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-1); }
.pf-plot { position: relative; height: clamp(190px, 26vw, 300px); }
.pf-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; overflow: visible; }
.hk-prof .gr { stroke: var(--line); stroke-width: 1; }
.hk-prof .pl { fill: none; stroke: var(--tile); stroke-width: 3; stroke-linejoin: round; }
.hk-prof .cl { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.hk-prof .hit { cursor: crosshair; }
.pf-y { position: absolute; left: 0; transform: translateY(-115%); font: 500 .74rem/1 var(--sans); color: var(--ink-3); pointer-events: none; }
.pf-lb { position: absolute; transform: translateY(calc(-100% - 8px)); font: 600 .82rem/1 var(--sans); color: var(--ink); pointer-events: none;
  padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, .9); }
.pf-start { left: 0; } .pf-end { right: 0; }
.pf-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 2px var(--ink); pointer-events: none; }
.pf-x { position: relative; height: 22px; margin-top: 6px; font: 500 .74rem/1 var(--sans); color: var(--ink-3); }
.pf-x span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.pf-x span:first-child { transform: none; } .pf-x span:last-child { transform: translateX(-100%); }
.hk-prof figcaption { padding: 4px 0 0; font-size: .86rem; color: var(--ink-3); min-height: 1.6em; }
.hk-prof figcaption b { color: var(--ink); }
.hk-map { height: min(58vh, 520px); }
.hk-side { display: grid; gap: 20px; align-content: start; }
.hk-notes, .hk-near { padding: 20px 22px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-1); }
.hk-notes h2, .hk-near h2 { margin-bottom: 10px; }
.hk-notes ul { margin: 0; padding: 0 0 0 1.1em; display: grid; gap: 9px; font-size: .95rem; color: var(--ink); }
.hk-notes .src { font-size: .78rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.hk-gen { background: var(--paper-2); box-shadow: none; }
.hk-gen .src { color: var(--ink-2); }
.hk-near ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hk-near a { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--paper); color: inherit; text-decoration: none; transition: background .15s; }
.hk-near a:hover { background: var(--paper-2); }
.hk-near .tr-chip { justify-self: start; }
.hk-near b { font: 600 1.05rem/1.2 var(--serif); }
.hk-near small { font-size: .82rem; color: var(--ink-2); }
.hk-back { margin: 18px 0 0; }
.hk-back a { color: var(--tile); font-weight: 600; text-decoration: none; }
.hk-flag { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #fff8ee, 0 2px 8px rgba(0, 0, 0, .4); }
.hk-me { width: 16px; height: 16px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 3px var(--ink), 0 2px 8px rgba(0, 0, 0, .4); }

/* Every Way to the Water (/water/). .bfaq comes from beaches.css, .fine-print and .cta-short from weekend.css */
.wa-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.wa-sel { position: relative; display: inline-flex; align-items: center; flex: 1 1 100%; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink); font: 600 .92rem/1 var(--sans); }
.wa-sel span { padding-left: 1em; color: var(--ink-3); font-weight: 500; }
.wa-sel select { flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: inherit; padding: .78em 2.3em .78em .45em; border-radius: 999px; cursor: pointer; min-height: 44px; }
.wa-sel select:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; }
.wa-sel::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); pointer-events: none; }
.wa-sel:hover { border-color: var(--ink-3); }
.wa-tog { font: 600 .9rem/1 var(--sans); min-height: 44px; padding: .7em 1.05em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.wa-tog small { font-weight: 500; color: var(--ink-3); margin-left: 3px; }
.wa-tog:hover { border-color: var(--ink-3); color: var(--ink); }
.wa-tog:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; }
.wa-tog[aria-pressed="true"] { background: var(--sea); border-color: var(--sea); color: #fff; }
.wa-tog[aria-pressed="true"] small { color: rgba(255, 255, 255, .78); }
.wa-hint { margin: 0 0 18px; font-size: .88rem; color: var(--ink-3); max-width: 60em; }
@media (min-width: 760px) { .wa-sel { flex: 0 1 300px; } }

.wa-mapwrap { margin: 0 0 18px; }
.wa-map { height: 340px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-1); background: #a9cfd5; }
@media (min-width: 900px) { .wa-map { height: 440px; } }
.wa-key { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 .86rem var(--sans); color: var(--ink-2); }
.wa-key li::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; vertical-align: -1px; }
.wa-key .k-sand::before { background: #1d5a6e; }
.wa-key .k-other::before { background: #c98a1d; }
.wa-pop-n { margin: 0 0 3px; font: 600 1rem/1.25 var(--sans); color: var(--ink); }
.wa-pop-t { margin: 0 0 8px; font-size: .85rem; color: var(--ink-3); }
.wa-pop-l { font: 600 .88rem var(--sans); color: var(--sea); }

.wa-count { margin: 4px 0 18px; font: 500 1rem var(--sans); color: var(--ink-3); }
.wa-count:focus { outline: none; }
.wa-town { margin: 0 0 30px; }
.wa-town[hidden] { display: none; }
.wa-town h2 { margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
.wa-tn { font: 600 .82rem/1 var(--sans); color: var(--ink-2); background: var(--paper-2); padding: 5px 9px; border-radius: 999px; }
.wa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.wa-card { padding: 18px 20px; border-radius: var(--radius); background: #fffaf2; border: 1.5px solid var(--line); scroll-margin-top: 90px; }
.wa-card[hidden] { display: none; }
.wa-card:target { border-color: var(--sea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 20%, transparent); }
.wa-card h3 { margin: 0 0 6px; font: 500 1.22rem/1.25 var(--serif); color: var(--ink); }
.wa-card p { margin: 0 0 8px; color: var(--ink-2); font-size: .95rem; }
.wa-where b { color: var(--ink); font-weight: 600; }
.wa-chips { list-style: none; margin: 10px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wa-chips:empty { display: none; }
.wa-chips li { font: 600 .76rem/1 var(--sans); letter-spacing: .02em; padding: 6px 9px; border-radius: 999px; background: #dcebdc; color: #2f5b33; }
.wa-chips .wa-n { background: var(--paper-2); color: var(--ink-2); }
.wa-chips .wa-fee { background: #fde9c7; color: #8a5300; }
.wa-card .wa-note { font-size: .86rem; color: var(--ink-3); }
.wa-links { margin: 10px 0 0 !important; font-size: .9rem; }
.wa-links a, .wa-onmap { color: var(--sea); font: 600 .9rem var(--sans); }
.wa-onmap { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wa-onmap:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; border-radius: 4px; }
.wa-empty { margin: 14px 0 0; color: var(--ink-3); font: 500 italic 1.05rem var(--serif); }
.wa-faq { margin-top: 30px; }
.wa-chips .wa-k { background: #f3e6cf; color: #6b4a12; }
.wa-chips .wa-ks { background: #d6e8ec; color: #164b5c; }
.wa-card .wa-closed { padding: 8px 11px; border-radius: 10px; background: #fde9c7; color: #6b3f00; font-size: .9rem; }
.wa-closed b { color: inherit; }
.wa-links .eat-fix { font-size: .9rem; padding: 0; min-height: 0; vertical-align: baseline; }

/* Text wrapping polish */
p, li, blockquote { text-wrap: pretty; }
h1, h2, h3, .lede { text-wrap: balance; }
.sub-msg:empty { display: none; }
.tag-star { background: var(--sun) !important; color: var(--ink); backdrop-filter: none; }
.pick.star { box-shadow: 0 0 0 2px var(--sun), var(--shadow-1); }
@media (max-width: 560px) { .hide-sm { display: none; } }

/* This Weekend page */
.wk-hero { padding: 150px 0 60px; position: relative; overflow: hidden;
  background: radial-gradient(90% 70% at 85% 0%, rgba(239, 161, 58, .22), transparent 60%), radial-gradient(70% 60% at 0% 10%, rgba(185, 71, 42, .10), transparent 60%), var(--paper); }
.wk-hero h1 { font-size: clamp(3.4rem, 10vw, 8.6rem); margin: 18px 0 26px; }
.wk-intro { display: grid; gap: 14px; max-width: 46em; }
.wk-intro .lede { margin: 0; color: var(--ink); font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.mypick { margin: 0; color: var(--ink-2); }
.mypick .kicker { color: var(--tile); margin-right: 6px; }
.mypick a { font-weight: 600; color: var(--ink); }
.tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.ticket { --tc: var(--sea); position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "day day" "num n"; column-gap: 18px; row-gap: 4px; align-items: end;
  padding: 22px 26px; border-radius: 16px; background: var(--tc); color: #fff8ee; text-decoration: none; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow: 0 10px 30px -16px var(--tc); }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--paper); }
.ticket::before { left: -11px; } .ticket::after { right: -11px; }
.ticket:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 20px 40px -18px var(--tc); }
.t-sea { --tc: var(--sea); } .t-tile { --tc: var(--tile); } .t-sun { --tc: #d98a22; color: var(--ink); }
.t-sun .tk-n { border-left-color: rgba(24, 34, 46, .35); }
.t-dusk { --tc: var(--dusk); }
.tickets.n4 { grid-template-columns: repeat(4, 1fr); }
.tk-flag { display: block; margin-top: 5px; font-size: .76rem; font-weight: 600; }
.tk-day { grid-area: day; font: 600 .78rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.tk-num { grid-area: num; font: 500 italic clamp(3.6rem, 6vw, 5.4rem)/.9 var(--serif); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.tk-n { grid-area: n; font-size: .88rem; font-weight: 500; border-left: 1.5px dashed rgba(255, 255, 255, .45); padding-left: 16px; padding-bottom: 6px; }
@media (max-width: 680px) {
  .tickets { gap: 10px; }
  .ticket { padding: 16px 14px; display: flex; flex-direction: column; align-items: flex-start; }
  .tk-num { margin-top: 6px; font-size: 3rem; }
  .tk-n { border: 0; padding: 0; margin-top: 8px; font-size: .74rem; }
  .tk-flag { font-size: .68rem; }
  .tickets.n4 { grid-template-columns: repeat(2, 1fr); }
}

.filterbar { position: sticky; top: 76px; z-index: 20; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.chips { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; align-items: center; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; font: 600 .9rem/1 var(--sans); padding: .72em 1.1em; border-radius: 999px; border: 1.5px solid var(--line); background: #fffaf2; color: var(--ink-2); cursor: pointer; transition: all .2s; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip-count { margin-left: auto; flex: none; font-size: .86rem; color: var(--ink-3); padding-left: 12px; }
.chip.tog[aria-pressed="true"], .chip.sel.on { background: var(--sea); border-color: var(--sea); color: #fff; }
.chip.sel { position: relative; display: inline-flex; align-items: center; padding: 0; }
.chip.sel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; color: inherit; padding: .72em 2.2em .72em 1.1em; border-radius: 999px; cursor: pointer; field-sizing: content; }
.chip.sel select:focus-visible { outline: 2.5px solid var(--tile); outline-offset: 2px; }
.chip.sel option { color: var(--ink); background: #fffaf2; }
.chip.sel::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); pointer-events: none; }
.chip-sep { flex: none; width: 1px; height: 26px; margin: 0 4px; background: var(--line); }

/* Weekend switch and the planner's start line */
.wk-switch { display: inline-flex; gap: 4px; padding: 4px; margin: -8px 0 24px; border-radius: 999px; background: var(--paper-2); }
.wk-switch a { padding: 10px 17px; border-radius: 999px; font: 600 .92rem/1 var(--sans); color: var(--ink-2); text-decoration: none; transition: background .2s, color .2s; }
.wk-switch a:hover { color: var(--ink); }
.wk-switch a small { margin-left: 4px; font-weight: 500; font-size: .84rem; color: var(--ink-2); }
.wk-switch a[aria-current] { background: var(--ink); color: var(--paper); }
.wk-switch a[aria-current] small { color: rgba(250, 244, 234, .7); }
@media (max-width: 560px) { .wk-switch small { display: none; } }
.pl-start { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 28px; }
.pl-start p { margin: 0; max-width: 36em; color: var(--ink-2); font-size: .98rem; }
.day-flags { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 18px; }
.day-flags span { padding: 7px 12px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font: 600 .82rem/1 var(--sans); }

.wk-body { padding: 30px 0 100px; }
.day-sec { padding-top: 70px; scroll-margin-top: 140px; }
.day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 1.5px solid var(--ink); padding-bottom: 14px; margin-bottom: 30px; }
.day-head h2 { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.day-head .dn { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.day-head .dd { font: 500 italic clamp(1.3rem, 2.4vw, 2rem)/1 var(--serif); color: var(--tile); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; }
.day-count { font-size: .9rem; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.day-picks { margin-bottom: 44px; }
.more-h { font: 600 .8rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.evlist { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 112px minmax(0, 1.3fr) minmax(0, 1fr) auto 40px; gap: 18px; align-items: baseline; padding: 15px 10px; border-bottom: 1px solid var(--line); border-radius: 8px; transition: background .2s; }
.ev:hover { background: #fffaf2; }
.ev-time { font: 600 .92rem/1.3 var(--sans); color: var(--tile); font-variant-numeric: tabular-nums; }
.ev-title { font: 600 1.06rem/1.35 var(--sans); text-decoration: none; color: var(--ink); }
.ev-title svg { display: inline; vertical-align: -1px; margin-left: 6px; opacity: 0; transition: opacity .2s; }
.ev:hover .ev-title svg, .ev-title:focus-visible svg { opacity: .6; }
.ev-where { font-size: .92rem; color: var(--ink-3); }
.ev-tags { display: flex; gap: 5px; justify-content: flex-end; }
.ev-tags .badge:last-child { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); }
.ev .pl-add { align-self: center; }
@media (max-width: 860px) {
  .ev { grid-template-columns: 82px 1fr 40px; row-gap: 4px; column-gap: 14px; }
  .ev-where, .ev-tags { grid-column: 2; }
  .ev .pl-add { grid-column: 3; grid-row: 1 / span 3; }
  .ev-tags { justify-content: flex-start; }
  .ev-tags .badge:last-child { display: none; }
}
.ongoing { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ongoing a { display: grid; gap: 6px; padding: 18px 20px; border-radius: 14px; background: #fffaf2; text-decoration: none; box-shadow: var(--shadow-1); height: 100%; transition: transform .3s var(--ease); }
.ongoing a:hover { transform: translateY(-3px); }
.ongoing li { position: relative; }
.ongoing li a { padding-right: 66px; }
.ongoing li .pl-add { position: absolute; right: 14px; top: 50%; margin-top: -20px; }
.ongoing b { font: 600 1.08rem/1.3 var(--serif); font-variation-settings: "opsz" 24; }
.ongoing span { font-size: .88rem; color: var(--ink-3); }
.is-hidden { display: none !important; }
.ticket.past { opacity: .4; pointer-events: none; }
.empty-note { text-align: center; font: 500 italic 1.4rem var(--serif); color: var(--ink-3); padding: 60px 0; }
.fine-print { margin-top: 70px; font-size: .88rem; color: var(--ink-3); max-width: 46em; }
.cta-short { padding: clamp(90px, 11vw, 140px) 0; }

.stamp { position: absolute; right: max(30px, calc((100vw - var(--wrap)) / 2 + 10px)); top: 128px; width: 210px; height: 210px; pointer-events: none; }
.stamp svg { width: 100%; height: 100%; animation: spin 40s linear infinite; }
.stamp text { font: 600 13.5px var(--sans); letter-spacing: 3px; fill: var(--tile); }
.stamp-sun { position: absolute; inset: 58px; border-radius: 50%; background: radial-gradient(circle at 50% 62%, var(--sun-2) 0 48%, transparent 49%),
  repeating-linear-gradient(180deg, transparent 0 9px, var(--tile) 9px 12px) bottom / 100% 42% no-repeat, var(--paper-2); box-shadow: inset 0 0 0 2px var(--tile); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .stamp { width: 120px; height: 120px; top: 96px; right: 18px; } .stamp-sun { inset: 33px; } }
@media (max-width: 600px) { .stamp { display: none; } }

/* Sunset Score line under each day heading */
.day-sun { display: flex; gap: 14px; align-items: center; margin: -6px 0 22px; color: var(--ink-2); font-size: .95rem; max-width: 52em; }
.ds-score { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 500 italic 1.35rem/1 var(--serif); color: var(--ink);
  background: radial-gradient(circle at 50% 70%, #f7c56f 0 38%, #efa13a 39% 62%, #b9472a 63%); }
.ds-score small { font: 600 .55rem/1 var(--sans); font-style: normal; letter-spacing: .04em; margin-top: -10px; }
.ds-lo { background: radial-gradient(circle at 50% 70%, #e6e1d8 0 45%, #c9c3b8 46%); }
.ds-mid { background: radial-gradient(circle at 50% 70%, #f7d99a 0 45%, #efc06a 46%); }
.ds-text b { color: var(--ink); font-weight: 600; }
.ds-best { color: var(--tile); font-weight: 600; }

/* What Year Is It? (/what-year/). .fine-print and .cta-short come from weekend.css */
.wy-sec { padding-top: 10px; }
.wy-game { max-width: 860px; margin: 0 auto; padding: clamp(18px, 3vw, 30px); border-radius: 22px; background: #fffaf2; box-shadow: var(--shadow-1); scroll-margin-top: 96px; }
.wy-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.wy-top p { margin: 0; }
.wy-round { font: 600 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tile); }
.wy-score { font-size: .98rem; color: var(--ink-2); }
.wy-score b { font: 600 1.5rem/1 var(--serif); color: var(--ink); }
.wy-fig { margin: 0; }
.wy-frame { position: relative; background: #1f1a16; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; max-height: min(52vh, 520px); width: 100%; }
.wy-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wy-place { margin: 8px 0 0; font-size: .9rem; color: var(--ink-3); }
.wy-q { margin: 18px 0 10px; font: 600 1.25rem/1.2 var(--serif); }
.wy-decades { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.wy-dec { font: 600 1rem/1 var(--sans); padding: 14px 6px; border-radius: 999px; border: 1.5px solid var(--line); background: #fffdf8; color: var(--ink); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.wy-dec:hover:not(:disabled) { border-color: var(--ink-3); transform: translateY(-1px); }
.wy-dec:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.wy-dec:disabled { cursor: default; opacity: .5; }
.wy-dec.is-right { opacity: 1; background: #dcebdc; border-color: #3f7d47; color: #2f5b33; }
.wy-dec.is-miss { opacity: 1; background: #f6d5cc; border-color: var(--tile); color: var(--tile-deep); }
.wy-dec.is-hit { opacity: 1; background: #3f7d47; border-color: #3f7d47; color: #fff; }
.wy-reveal { margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--paper); border: 1.5px solid var(--line); animation: wy-in .35s var(--ease) both; }
.wy-reveal:focus, .wy-end:focus { outline: none; }
.wy-reveal p { margin: 0 0 8px; }
.wy-verdict { font-weight: 600; color: var(--ink-2); }
.wy-verdict span { font: 600 .85rem/1 var(--sans); padding: 4px 8px; border-radius: 999px; background: var(--paper-2); margin-left: 4px; }
.wy-v10 span { background: #dcebdc; color: #2f5b33; }
.wy-v5 span { background: #fde9c7; color: #8a5300; }
.wy-year { font: 600 clamp(2rem, 5vw, 2.8rem)/1 var(--serif); color: var(--ink); letter-spacing: -.02em; }
.wy-cap { color: var(--ink); }
.wy-credit { font-size: .85rem; color: var(--ink-3); }
.wy-credit a { color: var(--sea); }
.wy-next { margin-top: 6px; }
.wy-end { text-align: center; padding: 18px 0 8px; animation: wy-in .35s var(--ease) both; }
.wy-final { margin: 10px 0 6px; font: 500 1.4rem/1 var(--serif); color: var(--ink-2); }
.wy-final b { font: 600 clamp(3.6rem, 9vw, 5rem)/1 var(--serif); color: var(--ink); letter-spacing: -.03em; margin-right: .1em; }
.wy-line { margin: 0 0 6px; color: var(--ink-2); }
.wy-best { margin: 0 0 18px; color: var(--ink-3); font-size: .95rem; }
.wy-credits { max-width: 860px; margin: 26px auto 0; color: var(--ink-2); font-size: .92rem; }
.wy-credits summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.wy-credits ul { margin: 10px 0 0; padding-left: 1.1em; }
.wy-credits li { margin: 0 0 6px; }
.wy-credits a { color: var(--sea); }
.wy-sec .fine-print { max-width: 860px; margin: 18px auto 0; }
@keyframes wy-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .wy-game { padding: 14px; border-radius: 18px; }
  .wy-decades { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .wy-dec { padding: 13px 2px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .wy-reveal, .wy-end { animation: none; } }

/* Wild Calendar (/wild/): SB Index strip, month cards, Good to know, Gloom Pool */
.wi-index-sec { padding: 0 0 clamp(40px, 6vw, 70px); }
.wi-index-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 16px; }
.wi-index-head h2 { margin: 0; font: 600 1.5rem/1.1 var(--serif); }
.wi-index-head p { margin: 0; color: var(--ink-3); font-size: .92rem; }
.wi-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.wi-stat { padding: 20px 20px 16px; border-radius: 20px; background: #fffaf2; box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.wi-stat p { margin: 0; }
.wi-big { font: 600 2.4rem/1 var(--serif); color: var(--sea-deep); letter-spacing: -.01em; }
.wi-stat-dry .wi-big { color: var(--tile-deep); }
.wi-stat-lake .wi-big, .wi-stat-creek .wi-big { color: var(--sea); }
.wi-label { margin-top: 8px !important; font-weight: 600; line-height: 1.3; }
.wi-sub { margin-top: 4px !important; color: var(--ink-2); font-size: .9rem; line-height: 1.4; }
.wi-src { margin-top: auto !important; padding-top: 12px; color: var(--ink-3); font-size: .82rem; }
.wi-src a { color: inherit; }

.wi-cal-sec { padding-top: clamp(40px, 6vw, 80px); background: var(--paper-2); }
.wi-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wi-month { padding: 18px 18px 16px; border-radius: 20px; background: #fffaf2; box-shadow: var(--shadow-1); }
.wi-month h3 { margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 1.25rem/1.1 var(--serif); }
.wi-month.is-now { background: var(--sea-deep); color: #fffaf2; box-shadow: var(--shadow-2); }
.wi-now-tag { font: 600 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--sun); color: var(--ink); }
.wi-month ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.wi-i { position: relative; padding-left: 16px; font-size: .9rem; line-height: 1.35; }
.wi-i::before { content: ""; position: absolute; left: 0; top: .42em; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--ink-3)); }
.wi-i a { color: inherit; text-decoration: none; }
.wi-i a:hover, .wi-i a:focus-visible { text-decoration: underline; }
.wi-quiet { margin: 0; color: var(--ink-3); font-size: .9rem; }
.is-now .wi-quiet { color: rgba(255, 250, 242, .75); }
.wi-i-seals { --dot: var(--sea); }
.wi-i-monarchs { --dot: var(--sun); }
.wi-i-whales { --dot: #3d6f8f; }
.wi-i-grunion { --dot: #7aa9b8; }
.wi-i-wildflowers { --dot: var(--tile-2); }
.wi-i-gloom { --dot: #8a8f96; }
.wi-i-jacarandas { --dot: var(--jacaranda); }
.wi-i-kingtides { --dot: var(--sea-deep); }
.wi-i-waterfalls { --dot: var(--seaglass); }
.is-now .wi-i-kingtides, .is-now .wi-i-whales { --dot: #9cc5e0; }

.wi-d-h { margin: clamp(44px, 6vw, 64px) 0 16px; font: 600 1.5rem var(--serif); }
.wi-details { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.wi-d { padding: 20px 22px 16px 22px; border-radius: 20px; background: #fffaf2; box-shadow: var(--shadow-1); scroll-margin-top: 90px; }
.wi-d h3 { margin: 0 0 8px; font: 600 1.15rem/1.25 var(--serif); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.wi-d h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); align-self: center; }
.wi-d-when { font: 500 .82rem var(--sans); color: var(--ink-3); }
.wi-ours { font: 600 .7rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.wi-d p { margin: 0; font-size: .95rem; color: var(--ink-2); line-height: 1.5; }
.wi-d .wi-d-src { margin-top: 10px; font-size: .84rem; color: var(--ink-3); }
.wi-d-src a { color: inherit; }
.wi-d:target { box-shadow: 0 0 0 2px var(--sun), var(--shadow-1); }

.wi-pool-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.wi-pool-sec h2 { margin-top: 16px; }
.wi-pool-sec .lede { margin-top: 14px; }
.wi-rule { max-width: 36em; color: var(--ink-2); }
.wi-pool-box { margin-top: 22px; max-width: 560px; padding: 22px; border-radius: 22px; background: #fffaf2; box-shadow: var(--shadow-1); }
.wi-pool-state { margin: 0; }
.wi-pool-form { display: grid; gap: 14px; }
.wi-pool-row label { display: block; font-weight: 600; margin-bottom: 6px; }
.wi-pool-form .btn { justify-self: start; }
.wi-pool-fine { margin: 0; color: var(--ink-3); font-size: .86rem; line-height: 1.45; }
.wi-pool-form .form-err { margin: 0; }
.wi-past { padding: 22px 24px; border-radius: 22px; background: var(--paper-2); }
.wi-past h3 { margin: 0 0 10px; font: 600 1.25rem var(--serif); }
.wi-past ul { list-style: none; margin: 0; padding: 0; }
.wi-past li { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.wi-past li span { color: var(--ink-3); font-size: .9rem; min-width: 3em; }
.wi-past li b { font: 600 1.3rem var(--serif); flex: 1; }
.wi-past li a { font-size: .82rem; color: var(--ink-3); }
.wi-past p { margin: 12px 0 0; color: var(--ink-3); font-size: .86rem; }

@media (max-width: 960px) { .wi-months { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .wi-months { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wi-month { padding: 14px 14px 12px; border-radius: 18px; }
  .wi-month h3 { font-size: 1.1rem; flex-wrap: wrap; }
  .wi-i { font-size: .84rem; }
  .wi-pool-grid { grid-template-columns: 1fr; }
  .wi-index { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wi-stat { padding: 16px 14px 12px; border-radius: 18px; }
  .wi-big { font-size: 1.9rem; }
  .wi-label { font-size: .92rem; }
  .wi-sub { font-size: .82rem; }
}
/* Sand background: darker muted text and eyebrow keep 4.5:1 contrast */
.wi-cal-sec { --ink-3: var(--ink-2); }
.wi-cal-sec .eyebrow { color: var(--tile-deep); }
.wi-past { --ink-3: var(--ink-2); }