/* ═══════════════════════════════════════
   Korea Dates A–Z · Shared Styles
   Per-city pages set --accent, --accent2,
   and --accent-rgb in an inline <style>.
   ═══════════════════════════════════════ */

/* Layer order — existing rules remain unlayered (highest priority),
   new additions can be slotted into named layers as we grow. */
@layer reset, tokens, base, components, utilities, motion;

:root {
  --paper:    #F7F3EE;
  --paper2:   #F0EBE3;
  --paper3:   #E8E0D5;
  --ink:      #1A1612;
  --ink2:     #4A4038;
  --ink3:     #8A7D6E;
  --ink4:     #877968;
  --ink4-deco:#B0A090;
  --rule:     #D8CFC4;
  --rule2:    #C5BAA8;
  --sage:     #5C7A60;
  --gold:     #9A7A3A;
  --indigo:   #4A5A8A;
  --brand-pink: #FB4A8D;
  --red:      var(--brand-pink);
  --shadow:   0 2px 16px rgba(26,22,18,.07);
  --shadow-lg:0 8px 32px rgba(26,22,18,.12);
  --r:        12px;
  --rs:       7px;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Instrument Sans', system-ui, sans-serif;
  --tap:      44px;

  /* ─── DESIGN 2.0 · MOTION PRIMITIVES ─── */
  --ease-spring:    cubic-bezier(.22, 1.2, .36, 1);
  --ease-out-expo:  cubic-bezier(.19, 1, .22, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out:    cubic-bezier(.65, .05, .36, 1);
  --dur-instant:    80ms;
  --dur-fast:       160ms;
  --dur-med:        280ms;
  --dur-slow:       460ms;
  --dur-cinematic:  720ms;

  /* ─── DESIGN 2.0 · FLUID TYPE SCALE ─── */
  --fs-micro:    8.5px;
  --fs-cap:      clamp(10px,   .4vw + .55rem, 11.5px);
  --fs-body:     clamp(12.5px, .6vw + .65rem, 14.5px);
  --fs-lead:     clamp(15px,   .8vw + .8rem,  17.5px);
  --fs-h3:       clamp(18px,   1vw  + .9rem,  22px);
  --fs-h2:       clamp(22px,   1.4vw + 1rem,  30px);
  --fs-h1:       clamp(32px,   2.4vw + 1.2rem, 48px);
  --fs-display:  clamp(48px,   5vw  + 1.2rem, 88px);
  --fs-hero:     clamp(64px,   11vw + .6rem, 148px);

  /* ─── DESIGN 2.0 · COLOR TOKENS v2 ─── */
  --accent-soft:    rgba(var(--accent-rgb, 196,82,42), .10);
  --accent-softer:  rgba(var(--accent-rgb, 196,82,42), .04);
  --accent-glow:    rgba(var(--accent-rgb, 196,82,42), .35);
  --accent-wash:    linear-gradient(135deg, rgba(var(--accent-rgb, 196,82,42), .14), rgba(var(--accent-rgb, 196,82,42), .02));
  --surface-glass:        rgba(247, 243, 238, .78);
  --surface-glass-strong: rgba(247, 243, 238, .92);
  --surface-glass-soft:   rgba(247, 243, 238, .55);
  --ring-w:         3px;
  --ring:           0 0 0 var(--ring-w) rgba(var(--accent-rgb, 196,82,42), .35);

  /* Per-city accent helpers — overridden inline */
  --grad-accent:    linear-gradient(135deg, var(--accent, #1A1612), var(--accent2, var(--accent, #1A1612)));
  --grad-paper:     linear-gradient(180deg, var(--paper), var(--paper2));
  --halo-accent:    radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb, 196,82,42), .18), transparent 60%);
}

html[data-theme="dark"] {
  --paper:    #15110D;
  --paper2:   #1F1B16;
  --paper3:   #2A2520;
  --ink:      #F0EAE0;
  --ink2:     #D0C8BC;
  --ink3:     #A89B89;
  --ink4:     #897C6B;
  --ink4-deco:#5C5247;
  --rule:     #38312A;
  --rule2:    #4A4138;
  --sage:     #8AA890;
  --gold:     #C9A555;
  --indigo:   #8A9BCD;
  --brand-pink: #FB6AA0;
  --red:      var(--brand-pink);
  --shadow:   0 2px 16px rgba(0,0,0,.4);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);

  --surface-glass:        rgba(31, 27, 22, .78);
  --surface-glass-strong: rgba(31, 27, 22, .92);
  --surface-glass-soft:   rgba(31, 27, 22, .55);
  --paper-oled:           #08060A;
  color-scheme: dark;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  background-image: radial-gradient(circle, rgba(160,140,120,.18) 1px, transparent 1px);
  background-size: 22px 22px;
  transition: background-color .3s ease, color .3s ease;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
:where(button, a, [role="button"], summary, label, input[type="submit"], input[type="button"]) {
  touch-action: manipulation;
}
html[data-theme="dark"] body {
  background-image: radial-gradient(circle, rgba(180,160,140,.06) 1px, transparent 1px);
}

/* ─── SKIP LINK ─── */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  z-index: 10000; padding: 8px 16px;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  text-decoration: none; border-radius: 0 0 var(--rs) var(--rs);
}
.skip-link:focus { left: 50%; transform: translateX(-50%); top: 0; }

/* ─── PROGRESS BAR ─── */
#prog {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform-origin: left; transform: scaleX(0);
  z-index: 9000; transition: transform .08s linear;
}

/* ─── TOP-RIGHT CONTROL CLUSTER ─── */
.tools {
  position: fixed; top: 12px; right: 12px; z-index: 500;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  max-width: calc(100vw - 24px);
}
.tools button, .tools a {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 44px; height: 40px; padding: 0 12px;
  background: rgba(247,243,238,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rule2); border-radius: 100px;
  color: var(--ink2); font-family: var(--sans); font-size: 11px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: all .15s; box-shadow: 0 2px 10px rgba(26,22,18,.08);
}
html[data-theme="dark"] .tools button, html[data-theme="dark"] .tools a {
  background: rgba(31,27,22,.92);
  border-color: rgba(255,255,255,.12);
}
.tools button:hover, .tools a:hover {
  border-color: var(--accent); color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb),.18);
}
.tools button:focus-visible, .tools a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.tools svg { flex-shrink: 0; }
/* Feature buttons (passport, couple, quiz) read as "actions worth taking" — accent tinted */
.tools .tools-feature {
  background: rgba(var(--accent-rgb), .08);
  border-color: rgba(var(--accent-rgb), .35);
  color: var(--accent);
}
html[data-theme="dark"] .tools .tools-feature {
  background: rgba(var(--accent-rgb), .14);
  border-color: rgba(var(--accent-rgb), .42);
}
.tools .tools-feature:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.tools .tools-feature:hover svg { color: #fff; }

/* ─── HOME NAV (top left) ─── */
.home-nav {
  position: fixed; top: 12px; left: 12px; z-index: 500;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
}
.home-nav a {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 8px 14px 8px 12px;
  background: rgba(247,243,238,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rule2); border-radius: 100px;
  text-decoration: none;
  font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--ink2);
  letter-spacing: .2px;
  transition: all .15s; box-shadow: 0 2px 10px rgba(26,22,18,.08);
}
.home-nav a::before {
  content: ""; width: 0; height: 0; flex-shrink: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid currentColor;
  transition: transform .15s var(--ease-spring, ease);
}
.home-nav a:hover::before { transform: translateX(-2px); }
.home-nav a svg { display: none; } /* hide legacy house icon, replaced by ::before chevron */
html[data-theme="dark"] .home-nav a { background: rgba(31,27,22,.92); border-color: rgba(255,255,255,.12); }
.home-nav a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
@media (max-width: 480px) {
  .home-nav a { padding: 8px 12px 8px 10px; font-size: 10.5px; }
}
@media (max-width: 380px) {
  .home-nav a span { display: none; }
  .home-nav a { padding: 0 12px; min-width: 44px; justify-content: center; }
}
html[data-theme="dark"] .home-nav a { background: rgba(31,27,22,.9); }
.home-nav a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* ─── MASTHEAD ─── */
.masthead {
  border-bottom: 3px double var(--rule);
  padding: 0 20px;
  max-width: 720px; margin: 0 auto;
}
.mast-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--rule); gap: 12px;
}
.mast-tag {
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: 3.5px; text-transform: uppercase; color: var(--ink3);
}
.mast-date {
  font-family: var(--sans); font-size: 9px; font-weight: 500;
  letter-spacing: 1.5px; color: var(--ink4); text-transform: uppercase;
}
.mast-rule-line { flex: 1; height: 1px; background: var(--rule); }
.mast-hero { padding: 28px 0 20px; text-align: center; position: relative; }
.mast-kicker {
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: 5px; text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px; display: block;
}
.mast-hero h1 {
  font-family: var(--serif); font-size: clamp(64px, 17vw, 110px);
  font-weight: 700; line-height: .88; letter-spacing: -1px; color: var(--ink);
}
.mast-hero h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.mast-logo {
  display: block;
  width: clamp(220px, 50vw, 380px);
  aspect-ratio: 1000 / 740;
  margin: 6px auto 4px;
  background: url('/logo.png?v=4.0.0') center/contain no-repeat;
}
html[data-theme="dark"] .mast-logo { background-image: url('/logo-dark.png?v=4.0.0'); }
.mast-hero:has(.mast-logo) h1 {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600; line-height: 1; letter-spacing: -.3px;
  margin-top: 4px;
}
.mast-hero:has(.mast-logo) .mast-kicker { margin-bottom: 6px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mast-deco { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 18px 0 16px; }
.mast-deco-line { flex: 1; max-width: 80px; height: 1px; background: var(--rule); }
.mast-deco-orn { font-family: var(--serif); font-size: 18px; color: var(--ink4-deco); line-height: 1; font-style: italic; }
.mast-standfirst {
  font-family: var(--serif); font-size: 16px; font-weight: 400; font-style: italic;
  color: var(--ink2); line-height: 1.55;
  max-width: 380px; margin: 0 auto 20px; letter-spacing: .1px;
}
.mast-stats {
  display: flex; justify-content: center; gap: 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}
.mast-stat { text-align: center; padding: 0 18px; border-right: 1px solid var(--rule); }
.mast-stat:last-child { border-right: none; }
.mast-stat-n {
  display: block; font-family: var(--serif); font-size: 22px;
  font-weight: 600; line-height: 1; color: var(--ink);
}
.mast-stat-l {
  display: block; font-size: 8.5px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--ink4); margin-top: 3px;
}
@media (max-width: 600px) {
  .masthead { padding: 0 16px; }
  .mast-top { padding: 8px 0 6px; gap: 8px; }
  .mast-tag, .mast-date { font-size: 8px; letter-spacing: 2.5px; }
  .mast-hero { padding: 10px 0 8px; }
  .mast-kicker { font-size: 8.5px; letter-spacing: 3px; margin-bottom: 8px; }
  .mast-hero h1 { font-size: clamp(44px, 14vw, 72px); line-height: .9; letter-spacing: -.6px; }
  .mast-hero:has(.mast-logo) h1 { font-size: clamp(22px, 5.5vw, 30px); letter-spacing: -.2px; }
  /* Shrink logo on mobile — was 220px wide via clamp(220px, 50vw, 380px) */
  .mast-logo { width: clamp(160px, 42vw, 220px); margin: 0 auto; }
  /* Hide decorative chrome + standfirst — they belong on desktop where the
     masthead has room. On mobile the logo alone carries the brand. */
  .mast-deco { display: none; }
  .mast-standfirst { display: none; }
  .mast-stats { padding: 8px 0; }
  .mast-stat { padding: 0 12px; }
  .mast-stat-n { font-size: 18px; }
  .mast-stat-l { font-size: 8px; letter-spacing: 2px; }
}

/* ─── CITY NAV (sub-masthead row) ─── */
.city-nav-row {
  max-width: 720px; margin: 0 auto;
  display: flex; justify-content: center; gap: 6px;
  padding: 14px 16px 4px;
  flex-wrap: wrap;
}
.city-nav-row a {
  display: flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--rule2);
  border-radius: 100px;
  text-decoration: none;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  color: var(--ink2);
  letter-spacing: .15px;
  transition: all .15s;
  touch-action: manipulation;
}
.city-nav-row a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(var(--accent-rgb), .15); }
.city-nav-row a.cn-active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 3px 12px rgba(var(--accent-rgb),.32);
  font-weight: 800;
  transform: scale(1.02);
}
.city-nav-row a.cn-active:hover { color: #fff; transform: scale(1.02) translateY(-1px); }
@media (max-width: 480px) {
  .city-nav-row { gap: 5px; padding: 10px 12px 2px; }
  .city-nav-row a { padding: 7px 11px; font-size: 11px; }
}

/* ─── CITY EDITOR'S LETTER ─── */
.city-letter {
  max-width: 720px; margin: 18px auto 0;
  padding: 0 16px;
}
.city-letter-inner {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule2);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 22px 24px 20px;
}
.city-letter-kicker {
  display: block;
  font-family: var(--sans); font-size: 9.5px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.city-letter-title {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600; line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -.2px;
}
.city-letter-body {
  font-family: var(--serif);
  font-size: clamp(14.5px, 1.5vw, 16.5px);
  line-height: 1.65;
  color: var(--ink2);
  margin: 0 0 12px;
}
.city-letter-sig {
  display: block;
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink3);
}
@media (max-width: 480px) {
  .city-letter { margin-top: 14px; padding: 0 12px; }
  .city-letter-inner { padding: 16px 16px 14px; }
  .city-letter-title { font-size: 19px; }
  .city-letter-body { font-size: 14px; line-height: 1.6; }
}

/* ─── SURPRISE-ME HERO CTA ─── */
.surprise-cta {
  max-width: 720px; margin: 8px auto 0;
  padding: 16px 16px 4px;
  display: flex; justify-content: center;
}
.surprise-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 700;
  letter-spacing: .3px;
  border: none; border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb),.32);
  transition: transform .15s, box-shadow .15s;
}
.surprise-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(var(--accent-rgb),.42); }
.surprise-btn:active { transform: translateY(0); }
.surprise-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ─── COURSES STRIP ─── */
.courses-wrap {
  max-width: 720px; margin: 24px auto 8px;
  padding: 0 16px;
}
.courses-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.courses-head h2 {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--ink); letter-spacing: -.3px;
}
.courses-head h2 em { font-style: italic; color: var(--accent); }
.courses-head-rule { flex: 1; height: 1px; background: var(--rule); }
.courses-sub {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink3); margin-bottom: 14px;
}
.courses-scroll {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 12px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.courses-scroll::-webkit-scrollbar { height: 4px; }
.courses-scroll::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.course {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 14px 14px 12px;
  cursor: pointer;
  position: relative;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.course:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.course:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.course-icon { font-size: 22px; margin-bottom: 8px; display: block; }
.course-title {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--ink); line-height: 1.25; margin-bottom: 4px; letter-spacing: -.1px;
}
.course-sub {
  font-size: 10.5px; color: var(--ink3); margin-bottom: 10px; font-weight: 500;
  display: flex; align-items: center; gap: 5px;
}
.course-stops { display: flex; gap: 4px; align-items: center; }
.course-stop {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--paper2); border: 1px solid var(--rule);
  font-family: var(--serif); font-size: 13px; font-weight: 700;
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.course-arrow { font-size: 10px; color: var(--ink4); }
.course-tag {
  position: absolute; top: 14px; right: 14px;
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 2px 6px;
  background: rgba(var(--accent-rgb),.1); color: var(--accent);
  border-radius: 3px;
}

/* ─── TOOLBAR ─── */
.toolbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,243,238,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
html[data-theme="dark"] .toolbar { background: rgba(21,17,13,.92); }
.tb-inner {
  max-width: 720px; margin: 0 auto;
  padding: 8px 16px;
  display: flex; flex-direction: column; gap: 7px;
}

.srch { position: relative; display: flex; align-items: center; }
.srch svg { position: absolute; left: 10px; color: var(--ink4); pointer-events: none; }
#si {
  width: 100%; min-height: 40px; padding: 10px 40px 10px 34px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  border-radius: var(--rs);
  color: var(--ink); font-family: var(--sans);
  font-size: 16px; /* >=16px stops iOS Safari auto-zoom on focus */
  outline: none; transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 640px) { #si { font-size: 13.5px; } }
#si::placeholder { color: var(--ink4); }
#si:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .1); }
.srch-clr {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rule); border: none; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  color: var(--ink2);
}
.srch-clr::before {
  content: ""; position: absolute; inset: -8px; /* expands tap area to ~44px */
}
.srch-clr.vis { display: flex; }
.srch-clr:hover { background: var(--accent); color: #fff; }

/* Mode strip (All / Saved / Map / Courses jump) */
.modes {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
}
.modes button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; min-height: 36px;
  border: 1px solid var(--rule); border-radius: 100px;
  background: transparent; color: var(--ink3);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: all .14s; white-space: nowrap;
  letter-spacing: .1px;
  position: relative;
}
.modes button::before {
  content: ""; position: absolute; inset: -4px;
}
.modes button:hover { border-color: var(--ink4); color: var(--ink2); background: var(--paper2); }
.modes button.on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.modes button.on.mode-saved { background: var(--red); border-color: var(--red); }
.modes button.on.mode-map { background: var(--indigo); border-color: var(--indigo); }
.modes-count {
  display: inline-block; margin-left: 4px;
  background: rgba(255,255,255,.25);
  padding: 0 5px; border-radius: 8px;
  font-size: 9.5px; font-weight: 800;
}
.modes button:not(.on) .modes-count { background: var(--paper3); color: var(--ink3); }

/* Filter pills */
.flts { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.pill {
  padding: 7px 13px; min-height: 36px;
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 100px; border: 1px solid var(--rule);
  background: transparent; color: var(--ink3);
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all .15s; white-space: nowrap; letter-spacing: .2px;
  position: relative;
}
.pill::before {
  content: ""; position: absolute; inset: -4px; /* expand effective hit target to ≥44px */
}
.pill:hover { border-color: var(--ink4); color: var(--ink2); background: var(--paper2); }
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill.pa  { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill.pf  { background: rgba(92,122,96,.13);  border-color: var(--sage);   color: var(--sage); }
.pill.pb  { background: rgba(154,122,58,.13); border-color: var(--gold);   color: var(--gold); }
.pill.ps  { background: rgba(74,90,138,.13);  border-color: var(--indigo); color: var(--indigo); }
.pill.pt  { background: var(--paper3); border-color: var(--ink4); color: var(--ink2); }
.fdiv { width: 1px; height: 14px; background: var(--rule); flex-shrink: 0; }
.rc { font-family: var(--serif); font-size: 12px; font-style: italic; color: var(--ink4); margin-left: auto; white-space: nowrap; }

/* Advanced filter toggle */
.more-toggle {
  background: transparent; border: 1px dashed var(--rule);
  color: var(--ink3); font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  padding: 7px 13px; min-height: 36px; border-radius: 100px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all .14s;
  position: relative;
}
.more-toggle::before {
  content: ""; position: absolute; inset: -4px;
}
.more-toggle:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
.more-toggle .chev { transition: transform .2s; }
.more-toggle.on .chev { transform: rotate(180deg); }

.more-flts {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
}
.more-flts.on { grid-template-rows: 1fr; padding-top: 6px; }
.more-flts-inner { overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.flts-row {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  padding-bottom: 4px;
}
.flts-row .flts-label {
  font-size: 8.5px; font-weight: 700; color: var(--ink4);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-right: 4px; min-width: 56px;
}
.flts-row .pill { font-size: 10px; padding: 3px 9px; min-height: 26px; }
.flts-row .pill.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* ─── ALPHABET NAV ─── */
.an-wrap {
  border-bottom: 1px solid var(--rule);
  padding: 3px 14px 5px; background: var(--paper);
}
.an {
  max-width: 720px; margin: 0 auto;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 2px;
}
.an button {
  width: 32px; height: 32px;
  border: none; background: transparent; color: var(--ink4);
  font-family: var(--serif); font-size: 14px; font-weight: 600;
  border-radius: 6px; cursor: default;
  transition: all .14s;
  position: relative;
}
/* Invisible hit-zone expansion so finger taps land reliably on touch devices */
.an button::before {
  content: ""; position: absolute; inset: -6px;
}
@media (max-width: 480px) {
  .an { gap: 4px; }
  .an button { width: 38px; height: 38px; font-size: 16px; }
  .an button::before { inset: -4px; }
}
.an button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.an button.y { color: var(--ink2); cursor: pointer; font-weight: 700; }
.an button.y:hover { background: var(--paper2); color: var(--ink); transform: translateY(-1px); }
.an button.al {
  background: var(--accent) !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), .35);
  transform: scale(1.06);
}
.an button.fav::after {
  content: ''; position: absolute;
  bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 1.5px var(--paper);
}
html[data-theme="dark"] .an button.fav::after { box-shadow: 0 0 0 1.5px var(--paper); }

/* ─── CARDS ─── */
.cs { padding: 16px 14px 100px; max-width: 720px; margin: 0 auto; }

.sec-div {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 8px;
}
.sec-div:first-child { margin-top: 4px; }
.sec-div-letter {
  font-family: var(--serif); font-size: 11px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--ink4);
  white-space: nowrap;
}
.sec-div-line { flex: 1; height: 1px; background: var(--rule); }

.c {
  margin-bottom: 4px;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: rgba(255,251,247,.85);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  animation: fadeIn .28s ease both;
}
html[data-theme="dark"] .c { background: rgba(31,27,22,.6); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.c:hover { border-color: var(--ink4); box-shadow: 0 2px 16px rgba(26,22,18,.07); }
.c.on { border-color: var(--accent); box-shadow: 0 4px 24px rgba(var(--accent-rgb), .1); }

.ch { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; user-select: none; }
.ch:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r); }

.lb {
  width: 40px; height: 40px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--paper2);
  border: 1px solid var(--rule);
  transition: background .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.lb span {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  color: var(--ink3); line-height: 1; transition: color .2s, text-shadow .2s;
  position: relative;
  z-index: 1;
}
.c.on .lb { background: var(--accent); border-color: var(--accent); }
.c.on .lb span { color: #fff; }

/* Photo-thumbnail variant — image fills the 40x40 square with a dark mask
   so the letter stays legible in white */
.lb--photo { background: var(--ink); border-color: var(--ink2); }
.lb-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(.95);
}
.lb--photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.45) 100%);
  z-index: 1;
  pointer-events: none;
}
.lb--photo span {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
  z-index: 2;
}
.c.on .lb--photo { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.c.on .lb--photo span { color: #fff; }

.ct { flex: 1; min-width: 0; }
.nm {
  font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.1px; line-height: 1.2;
}
.mt {
  font-size: 10.5px; color: var(--ink4); margin-top: 3px;
  font-weight: 500; display: flex; align-items: center; gap: 4px;
}
.dot { color: var(--rule2); }

.cr { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

.tbadge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 3px;
  letter-spacing: .3px; text-transform: uppercase;
}
.t-Free   { background: rgba(92,122,96,.12);  color: var(--sage);   border: 1px solid rgba(92,122,96,.25); }
.t-mono   { background: rgba(154,122,58,.12); color: var(--gold);   border: 1px solid rgba(154,122,58,.25); }
.t-di     { background: rgba(var(--accent-rgb),.1);  color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.22); }
.t-tri    { background: rgba(74,90,138,.1);   color: var(--indigo); border: 1px solid rgba(74,90,138,.22); }

.tc { font-size: 10px; color: var(--ink4); font-weight: 500; display: flex; align-items: center; gap: 3px; }

.cvw {
  margin-left: 4px; flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--paper2); border: 1px solid var(--rule);
  transition: background .18s, transform .25s, border-color .18s;
}
.c.on .cvw { background: var(--accent); border-color: var(--accent); transform: rotate(180deg); }
.cvw svg { color: var(--ink4); transition: color .18s; }
.c.on .cvw svg { color: #fff; }

/* Heart-fav button on card header */
.fb {
  position: relative; flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid transparent;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink4); transition: all .14s;
}
.fb::before {
  content: ""; position: absolute; inset: -6px; /* effective tap target ~44px */
}
.fb:hover { background: var(--paper2); color: var(--red); border-color: var(--rule); }
.fb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb.on { color: var(--red); }
.fb.on svg { fill: var(--red); stroke: var(--red); }
.fb svg { transition: transform .2s; }
.fb.pulse svg { animation: heartPulse .4s ease; }
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.4); }
}

/* ─── CARD BODY (ACCORDION) ─── */
.cb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s cubic-bezier(.4,0,.2,1); }
.c.on .cb { grid-template-rows: 1fr; }
.cb-i { overflow: hidden; }
.ci { padding: 0 14px 18px; border-top: 1px solid var(--rule); }
@media (max-width: 540px) {
  .ch { padding: 11px 12px; gap: 10px; }
  .ci { padding: 0 12px 14px; }
  .lb { width: 36px; height: 36px; }
  .lb span { font-size: 18px; }
  .nm { font-size: 15px; }
  .mt { font-size: 10px; }
  .dt { font-size: 14px; padding: 12px 0 11px; margin-bottom: 11px; line-height: 1.55; }
  .dt::before { font-size: 36px; top: 4px; }
  .ir { padding: 7px 9px; }
  .il { font-size: 8px; letter-spacing: 1.5px; }
  .iv { font-size: 11px; line-height: 1.4; }
  .bl { padding: 9px 11px 9px 12px; margin-bottom: 6px; }
  .bltx { font-size: 11.5px; line-height: 1.55; }
  .tgs { margin: 7px 0 9px; }
  .compare { padding: 7px 9px; font-size: 10px; margin: 7px 0 9px; }
  .compare strong { font-size: 12.5px; }
  .compare a { padding: 5px 10px; min-height: 28px; }
}

/* ─── EXPANDED CARD HERO IMAGE ─── */
.ch-hero {
  position: relative;
  margin: 12px 0 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--paper2)) 0%, var(--paper2) 100%);
  box-shadow: 0 4px 18px -6px rgba(0,0,0,.18);
}
.ch-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.c.on .ch-hero img { transform: scale(1.02); }
.ch-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.42) 100%);
  pointer-events: none;
}
.ch-hero-letter {
  position: absolute; left: 12px; bottom: 6px;
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: clamp(36px, 7vw, 64px); line-height: 1;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
  letter-spacing: -.04em;
  pointer-events: none;
}
.ch-hero-tag {
  position: absolute; right: 12px; top: 12px;
  padding: 4px 10px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.94);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px;
}
.ch-hero.is-hero-fallback::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,0,0,.3), transparent 70%),
    radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1.2px);
  background-size: auto, 14px 14px;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 540px) {
  .ch-hero { aspect-ratio: 5 / 2; margin-top: 10px; border-radius: 8px; }
  .ch-hero-letter { font-size: 38px; left: 10px; bottom: 4px; }
  .ch-hero-tag { right: 8px; top: 8px; padding: 3px 8px; font-size: 8.5px; letter-spacing: 1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-hero img { transition: none; }
  .c.on .ch-hero img { transform: none; }
}

.dt {
  font-family: var(--serif);
  font-size: 15.5px; font-style: italic; font-weight: 400;
  color: var(--ink2);
  line-height: 1.65;
  padding: 14px 0 13px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 13px;
  position: relative;
}
.dt::before {
  content: '\201C';
  font-family: var(--serif);
  font-size: 48px; line-height: 1; font-style: italic;
  color: var(--accent); opacity: .25;
  position: absolute; top: 6px; left: -6px;
  pointer-events: none;
}

.ig { display: grid; gap: 5px; margin-bottom: 11px; }
.i2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ir {
  background: var(--paper2);
  border-radius: var(--rs);
  padding: 8px 10px;
  border: 1px solid var(--rule);
}
.il {
  font-size: 8.5px; font-weight: 700; color: var(--ink4);
  text-transform: uppercase; letter-spacing: 1.8px;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 4px;
}
.il svg { opacity: .55; flex-shrink: 0; }
.iv { font-size: 11.5px; color: var(--ink); line-height: 1.45; font-weight: 400; }

.bl {
  border-radius: var(--rs);
  padding: 10px 12px 10px 14px;
  margin-bottom: 7px;
  border: 1px solid var(--rule);
  position: relative; overflow: hidden;
}
.bl::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; }
.bl-tip  { background: rgba(var(--accent-rgb), .04); }
.bl-tip::before  { background: var(--accent); }
.bl-food { background: rgba(154,122,58,.04); }
.bl-food::before { background: var(--gold); }
.blt { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; margin-bottom: 5px; }
.bl-tip  .blt { color: var(--accent); }
.bl-food .blt { color: var(--gold); }
.bltx { font-size: 12.5px; color: var(--ink2); line-height: 1.65; font-weight: 400; }

.bl-talk {
  background: rgba(154,122,58,.05);
  border: 1px dashed var(--gold);
  width: 100%; text-align: left;
  font: inherit; color: inherit;
  cursor: pointer;
  appearance: none;
  transition: transform .2s ease, background .15s ease;
}
.bl-talk::before { background: var(--gold); }
.bl-talk .blt { color: var(--gold); }
.bl-talk:hover { background: rgba(154,122,58,.09); }
.bl-talk:active { transform: scale(.99); }
.bltx-talk {
  font-family: var(--serif), 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 15px; line-height: 1.5;
  color: var(--ink); padding: 2px 0 6px;
}
.bltx-talk-meta {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--ink3); text-transform: uppercase;
}
.bl-talk-flip .bltx-talk { animation: kd-talk-flip .32s ease; }
@keyframes kd-talk-flip {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bl-talk-flip .bltx-talk { animation: none; }
}

.tgs { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 10px; }
.tg {
  padding: 2px 8px; border-radius: 3px;
  font-size: 9px; font-weight: 700;
  background: var(--paper2); border: 1px solid var(--rule);
  color: var(--ink4);
  letter-spacing: .5px; text-transform: uppercase;
}
.tgv { color: var(--ink3); }
.tg-cat { color: var(--accent); border-color: rgba(var(--accent-rgb),.3); background: rgba(var(--accent-rgb),.06); }
.tg-season { color: var(--sage); border-color: rgba(92,122,96,.3); background: rgba(92,122,96,.06); }

/* Cross-city compare strip */
.compare {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 10px; padding: 8px 10px;
  background: var(--paper2); border: 1px dashed var(--rule);
  border-radius: var(--rs);
  font-size: 10.5px; color: var(--ink3);
}
.compare strong { font-family: var(--serif); font-size: 14px; color: var(--ink2); }
.compare a {
  display: inline-flex; align-items: center; gap: 3px;
  text-decoration: none; color: var(--accent); font-weight: 600;
  padding: 6px 12px; min-height: 32px; border-radius: 100px;
  border: 1px solid rgba(var(--accent-rgb),.3);
  background: rgba(var(--accent-rgb),.06);
  transition: all .14s;
}
.compare a:hover { background: var(--accent); color: #fff; }

/* Action buttons */
.mb { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.mb a, .mb button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 36px; padding: 8px 12px; border-radius: var(--rs);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform .12s, opacity .12s, box-shadow .12s, background .15s;
  letter-spacing: .15px;
}
@media (max-width: 480px) {
  .mb { gap: 5px; }
  .mb a, .mb button { padding: 7px 10px; font-size: 11px; }
}
.mb a:active, .mb button:active { transform: scale(.96); opacity: .9; }
.mb a:hover, .mb button:hover { transform: translateY(-1px); }
/* Naver (green) */
.bn { background: #03C75A; color: #fff; box-shadow: 0 2px 10px rgba(3,199,90,.32); }
.bn:hover { background: #04B051; box-shadow: 0 4px 16px rgba(3,199,90,.45); }
/* Klook (yellow) */
.bk { background: #FFEB00; color: #1A1612; box-shadow: 0 2px 10px rgba(255,235,0,.45); font-weight: 800; }
.bk:hover { background: #FFE600; box-shadow: 0 4px 16px rgba(255,235,0,.6); }
/* Google Maps (blue) */
.bg { background: #4285F4; color: #fff; box-shadow: 0 2px 10px rgba(66,133,244,.32); }
.bg:hover { background: #2A6EE0; box-shadow: 0 4px 16px rgba(66,133,244,.45); }
/* Apple Maps (black) */
.ba { background: #000; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.ba:hover { background: #222; box-shadow: 0 4px 16px rgba(0,0,0,.42); }
/* Copy / utility (neutral) */
.bc {
  background: var(--paper2); color: var(--ink2);
  border: 1px solid var(--rule2) !important;
  font-weight: 700;
}
.bc:hover { border-color: var(--accent) !important; color: var(--accent); background: var(--paper); }
.bc.ok { background: rgba(92,122,96,.14); color: var(--sage); border-color: rgba(92,122,96,.42) !important; }
.bbook {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 1px 10px rgba(var(--accent-rgb),.28);
}
.bbook:hover { box-shadow: 0 3px 16px rgba(var(--accent-rgb),.38); }

.mb-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 0 0; border-top: 1px dashed var(--rule); margin-top: 8px;
}
.mb-label {
  font-size: 8.5px; font-weight: 700; color: var(--ink4);
  text-transform: uppercase; letter-spacing: 1.5px;
  align-self: center; margin-right: 4px;
}

/* ─── MAP VIEW ─── */
.map-wrap {
  max-width: 720px; margin: 0 auto;
  padding: 12px 14px 100px;
}
#map {
  height: 70vh; height: 70dvh; min-height: 480px;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--paper2);
  overflow: hidden;
}
.map-marker {
  background: var(--accent); color: #fff;
  font-family: var(--serif); font-size: 14px; font-weight: 700;
  border-radius: 50%;
  width: 30px !important; height: 30px !important;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.map-marker.fav { background: var(--red); }
.leaflet-popup-content-wrapper {
  border-radius: var(--rs) !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--sans);
}
.leaflet-popup-tip { background: var(--paper) !important; }
.map-pop-t { font-family: var(--serif); font-size: 15px; font-weight: 600; color: var(--ink); }
.map-pop-l { font-size: 10px; color: var(--ink4); margin-top: 2px; }
.map-pop-cta {
  display: inline-block; margin-top: 8px;
  padding: 4px 10px; border-radius: 100px;
  background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; text-decoration: none;
}

/* ─── SURPRISE-ME OVERLAY ─── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(26,22,18,.6); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  overscroll-behavior: contain;
}
.modal-overlay.on { opacity: 1; pointer-events: auto; }
.modal-card {
  background: var(--paper); border-radius: var(--r);
  border: 1px solid var(--rule);
  max-width: 460px; width: 100%;
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  padding: 26px 24px 22px;
  transform: scale(.94); transition: transform .25s ease;
  box-shadow: var(--shadow-lg);
  position: relative;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal-overlay.on .modal-card { transform: scale(1); }
.modal-close {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper2); border: 1px solid var(--rule); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink3);
  z-index: 1;
}
.modal-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.modal-kicker {
  font-size: 9px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px; display: block;
}
.modal-letter {
  font-family: var(--serif); font-size: 56px; font-weight: 700;
  color: var(--accent); line-height: 1; margin-bottom: 4px;
}
.modal-hero {
  position: relative;
  margin: 0 -22px 14px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: var(--paper2);
}
.modal-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.modal-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
.modal-hero-letter {
  position: absolute;
  right: 16px; bottom: 8px;
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 64px; line-height: 1;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  z-index: 1;
}
.modal-title {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  color: var(--ink); line-height: 1.15; margin-bottom: 5px; letter-spacing: -.3px;
}
.modal-loc { font-size: 11.5px; color: var(--ink3); margin-bottom: 10px; font-weight: 500; }
.modal-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.modal-meta .tg { background: var(--paper2); }
.modal-desc {
  font-family: var(--serif); font-size: 14px; font-style: italic;
  color: var(--ink2); line-height: 1.55; margin-bottom: 14px;
}
@media (max-width: 540px) {
  .modal-letter { font-size: 44px; }
  .modal-title { font-size: 21px; }
  .modal-loc { font-size: 11px; }
  .modal-desc { font-size: 13.5px; margin-bottom: 12px; }
}
.modal-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.modal-actions button, .modal-actions a {
  flex: 1; min-width: 120px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 14px; border-radius: var(--rs);
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
}
.modal-reroll { background: var(--ink); color: var(--paper); }
.modal-reroll:hover { background: var(--accent); }
.modal-open {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}

/* ─── COURSE OVERLAY ─── */
.course-modal { max-width: 540px; }
.course-modal h3 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  color: var(--ink); margin-bottom: 4px; line-height: 1.15;
}
@media (max-width: 540px) {
  .course-modal h3 { font-size: 22px; }
  .course-modal .tagline { font-size: 13px; margin-bottom: 14px; }
  .course-stop-row { gap: 10px; padding: 10px 0; }
  .course-stop-letter { width: 38px; height: 38px; font-size: 20px; }
  .course-stop-name { font-size: 15.5px; }
  .course-stop-note { font-size: 11.5px; }
}
.course-modal h3 em { font-style: italic; color: var(--accent); }
.course-modal .tagline {
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--ink3); margin-bottom: 18px;
}
.course-stop-row {
  display: flex; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  align-items: center;
  transition: padding .14s ease, background .14s ease;
}
.course-stop-row:hover {
  padding-left: 6px;
  background: rgba(var(--accent-rgb), .04);
}
.course-stop-row:last-of-type { border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.course-stop-letter {
  width: 44px; height: 44px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-family: var(--serif); font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.course-stop-thumb {
  position: relative;
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(var(--accent-rgb),.32), 0 3px 8px rgba(0,0,0,.14);
}
.course-stop-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.course-stop-thumb-l {
  position: absolute;
  left: 4px; bottom: 1px;
  font: 700 italic 16px/1 var(--serif);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.course-stop-body { flex: 1; min-width: 0; }
.course-stop-name {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--ink); line-height: 1.25; margin-bottom: 3px;
}
.course-stop-note {
  font-size: 12px; color: var(--ink3); line-height: 1.45;
}
.course-stop-arrow {
  text-align: center; font-size: 14px; color: var(--ink4);
  margin: -4px 0;
}

/* ─── PER-CITY TOP PICKS ─── */
.city-picks {
  max-width: 720px; margin: 20px auto 8px;
  padding: 0 16px;
}
.picks-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.picks-head h2 {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  color: var(--ink); letter-spacing: -.2px;
}
.picks-head h2 em { font-style: italic; color: var(--accent); }
.picks-head-rule { flex: 1; height: 1px; background: var(--rule); }
.picks-sponsored {
  font-family: var(--sans); font-size: 8.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink4);
  padding: 2px 6px; border-radius: 3px;
  background: var(--paper2); border: 1px solid var(--rule);
}
.picks-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (max-width: 600px) { .picks-grid { grid-template-columns: 1fr; } }
.pick {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--rs);
  background: var(--paper);
  text-decoration: none;
  transition: all .14s;
}
.pick:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb),.1);
}
.pick-letter {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-family: var(--serif); font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pick-body { flex: 1; min-width: 0; }
.pick-title {
  font-family: var(--serif); font-size: 14px; font-weight: 600;
  color: var(--ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick-meta {
  font-size: 10px; color: var(--ink3); margin-top: 2px;
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pick-cta {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper2); color: var(--ink3);
  transition: all .14s;
}
.pick:hover .pick-cta {
  background: var(--accent); color: #fff;
}

/* ─── KLOOK FOOTER LINK ─── */
.ft-affiliate {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.ft-affiliate a {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  color: var(--ink4); text-decoration: none;
  letter-spacing: .5px;
  transition: color .14s;
}
.ft-affiliate a:hover { color: var(--accent); }
.ft-affiliate-tag {
  display: inline-block;
  font-size: 7.5px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink4);
  margin-left: 6px; padding: 1px 5px; border-radius: 2px;
  background: var(--paper2); border: 1px solid var(--rule);
}

/* ─── eSIM RIBBON ─── */
.ribbon {
  max-width: 720px; margin: 4px auto 0;
  padding: 0 16px;
}
.ribbon-inner {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.08), rgba(var(--accent-rgb),.02));
  border: 1px solid rgba(var(--accent-rgb),.22);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.ribbon-icon { font-size: 24px; flex-shrink: 0; }
.ribbon-text { flex: 1; min-width: 0; }
.ribbon-text strong { font-family: var(--serif); font-size: 16px; color: var(--ink); display: block; margin-bottom: 2px; letter-spacing: -.1px; }
.ribbon-text span { font-size: 11.5px; color: var(--ink3); }
.ribbon-cta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 13px; border-radius: 100px;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  text-decoration: none; letter-spacing: .3px;
  white-space: nowrap;
  transition: transform .15s;
}
.ribbon-cta:hover { transform: translateY(-1px); }

/* ─── EMAIL CAPTURE ─── */
.email-cap {
  max-width: 600px; margin: 24px auto 12px;
  padding: 22px 22px 20px;
  border: 1px dashed var(--rule2); border-radius: var(--r);
  text-align: center; background: var(--paper2);
}
.email-cap h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--ink); margin-bottom: 5px; line-height: 1.2;
}
.email-cap h3 em { font-style: italic; color: var(--accent); }
.email-cap p {
  font-family: var(--serif); font-style: italic; font-size: 13.5px;
  color: var(--ink3); margin-bottom: 14px; line-height: 1.5;
}
.email-cap form {
  display: flex; gap: 6px; max-width: 360px; margin: 0 auto;
  flex-wrap: wrap; justify-content: center;
}
.email-cap input {
  flex: 1; min-width: 200px; min-height: 44px;
  padding: 11px 14px; border-radius: var(--rs);
  border: 1px solid var(--rule); background: var(--paper);
  font-family: var(--sans); color: var(--ink);
  font-size: 16px; /* >=16px stops iOS Safari auto-zoom on focus */
  outline: none;
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 640px) { .email-cap input { font-size: 14px; } }
.email-cap input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),.1); }
.email-cap button {
  padding: 11px 20px; min-height: 44px; border-radius: var(--rs);
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  border: none; cursor: pointer; letter-spacing: .2px;
  transition: transform .15s, opacity .15s;
}
.email-cap button:hover { transform: translateY(-1px); }
.email-cap .small {
  font-size: 10px; color: var(--ink4); margin-top: 9px;
  letter-spacing: .3px;
}
.email-cap.ok h3 { color: var(--sage); }

/* ─── FOOTER ─── */
.ft {
  text-align: center; padding: 24px 16px 44px;
  border-top: 3px double var(--rule);
  max-width: 720px; margin: 0 auto;
}
.ft-orn { font-family: var(--serif); font-size: 22px; font-style: italic; color: var(--ink4-deco); display: block; margin-bottom: 8px; }
.ft-txt { font-size: 9px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--ink4); }
.ft-cities { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.ft-cities a { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--ink3); text-decoration: none; transition: color .15s; }
.ft-cities a:hover { color: var(--accent); }
.ft-cities a.ft-current { color: var(--accent); pointer-events: none; }
.ft-meta {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.ft-meta a {
  font-size: 10.5px; color: var(--ink4); text-decoration: none;
  letter-spacing: 1px;
}
.ft-meta a:hover { color: var(--accent); }

.empty {
  text-align: center; padding: 56px 24px;
  font-family: var(--serif); font-size: 16px;
  font-style: italic; color: var(--ink4);
}
.empty button {
  display: inline-block; margin-top: 12px;
  padding: 6px 14px; background: var(--accent); color: #fff;
  border: none; border-radius: 100px; cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .3px;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM ACTION BAR (city pages only)
   Anchors the primary nav (Search · Map · Surprise · Saved)
   in the thumb zone. Hides on scroll-down, returns on scroll-up.
   ═══════════════════════════════════════════════════════════ */
.botbar {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  z-index: 250;
  display: none; /* shown via JS only on city pages, only on mobile via media query below */
  align-items: stretch;
  gap: 4px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--surface-glass-strong);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 28px rgba(26,22,18,.10);
  width: min(420px, calc(100vw - 16px));
  transition: transform var(--dur-med) var(--ease-out-quart), opacity var(--dur-fast) ease;
  will-change: transform;
}
@media (max-width: 768px) {
  .botbar.botbar-on { display: flex; }
}
.botbar.botbar-hidden {
  transform: translate(-50%, calc(100% + 12px));
  opacity: .85;
}
.botbar button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px 6px 4px;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--ink3);
  font-family: var(--sans); font-size: 9.5px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-instant) var(--ease-spring);
  position: relative;
}
.botbar button:active { transform: scale(.94); }
.botbar button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.botbar button svg {
  width: 22px; height: 22px;
  stroke-width: 2.2;
}
.botbar button.on {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
}
.botbar button.on::before {
  content: '';
  position: absolute; top: 3px; left: 50%;
  width: 18px; height: 3px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
}
.botbar-count {
  position: absolute; top: 4px; right: 50%;
  transform: translateX(20px);
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 100px;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--paper);
  pointer-events: none;
}
html[data-theme="dark"] .botbar-count {
  box-shadow: 0 0 0 2px var(--paper2);
}
/* When the bottom bar is mounted AND visible (≤768px only), lift other fixed-bottom items so they don't overlap */
@media (max-width: 768px) {
  body.botbar-mounted .cs { padding-bottom: 96px; }
  body.botbar-mounted .map-wrap { padding-bottom: 96px; }
  body.botbar-mounted #scrollTop {
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px));
  }
  body.botbar-mounted .toast {
    bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .botbar { transition: none; }
}

/* ─── SCROLL-TO-TOP ─── */
#scrollTop {
  position: fixed;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
  width: 44px; height: 44px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; transform: translateY(8px);
  transition: opacity .22s, transform .2s, background .15s, border-color .15s;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(26,22,18,.12);
}
#scrollTop.vis { opacity: 1; transform: translateY(0); }
#scrollTop:hover { background: var(--accent); border-color: var(--accent); }
#scrollTop:hover svg { color: #fff; }
#scrollTop svg { color: var(--ink3); transition: color .15s; }

mark.hl {
  background: rgba(var(--accent-rgb), .15);
  border-radius: 2px; padding: 0 1px; color: inherit;
}

/* ─── TOAST ─── */
.toast {
  position: fixed;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px));
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 100px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  z-index: 9000; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 6px;
  max-width: calc(100vw - 32px);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ─── KEYBOARD HINT BAR ─── */
.kb-hint {
  position: fixed;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px));
  left: max(24px, calc(env(safe-area-inset-left) + 14px));
  background: var(--paper2);
  border: 1px solid var(--rule);
  padding: 8px 12px; border-radius: 100px;
  font-size: 10.5px; color: var(--ink3); font-weight: 500;
  display: none; gap: 10px;
  z-index: 150;
}
@media (min-width: 900px) { .kb-hint { display: flex; } }
.kb-hint kbd {
  display: inline-block;
  background: var(--paper); border: 1px solid var(--rule);
  border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 5px; font-family: var(--sans); font-size: 10px; font-weight: 700;
  color: var(--ink2);
  margin-right: 3px;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .i2 { grid-template-columns: 1fr; }
  .mast-stats { flex-wrap: wrap; gap: 8px; }
  .tools {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
  }
  .home-nav {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
  }
}

@media (max-width: 480px) {
  /* Tools cluster — keep labels visible on feature buttons so the icon isn't ambiguous */
  .tools { gap: 5px; }
  .tools button, .tools a { min-width: 44px; padding: 0 10px; font-size: 10.5px; }
  .tools .tools-utility span { display: none; }
  /* Modal hugs the viewport on phones (bottom-sheet feel, compact padding) */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-card {
    padding: 22px 16px 16px;
    max-height: calc(100dvh - 20px);
    border-radius: 18px 18px 0 0;
    will-change: transform;
  }
  /* Drag-handle / grabber pill — visual affordance for swipe-down-to-close */
  .modal-card::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 2px;
    background: var(--rule2);
    pointer-events: none;
  }
  /* While the user is dragging, suppress the open-scale transition so motion tracks the finger */
  .modal-card.dragging { transition: none; }
  .modal-actions button, .modal-actions a { min-width: calc(50% - 4px); padding: 10px 12px; }
}

@media (max-width: 380px) {
  /* Very narrow phones: tighten only feature-button padding; keep their labels so the icon isn't ambiguous. */
  .tools .tools-feature { padding: 0 9px; gap: 4px; }
  .tools .tools-feature span:not(.tools-keep) { font-size: 10px; }
}

@media (max-width: 360px) {
  .mast-hero h1 { font-size: 48px; }
  .flts { gap: 4px; }
  .pill { padding: 6px 10px; font-size: 10.5px; min-height: 34px; }
  .modes button { padding: 6px 10px; font-size: 11px; min-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════
   ADDICTIVE LAYER — Passport · Visited · Photocard · Couple
   ═══════════════════════════════════════════════════════════ */

/* ─── Tools cluster additions ─── */
.tools-streak {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 4px; padding: 1px 6px;
  background: rgba(220,80,40,.12); color: #C04830;
  border-radius: 100px;
  font-size: 10px; font-weight: 800;
}
html[data-theme="dark"] .tools-streak { background: rgba(255,140,80,.18); color: #FFB088; }
.tools-streak svg { transform: translateY(-.5px); }
.tools-keep-mobile { display: inline; }
@media (max-width: 480px) {
  .tools-keep-mobile { display: none; }
}

/* ─── Visited stamp button on card header ─── */
.vb {
  position: relative; flex-shrink: 0;
  width: 32px; height: 32px;
  margin-right: -4px;
  border-radius: 50%; border: 1px solid transparent;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink4); transition: all .14s;
}
.vb::before {
  content: ""; position: absolute; inset: -6px; /* effective tap target ~44px */
}
.vb:hover { background: var(--paper2); color: var(--sage); border-color: var(--rule); }
.vb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vb.on { color: var(--sage); background: rgba(92,122,96,.14); border-color: rgba(92,122,96,.35); }
.vb.on svg { stroke: var(--sage); }
.vb.pulse svg { animation: heartPulse .4s ease; }

/* ─── Visited card subtle indicator ─── */
.c.c-been {
  background: linear-gradient(to right, rgba(92,122,96,.06), rgba(255,251,247,.85));
  border-color: rgba(92,122,96,.32);
}
html[data-theme="dark"] .c.c-been {
  background: linear-gradient(to right, rgba(138,168,144,.06), rgba(31,27,22,.6));
  border-color: rgba(138,168,144,.32);
}
.c.c-been .lb { border-color: rgba(92,122,96,.5); }
.c.c-been .lb::after {
  content: '✓'; position: absolute;
  font-size: 10px; font-weight: 800;
  color: var(--sage); background: var(--paper);
  border-radius: 50%;
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--sage);
  transform: translate(20px, -22px);
}
.lb { position: relative; }

/* ─── ★ Hidden card (gold dashed frame, unlocked feel) ─── */
.c.c-star {
  border: 2px dashed var(--gold);
  background: linear-gradient(135deg, rgba(154,122,58,.07), rgba(255,251,247,.85));
  box-shadow: 0 6px 22px rgba(154,122,58,.18);
}
html[data-theme="dark"] .c.c-star {
  background: linear-gradient(135deg, rgba(201,165,85,.12), rgba(31,27,22,.6));
}
.c.c-star .lb {
  background: linear-gradient(135deg, var(--gold), var(--accent));
  border-color: var(--gold);
}
.c.c-star .lb span { color: #fff; font-size: 22px; }
.c.c-star .nm-pre {
  font-family: var(--sans); font-size: 8.5px; font-weight: 800;
  letter-spacing: 2.5px; color: var(--gold);
  text-transform: uppercase;
  display: block; margin-bottom: 2px;
}

/* ─── Alphabet nav: been + ★ ─── */
.an button.been {
  color: var(--sage);
  background: rgba(92,122,96,.14);
  box-shadow: inset 0 0 0 1px rgba(92,122,96,.32);
}
.an button.been.al {
  background: var(--accent) !important; color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 8px rgba(var(--accent-rgb), .35);
}
.an button.an-star {
  color: var(--gold);
  font-weight: 800;
  background: rgba(154,122,58,.10);
  box-shadow: inset 0 0 0 1.5px rgba(154,122,58,.42);
}
.an button.an-star:hover { background: rgba(154,122,58,.22); color: var(--gold); }
.an button.an-star.fav::after { display: none; }

/* ─── Photocard button accent ─── */
.bc-photocard {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.08), rgba(var(--accent-rgb),.02)) !important;
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb),.32) !important;
}
.bc-photocard:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ─── Photocard modal ─── */
.pc-modal { max-width: 460px; }
.pc-title {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  color: var(--ink); line-height: 1.2; margin-bottom: 14px;
}
.pc-title em { font-style: italic; color: var(--accent); }
.pc-frame {
  position: relative;
  background: var(--paper2);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
.pc-spinner {
  font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink4);
}
.pc-preview { width: 100%; max-width: 280px; }
.pc-preview canvas { width: 100% !important; height: auto !important; }
@media (max-width: 540px) {
  .pc-title { font-size: 20px; margin-bottom: 10px; }
  .pc-frame { padding: 12px; margin-bottom: 10px; min-height: 180px; }
  .pc-preview { max-width: 220px; }
  .pc-hint { font-size: 10.5px; margin-bottom: 8px; }
}
.pc-hint {
  font-size: 11px; color: var(--ink4); text-align: center;
  margin-bottom: 10px;
}
.pc-styles {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin: -2px auto 12px;
  background: var(--paper2);
  border-radius: 999px;
  width: fit-content;
  border: 1px solid var(--rule2);
}
.pc-style-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .04em;
  color: var(--ink4);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.pc-style-btn:hover { color: var(--ink2); }
.pc-style-btn.on {
  background: var(--ink);
  color: var(--paper);
}
html[data-theme="dark"] .pc-style-btn.on {
  background: var(--accent);
  color: #fff;
}
@media (max-width: 540px) {
  .pc-style-btn { padding: 7px 11px; font-size: 10.5px; }
  .pc-styles { margin-bottom: 10px; }
}

/* ─── Passport modal ─── */
.pp-modal { max-width: 620px; padding: 24px 22px 22px; }
.pp-h3 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  color: var(--ink); line-height: 1.2; margin-bottom: 12px;
  text-align: center;
}
@media (max-width: 540px) {
  .pp-h3 { font-size: 22px; margin-bottom: 10px; }
  .pp-summary { gap: 14px; padding: 11px 10px; margin-bottom: 12px; }
  .pp-sum-stat strong { font-size: 22px; }
  .pp-sum-stat span { font-size: 8.5px; letter-spacing: 1.5px; }
  .pp-sum-title { font-size: 14px; }
  .pp-cities { gap: 12px; }
  .pp-city { padding: 10px 12px; }
  .pp-city-emoji { font-size: 20px; }
  .pp-city-name strong { font-size: 15.5px; }
  .pp-city-meta { font-size: 10px; }
  .pp-city-go { padding: 6px 11px; min-height: 32px; font-size: 10.5px; }
  .pp-hint { font-size: 12px; margin-top: 12px; }
}
.pp-h3 em { font-style: italic; color: var(--accent); }
.pp-summary {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
  padding: 14px 12px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  margin-bottom: 16px;
}
.pp-sum-stat { text-align: center; }
.pp-sum-stat strong {
  display: block; font-family: var(--serif); font-size: 26px;
  font-weight: 700; color: var(--ink); line-height: 1;
}
.pp-sum-stat span {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink4);
  display: block; margin-top: 3px;
}
.pp-sum-title {
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--accent);
  padding-left: 18px;
  border-left: 1px solid var(--rule);
}
@media (max-width: 480px) {
  .pp-sum-title { border-left: none; padding-left: 0; padding-top: 6px; border-top: 1px solid var(--rule); width: 100%; text-align: center; }
}
.pp-cities { display: flex; flex-direction: column; gap: 16px; }
/* Passport page — city hero as watermark behind the stamp grid. */
.pp-page {
  position: relative;
  padding: 16px 16px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  isolation: isolate; /* lock z-index stacking */
}
.pp-page::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--page-bg);
  background-size: cover;
  background-position: 50% 55%;
  opacity: .18;
  filter: blur(2px) saturate(1.05);
  z-index: -2;
}
.pp-page::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.06), rgba(255,255,255,.78) 60%, var(--paper) 100%);
  z-index: -1;
}
html[data-theme="dark"] .pp-page::before { opacity: .12; }
html[data-theme="dark"] .pp-page::after {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.18), rgba(20,16,12,.72) 55%, var(--paper) 100%);
}
.pp-city-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.pp-city-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.pp-city-name { flex: 1; min-width: 0; }
.pp-city-name strong {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--ink); display: block; line-height: 1.1;
  letter-spacing: -0.005em;
}
.pp-city-meta { font-size: 10.5px; color: var(--ink3); font-weight: 600; letter-spacing: .02em; }
.pp-city-go {
  font-size: 11px; font-weight: 700; color: var(--accent);
  text-decoration: none; padding: 8px 14px;
  border: 1px solid rgba(var(--accent-rgb),.32);
  border-radius: 100px;
  display: inline-flex; align-items: center; gap: 3px;
  flex-shrink: 0; min-height: 36px;
  transition: all .14s;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(4px);
}
.pp-city-go:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pp-bar {
  height: 4px;
  background: rgba(var(--accent-rgb),.10);
  border-radius: 2px;
  margin-bottom: 10px; overflow: hidden;
}
.pp-bar-fill {
  height: 100%; background: var(--accent);
  transition: width .4s ease;
  box-shadow: 0 0 8px rgba(var(--accent-rgb),.4);
}
.pp-grid {
  display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px;
  position: relative;
}
@media (max-width: 480px) {
  .pp-grid { grid-template-columns: repeat(9, 1fr); gap: 4px; }
}
/* Stamp — rubber-stamp feel for visited, faded blank for un-visited. */
.pp-stamp {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.65);
  border: 1px dashed rgba(var(--accent-rgb),.18);
  color: var(--ink4);
  font-family: var(--serif); font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: transform .14s ease, background .14s, border-color .14s, box-shadow .14s;
  isolation: isolate;
}
.pp-stamp-l { line-height: 1; }
.pp-stamp-d {
  position: absolute; bottom: 2px;
  font: 700 6.5px/1 var(--sans);
  letter-spacing: .02em;
  color: inherit;
  opacity: .82;
}
.pp-stamp:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(var(--accent-rgb),.42);
  color: var(--ink2);
  z-index: 4;
}
/* Hover thumb — lazy fetched only when hovered (because background-image
   on a never-rendered pseudo-element doesn't trigger a network request). */
.pp-stamp::after {
  content: '';
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  width: 84px; height: 84px;
  margin-left: -42px;
  background-image: var(--thumb);
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.22), 0 0 0 3px #fff, 0 0 0 4px rgba(var(--accent-rgb),.5);
  opacity: 0; pointer-events: none;
  transform: scale(.78);
  transition: opacity .14s ease, transform .14s ease;
  z-index: 6;
}
.pp-stamp:hover::after,
.pp-stamp:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}
.pp-stamp[style*="--thumb"]:hover::after { display: block; }
.pp-stamp:not([style*="--thumb"])::after { display: none; }
/* Visited — rubber stamp ink red on city accent, tilted, double border */
.pp-stamp.on {
  background: var(--accent);
  border: 1.5px solid var(--accent);
  color: #fff;
  transform: rotate(var(--rot, 0deg));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.45) inset,
    0 2px 4px rgba(0,0,0,.18),
    0 0 0 1.5px var(--accent);
  font-style: italic;
  text-shadow: 0 1px 0 rgba(0,0,0,.16);
}
.pp-stamp.on:hover {
  transform: rotate(var(--rot, 0deg)) translateY(-2px) scale(1.06);
}
/* The hidden ★ stamp */
.pp-stamp.pp-star {
  border-style: dashed; color: var(--gold); border-color: var(--gold);
  background: rgba(154,122,58,.06);
}
.pp-stamp.pp-star.on {
  background: var(--gold); color: #fff;
  transform: rotate(var(--rot, -4deg));
}
.pp-stamp.pp-star.locked {
  color: var(--ink4); border-color: var(--rule);
  pointer-events: none;
}
.pp-stamp.pp-star.locked svg { opacity: .5; }
.pp-stamp.pp-star.avail {
  animation: starPulse 1.8s ease-in-out infinite;
}
@keyframes starPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(154,122,58,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(154,122,58,0); }
}
.pp-hint {
  margin-top: 14px; text-align: center;
  font-family: var(--serif); font-style: italic;
  font-size: 12.5px; color: var(--ink4);
}

/* ─── Couple modal ─── */
.cp-modal { max-width: 540px; }
.cp-h3 {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  color: var(--ink); line-height: 1.2; margin-bottom: 4px;
  text-align: center;
}
.cp-h3 em { font-style: italic; color: var(--accent); }
.cp-sub {
  font-family: var(--serif); font-style: italic; font-size: 13.5px;
  color: var(--ink3); text-align: center; margin-bottom: 14px;
}
@media (max-width: 540px) {
  .cp-h3 { font-size: 21px; }
  .cp-sub { font-size: 12.5px; margin-bottom: 12px; }
  .cp-pill { min-width: 34px; height: 34px; font-size: 14.5px; }
}
.cp-mine, .cp-pills {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
  min-height: 32px;
  margin-bottom: 12px;
}
.cp-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: 8px;
  background: var(--paper2); border: 1px solid var(--rule);
  font-family: var(--serif); font-size: 16px; font-weight: 700;
  color: var(--ink2);
  text-decoration: none;
  transition: all .14s;
}
.cp-pill:hover { border-color: var(--accent); color: var(--accent); }
.cp-pill-both {
  background: rgba(var(--accent-rgb),.14);
  border-color: var(--accent);
  color: var(--accent);
}
.cp-pill-them { color: var(--indigo); border-color: rgba(74,90,138,.32); }
.cp-empty {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink4); padding: 6px 0;
}
.cp-compromise {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--rule);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.cp-compromise-kicker {
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold);
}
.cp-compromise-tag {
  font-family: var(--serif); font-style: italic; font-size: 12px;
  color: var(--ink3);
}
.cp-url {
  display: flex; gap: 6px; margin-bottom: 14px;
}
.cp-url input {
  flex: 1; min-width: 0; min-height: 44px;
  padding: 11px 12px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  border-radius: var(--rs);
  color: var(--ink3); font-family: var(--sans);
  font-size: 16px; /* >=16px stops iOS Safari auto-zoom on focus */
  outline: none;
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 640px) { .cp-url input { font-size: 12.5px; } }
.cp-url .bc { padding: 8px 12px; }
.cp-merge { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.cp-col {
  padding: 12px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  border-radius: var(--rs);
}
.cp-col-both {
  background: rgba(var(--accent-rgb),.06);
  border-color: rgba(var(--accent-rgb),.3);
}
.cp-col-h {
  display: flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink4);
  margin-bottom: 8px;
}
.cp-col-both .cp-col-h { color: var(--accent); }
.cp-col-both .cp-col-h svg { fill: var(--accent); stroke: var(--accent); }
/* Photo grid for "Both saved" overlap — Pinterest-style. */
.cp-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}
.cp-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  box-shadow: 0 2px 6px rgba(0,0,0,.16), 0 0 0 2px #fff, 0 0 0 3px rgba(var(--accent-rgb),.32);
  transition: transform .14s ease, box-shadow .14s ease;
  background: rgba(var(--accent-rgb),.08);
}
.cp-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cp-photo:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 14px rgba(0,0,0,.22), 0 0 0 2px #fff, 0 0 0 3px var(--accent);
}
.cp-photo-l {
  position: absolute;
  left: 4px; bottom: 2px;
  font: 700 italic 18px/1 var(--serif);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.cp-photo-empty {
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb),.12);
}
.cp-photo-empty .cp-photo-l {
  position: static;
  color: var(--accent);
  text-shadow: none;
  font-size: 22px;
}
.cp-photo-them {
  box-shadow: 0 2px 6px rgba(0,0,0,.16), 0 0 0 2px #fff, 0 0 0 3px rgba(154,122,58,.5);
}

/* ═══════════════════════════════════════════════════════════
   PHASE 3 — Rating · Journal · Wrapped
   ═══════════════════════════════════════════════════════════ */

/* ─── Rating + memo widget (inside expanded card) ─── */
.rate {
  background: linear-gradient(135deg, rgba(154,122,58,.06), rgba(154,122,58,.01));
  border: 1px dashed rgba(154,122,58,.32);
  border-radius: var(--rs);
  padding: 10px 12px 11px;
  margin-bottom: 11px;
}
.rate-stars {
  display: flex; align-items: center; gap: 1px;
  margin-bottom: 8px;
}
.rate-star {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--serif); font-size: 24px; line-height: 1;
  color: var(--rule2);
  padding: 2px 3px;
  transition: color .12s, transform .14s;
  -webkit-tap-highlight-color: transparent;
}
.rate-star:hover { color: var(--gold); transform: translateY(-1px); }
.rate-star.on { color: var(--gold); }
.rate-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.rate-clear {
  margin-left: 4px;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink4); padding: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: all .12s;
}
.rate-clear:hover { background: var(--paper3); color: var(--ink2); }
.rate-meta {
  margin-left: auto;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--ink4); text-transform: uppercase;
}
.rate-meta-prompt { color: var(--gold); }
.rate-meta-since { color: var(--ink4); font-weight: 600; opacity: .75; }
@media (max-width: 480px) { .rate-meta-since { display: none; } }
.rate-note {
  display: block; width: 100%;
  padding: 10px 12px; min-height: 44px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--rs);
  color: var(--ink); font-family: var(--serif); font-style: italic;
  font-size: 16px; /* >=16px stops iOS Safari auto-zoom on focus */
  outline: none;
  transition: border-color .14s, box-shadow .14s;
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 640px) { .rate-note { font-size: 13.5px; } }
.rate-note::placeholder { color: var(--ink4); font-style: italic; }
.rate-note:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(154,122,58,.12); }

/* ─── Journal modal ─── */
.jl-modal { max-width: 540px; padding: 24px 22px 22px; }
.jl-h3 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  color: var(--ink); line-height: 1.2; margin-bottom: 14px;
  text-align: center;
}
@media (max-width: 540px) {
  .jl-h3 { font-size: 22px; margin-bottom: 11px; }
}
.jl-h3 em { font-style: italic; color: var(--accent); }
.jl-empty {
  text-align: center; padding: 32px 18px;
  font-family: var(--serif); color: var(--ink3);
}
.jl-empty-orn {
  font-size: 32px; font-style: italic; color: var(--rule2);
  margin-bottom: 14px;
}
.jl-empty p { font-size: 15px; line-height: 1.5; margin-bottom: 4px; }
.jl-empty-sub { font-style: italic; font-size: 13px; color: var(--ink4) !important; }
.jl-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  padding: 14px 10px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  margin-bottom: 14px;
}
@media (max-width: 480px) {
  .jl-stats { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
}
.jl-search-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.jl-search {
  flex: 1; min-width: 0;
  font: inherit;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 13px; color: var(--ink);
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.jl-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .12); }
.jl-search-hint {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink4);
  flex-shrink: 0;
}
.jl-groups {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 56vh; max-height: 56dvh; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-right: 2px;
}
.jl-groups::-webkit-scrollbar { width: 4px; }
.jl-groups::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.jl-group { border-top: 1px dashed var(--rule); padding-top: 8px; }
.jl-group:first-child { border-top: 0; padding-top: 0; }
.jl-group[hidden] { display: none; }
.jl-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  cursor: pointer;
  padding: 4px 0 8px;
  list-style: none;
}
.jl-group-head::-webkit-details-marker { display: none; }
.jl-group-head::after {
  content: "▾"; margin-left: 8px;
  color: var(--ink4); font-size: 11px;
  transition: transform .15s;
}
.jl-group:not([open]) .jl-group-head::after { transform: rotate(-90deg); }
.jl-group-label {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; font-weight: 600; color: var(--ink);
}
.jl-group-count {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ink4);
}
.jl-group .jl-list { max-height: none; overflow: visible; }
.jl-entry[hidden] { display: none; }
.jl-empty-search {
  text-align: center; padding: 26px 18px;
  font-family: var(--serif); color: var(--ink4); font-style: italic;
}
.jl-stat { text-align: center; }
.jl-stat strong {
  display: block; font-family: var(--serif); font-size: 22px;
  font-weight: 700; color: var(--ink); line-height: 1;
}
.jl-stat span {
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ink4);
  display: block; margin-top: 4px;
}
.jl-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 56vh; max-height: 56dvh; overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.jl-list::-webkit-scrollbar { width: 4px; }
.jl-list::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 2px; }
.jl-entry-link {
  display: flex; align-items: stretch; gap: 12px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  text-decoration: none;
  transition: all .14s;
  position: relative;
}
.jl-entry-link:hover {
  transform: translateX(3px);
  border-color: var(--accent, var(--ink4));
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.jl-entry-letter {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  align-self: center;
}
/* Photo thumb with letter monogram pinned over the corner — scrapbook tile. */
.jl-entry-thumb {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  align-self: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 0 0 2px #fff, 0 0 0 3px rgba(var(--accent-rgb, 196,82,42), .42);
}
.jl-entry-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.jl-entry-thumb-l {
  position: absolute;
  bottom: 2px; right: 4px;
  font: 700 italic 18px/1 var(--serif);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
@media (max-width: 540px) {
  .jl-entry-thumb { width: 60px; height: 60px; }
  .jl-entry-thumb-l { font-size: 15px; }
}
.jl-entry-body { flex: 1; min-width: 0; }
.jl-entry-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.jl-entry-city {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent);
}
.jl-entry-date {
  font-size: 10px; font-weight: 600;
  letter-spacing: .5px;
  color: var(--ink4);
}
.jl-entry-title {
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jl-entry-stars {
  font-family: var(--serif); font-size: 14px; color: var(--gold);
  margin-top: 3px; letter-spacing: 1px;
}
.jl-entry-note {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink3); line-height: 1.45; margin-top: 4px;
}
.jl-entry-go {
  color: var(--ink4);
  align-self: center;
  flex-shrink: 0;
}

/* ─── Wrapped modal ─── */
.wr-modal { max-width: 460px; padding: 24px 22px 22px; }
.wr-h3 {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  color: var(--ink); line-height: 1.2; margin-bottom: 14px;
  text-align: center;
}
.wr-h3 em { font-style: italic; color: var(--accent); }

/* ─── Passport bottom actions ─── */
.pp-actions { margin-top: 18px; }
.pp-actions button { flex: 1; }

/* ─── PRINT ─── */
@media print {
  body { background: #fff; }
  #prog, .home-nav, .tools, .city-nav-row, .toolbar, .an-wrap,
  .surprise-cta, .ribbon, .modal-overlay, #scrollTop,
  .kb-hint, .courses-wrap, .mb, .compare, .email-cap, .ft-cities, .ft-meta {
    display: none !important;
  }
  .c { break-inside: avoid; border: 1px solid #999; box-shadow: none; page-break-inside: avoid; }
  .c .cb { grid-template-rows: 1fr !important; }
  .cvw, .fb { display: none; }
  .mast-hero h1 { font-size: 48px; }
  body { color: #000; }
}

/* Prevent background scroll while a modal is open. */
body.kd-modal-open { overflow: hidden; }
/* Hide the mobile bottom bar while a modal is open — keeps the bottom-sheet stack uncluttered. */
body.kd-modal-open .botbar { transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════
   DESIGN 2.0 · PHASE 0 FOUNDATION
   View Transitions · Motion utilities · Image strategy
   These are additive — no existing rules are mutated.
   ═══════════════════════════════════════════════════════════ */

/* ─── VIEW TRANSITIONS ─── */
/* Cross-document VT (home ↔ city, city ↔ city). Falls back to instant
   nav where unsupported (Safari/older Firefox). */
@view-transition { navigation: auto; }

/* Default page morph — gentle cross-fade with a hint of motion. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-cinematic);
  animation-timing-function: var(--ease-spring);
}
::view-transition-old(root) {
  animation-name: kd-fade-out;
}
::view-transition-new(root) {
  animation-name: kd-fade-in;
}
@keyframes kd-fade-out {
  to { opacity: 0; transform: scale(.985); filter: blur(2px); }
}
@keyframes kd-fade-in {
  from { opacity: 0; transform: scale(1.015); filter: blur(2px); }
}

/* Opt-in named transitions (Phase 1/2 will tag specific elements). */
.vt-mast { view-transition-name: kd-mast; }
.vt-hero { view-transition-name: kd-hero; }
.vt-cover { view-transition-name: kd-cover; }
.vt-toolbar { view-transition-name: kd-toolbar; }
.vt-an { view-transition-name: kd-an; }

/* ─── MOTION UTILITIES (opt-in classes) ─── */
.spring          { transition: transform var(--dur-fast) var(--ease-spring); }
.spring:active   { transform: scale(.97); }

.lift            { transition: transform var(--dur-med) var(--ease-out-quart), box-shadow var(--dur-med) var(--ease-out-quart); }
.lift:hover      { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lift:active     { transform: translateY(-1px) scale(.99); transition-duration: var(--dur-instant); }

.shine           { position: relative; overflow: hidden; }
.shine::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.shine:hover::after { animation: kd-shine .9s var(--ease-out-quart); }
@keyframes kd-shine {
  to { transform: translateX(120%); }
}

/* Unified focus ring — additive, opts in via .focus-ring */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: inherit;
}

/* ─── IMAGE STRATEGY · gradient placeholder ─── */
/* When a card or tile doesn't have a hero image yet, .img-slot renders an
   on-brand accent wash so layout reservations are visible (no CLS later). */
.img-slot {
  background: var(--accent-wash);
  position: relative;
  overflow: hidden;
}
.img-slot::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--halo-accent);
  opacity: .8;
  pointer-events: none;
}
.img-slot > img,
.img-slot > picture {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── REDUCED MOTION OVERRIDES ─── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms !important;
    animation-name: none !important;
  }
  .shine::after { display: none; }
  .spring:active, .lift:hover, .lift:active { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN 2.0 · PHASE 2 — CITY PAGES AS ISSUES
   City hero cover · Drop cap · Reading time · Next-peek ·
   Story Mode (4th view)
   ═══════════════════════════════════════════════════════════ */

/* ─── CITY HERO (full-bleed cinematic banner inserted before masthead) ─── */
.masthead--compact { display: none; }
.city-hero {
  max-width: 1080px;
  margin: 22px auto 0;
  padding: 0 16px;
}
.city-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: var(--accent, #1A1612);
  color: #fff;
  padding: 28px 28px 26px;
  min-height: 280px;
  isolation: isolate;
  box-shadow: 0 18px 50px -22px rgba(0,0,0,.3), 0 3px 12px rgba(0,0,0,.06);
}
@media (max-width: 600px) {
  .city-hero-card { padding: 24px 22px 22px; border-radius: 18px; min-height: 240px; }
}
.city-hero-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 110% 80% at 50% 0%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(ellipse 80% 60% at 18% 100%, rgba(0,0,0,.28), transparent 60%),
    linear-gradient(160deg, var(--accent, #1A1612) 0%, var(--accent2, var(--accent, #1A1612)) 100%);
  z-index: -3;
}
.city-hero-card::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.32) 50%, rgba(0,0,0,.62) 100%),
    radial-gradient(ellipse 75% 90% at 0% 60%, color-mix(in srgb, var(--accent, #1A1612) 55%, transparent), transparent 70%),
    radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.3px);
  background-size: 100% 100%, 100% 100%, 20px 20px;
  pointer-events: none;
  z-index: -2;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .city-hero-card::after {
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.68) 100%),
      radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.3px);
    background-size: 100% 100%, 20px 20px;
  }
}
.city-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: saturate(.95);
}
html[data-theme="dark"] .city-hero-bg { filter: saturate(.8) brightness(.78); }
.city-silhouette {
  position: absolute; right: -10px; bottom: -10px;
  width: clamp(180px, 28vw, 320px);
  height: auto;
  opacity: .22;
  z-index: -1;
  pointer-events: none;
}
.city-silhouette path,
.city-silhouette polygon,
.city-silhouette rect,
.city-silhouette circle { fill: #fff; }

.city-hero-issue {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 800;
  letter-spacing: 3.6px; text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.city-hero-issue-line { flex: 1; height: 1px; background: rgba(255,255,255,.28); max-width: 90px; }
.city-hero-name {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(48px, 6vw, 78px);
  line-height: .98; letter-spacing: -.025em;
  margin-top: 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,.14);
}
.city-hero-name em {
  font-style: italic;
  color: rgba(255,255,255,.78);
}
.city-hero-hangul {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.8vw + .4rem, 24px);
  color: rgba(255,255,255,.7);
  margin-top: 4px;
  letter-spacing: -.005em;
}
.city-hero-stand {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 1vw + .55rem, 17.5px);
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  margin-top: 16px;
  max-width: 42ch;
  text-wrap: balance;
}
.city-hero-stand::first-letter {
  font-family: var(--serif);
  font-size: 3em; font-weight: 700; font-style: normal;
  line-height: .85;
  float: left;
  margin: 0 .1em -.05em 0;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,.16);
}
.city-hero-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 20px;
}
.city-hero-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 100px;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .4px;
  color: rgba(255,255,255,.92);
}
.city-hero-meta-item strong {
  font-family: var(--serif); font-weight: 700; font-size: 14px;
  margin-right: 1px;
}
.city-hero-meta-streak {
  background: rgba(255, 180, 130, .22);
  border-color: rgba(255, 200, 150, .35);
}

/* ─── DROP CAP on description quote ─── */
.c.on .dt {
  font-size: clamp(16px, 1vw + .5rem, 17.5px);
  line-height: 1.7;
}
.c.on .dt::first-letter {
  font-family: var(--serif);
  font-size: 3.6em; font-weight: 700; font-style: normal;
  float: left;
  line-height: .85;
  margin: .05em .12em 0 -.04em;
  color: var(--accent);
}
@media (max-width: 480px) {
  .c.on .dt::first-letter { font-size: 3em; }
}

/* ─── READING TIME badge (in card header) ─── */
.read-time {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .8px;
  color: var(--ink4);
  text-transform: uppercase;
  margin-top: 2px;
}
.read-time::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
}

/* ─── NEXT-LETTER PEEK (at bottom of expanded card) ─── */
.next-peek {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 -4px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .04), rgba(var(--accent-rgb), .01));
  border: 1px dashed rgba(var(--accent-rgb), .28);
  border-radius: var(--rs);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-quart);
}
.next-peek:hover {
  background: rgba(var(--accent-rgb), .08);
  border-color: var(--accent);
  border-style: solid;
  transform: translateX(2px);
}
.next-peek-kicker {
  font-family: var(--sans); font-size: 8.5px; font-weight: 800;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.next-peek-letter {
  font-family: var(--serif); font-size: 24px; font-weight: 700;
  color: var(--accent);
  line-height: 1; flex-shrink: 0;
}
.next-peek-body { flex: 1; min-width: 0; }
.next-peek-title {
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.1px;
}
.next-peek-loc {
  font-size: 10.5px; color: var(--ink3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.next-peek-go {
  font-family: var(--sans); font-size: 11px; font-weight: 800;
  color: var(--accent);
  letter-spacing: .3px;
  flex-shrink: 0;
}
.next-peek-cross {
  margin-top: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  border-style: solid;
}
.next-peek-cross .next-peek-kicker,
.next-peek-cross .next-peek-letter,
.next-peek-cross .next-peek-go { color: var(--accent); }
.next-peek-cross:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .next-peek-cross { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.16); }
}

/* ─── STORY MODE (full-screen swipe stack) ─── */
.modes button.mode-story.on { background: #8A4FB8; border-color: #8A4FB8; color: #fff; }
.modes button.mode-story svg { width: 12px; height: 12px; }

.story-stack {
  position: fixed; inset: 0;
  z-index: 8500;
  background: var(--paper);
  display: flex; flex-direction: column;
  animation: storyOpen .35s var(--ease-out-quart);
}
@keyframes storyOpen {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}
.story-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 12px;
  background: var(--surface-glass-strong);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.story-back {
  background: var(--paper2); border: 1px solid var(--rule); cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink2);
  transition: all var(--dur-fast) ease;
}
.story-back:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.story-progress {
  flex: 1;
  display: flex; gap: 3px;
}
.story-progress-bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--paper3);
  position: relative;
  overflow: hidden;
}
.story-progress-bar.done { background: var(--accent); }
.story-progress-bar.on::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: left;
  animation: storyTick 6s linear forwards;
}
@keyframes storyTick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.story-counter {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .3px; color: var(--ink3);
  flex-shrink: 0;
}
.story-scroller {
  flex: 1;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.story-scroller::-webkit-scrollbar { display: none; }
.story-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex; flex-direction: column;
  align-items: stretch;
  padding: 28px 22px 24px;
  position: relative;
  isolation: isolate;
  overflow-y: auto;
}
.story-slide::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(var(--accent-rgb), .14), transparent 65%),
    radial-gradient(ellipse 60% 40% at 12% 100%, rgba(var(--accent-rgb), .08), transparent 65%);
  z-index: -1;
  pointer-events: none;
}
.story-letter {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(96px, 22vw, 200px);
  line-height: .82; letter-spacing: -.04em;
  color: var(--accent);
  margin: 12px 0 8px;
  text-shadow: 0 8px 32px rgba(var(--accent-rgb), .15);
}
.story-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 5vw, 44px); line-height: 1.05;
  color: var(--ink); letter-spacing: -.02em;
  margin-bottom: 8px;
  max-width: 18ch;
}
.story-loc {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink3); margin-bottom: 14px;
}
.story-desc {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.4vw + .4rem, 19px); line-height: 1.6;
  color: var(--ink2);
  margin-bottom: 18px;
  max-width: 42ch;
  text-wrap: balance;
}
.story-tip {
  position: relative;
  padding: 14px 16px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--rs);
  margin-bottom: 18px;
  max-width: 540px;
}
.story-tip-label {
  font-family: var(--sans); font-size: 8.5px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.story-tip-body {
  font-size: 13.5px; color: var(--ink2); line-height: 1.55;
}
.story-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.story-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--ink2);
}
.story-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: auto;
}
.story-actions a, .story-actions button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 16px;
  border-radius: 100px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.story-actions a:active, .story-actions button:active { transform: scale(.96); }
.story-go-list {
  background: var(--ink); color: var(--paper);
}
.story-act-open {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
}
.story-nav {
  position: sticky; bottom: 0;
  display: flex; gap: 10px; justify-content: space-between; align-items: center;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface-glass-strong);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--rule);
}
.story-nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  cursor: pointer;
  color: var(--ink2);
  transition: all var(--dur-fast) ease;
}
.story-nav-btn:hover:not(:disabled) {
  background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08);
}
.story-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.story-nav-letter {
  font-family: var(--serif); font-size: 28px; font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
}

@media (prefers-reduced-motion: reduce) {
  .story-stack, .story-progress-bar.on::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN 2.0 · PHASE 3 — ENGAGEMENT BEAUTY
   Celebrate overlay · Achievement stickers ·
   Hidden ★ unlock cinematic · Rating ink-stamp
   ═══════════════════════════════════════════════════════════ */

/* ─── CELEBRATE overlay — used for hidden ★ unlock + achievements ─── */
.celebrate-bg {
  position: fixed; inset: 0; z-index: 9800;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.85));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: celebFade .35s var(--ease-out-quart);
  cursor: pointer;
}
@keyframes celebFade { from { opacity: 0; } to { opacity: 1; } }
.celebrate-card {
  position: relative;
  max-width: 420px; width: 100%;
  padding: 36px 30px 30px;
  background: var(--celebrate-bg, linear-gradient(160deg, var(--accent, #C4522A), color-mix(in srgb, var(--accent, #C4522A) 65%, black)));
  color: #fff;
  border-radius: 24px;
  text-align: center;
  isolation: isolate;
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.2);
  animation: celebPop .55s var(--ease-spring);
  overflow: hidden;
  cursor: default;
}
@keyframes celebPop {
  0% { opacity: 0; transform: scale(.6) translateY(20px); }
  60% { opacity: 1; transform: scale(1.04) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.celebrate-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 12% 100%, rgba(0,0,0,.18), transparent 60%);
  z-index: -1;
}
.celebrate-card::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.3px);
  background-size: 18px 18px;
  opacity: .5; pointer-events: none;
  z-index: -1;
}
.celebrate-emoji {
  font-size: 88px; line-height: 1;
  margin-bottom: 14px;
  display: inline-block;
  animation: celebFloat 3.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.32));
}
@keyframes celebFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
.celebrate-kicker {
  font-family: var(--sans); font-size: 10px; font-weight: 800;
  letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.86);
  margin-bottom: 14px;
}
.celebrate-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(28px, 4vw + .8rem, 38px); line-height: 1.1;
  letter-spacing: -.025em;
  margin-bottom: 10px;
  text-shadow: 0 3px 14px rgba(0,0,0,.22);
}
.celebrate-title em { font-style: italic; color: rgba(255,255,255,.88); }
.celebrate-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(15px, 1vw + .5rem, 17px);
  color: rgba(255,255,255,.86);
  line-height: 1.5;
  margin-bottom: 24px;
  text-wrap: balance;
  max-width: 30ch;
  margin-left: auto; margin-right: auto;
}
.celebrate-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 100px;
  background: #fff; color: var(--ink);
  font-family: var(--sans); font-size: 13px; font-weight: 800;
  letter-spacing: .4px;
  border: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.celebrate-cta:hover { transform: translateY(-2px) scale(1.02); }
.celebrate-cta:active { transform: scale(.96); }
.celebrate-dismiss {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.celebrate-dismiss:hover { background: rgba(255,255,255,.32); }

/* Confetti — pure CSS particles */
.celebrate-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
}
.celebrate-confetti span {
  position: absolute;
  top: -10%;
  width: 8px; height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: celebFall 3.2s ease-out forwards;
  transform-origin: center;
}
@keyframes celebFall {
  0% { opacity: 0; transform: translate3d(0, -10%, 0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--cx,0px), 120vh, 0) rotate(720deg); }
}

/* ─── Achievement sticker grid in passport ─── */
.pp-stickers-wrap {
  margin-top: 22px;
  padding: 16px 14px 14px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.pp-stickers-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.pp-stickers-head h4 {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--ink); letter-spacing: -.1px;
}
.pp-stickers-head h4 em { font-style: italic; color: var(--accent, var(--gold)); }
.pp-stickers-count {
  font-family: var(--sans); font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink4);
}
.pp-stickers {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
@media (max-width: 460px) {
  .pp-stickers { grid-template-columns: repeat(3, 1fr); }
}
.pp-sticker {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px;
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: 10px;
  text-align: center;
  font-family: var(--sans); font-size: 8.5px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink4);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.pp-sticker:hover { transform: translateY(-1px); }
.pp-sticker-emoji {
  font-size: 24px; line-height: 1;
  filter: grayscale(1) opacity(.35);
  transition: filter var(--dur-med) ease;
}
.pp-sticker.on {
  background: linear-gradient(135deg, rgba(154,122,58,.10), rgba(154,122,58,.02));
  border: 1px solid var(--gold);
  color: var(--gold);
}
.pp-sticker.on .pp-sticker-emoji {
  filter: none;
  animation: stickerWobble .4s var(--ease-spring);
}
@keyframes stickerWobble {
  0% { transform: scale(.85) rotate(-6deg); }
  60% { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.pp-sticker.on::after {
  content: '✓';
  position: absolute; top: -5px; right: -5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold); color: #fff;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(154,122,58,.3);
}

/* ─── Streak weekly heatmap (7 days) in passport ─── */
.pp-heatmap {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.pp-heatmap-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pp-heatmap-head h4 {
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--ink);
}
.pp-heatmap-head h4 em { font-style: italic; color: #C04830; }
.pp-heatmap-streak {
  font-family: var(--sans); font-size: 11px; font-weight: 800;
  color: #C04830;
  letter-spacing: .2px;
  display: inline-flex; align-items: center; gap: 4px;
}
.pp-heatmap-row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.pp-heat-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  color: var(--ink4); letter-spacing: .3px;
  text-transform: uppercase;
}
.pp-heat-cell.on {
  background: linear-gradient(135deg, rgba(220,80,40,.16), rgba(220,80,40,.05));
  border-color: #C04830;
  color: #C04830;
}
.pp-heat-cell.today {
  box-shadow: 0 0 0 2px rgba(220,80,40,.3);
}

/* ─── Rating commit animation (ink stamp) ─── */
.rate-stars.committed {
  animation: rateInkStamp .8s var(--ease-spring);
}
@keyframes rateInkStamp {
  0% { transform: rotate(0); }
  10% { transform: rotate(-8deg) scale(1.05); }
  30% { transform: rotate(6deg) scale(1.02); }
  50% { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}
.rate-star.on.just-set {
  animation: starBurst .6s var(--ease-spring);
}
@keyframes starBurst {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  50% { transform: scale(1.6); filter: drop-shadow(0 0 14px rgba(154,122,58,.6)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
}

/* ─── Streak FLAME in tools — bigger glow when high ─── */
.tools-streak.streak-hot {
  background: linear-gradient(135deg, rgba(220,80,40,.22), rgba(255,140,80,.16));
  box-shadow: 0 0 0 1px rgba(220,80,40,.3), 0 0 12px rgba(255,140,80,.35);
  animation: streakGlow 2.4s ease-in-out infinite;
}
@keyframes streakGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(220,80,40,.3), 0 0 8px rgba(255,140,80,.25); }
  50%      { box-shadow: 0 0 0 1px rgba(220,80,40,.45), 0 0 18px rgba(255,140,80,.45); }
}

@media (prefers-reduced-motion: reduce) {
  .celebrate-bg, .celebrate-card, .celebrate-emoji, .celebrate-confetti span,
  .pp-sticker.on .pp-sticker-emoji,
  .rate-stars.committed, .rate-star.on.just-set,
  .tools-streak.streak-hot { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN 2.0 · PHASE 4 — VIRALITY & SHAREABLES
   Date Roulette spin · Photocard template picker ·
   Couple invite weather panel
   ═══════════════════════════════════════════════════════════ */

/* ─── DATE ROULETTE — slot-machine spin in Surprise modal ─── */
.modal-roulette {
  text-align: center;
  padding: 32px 24px 26px;
}
.roulette-stage {
  position: relative;
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  margin: 6px 0 14px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--accent-soft);
  border: 1px dashed rgba(var(--accent-rgb), .32);
  isolation: isolate;
}
.roulette-stage::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--accent-rgb), .12), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--accent-rgb), .06), transparent 60%);
  z-index: -1;
}
.roulette-letter {
  display: inline-block;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(96px, 16vw, 152px);
  font-weight: 600; line-height: 1; color: var(--accent);
  letter-spacing: -.04em;
  text-shadow: 0 6px 24px rgba(var(--accent-rgb), .25);
}
.roulette-letter.spinning {
  animation: rouletteBlur .14s ease-in-out infinite alternate;
}
@keyframes rouletteBlur {
  from { transform: translateY(-6px) scale(.96); filter: blur(.6px); opacity: .85; }
  to   { transform: translateY(6px) scale(1.02);  filter: blur(.6px); opacity: 1; }
}
.roulette-letter.locked {
  animation: rouletteLand .55s var(--ease-spring);
}
@keyframes rouletteLand {
  0%   { transform: scale(2.2) rotate(-12deg); opacity: 0; filter: blur(4px); }
  60%  { transform: scale(1.08) rotate(4deg);  opacity: 1; filter: blur(0); }
  80%  { transform: scale(.94) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
.roulette-flicker {
  position: absolute;
  top: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(96px, 16vw, 152px);
  color: rgba(var(--accent-rgb), .12);
  pointer-events: none;
  z-index: -1;
}
.roulette-flicker.l1 { left: 22%; animation: flickFloat 1.4s var(--ease-out-quart) infinite; }
.roulette-flicker.l2 { left: 78%; animation: flickFloat 1.6s var(--ease-out-quart) .2s infinite reverse; }
@keyframes flickFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(-10px); opacity: .25; }
  50%      { transform: translate(-50%, -50%) translateY(10px); opacity: .15; }
}
.roulette-status {
  font-family: var(--sans); font-size: 10px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.roulette-status-detail {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--ink3);
}

/* ─── PHOTOCARD template picker ─── */
.pc-template-row {
  display: flex; gap: 8px;
  margin-bottom: 12px;
  justify-content: center;
}
.pc-template-chip {
  padding: 7px 13px;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--ink2);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-spring);
  letter-spacing: .3px;
}
.pc-template-chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.pc-template-chip.on {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ─── COUPLE INVITE — pretty receiving page (used inside coupleMerge modal) ─── */
.cp-invite-banner {
  position: relative;
  margin: -8px -8px 14px;
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: var(--grad-accent, linear-gradient(135deg, var(--accent, #1A1612), var(--accent2, var(--accent, #1A1612))));
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cp-invite-banner::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.2px);
  background-size: 16px 16px;
  opacity: .5;
  pointer-events: none;
}
.cp-invite-kicker {
  font-family: var(--sans); font-size: 9.5px; font-weight: 800;
  letter-spacing: 3.4px; text-transform: uppercase;
  color: rgba(255,255,255,.86);
  margin-bottom: 8px;
}
.cp-invite-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(22px, 1.8vw + .8rem, 28px); line-height: 1.15;
  color: #fff; letter-spacing: -.02em;
  margin-bottom: 6px;
}
.cp-invite-title em { font-style: italic; color: rgba(255,255,255,.86); }
.cp-invite-sub {
  font-family: var(--serif); font-style: italic;
  font-size: 13.5px; color: rgba(255,255,255,.82);
  margin-bottom: 12px;
}
.cp-compat {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin: 0 0 10px;
  border-radius: 100px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,.96); letter-spacing: .2px;
}
.cp-compat-emoji { font-size: 16px; line-height: 1; }
.cp-compat-pct strong { font-family: var(--serif); font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.4px; }
.cp-compat-tag { font-size: 10.5px; color: rgba(255,255,255,.78); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.22); }
@media (max-width: 480px) {
  .cp-compat { padding: 5px 11px; gap: 6px; font-size: 10.5px; }
  .cp-compat-tag { font-size: 9.5px; padding-left: 6px; letter-spacing: .8px; }
}
.cp-invite-weather {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.2);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  color: rgba(255,255,255,.94);
  letter-spacing: .2px;
}
.cp-invite-weather strong {
  font-family: var(--serif); font-size: 14px; font-weight: 700;
  color: #fff;
}
.cp-invite-weather-loading { opacity: .65; }

@media (prefers-reduced-motion: reduce) {
  .roulette-letter.spinning, .roulette-letter.locked,
  .roulette-flicker.l1, .roulette-flicker.l2 { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN 2.0 · PHASE 5 — MOTION & MICROINTERACTIONS
   Magnetic CTAs · Loading skeleton · Scroll-driven decor ·
   Copy ink-stamp · Card-arrival stagger
   ═══════════════════════════════════════════════════════════ */

/* ─── Magnetic CTA — translates toward cursor (desktop only) ─── */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .magnetic {
    transition: transform var(--dur-med) var(--ease-spring);
    will-change: transform;
  }
  .magnetic.is-active {
    transition: transform 60ms linear;
  }
}

/* ─── Map loading skeleton ─── */
.map-skeleton {
  position: relative;
  height: 70vh; height: 70dvh; min-height: 480px;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--paper2);
  overflow: hidden;
}
.map-skeleton::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: kdShimmer 1.6s linear infinite;
}
html[data-theme="dark"] .map-skeleton::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}
@keyframes kdShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.map-skeleton-pins {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 22% 38%, var(--accent-soft) 0%, transparent 6px),
    radial-gradient(circle at 68% 30%, var(--accent-soft) 0%, transparent 6px),
    radial-gradient(circle at 45% 60%, var(--accent-soft) 0%, transparent 6px),
    radial-gradient(circle at 80% 70%, var(--accent-soft) 0%, transparent 6px),
    radial-gradient(circle at 30% 80%, var(--accent-soft) 0%, transparent 6px);
  pointer-events: none;
  opacity: .5;
}
.map-skeleton-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--ink3);
  pointer-events: none;
  letter-spacing: .2px;
}

/* ─── Scroll-driven masthead decoration line ─── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mast-deco-line {
      animation: linkDraw linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 30%;
      transform-origin: center;
    }
  }
}
@keyframes linkDraw {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ─── Card-arrival stagger (refresh existing fadeIn for stronger choreo) ─── */
@media (prefers-reduced-motion: no-preference) {
  .c { animation: cardArrive .42s var(--ease-out-quart) both; }
  @keyframes cardArrive {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* ─── Copy button ink-stamp feedback (polish existing .ok state) ─── */
.bc.ok {
  position: relative;
  background: rgba(92,122,96,.12);
  color: var(--sage);
  border-color: rgba(92,122,96,.4) !important;
}
.bc.ok::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 60%, rgba(92,122,96,.16), transparent 60%);
  animation: inkStamp .55s var(--ease-out-quart);
  pointer-events: none;
}
@keyframes inkStamp {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1.4);  opacity: 0; }
}

/* ─── Toolbar shadow-grow on scroll ─── */
@supports (animation-timeline: scroll(root block)) {
  @media (prefers-reduced-motion: no-preference) {
    .toolbar {
      animation: tbStuck linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 220px;
    }
    @keyframes tbStuck {
      from { box-shadow: 0 0 0 rgba(0,0,0,0); }
      to   { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
    }
  }
}

/* ─── Bento + cover lift refinement (pairs with .lift class) ─── */
.bento-card { will-change: transform; }
.cover-card { will-change: transform; }

/* ═══════════════════════════════════════════════════════════
   DESIGN 2.0 · PHASE 7 — A11Y & PERF SEAL
   Universal focus-visible · CLS reservations · SR helpers
   ═══════════════════════════════════════════════════════════ */

/* Universal :focus-visible token — every interactive element. */
.cover-card:focus-visible,
.bento-card:focus-visible,
.mood-chip:focus-visible,
.continue-card:focus-visible,
.tonight-inner:focus-visible,
.story-back:focus-visible,
.story-nav-btn:focus-visible,
.story-go-list:focus-visible,
.story-act-open:focus-visible,
.celebrate-cta:focus-visible,
.celebrate-dismiss:focus-visible,
.next-peek:focus-visible,
.pc-template-chip:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 4px var(--accent, var(--ink));
  border-radius: inherit;
}

/* SR-only utility */
.kd-sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* CLS belt — reserve heights for dynamically inserted sections */
.cover { min-height: 488px; }
@media (max-width: 600px) { .cover { min-height: 544px; } }
.cover-card { min-height: 460px; }
@media (max-width: 600px) { .cover-card { min-height: 520px; } }

.city-hero { min-height: 308px; }
.city-hero-card { min-height: 280px; }
@media (max-width: 600px) { .city-hero-card { min-height: 240px; } }

/* Optical font tweak — keeps Cormorant italics from drifting on first paint */
body { font-synthesis-weight: none; }

/* Print: hide all Phase 2-6 dynamic decorations */
@media print {
  .cover, .continue, .mood, .signals, .city-hero, .tonight, .story-stack,
  .celebrate-bg { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN 2.0 · PHASE 6 — AI-FEEL PERSONALIZATION
   Picked-for-tonight band · Smart filter chip
   ═══════════════════════════════════════════════════════════ */

/* ─── Picked-for-tonight band (city pages) ─── */
.tonight {
  max-width: 720px; margin: 18px auto 0;
  padding: 0 16px;
}
.tonight-inner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-softer));
  border: 1px solid rgba(var(--accent-rgb), .26);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-fast) var(--ease-out-quart);
}
.tonight-inner:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), .14);
}
.tonight-tag {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 9px; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--accent);
  padding: 4px 9px;
  border-radius: 100px;
  background: rgba(var(--accent-rgb), .14);
  display: inline-flex; align-items: center; gap: 5px;
}
.tonight-tag::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: kdPulse 2.4s ease-in-out infinite;
}
.tonight-body { flex: 1; min-width: 0; }
.tonight-title {
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.1px;
}
.tonight-title em { font-style: italic; color: var(--accent); }
.tonight-meta {
  font-family: var(--serif); font-style: italic;
  font-size: 12.5px; color: var(--ink3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tonight-go {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 11px; font-weight: 800;
  color: var(--accent); letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 4px;
}
@media (max-width: 480px) {
  .tonight-meta { font-size: 11.5px; }
}

/* ─── Smart "Your usual" filter chip ─── */
.pill.pill-smart {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .04));
  border-color: rgba(var(--accent-rgb), .4);
  color: var(--accent);
  position: relative;
}
.pill.pill-smart::before {
  content: '★';
  display: inline-block;
  margin-right: 3px;
  color: var(--gold);
  font-size: 9px;
  vertical-align: 1px;
}
.pill.pill-smart:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pill.pill-smart:hover::before { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .tonight-tag::before { animation: none; }
}

/* ─── FONT TUNING ─── */
/* Prevent layout jumps when Cormorant swaps in. ascent/descent override
   stabilises line metrics against Georgia fallback. */
@supports (font-size-adjust: ex-height 0.5) {
  body { font-size-adjust: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   ONBOARDING — first-visit intro card
   Shown once per device. Highlights Passport / Couple / Quiz.
   ═══════════════════════════════════════════════════════════ */
.kd-onboard {
  position: fixed; inset: 0;
  z-index: 9700;
  background: rgba(26,22,18,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.kd-onboard.on { opacity: 1; pointer-events: auto; }
@media (min-width: 720px) {
  .kd-onboard { align-items: center; }
}
.kd-onboard-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px 20px 14px 14px;
  padding: 22px 22px 18px;
  max-width: 440px; width: 100%;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  box-shadow: 0 -8px 36px rgba(0,0,0,.16), 0 4px 18px rgba(0,0,0,.08);
  transform: translateY(24px);
  transition: transform .32s var(--ease-spring);
  -webkit-overflow-scrolling: touch;
}
.kd-onboard.on .kd-onboard-card { transform: translateY(0); }
.kd-onboard-card::before {
  content: '';
  position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--rule2);
}
@media (min-width: 720px) {
  .kd-onboard-card { border-radius: 18px; }
  .kd-onboard-card::before { display: none; }
}
.kd-onboard-dismiss {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper2);
  border: 1px solid var(--rule);
  font-size: 18px; color: var(--ink3); cursor: pointer;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.kd-onboard-dismiss:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kd-onboard-kicker {
  display: block;
  font-family: var(--sans); font-size: 9.5px; font-weight: 800;
  letter-spacing: 3.4px; text-transform: uppercase;
  color: var(--accent);
  margin: 14px 0 6px;
}
.kd-onboard-title {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  color: var(--ink); line-height: 1.18; letter-spacing: -.2px;
  margin-bottom: 14px;
}
.kd-onboard-title em { font-style: italic; color: var(--accent); }
.kd-onboard-list {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.kd-onboard-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.kd-onboard-emoji {
  font-size: 22px; line-height: 1.1;
  flex-shrink: 0;
}
.kd-onboard-list strong {
  display: block;
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--ink); line-height: 1.2;
  margin-bottom: 2px;
}
.kd-onboard-list span {
  display: block;
  font-size: 12.5px; color: var(--ink3); line-height: 1.45;
}
.kd-onboard-go {
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 800;
  letter-spacing: .4px;
  border: none; border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),.32);
  transition: transform .15s var(--ease-spring), box-shadow .15s;
}
.kd-onboard-go:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(var(--accent-rgb),.42); }
.kd-onboard-go:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .kd-onboard, .kd-onboard-card { transition: opacity .15s ease; }
}

/* ═══════════════════════════════════════════════════════════
   PASSPORT PROGRESS STRIP — visible on city pages
   Surfaces stamp progress so the hidden ★ unlock is anticipatable.
   ═══════════════════════════════════════════════════════════ */
.pp-strip {
  max-width: 720px;
  margin: 10px auto 0;
  padding: 0 16px;
}
.pp-strip-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-quart);
  width: 100%;
  font-family: inherit;
  text-align: left;
}
.pp-strip-inner:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.pp-strip-inner:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.pp-strip-icon {
  font-size: 22px; line-height: 1;
  flex-shrink: 0;
  filter: grayscale(.1);
}
.pp-strip-body { flex: 1; min-width: 0; }
.pp-strip-label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 5px;
}
.pp-strip-label strong {
  font-family: var(--serif); font-size: 14.5px; font-weight: 600;
  color: var(--ink); letter-spacing: -.1px;
}
.pp-strip-label em {
  font-style: normal;
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink4);
  flex-shrink: 0;
}
.pp-strip-bar {
  position: relative;
  height: 5px;
  border-radius: 100px;
  background: var(--paper3);
  overflow: hidden;
}
.pp-strip-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .6s var(--ease-out-quart);
}
.pp-strip-mark {
  position: absolute; top: -2px; bottom: -2px;
  width: 2px;
  background: var(--gold);
  border-radius: 100px;
  box-shadow: 0 0 0 2px var(--paper);
}
.pp-strip-mark::after {
  content: '★';
  position: absolute; bottom: 100%; left: 50%;
  transform: translate(-50%, 2px);
  font-size: 10px; color: var(--gold);
  font-weight: 800;
}
.pp-strip.unlocked .pp-strip-mark {
  background: var(--sage);
}
.pp-strip.unlocked .pp-strip-mark::after {
  color: var(--sage); content: '✓';
}
.pp-strip-go {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 11px; font-weight: 800;
  letter-spacing: .3px;
  color: var(--accent);
}
@media (max-width: 480px) {
  .pp-strip-inner { padding: 9px 12px; gap: 10px; }
  .pp-strip-label strong { font-size: 13.5px; }
  .pp-strip-label em { font-size: 9px; letter-spacing: 1.1px; }
  .pp-strip-go { display: none; }
}

/* ═══════════════════════════════════════
   P0 · Mobile density pass (v4.4.0)
   Cuts redundant chrome on narrow viewports
   ═══════════════════════════════════════ */

/* 13 — voice density: drop kickers + flatten italic accents on mobile */
@media (max-width: 600px) {
  .mast-kicker,
  .city-letter-kicker,
  .next-peek-kicker,
  .flts-row .flts-label {
    display: none;
  }
  .section-head h2 em { font-style: normal; color: inherit; }
}

/* 3 — "1 MIN READ" badge: desktop only */
@media (max-width: 540px) {
  .read-time { display: none; }
}

/* 6 — ₩ glyph reads as W on mobile; hide it, keep the word */
@media (max-width: 540px) {
  .pill-glyph { display: none; }
  .pill[data-f="tier:budget"],
  .pill[data-f="tier:splurge"] { letter-spacing: .3px; }
}

/* 2 — give card titles back their width on narrow rows */
@media (max-width: 480px) {
  .tc { display: none; }                       /* time chip duplicates expanded view */
  .ch { gap: 8px; }
  .cr { gap: 0; }
  /* Allow long Korean names ("Cheonggyecheon Stream Walk", "Gyeongbokgung
     in Hanbok") to wrap to 2 lines instead of truncating at ~14 chars */
  .nm {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: clip;
    line-height: 1.18;
  }
}

/* ═══════════════════════════════════════
   P1 · Layout fixes (v4.4.0)
   Toolbar compaction, action overflow, toast
   ═══════════════════════════════════════ */

/* 1 — compact toolbar once user is past the hero */
@media (max-width: 600px) {
  body.tb-compact .flts,
  body.tb-compact .more-flts,
  body.tb-compact .an-wrap { display: none; }
  body.tb-compact .tb-inner { gap: 5px; padding: 6px 14px; }
  body.tb-compact .modes button { padding: 6px 11px; min-height: 34px; font-size: 11px; }
  body.tb-compact #si { min-height: 36px; padding: 8px 38px 8px 32px; font-size: 15px; }
  body.tb-compact .srch svg { width: 12px; height: 12px; }
  /* Hide the active letter ribbon (.rc) in compact mode — re-shown in toolbar when expanded */
}

/* 4 — expanded card action overflow */
.mb-more { font-weight: 700; }
.mb-more.on { background: var(--ink); color: var(--paper); border-color: var(--ink) !important; }
.mb-overflow {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px 0 0;
  margin-top: 4px;
  animation: mbOverflowIn .22s var(--ease-out-quart);
}
.mb-overflow[hidden] { display: none; }
.mb-overflow a, .mb-overflow button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 36px; padding: 8px 12px; border-radius: var(--rs);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform .12s, opacity .12s, background .15s;
  letter-spacing: .15px;
}
@media (max-width: 480px) {
  .mb-overflow { gap: 5px; }
  .mb-overflow a, .mb-overflow button { padding: 7px 10px; font-size: 11px; }
}
@keyframes mbOverflowIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 5 — onboarding bottom toast (replaces full-screen modal) */
.kd-onb-toast {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));   /* above botbar */
  z-index: 240;
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transform: translateY(28px); opacity: 0;
  transition: transform .3s var(--ease-spring), opacity .28s ease;
  max-width: 560px; margin: 0 auto;
}
.kd-onb-toast.on { transform: translateY(0); opacity: 1; }
.kd-onb-msg {
  flex: 1; min-width: 0;
  font-family: var(--sans); font-size: 12.5px; line-height: 1.4;
  letter-spacing: .1px;
}
.kd-onb-msg strong { font-weight: 700; }
.kd-onb-go {
  flex-shrink: 0;
  background: var(--accent); color: #fff;
  border: none; cursor: pointer;
  padding: 7px 14px; border-radius: 100px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 800;
  letter-spacing: .3px;
}
.kd-onb-x {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255,255,255,.18);
  color: var(--paper); cursor: pointer;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.kd-onb-x:hover { background: rgba(255,255,255,.1); }
@media (prefers-reduced-motion: reduce) {
  .kd-onb-toast { transition: opacity .15s ease; }
}