/* Self-hosted Google Fonts (SIL Open Font License): latin + latin-ext only. Served from our own
   origin so the first paint never waits on fonts.googleapis.com. */
@font-face { font-family: 'Bungee'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bungee-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bungee'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bungee-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bungee Shade'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bungee-shade-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bungee Shade'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/bungee-shade-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat Brush'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/caveat-brush-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat Brush'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/caveat-brush-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============ Tokens ============ */
:root {
  --ink: #1d0f33;
  --night: #24104d;
  --plum: #3a1c6b;
  --paper: #fff4df;
  --cream: #fffaf0;
  --marigold: #ffb703;
  --sun: #ffd25e;
  --pink: #ff4d9d;
  --chilli: #ff3d2e;
  --teal: #00c2a8;
  --violet: #8b5cff;

  --f-sign: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --f-shade: 'Bungee Shade', 'Bungee', system-ui, sans-serif;
  --f-hand: 'Caveat Brush', 'Comic Sans MS', cursive;
  --f-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --smooth: cubic-bezier(.22, 1, .36, 1);
  --swoosh: cubic-bezier(.76, 0, .24, 1);

  --px: 0;
  --py: 0;
  color-scheme: dark;
}

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

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--cream);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============ Sky ============ */
.sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 110%, rgba(255, 183, 3, .55), transparent 60%),
    linear-gradient(180deg, #1c0b40 0%, #3d1873 26%, #8a2585 52%, #e8436f 74%, #ff9a4d 100%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(88vmin, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* follows the globe's centre with translate, not top, so a re-fit isn't a layout shift */
  translate: calc(-50% + var(--px) * 18px) calc(-50% + var(--globe-cy, 50vh) + 4vh + var(--py) * 18px);
  background: linear-gradient(180deg, #ffe066 0%, #ffb703 45%, #ff4d9d 100%);
  opacity: .5;
  filter: blur(.5px);
  -webkit-mask: linear-gradient(#000 0 52%, transparent 52%),
    repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 24px);
  mask: linear-gradient(#000 0 52%, transparent 52%),
    repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 24px);
  animation: sunBreath 9s ease-in-out infinite alternate;
}
@keyframes sunBreath { to { opacity: .62; scale: 1.03; } }

.halftone {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1.1px, transparent 1.7px);
  background-size: 14px 14px;
  -webkit-mask: linear-gradient(180deg, transparent 30%, #000 100%);
  mask: linear-gradient(180deg, transparent 30%, #000 100%);
}

/* ============ Masthead ============ */
.masthead {
  position: fixed;
  top: clamp(14px, 3vh, 28px);
  left: clamp(16px, 3vw, 36px);
  z-index: 20;
  pointer-events: none;
}
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: .12em;
  text-decoration: none;
  font-family: var(--f-sign);
  font-size: clamp(24px, 3.6vw, 46px);
  line-height: 1;
  pointer-events: auto;
  transition: transform .5s var(--spring);
}
.logo:hover { transform: rotate(-2deg) scale(1.04); }
.logo-food { color: var(--sun); text-shadow: .07em .07em 0 var(--ink); }
.logo-for {
  font-family: var(--f-hand);
  color: var(--pink);
  font-size: .85em;
  margin: 0 .06em;
  text-shadow: .05em .05em 0 var(--ink);
}
.logo-world { color: var(--cream); text-shadow: .07em .07em 0 var(--ink); display: inline-flex; align-items: center; }
/* the globe stands in for the O, as in the logo */
.logo-o { width: .78em; height: .78em; margin: 0 .06em 0 .04em; overflow: visible; filter: drop-shadow(.06em .06em 0 var(--ink)); }
.logo-sub {
  margin: .55em 0 0;
  max-width: 30ch;
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.35;
  color: rgba(255, 250, 240, .82);
  transition: opacity .4s var(--smooth);
}
/* the tagline sits over the map once a country is open */
[data-view="country"] .logo-sub { opacity: 0; }

.edition {
  position: fixed;
  top: clamp(14px, 3vh, 28px);
  right: clamp(16px, 3vw, 36px);
  z-index: 20;
  display: grid;
  gap: 2px;
  padding: 10px 16px 11px;
  background: var(--pink);
  color: var(--ink);
  text-decoration: none;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(3deg);
  transition: transform .45s var(--spring), box-shadow .3s var(--smooth), opacity .4s;
}
.edition:hover { transform: rotate(-1deg) scale(1.06); box-shadow: 8px 8px 0 var(--ink); }
.edition-k { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.edition b { font-family: var(--f-sign); font-weight: 400; font-size: 15px; }
.edition-cta { font-family: var(--f-hand); font-size: 18px; color: var(--cream); text-shadow: 1px 1px 0 var(--ink); }
[data-view="country"] .edition { opacity: 0; pointer-events: none; transform: rotate(3deg) translateY(-20px); }

/* ============ Loader ============ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: linear-gradient(180deg, #1c0b40, #3d1873);
  transition: opacity .8s var(--smooth), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader p { margin: 0; font-family: var(--f-hand); font-size: 24px; color: var(--sun); }
.loader-plate {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 40px;
  background: var(--cream);
  border: 4px solid var(--ink);
  box-shadow: 0 0 0 8px var(--pink), 6px 10px 0 8px var(--ink);
  animation: plateSpin 1.4s var(--swoosh) infinite;
}
@keyframes plateSpin { to { transform: rotate(360deg); } }

/* ============ Tooltip (follows cursor, eased in JS) ============ */
.tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  pointer-events: none;
  will-change: transform;
}
.tooltip > * { pointer-events: none; }
.tooltip {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 20px 0 0 20px;
  padding: 12px 16px 12px 12px;
  max-width: 280px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--c, var(--pink));
  opacity: 0;
  scale: .8;
  transform-origin: 0 0;
  transition: opacity .2s var(--smooth), scale .35s var(--spring), box-shadow .3s;
}
.tooltip.is-on { opacity: 1; scale: 1; }
.tt-emoji {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 28px;
  border-radius: 50%;
  background: var(--c);
  border: 3px solid var(--ink);
}
.tt-body { display: grid; gap: 2px; }
.tt-body b { font-family: var(--f-sign); font-weight: 400; font-size: 18px; line-height: 1.1; }
.tt-body span { font-size: 13px; line-height: 1.3; }
.tt-body em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-top: 3px; }
.tt-body em.live { color: #0c8f5a; opacity: 1; }

/* ============ Coming soon modal ============ */
.soon {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 8, 40, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s var(--smooth);
}
.soon.is-open { opacity: 1; }
.soon[hidden] { display: none; }
.soon-card {
  position: relative;
  width: min(420px, 100%);
  padding: 0 26px 26px;
  background: var(--cream);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 10px 10px 0 var(--c, var(--pink));
  transform: translateY(40px) rotate(-5deg) scale(.88);
  transition: transform .55s var(--spring);
  overflow: hidden;
}
.soon.is-open .soon-card { transform: none; }
.soon-top {
  position: relative;
  margin: 0 -26px 16px;
  height: 120px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(rgba(29, 15, 51, .18) 1.2px, transparent 1.8px) 0 0 / 10px 10px,
    var(--c, var(--pink));
  border-bottom: 4px solid var(--ink);
}
.soon-emoji {
  font-size: 64px;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff);
  transform: rotate(-8deg);
}
.soon.is-open .soon-emoji { animation: wobble 2.4s ease-in-out .3s infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-4px); } }
.soon-stamp {
  position: absolute;
  right: 14px;
  bottom: -18px;
  padding: 6px 12px;
  font-family: var(--f-sign);
  font-size: 15px;
  color: var(--chilli);
  background: var(--cream);
  border: 3px solid var(--chilli);
  border-radius: 8px;
  transform: rotate(-9deg) scale(2.2);
  opacity: 0;
  transition: transform .4s var(--spring) .25s, opacity .2s .25s;
}
.soon.is-open .soon-stamp { transform: rotate(-9deg) scale(1); opacity: 1; }
.soon-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  transition: transform .35s var(--spring);
}
.soon-close:hover { transform: rotate(90deg) scale(1.1); }
.soon-title { margin: 8px 0 4px; font-family: var(--f-sign); font-weight: 400; font-size: 34px; line-height: 1; }
.soon-line { margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.soon-k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 12px 0 6px; }
.soon-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.soon-tags span {
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 700;
  background: var(--c);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.soon-tags-alt span { background: transparent; border-style: dashed; }
.soon-cta {
  margin-top: 20px;
  width: 100%;
  padding: 14px 18px;
  font-family: var(--f-sign);
  font-size: 15px;
  color: var(--cream);
  background: var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--c, var(--pink));
  transition: transform .35s var(--spring), box-shadow .3s var(--smooth);
}
.soon-cta:hover { transform: translate(-2px, -3px); box-shadow: 7px 7px 0 var(--c, var(--pink)); }

/* ============ View wipe (globe → magazine) ============ */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background:
    radial-gradient(rgba(29, 15, 51, .2) 1.4px, transparent 2px) 0 0 / 16px 16px,
    conic-gradient(from 0deg at var(--wx, 50%) var(--wy, 50%), var(--pink), var(--marigold), var(--chilli), var(--pink));
  clip-path: circle(0px at var(--wx, 50%) var(--wy, 50%));
}
.wipe.is-in {
  clip-path: circle(150vmax at var(--wx, 50%) var(--wy, 50%));
  transition: clip-path .62s var(--swoosh);
}
.wipe.is-in.is-out {
  opacity: 0;
  transition: opacity .55s var(--smooth);
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============ Small screens ============ */
@media (max-width: 700px) {
  .logo-sub { display: none; }
  .edition { padding: 7px 11px 8px; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  .edition-k, .edition-cta { display: none; }
  .edition b { font-size: 12px; }
}

/* Pre-built page summary for search engines and screen readers (the app draws the real UI). */
.seo-teaser {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* © line under the home-screen chips */
.site-foot {
  margin: -2px 0 0;
  font-size: 11px;
  color: rgba(255, 250, 240, .6);
  pointer-events: auto;
}
.site-foot a { color: inherit; }
[data-view="country"] .site-foot { opacity: 0; pointer-events: none; }

.soon-emoji .landmark { width: 1em; height: 1em; margin: 0 auto; }

/* ============ Globe canvas ============ */
.globe-canvas {
  position: fixed;
  inset: 0;
  z-index: 5;
  opacity: 0;
  transition: opacity 1.2s var(--smooth), filter .6s var(--smooth), top 1.4s var(--smooth);
}
.globe-ready .globe-canvas { opacity: 1; }

/* Holds the globe's place while it builds (the rest of the page is already usable). */
.globe-wait {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 4;
  translate: -50% calc(var(--globe-cy, 45vh) - 50%);
  scale: .7;
  pointer-events: none;
  transition: opacity .5s var(--smooth);
}
.globe-ready .globe-wait,
.mag-open .globe-wait,
.panel-open .globe-wait { opacity: 0; }
.is-pointing .globe-canvas { cursor: pointer; }
.mag-open .globe-canvas { filter: blur(8px) saturate(.7); }

/* globe.gl renders HTML markers in an overlay; markers opt back into pointer events. */
.geo-anchor,
.pin-anchor {
  position: relative;
  width: 0;
  height: 0;
  transition: opacity .35s var(--smooth);
}
.geo-anchor.is-hidden,
.pin-anchor.is-hidden { opacity: 0; }
.geo-anchor.is-hidden *,
.pin-anchor.is-hidden * { pointer-events: none !important; }

/* ============ Country tags (world view) ============ */
.geo-tag {
  position: absolute;
  left: 0;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  white-space: nowrap;
  pointer-events: auto;
  color: var(--ink);
  background: var(--c);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  translate: -50% 0;
  transform: rotate(-4deg);
  transform-origin: 50% 120%;
  transition: transform .45s var(--spring), box-shadow .3s var(--smooth), background .3s;
  animation: tagIn .7s var(--spring) backwards;
}
/* Neighbouring countries (Italy / Turkey) lean their tags apart so they don't overlap */
.geo-tag.lean-l { translate: calc(-100% + 16px) 0; transform-origin: 90% 120%; }
.geo-tag.lean-r { translate: -16px 0; transform-origin: 10% 120%; }
.geo-tag-emoji {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.geo-tag-name { font-family: var(--f-sign); font-size: 12px; letter-spacing: .02em; }
.geo-tag-live {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 2px 6px;
  color: var(--cream);
  background: var(--ink);
  border-radius: 999px;
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .55; } }
.geo-tag:hover,
.geo-tag.is-hot {
  transform: rotate(0deg) scale(1.16) translateY(-4px);
  box-shadow: 5px 6px 0 var(--ink);
}
.geo-stem {
  position: absolute;
  left: -1.5px;
  bottom: 0;
  width: 3px;
  height: 17px;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: bottom;
  animation: stemIn .5s var(--smooth) backwards;
}
.geo-stem::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 9px;
  height: 9px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--c);
  border: 2px solid var(--ink);
}
@keyframes tagIn { from { opacity: 0; transform: rotate(-20deg) scale(.3) translateY(20px); } }
@keyframes stemIn { from { transform: scaleY(0); } }

/* ============ City pins (country view) ============ */
.pin {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;
}
.pin-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .45s var(--spring), box-shadow .3s var(--smooth);
  animation: pinIn .65s var(--spring) calc(.55s + var(--i) * 70ms) backwards;
}
.pin-emoji { font-size: 16px; line-height: 1; }
.pin.is-soon .pin-dot { background: #f1e2cb; }
.pin.is-soon .pin-emoji { filter: saturate(.55); }
.pin.is-live .pin-dot {
  width: 48px;
  height: 48px;
  background: var(--pink);
}
.pin.is-live .pin-emoji { font-size: 23px; }
/* city monuments (js/landmarks.js) */
.landmark { display: block; width: 20px; height: 20px; color: var(--ink); }
.chip-emoji .landmark { width: 19px; height: 19px; }
.pin.is-live .landmark { width: 30px; height: 30px; }
.pin.is-live .pin-dot::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 3px solid var(--pink);
  animation: ping 1.6s var(--smooth) infinite;
}
@keyframes ping { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }

.pin-label {
  position: absolute;
  top: 0;
  display: grid;
  gap: 1px;
  padding: 6px 11px 7px;
  white-space: nowrap;
  translate: 0 -50%;
  color: var(--cream);
  background: rgba(29, 15, 51, .88);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 rgba(29, 15, 51, .5);
  transition: transform .45s var(--spring), background .3s;
  animation: labelIn .6s var(--smooth) calc(.75s + var(--i) * 70ms) backwards;
}
.side-r .pin-label { left: 26px; text-align: left; }
.side-l .pin-label { right: 26px; text-align: right; }
.side-b .pin-label { left: 0; top: 24px; translate: -50% 0; text-align: center; }
.is-live.side-r .pin-label { left: 34px; }
.is-live.side-l .pin-label { right: 34px; }
.pin-label b { font-family: var(--f-sign); font-weight: 400; font-size: 13px; letter-spacing: .02em; }
.pin-label small { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.pin.is-live .pin-label { background: var(--sun); color: var(--ink); border-width: 3px; box-shadow: 4px 4px 0 var(--ink); }
.pin.is-live .pin-label b { font-size: 17px; }
.pin.is-live .pin-label small { opacity: .8; }

.pin:hover .pin-dot,
.pin:focus-visible .pin-dot { transform: scale(1.22) rotate(-10deg); box-shadow: 5px 6px 0 var(--ink); }
.side-r:hover .pin-label { transform: translateX(6px) rotate(-2deg); }
.side-l:hover .pin-label { transform: translateX(-6px) rotate(2deg); }
.side-b:hover .pin-label { transform: translateY(4px); }
.pin.is-soon:hover .pin-label { background: var(--ink); }

@keyframes pinIn { from { transform: scale(0) translateY(-30px); opacity: 0; } }
@keyframes labelIn { from { opacity: 0; clip-path: inset(0 100% 0 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
.side-l .pin-label { animation-name: labelInL; }
@keyframes labelInL { from { opacity: 0; clip-path: inset(0 0 0 100% round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
.side-b .pin-label { animation-name: labelInB; }
@keyframes labelInB { from { opacity: 0; clip-path: inset(0 0 100% 0 round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }

/* ============ Breadcrumb ============ */
.crumbs {
  position: fixed;
  z-index: 20;
  top: clamp(108px, 15vh, 140px);
  left: clamp(16px, 3vw, 36px);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateX(-24px);
  pointer-events: none;
  transition: opacity .4s var(--smooth), transform .5s var(--spring);
}
.crumbs.is-on { opacity: 1; transform: none; pointer-events: auto; }
.crumb-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .35s var(--spring), box-shadow .3s;
}
.crumb-back:hover { transform: translateX(-4px) rotate(-2deg); box-shadow: 5px 5px 0 var(--ink); }
.crumb-back span { transition: transform .35s var(--spring); }
.crumb-back:hover span { transform: translateX(-3px); }
.crumb-sep { opacity: .6; font-weight: 700; }
.crumb-here { font-family: var(--f-sign); font-size: 20px; color: var(--sun); text-shadow: 2px 2px 0 var(--ink); }

/* ============ Dock (hint + chips) ============ */
.dock {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s var(--smooth) .5s, transform .7s var(--spring) .5s;
}
.is-ready .dock { opacity: 1; transform: none; }
.mag-open .dock { opacity: 0; transform: translateY(30px); transition-delay: 0s; }

/* Help: a small, faint pill in the bottom-right corner, for anyone who goes looking */
.help-corner {
  position: fixed;
  z-index: 20;
  right: clamp(12px, 2vw, 24px);
  bottom: max(12px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 250, 240, .8);
  text-decoration: none;
  border: 1.5px solid rgba(255, 250, 240, .35);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--smooth) .5s, color .2s, border-color .2s;
}
.help-corner > span { font-weight: 700; }
.is-ready .help-corner { opacity: 1; pointer-events: auto; }
.mag-open .help-corner, .panel-open .help-corner { opacity: 0; pointer-events: none; transition-delay: 0s; }
.help-corner:hover, .help-corner:focus-visible { color: var(--cream); border-color: var(--cream); }
/* phones: the pill is the footer's Support link, so the footer stays clear of it */
@media (max-width: 480px) { .foot-support { display: none; } }
@media (max-width: 360px) {
  .help-corner { right: 8px; height: 27px; gap: 5px; padding: 0 9px 0 8px; font-size: 12px; }
  .site-foot { padding-right: 56px; }   /* nudge the centred footer left, away from the pill */
}

/* The how-to line: big and bright, no pill, so first-timers can't miss it */
.hint {
  margin: 0;
  padding: 0 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--cream);
  text-shadow: 0 2px 0 var(--ink), 0 0 14px rgba(29, 15, 51, .75);
}
.hint b { color: var(--sun); }

.chips {
  display: flex;
  gap: 8px;
  padding: 6px 16px 10px;
  max-width: 100vw;
  overflow-x: auto;
  scrollbar-width: none;
  pointer-events: auto;
  transition: opacity .2s var(--smooth), transform .25s var(--smooth);
}
.chips::-webkit-scrollbar { display: none; }
.chips.is-swapping { opacity: 0; transform: translateY(10px); }

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  color: var(--cream);
  background: rgba(29, 15, 51, .62);
  border: 2.5px solid var(--c);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .4s var(--spring), background .25s, color .25s, box-shadow .3s;
  animation: chipIn .55s var(--spring) calc(var(--i) * 55ms) backwards;
}
.chip-emoji {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: var(--cream);
  border-radius: 50%;
  transition: transform .45s var(--spring);
}
.chip-name { font-weight: 700; font-size: 14px; }
.chip-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 250, 240, .15);
}
.chip.is-live .chip-tag { background: var(--c); color: var(--ink); }
.chip:hover,
.chip:focus-visible {
  background: var(--c);
  color: var(--ink);
  transform: translateY(-5px) rotate(-2deg);
  box-shadow: 0 8px 0 -2px var(--ink);
}
.chip:hover .chip-emoji { transform: rotate(-14deg) scale(1.12); }
.chip:hover .chip-tag { background: var(--ink); color: var(--cream); }
@keyframes chipIn { from { opacity: 0; transform: translateY(16px) scale(.85); } }

@media (max-width: 700px) {
  .crumbs { top: 64px; }
  .crumb-here { font-size: 16px; }
  .crumb-back { padding: 7px 12px; font-size: 13px; }
  .chips { justify-content: flex-start; }
  .chip-name { font-size: 13px; }
  .hint { font-size: 15.5px; }
  .pin-label b { font-size: 11px; }
  .pin-label small { display: none; }
  .pin.is-live .pin-label small { display: block; }
  .pin.is-live .pin-label b { font-size: 14px; }
}
@media (min-width: 701px) {
  .chips { justify-content: center; }
}

/* phones: city labels would collide and run off-screen, so only the live city keeps its
   label (always to the right); other cities show their dot and open "coming soon" on tap. */
@media (max-width: 700px) {
  .pin.is-soon .pin-label { display: none; }
  .pin.is-soon .pin-dot { width: 30px; height: 30px; }
  .pin.is-live.side-l .pin-label { right: auto; left: 30px; text-align: left; animation-name: labelIn; }
}

/* "Hearts = loved by locals" + a nudge to give one: landing page only.
   Wide screens: a card on the left of the globe. Narrower: tucked under the logo. */
.chilli-note {
  position: fixed;
  z-index: 20;
  left: clamp(16px, 3vw, 36px);
  top: 50%;
  margin: 0;
  max-width: 210px;
  padding: 12px 16px 13px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--chilli);
  transform: translateY(-50%) rotate(-2deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--smooth);
}
.chilli-note > span[aria-hidden] { display: block; font-size: 24px; margin-bottom: 4px; }
.chilli-note b { color: var(--chilli); }
.chilli-note .cn-love {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 2px dashed rgba(29, 15, 51, .2);
  font-family: var(--f-hand);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--pink);
}
.is-ready[data-view="world"]:not(.panel-open):not(.mag-open) .chilli-note { opacity: 1; pointer-events: auto; }

@media (max-width: 1099px) {
  .chilli-note {
    top: calc(clamp(14px, 3vh, 28px) + 108px);
    max-width: none;
    padding: 5px 12px 6px;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 3px 3px 0 var(--chilli);
    transform: rotate(-2deg);
  }
  .chilli-note > span[aria-hidden] { display: inline; font-size: inherit; margin: 0; }
  /* the love line becomes a handwritten caption under the pill */
  .chilli-note .cn-love {
    position: absolute;
    left: 8px;
    top: 100%;
    margin: 5px 0 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    color: var(--sun);
    text-shadow: 1px 1px 0 var(--ink);
  }
}
@media (max-width: 700px) {
  .chilli-note { top: calc(clamp(14px, 3vh, 28px) + 40px); padding: 4px 10px 5px; font-size: 11px; }
}
@media (max-width: 380px) {
  .chilli-note .cn-love { font-size: 13px; }
}
.chilli-note .cn-short { display: none; }
@media (max-width: 1099px) {
  .chilli-note .cn-long { display: none; }
  .chilli-note .cn-short { display: inline; }
}

/* ============ Magazine overlay ============ */
.mag {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(255, 183, 3, .28), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .07) 1.2px, transparent 1.8px) 0 0 / 18px 18px,
    linear-gradient(180deg, #2a1150, #1d0f33 70%);
  opacity: 0;
  transition: opacity .45s var(--smooth);
}
.mag.is-open { opacity: 1; }
.mag[hidden] { display: none; }

/* Striped market-stall awning with a scalloped edge */
.mag-awning,
.awning {
  --s: 24px; /* scallop radius = half a stripe */
  height: calc(var(--s) * 1.95);
  background: repeating-linear-gradient(90deg, var(--chilli) 0 calc(var(--s) * 2), var(--cream) calc(var(--s) * 2) calc(var(--s) * 4));
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(var(--s) * .95) no-repeat,
    radial-gradient(circle var(--s) at var(--s) calc(var(--s) * .95), #000 97%, transparent 100%) 0 0 / calc(var(--s) * 2) 100% repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(var(--s) * .95) no-repeat,
    radial-gradient(circle var(--s) at var(--s) calc(var(--s) * .95), #000 97%, transparent 100%) 0 0 / calc(var(--s) * 2) 100% repeat-x;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25));
  transform: translateY(-100%);
  transition: transform .7s var(--spring) .1s;
}
.mag.is-open .mag-awning { transform: none; }

.mag-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px clamp(14px, 3vw, 32px) 0;
}
.mag-title {
  font-family: var(--f-sign);
  font-size: clamp(14px, 1.6vw, 20px);
  color: var(--sun);
  text-shadow: 2px 2px 0 var(--ink);
  text-align: center;
}
.mag-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--pink);
  transition: transform .35s var(--spring), box-shadow .3s var(--smooth);
}
.mag-btn:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 5px 6px 0 var(--pink); }

.book-stage {
  position: relative;
  min-height: 0;
  margin: clamp(10px, 2vh, 20px) clamp(10px, 3vw, 40px) 0;
  display: grid;
  place-items: center;
  perspective: 1800px;
  opacity: 0;
  transform: translateY(60px) rotateX(16deg) scale(.86);
  transition: transform .9s var(--spring) .12s, opacity .5s var(--smooth) .12s;
}
.mag.is-open .book-stage { opacity: 1; transform: none; }
.mag.jumping .book-stage { opacity: 0; transform: scale(.97); transition: opacity .2s, transform .2s; }

.book { margin: 0 auto; }
/* Shadow under each page rather than a drop-shadow filter on the whole book: a filter makes phones
   re-blur the entire book on every frame of a page turn. Negative spread keeps it from darkening the
   facing page. */
.book .stf__item { box-shadow: 0 3vh 3.4vh -1.2vh rgba(0, 0, 0, .45); }

.mag-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(8px, 1.6vh, 14px) 0 4px;
}
.mag-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 15px;
  color: var(--ink);
  background: var(--sun);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .35s var(--spring), opacity .3s, box-shadow .3s;
}
.mag-arrow:hover:not(:disabled) { transform: scale(1.12); box-shadow: 4px 5px 0 var(--ink); }
.mag-arrow:active:not(:disabled) { transform: scale(.94); }
.mag-arrow:disabled { opacity: .3; cursor: default; }
.mag-counter { font-family: var(--f-sign); font-size: 16px; min-width: 90px; text-align: center; color: var(--cream); }
/* Phones: no double-tap-to-zoom wait, so quick repeated taps all register. */
.mag-arrow, .mag-ch { touch-action: manipulation; }

/* Chapter shortcuts between the arrows: three equal-width buttons */
.mag-chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mag-ch {
  padding: 7px 13px;
  text-align: center;
  font: 700 13px/1 var(--f-body);
  white-space: nowrap;
  color: var(--cream);
  background: rgba(255, 255, 255, .08);
  border: 2px solid rgba(255, 249, 236, .3);
  border-radius: 999px;
  transition: transform .35s var(--spring), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.mag-ch:hover { transform: translateY(-2px); border-color: var(--sun); }
.mag-ch:active { transform: scale(.95); }
.mag-ch .lbl-tiny { display: none; }
.mag-ch.is-on { color: var(--ink); background: var(--sun); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.mag-hint { margin: 0 0 max(10px, env(safe-area-inset-bottom)); text-align: center; font-size: 12px; opacity: .55; }
.mag-error { font-family: var(--f-hand); font-size: 28px; color: var(--sun); text-align: center; padding: 20px; }

/* ============ Pages ============ */
.page {
  container-type: inline-size;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
/* Until page-flip takes the pages over (it shows only the visible ones), keep them out of layout:
   laying out all 60+ pages at once cost over a second on phones. */
.page:not(.stf__item) { display: none; }
/* page-flip forwards clicks only when the <a>/<button> itself is the target */
.page a *, .page button * { pointer-events: none; }

.pg {
  --bg: var(--paper);
  --acc: var(--pink);
  --acc2: var(--marigold);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 7cqw 7.5cqw 10cqw;
  font-size: 3cqw;
  line-height: 1.42;
  background: var(--bg);
  overflow: hidden;
}
/* paper grain */
.pg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pg > * { position: relative; }

/* gutter shading in two-page spreads */
.\--landscape .page-left .pg::after,
.\--landscape .page-right .pg::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9cqw;
  pointer-events: none;
}
.\--landscape .page-left .pg::after { right: 0; background: linear-gradient(90deg, transparent, rgba(29, 15, 51, .16)); }
.\--landscape .page-right .pg::after { left: 0; background: linear-gradient(-90deg, transparent, rgba(29, 15, 51, .16)); }

.folio {
  position: absolute;
  bottom: 4cqw;
  z-index: 2;
  font-family: var(--f-sign);
  font-size: 2.6cqw;
  color: var(--ink);
  opacity: .7;
}
.page-left .folio { left: 7cqw; }
.page-right .folio { right: 7cqw; }

/* themes */
.t-cream    { --bg: #fff4df; --acc: #ff4d9d; --acc2: #ffb703; }
.t-cream2   { --bg: #fffaf0; --acc: #00c2a8; --acc2: #ff4d9d; }
.t-marigold { --bg: #ffc93c; --acc: #ff3d2e; --acc2: #fffaf0; }
.t-pink     { --bg: #ff86bb; --acc: #ffd25e; --acc2: #fffaf0; }
.t-teal     { --bg: #4fdcc9; --acc: #ff4d9d; --acc2: #fffaf0; }
.t-chilli   { --bg: #ff6a52; --acc: #ffd25e; --acc2: #fffaf0; }
.t-latte    { --bg: #f2dcbf; --acc: #00c2a8; --acc2: #fffaf0; }
.t-mint     { --bg: #b9f0e3; --acc: #ff4d9d; --acc2: #fffaf0; }
.t-plum     { --bg: #d6c4ff; --acc: #ff4d9d; --acc2: #fffaf0; }
.t-wine     { --bg: #ffb4a3; --acc: #8b5cff; --acc2: #fffaf0; }

/* shared type */
.kicker {
  align-self: flex-start;
  padding: .5cqw 2cqw .6cqw;
  font-size: 2.2cqw;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  border-radius: 1cqw;
  transform: rotate(-2deg);
}
.kicker-sm { margin-top: 3cqw; font-size: 1.9cqw; }
.headline {
  margin: 3cqw 0 3cqw;
  font-family: var(--f-sign);
  font-weight: 400;
  font-size: 9.6cqw;
  line-height: .98;
  letter-spacing: -.01em;
  text-shadow: .6cqw .6cqw 0 var(--acc);
}
.label {
  display: block;
  margin-bottom: 1.2cqw;
  font-size: 1.95cqw;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .72;
}
.small { font-size: 2.4cqw; opacity: .75; margin: auto 0 0; }

/* ============ Cover ============ */
.cover {
  padding: 0 7cqw 7cqw;
  background:
    radial-gradient(rgba(29, 15, 51, .16) 1.4px, transparent 2px) 0 0 / 3.4cqw 3.4cqw,
    linear-gradient(170deg, #ff4d9d 0%, #ff6a52 60%, #ffb703 100%);
}
.cover .awning, .back .awning { --s: 4.2cqw; margin: 0 -7cqw 3cqw; transform: none; filter: drop-shadow(0 .8cqw 0 rgba(0, 0, 0, .18)); }
.cover-mast {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.6cqw;
  font-family: var(--f-sign);
  font-size: 8.4cqw;
  line-height: 1;
  color: var(--cream);
  text-shadow: .7cqw .7cqw 0 var(--ink);
}
.cover-mast i { font-family: var(--f-hand); font-style: normal; font-size: 7cqw; color: var(--sun); transform: rotate(-10deg); }
.cover-issue {
  margin-top: 2cqw;
  padding: 1cqw 0;
  text-align: center;
  font-size: 1.9cqw;
  font-weight: 700;
  letter-spacing: .2em;
  border-top: .5cqw solid var(--ink);
  border-bottom: .5cqw solid var(--ink);
}
.cover-city {
  margin-top: 4cqw;
  text-align: center;
  font-family: var(--f-shade);
  font-size: 16cqw;
  line-height: .9;
  color: var(--ink);
}
.cover-dek {
  align-self: center;
  margin-top: 2cqw;
  padding: .8cqw 3cqw;
  font-family: var(--f-hand);
  font-size: 5.4cqw;
  color: var(--ink);
  background: var(--sun);
  border: .5cqw solid var(--ink);
  border-radius: 2cqw;
  transform: rotate(-3deg);
  box-shadow: .8cqw .8cqw 0 var(--ink);
}
.cover-art {
  position: relative;
  height: 40cqw;
  margin-top: 3cqw;
}
.ca-sun {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34cqw;
  height: 34cqw;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--sun) 0 12deg, #ffe58f 12deg 24deg);
  border: .7cqw solid var(--ink);
  z-index: 0;
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ca {
  position: absolute;
  z-index: 1;
  font-size: 15cqw;
  line-height: 1;
  filter: drop-shadow(.7cqw 0 0 #fff) drop-shadow(-.7cqw 0 0 #fff) drop-shadow(0 .7cqw 0 #fff) drop-shadow(0 -.7cqw 0 #fff) drop-shadow(1cqw 1.4cqw 0 rgba(29, 15, 51, .35));
}
.ca1 { left: 50%; top: 50%; translate: -50% -50%; font-size: 19cqw; }
.ca-landmark { top: 47%; line-height: 0; }
.ca-landmark svg { display: block; width: 25cqw; height: auto; transform: rotate(-4deg); }
.ca2 { left: 9%; top: 6%; transform: rotate(-16deg); }
.ca3 { left: 13%; bottom: -4%; transform: rotate(14deg); font-size: 12cqw; }
.cover-lines {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: grid;
  gap: .8cqw;
  font-family: var(--f-sign);
  font-size: 3cqw;
  line-height: 1.15;
  color: var(--cream);
  text-shadow: .4cqw .4cqw 0 var(--ink);
}
.cover-lines li::before { content: '★ '; color: var(--sun); }
.cover-lines b { font-weight: 400; color: var(--sun); font-size: 1.4em; }
.cover-sticker {
  position: absolute;
  right: 6cqw;
  bottom: 22cqw;
  width: 23cqw;
  height: 23cqw;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 2.3cqw;
  line-height: 1.2;
  color: var(--ink);
  background: var(--sun);
  border: .6cqw solid var(--ink);
  border-radius: 50%;
  transform: rotate(12deg);
  box-shadow: .8cqw .8cqw 0 var(--ink);
}
.cover-sticker b { font-family: var(--f-sign); font-weight: 400; font-size: 2.6cqw; }
.cover-sticker span { font-family: var(--f-hand); font-size: 3.4cqw; }
.cover-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 3cqw; }
.cover-state { font-size: 2cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.barcode {
  display: block;
  width: 20cqw;
  height: 8cqw;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 .5cqw, transparent .5cqw .9cqw, var(--ink) .9cqw 1.6cqw, transparent 1.6cqw 2cqw, var(--ink) 2cqw 2.3cqw, transparent 2.3cqw 3cqw),
    #fff;
  background-clip: content-box;
  padding: 1cqw;
  border: .4cqw solid var(--ink);
}

/* ============ Editor's letter ============ */
.lede { margin: 0 0 2cqw; font-size: 3.8cqw; line-height: 1.3; font-weight: 700; }
.letter p { margin: 0 0 2cqw; }
.letter em { font-style: normal; background: linear-gradient(transparent 55%, var(--acc2) 55%); }
.legend {
  margin-top: 2cqw;
  padding: 3.4cqw 3.4cqw 2.6cqw;
  background: var(--cream);
  border: .5cqw solid var(--ink);
  border-radius: 2.4cqw;
  box-shadow: 1cqw 1cqw 0 var(--acc);
  display: grid;
  gap: 2cqw;
}
.legend .kicker { transform: none; }
.legend-row { display: grid; grid-template-columns: 15cqw 1fr; align-items: center; gap: 2cqw; }
.legend-chillies { font-size: 3.4cqw; letter-spacing: .1cqw; }
.legend-row b { display: block; font-family: var(--f-sign); font-weight: 400; font-size: 3.2cqw; }
.legend-row small { display: block; font-size: 2.45cqw; line-height: 1.3; opacity: .8; }
.legend-note { margin: 0; font-family: var(--f-hand); font-size: 3.6cqw; color: var(--chilli); }
.signoff { margin-top: auto; font-family: var(--f-hand); font-size: 4.2cqw; }

/* ============ Contents ============ */
.contents .headline { margin-bottom: 2.4cqw; }
.toc-chapters { display: grid; gap: 2.6cqw; }
.toc-ch {
  padding: 1.6cqw 2cqw 1.8cqw;
  background: rgba(255, 250, 240, .72);
  border: .45cqw solid var(--ink);
  border-radius: 2cqw;
  box-shadow: .7cqw .7cqw 0 var(--chc);
}
.toc-ch-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1.6cqw;
  padding-bottom: 1cqw;
  margin-bottom: .8cqw;
  text-align: left;
  border-bottom: .35cqw dashed rgba(29, 15, 51, .4);
}
.toc-ch-no {
  font-family: var(--f-sign);
  font-size: 3cqw;
  color: var(--chc);
  -webkit-text-stroke: .18cqw var(--ink);
}
.toc-ch-title { font-family: var(--f-sign); font-size: 3.4cqw; }
.toc-ch-head:hover .toc-ch-title { text-decoration: underline; text-decoration-thickness: .35cqw; }
.toc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2cqw; }
.toc-item {
  width: 100%;
  display: grid;
  grid-template-columns: 4cqw 1fr auto;
  align-items: baseline;
  gap: 1cqw;
  padding: .45cqw .8cqw;
  font-size: 2.35cqw;
  text-align: left;
  border-radius: 1cqw;
  transition: background .2s, transform .3s var(--spring);
}
.toc-item:hover { background: rgba(29, 15, 51, .08); transform: translateX(.6cqw); }
.toc-no { font-family: var(--f-sign); font-size: 1.9cqw; opacity: .55; }
.toc-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-pg { font-family: var(--f-sign); font-size: 2.1cqw; text-align: right; }
/* tighter contents for guides with many spots (tall phone pages have room without it) */
@media (min-width: 701px), (max-height: 760px) {
  .toc-dense .headline { margin-bottom: 1.2cqw; }
  .toc-dense .toc-chapters { gap: 1.6cqw; }
  .toc-dense .toc-ch { padding: 1.1cqw 2cqw 1.2cqw; }
  .toc-dense .toc-ch-head { padding-bottom: .6cqw; margin-bottom: .4cqw; }
  .toc-dense .toc-item { padding: .2cqw .8cqw; }
}

/* ============ Chapter opener ============ */
.ch-title {
  padding: 8cqw 7.5cqw;
  justify-content: flex-end;
  color: var(--cream);
  background:
    radial-gradient(rgba(255, 255, 255, .14) 1.3px, transparent 1.9px) 0 0 / 3.4cqw 3.4cqw,
    linear-gradient(160deg, var(--chc), color-mix(in srgb, var(--chc) 55%, #24104d));
}
.ch-kicker {
  position: absolute;
  top: 8cqw;
  left: 7.5cqw;
  font-size: 2.2cqw;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.ch-no {
  position: absolute;
  top: 8cqw;
  right: 4cqw;
  font-family: var(--f-shade);
  font-size: 42cqw;
  line-height: .8;
  color: rgba(255, 250, 240, .9);
}
.ch-name {
  margin: 0;
  font-family: var(--f-sign);
  font-weight: 400;
  font-size: 13cqw;
  line-height: .92;
  text-shadow: .9cqw .9cqw 0 var(--ink);
}
.ch-sub { margin-top: 2.6cqw; font-family: var(--f-hand); font-size: 5cqw; color: var(--sun); }
.ch-art { position: absolute; left: 7.5cqw; right: 7.5cqw; top: 46cqw; height: 40cqw; }
.ch-e {
  position: absolute;
  font-size: 15cqw;
  filter: drop-shadow(.7cqw 0 0 #fff) drop-shadow(-.7cqw 0 0 #fff) drop-shadow(0 .7cqw 0 #fff) drop-shadow(0 -.7cqw 0 #fff) drop-shadow(1cqw 1.6cqw 0 rgba(29, 15, 51, .3));
}
.ch-e1 { left: 2%; top: 10%; transform: rotate(-14deg); }
.ch-e2 { left: 36%; top: 34%; transform: rotate(8deg); font-size: 19cqw; }
.ch-e3 { right: 4%; top: 0; transform: rotate(16deg); }

.ch-list { padding-top: 8cqw; }
.ch-intro {
  margin: 2.6cqw 0 2.8cqw;
  font-size: 2.95cqw;
  line-height: 1.38;
  font-weight: 500;
}
.ch-intro::first-letter {
  float: left;
  margin: .6cqw .8cqw 0 0;
  font-family: var(--f-sign);
  font-size: 10.5cqw;
  line-height: .8;
  color: var(--chc);
  -webkit-text-stroke: .25cqw var(--ink);
}
.ch-spots { list-style: none; margin: 0; padding: 0; display: grid; gap: .6cqw; }
.ch-spot {
  width: 100%;
  display: grid;
  grid-template-columns: 6.6cqw 1fr auto 5cqw;
  align-items: center;
  gap: 2cqw;
  padding: .8cqw 1.6cqw;
  text-align: left;
  border-radius: 1.6cqw;
  border: .35cqw solid transparent;
  transition: background .2s, border-color .2s, transform .3s var(--spring);
}
.ch-spot:hover { background: #fff; border-color: var(--ink); transform: translateX(.8cqw); }
.ch-spot-e {
  width: 6.6cqw;
  height: 6.6cqw;
  display: grid;
  place-items: center;
  font-size: 3.7cqw;
  border-radius: 50%;
  background: color-mix(in srgb, var(--chc) 30%, #fff);
  border: .35cqw solid var(--ink);
}
.ch-spot-txt { display: grid; min-width: 0; }
.ch-spot-txt b { font-size: 2.9cqw; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-spot-txt small { font-size: 2cqw; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-spot-chilli { font-size: 2.1cqw; letter-spacing: .1cqw; }
/* chapters with 10+ spots: tighter rows so the list clears the page number (tall phone pages have room) */
@media (min-width: 701px), (max-height: 760px) {
  .ch-dense { padding-top: 6cqw; }
  .ch-dense .ch-intro { margin: 1.6cqw 0 1.8cqw; font-size: 2.6cqw; line-height: 1.32; }
  .ch-dense .ch-intro::first-letter { font-size: 8.5cqw; }
  .ch-dense .ch-spots { gap: .2cqw; }
  .ch-dense .ch-spot { grid-template-columns: 5.2cqw 1fr auto 5cqw; padding: .35cqw 1.6cqw; }
  .ch-dense .ch-spot-e { width: 5.2cqw; height: 5.2cqw; font-size: 2.9cqw; }
  .ch-dense .ch-spot-txt b { font-size: 2.7cqw; }
  .ch-dense .ch-spot-txt small { font-size: 1.85cqw; }
}

/* ============ Scrapbook photo page ============ */
.scrap {
  padding: 6cqw 6cqw 9cqw;
  background:
    linear-gradient(rgba(29, 15, 51, .05) 1px, transparent 1px) 0 0 / 5cqw 5cqw,
    linear-gradient(90deg, rgba(29, 15, 51, .05) 1px, transparent 1px) 0 0 / 5cqw 5cqw,
    #f7ecd8;
}
.scrap-top { display: flex; justify-content: space-between; align-items: center; }
.scrap-no { font-family: var(--f-sign); font-size: 3cqw; }
.scrap-ch {
  padding: .5cqw 2cqw;
  font-size: 2cqw;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--chc);
  border-radius: 99px;
}

.polaroid {
  position: absolute;
  margin: 0;
  padding: 2.4cqw 2.4cqw 0;
  background: #fffdf8;
  box-shadow: 0 1.4cqw 3cqw rgba(29, 15, 51, .22), 0 .2cqw .5cqw rgba(29, 15, 51, .15);
  transition: transform .6s var(--spring);
}
.polaroid figcaption {
  padding: 1.8cqw .6cqw 2.4cqw;
  font-family: var(--f-hand);
  font-size: 3.3cqw;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.polaroid-shop { left: 6cqw; top: 13cqw; width: 80cqw; transform: rotate(-2.4deg); z-index: 1; }
.polaroid-food { right: 6cqw; top: 78cqw; width: 54cqw; transform: rotate(4deg); z-index: 2; }
.scrap:hover .polaroid-shop { transform: rotate(-1deg) translateY(-.6cqw); }
.scrap:hover .polaroid-food { transform: rotate(2deg) translateY(-.6cqw); }
.ph {
  position: relative;
  overflow: hidden;
  background: #e9dcc6;
}
.polaroid-shop .ph { aspect-ratio: 4 / 3; }
.polaroid-food .ph { aspect-ratio: 1; }
.ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.6cqw;
  background:
    radial-gradient(rgba(29, 15, 51, .16) 1.2px, transparent 1.8px) 0 0 / 2.6cqw 2.6cqw,
    linear-gradient(150deg, color-mix(in srgb, var(--chc) 35%, #fff4df), color-mix(in srgb, var(--chc) 60%, #fff4df));
}
.ph-emoji { font-size: 15cqw; line-height: 1; filter: drop-shadow(0 1cqw 1.4cqw rgba(29, 15, 51, .25)); }
.polaroid-food .ph-emoji { font-size: 12cqw; }
.ph-note {
  padding: .5cqw 1.6cqw;
  font-size: 1.9cqw;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(255, 250, 240, .85);
  border-radius: 99px;
}
.polaroid-food .ph-note { font-size: 1.6cqw; }

.tape {
  position: absolute;
  z-index: 3;
  width: 18cqw;
  height: 5cqw;
  background: color-mix(in srgb, var(--chc) 45%, rgba(255, 255, 255, .5));
  opacity: .85;
  -webkit-mask: conic-gradient(from -45deg at right, transparent 90deg, #000 0) right / 51% 1.2cqw repeat-y,
    conic-gradient(from 135deg at left, transparent 90deg, #000 0) left / 51% 1.2cqw repeat-y;
  mask: conic-gradient(from -45deg at right, transparent 90deg, #000 0) right / 51% 1.2cqw repeat-y,
    conic-gradient(from 135deg at left, transparent 90deg, #000 0) left / 51% 1.2cqw repeat-y;
}
.polaroid-shop .tape-a { top: -2.6cqw; left: 6cqw; transform: rotate(-7deg); }
.polaroid-shop .tape-b { top: -2.6cqw; right: 6cqw; transform: rotate(6deg); }
.polaroid-food .tape-a { top: -2.4cqw; left: 50%; translate: -50% 0; transform: rotate(-4deg); }
.polaroid-food .tape-b { display: none; }

.scrap-sticker {
  position: absolute;
  left: 8cqw;
  top: 92cqw;
  z-index: 3;
  width: 22cqw;
  height: 22cqw;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .4cqw;
  text-align: center;
  color: var(--cream);
  background: var(--ink);
  border: .7cqw solid var(--cream);
  border-radius: 50%;
  box-shadow: 0 1cqw 2cqw rgba(29, 15, 51, .3);
  transform: rotate(-10deg);
}
.scrap-sticker span { font-size: 2.6cqw; letter-spacing: .1cqw; }
.scrap-sticker b { font-family: var(--f-sign); font-weight: 400; font-size: 2.3cqw; line-height: 1.05; max-width: 16cqw; }
.scrap-sticker.tier-legend { color: var(--ink); background: var(--sun); }   /* gold for the top tier; red hearts stay visible */
.scrap-sticker.tier-hidden-gem { background: var(--violet); }
.scrap-doodle {
  position: absolute;
  left: 9cqw;
  bottom: 9.5cqw;
  max-width: 30cqw;
  font-family: var(--f-hand);
  font-size: 3.4cqw;
  line-height: 1.1;
  color: var(--chc);
  transform: rotate(-4deg);
  filter: brightness(.8);
}
.scrap-credit {   /* bottom-left, under the buttons and clear of the food photo */
  position: absolute;
  left: 6cqw;
  bottom: 8cqw;
  max-width: 31cqw;
  font-size: 1.7cqw;
  line-height: 1.3;
  opacity: .6;
}

/* ============ Meet the city ============ */
.intro { margin: 0; font-size: 2.65cqw; line-height: 1.4; }
.hoods { margin-top: 1.6cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; }
.hood {
  display: grid;
  gap: .4cqw;
  padding: 1.6cqw 2.2cqw;
  font-size: 2.1cqw;
  line-height: 1.3;
  background: var(--cream);
  border: .45cqw solid var(--ink);
  border-radius: 2cqw;
  box-shadow: .7cqw .7cqw 0 var(--ink);
  transform: rotate(var(--r));
}

.hood b { font-family: var(--f-sign); font-weight: 400; font-size: 2.9cqw; }
.hood small { font-size: 1.9cqw; font-weight: 700; opacity: .65; }

/* ============ 24 hours ============ */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1cqw; display: grid; gap: 1.5cqw; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 9.5cqw;
  top: 1cqw;
  bottom: 1cqw;
  border-left: .6cqw dashed var(--ink);
  opacity: .5;
}
.timeline li { display: grid; grid-template-columns: 17cqw 1fr; gap: 2.4cqw; align-items: start; }
.tl-time {
  position: relative;
  z-index: 1;
  padding: .6cqw 1.4cqw;
  font-family: var(--f-sign);
  font-size: 2.2cqw;
  text-align: center;
  white-space: nowrap;
  background: var(--sun);
  border: .45cqw solid var(--ink);
  border-radius: 99px;
}
.tl-body { display: grid; gap: .3cqw; }
.tl-spot {
  justify-self: start;
  font-family: var(--f-sign);
  font-size: 2.8cqw;
  line-height: 1.1;
  text-align: left;
  transition: transform .3s var(--spring);
}
.tl-spot i { font-family: var(--f-body); font-style: normal; font-size: 2cqw; font-weight: 700; opacity: .6; margin-left: .6cqw; }
.tl-spot:hover { transform: translateX(1cqw); text-decoration: underline; text-decoration-thickness: .4cqw; }
.tl-what { font-size: 2.4cqw; line-height: 1.3; }
.day-note { margin-top: auto; padding-top: 1cqw; font-family: var(--f-hand); font-size: 4cqw; transform: rotate(-2deg); }

/* ============ Spot page ============ */
.spot { padding-top: 5.5cqw; }
.spot-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2cqw; }
.spot-no { font-family: var(--f-sign); font-size: 3cqw; }
.spot-cat {
  padding: .5cqw 2cqw;
  font-size: 2cqw;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  border: .4cqw solid var(--ink);
  border-radius: 99px;
  background: var(--acc2);
}
.spot-head { display: grid; gap: 1.4cqw; justify-items: start; margin-top: 1cqw; }
.spot .spot-name { font-size: 7.4cqw; }
.tier {
  display: inline-flex;
  align-items: center;
  gap: 1.2cqw;
  padding: .7cqw 2cqw .8cqw 1.4cqw;
  color: var(--cream);
  background: var(--ink);
  border-radius: 99px;
  transform: rotate(-3deg);
}
.tier span { font-size: 2.4cqw; letter-spacing: .1cqw; }
.tier b { font-family: var(--f-sign); font-weight: 400; font-size: 2.2cqw; letter-spacing: .04em; }
.tier-legend { color: var(--ink); background: var(--sun); box-shadow: .6cqw .6cqw 0 var(--ink); }
.tier-local-favourite { background: var(--ink); }
.tier-hidden-gem { background: var(--violet); box-shadow: .6cqw .6cqw 0 var(--ink); }
.spot-name {
  margin: 0;
  font-family: var(--f-sign);
  font-weight: 400;
  font-size: 6.2cqw;
  line-height: 1;
  text-wrap: balance;
}
.spot-aka { margin-top: -.6cqw; font-family: var(--f-hand); font-size: 3.2cqw; line-height: 1.1; }
.spot-area { font-size: 2.6cqw; font-weight: 700; }
.spot-blurb { margin: 2.8cqw 0 2.2cqw; font-size: 2.8cqw; line-height: 1.4; }
.spot-order ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.spot-order li {
  padding: .7cqw 2cqw;
  font-size: 2.5cqw;
  font-weight: 700;
  background: var(--cream);
  border: .4cqw solid var(--ink);
  border-radius: 99px;
  box-shadow: .5cqw .5cqw 0 var(--acc);
}
.spot-facts {
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin: 2.2cqw 0 2cqw;
  border-top: .45cqw dashed var(--ink);
  border-bottom: .45cqw dashed var(--ink);
}
.spot-facts > div { padding: 1.1cqw 1.6cqw; display: grid; gap: .2cqw; }
.spot-facts > div + div { border-left: .45cqw dashed var(--ink); }
.spot-facts small { font-size: 1.8cqw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
.spot-facts b { font-size: 2.6cqw; line-height: 1.2; }
.forum { display: grid; gap: 1.1cqw; }
.forum .label { margin-bottom: 0; }
.bubble {
  position: relative;
  display: block;
  padding: 1.2cqw 2.4cqw 1.3cqw;
  font-size: 2.4cqw;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 250, 240, .78);
  border: .4cqw solid var(--ink);
  border-radius: 2.4cqw 2.4cqw 2.4cqw .6cqw;
  transition: transform .35s var(--spring), background .2s;
}
a.bubble:hover { transform: translateX(1cqw) rotate(-.6deg); background: var(--cream); }
.bubble cite {
  display: inline-block;
  margin-left: .6cqw;
  font-style: normal;
  font-size: 2cqw;
  font-weight: 700;
  color: var(--cream);
  background: var(--ink);
  padding: .1cqw 1.2cqw;
  border-radius: 99px;
  white-space: nowrap;
}

/* Pro tip on the left, "Find it" pinned to the right edge of the text column, both centred on one line */
.spot-foot { margin-top: auto; padding-top: 2cqw; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.tip {
  flex: 1;
  padding: 1.8cqw 2.4cqw;
  font-family: var(--f-hand);
  font-size: 3cqw;
  line-height: 1.22;
  background: #fff59a;
  border-radius: .6cqw;
  transform: rotate(-1.4deg);
  box-shadow: .3cqw .8cqw 1.4cqw rgba(29, 15, 51, .2);
}
.tip b { font-family: var(--f-sign); font-weight: 400; font-size: 2.2cqw; color: var(--chilli); }
.maps {
  flex: none;
  padding: 1.2cqw 2.4cqw;
  font-family: var(--f-sign);
  font-size: 2cqw;
  color: var(--cream);
  text-decoration: none;
  background: var(--ink);
  border-radius: 99px;
  box-shadow: .5cqw .5cqw 0 var(--acc);
  transition: transform .35s var(--spring), box-shadow .3s;
}
.maps:hover { transform: translate(-.3cqw, -.5cqw) rotate(-3deg); box-shadow: .8cqw 1cqw 0 var(--acc); }

/* ============ Fine print ============ */
.key-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 3cqw; }
.key-grid > div { display: grid; grid-template-columns: 9cqw 1fr; align-items: center; gap: 1.6cqw; font-size: 2.6cqw; }
.key-grid b { font-family: var(--f-sign); font-weight: 400; font-size: 3cqw; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin-bottom: 3.4cqw; }
.stats > div {
  display: grid;
  justify-items: center;
  padding: 2cqw 1cqw;
  text-align: center;
  background: var(--acc);
  border: .45cqw solid var(--ink);
  border-radius: 2cqw;
  box-shadow: .7cqw .7cqw 0 var(--ink);
}
.stats > div:nth-child(2) { background: var(--marigold); transform: rotate(-2deg); }
.stats > div:nth-child(3) { background: var(--pink); }
.stats b { font-family: var(--f-sign); font-weight: 400; font-size: 6.4cqw; line-height: 1; }
.stats span { font-size: 1.95cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.advisory {
  margin-top: 3cqw;
  padding: 2cqw 2.6cqw;
  font-size: 2.4cqw;
  line-height: 1.38;
  background: #fff59a;
  border: .45cqw dashed var(--ink);
  border-radius: 1.6cqw;
}
.advisory b { font-family: var(--f-sign); font-weight: 400; color: var(--chilli); margin-right: .6cqw; }
.sources { list-style: none; margin: 1.6cqw 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.sources li { padding: .6cqw 1.8cqw; font-size: 2.3cqw; font-weight: 700; border: .4cqw solid var(--ink); border-radius: 99px; background: var(--acc); color: var(--ink); }

/* ============ Coming next ============ */
.next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; }
.next-card {
  display: grid;
  grid-template-columns: 7cqw 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.6cqw;
  align-items: center;
  padding: 1.6cqw 2cqw;
  background: var(--cream);
  border: .45cqw solid var(--ink);
  border-radius: 2cqw;
}
.next-card span { grid-row: span 2; font-size: 5.4cqw; text-align: center; }
.next-card b { font-family: var(--f-sign); font-weight: 400; font-size: 2.8cqw; }
.next-card small { font-size: 1.95cqw; line-height: 1.25; opacity: .75; }
.next-abroad { margin-top: 3cqw; display: flex; flex-wrap: wrap; gap: 1.4cqw; }
.next-abroad span { padding: .8cqw 2.2cqw; font-weight: 700; font-size: 2.5cqw; background: var(--c); border: .4cqw solid var(--ink); border-radius: 99px; }
.stamp {
  position: absolute;
  right: 6cqw;
  top: 9cqw;
  padding: 1.4cqw 2.4cqw;
  font-family: var(--f-sign);
  font-size: 3.6cqw;
  line-height: 1;
  text-align: center;
  color: var(--cream);
  border: .7cqw solid var(--cream);
  border-radius: 1.4cqw;
  transform: rotate(12deg);
  opacity: .9;
}

/* ============ Notes ============ */
.ruled {
  flex: 1;
  background: repeating-linear-gradient(180deg, transparent 0 7cqw, rgba(29, 15, 51, .22) 7cqw calc(7cqw + 2px));
}

/* ============ Back cover ============ */
.back {
  padding: 0 7cqw 8cqw;
  align-items: center;
  text-align: center;
  color: var(--cream);
  background:
    radial-gradient(rgba(255, 255, 255, .08) 1.4px, transparent 2px) 0 0 / 3.4cqw 3.4cqw,
    var(--ink);
}
.back-quote {
  margin: auto 0 6cqw;
  font-family: var(--f-sign);
  font-size: 9.4cqw;
  line-height: 1;
  color: var(--sun);
  text-shadow: .8cqw .8cqw 0 var(--pink);
}
.back-mast { display: flex; align-items: baseline; gap: 1.4cqw; font-family: var(--f-sign); font-size: 6cqw; }
.back-mast i { font-family: var(--f-hand); font-style: normal; color: var(--pink); }
.back-line { margin: 2.4cqw 0 6cqw; font-size: 2.4cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }

/* ============ Small screens ============ */
@media (max-width: 700px) {
  .mag-awning { --s: 15px; }
  .mag-btn { padding: 7px 12px; font-size: 13px; }
  .mag-title { display: none; }
  .mag-hint { display: none; }
  .mag-nav { gap: 10px; padding: 8px 16px max(12px, env(safe-area-inset-bottom)); }
  .mag-arrow { width: 42px; height: 42px; flex: none; }
  /* chapters take the counter's place on phones */
  .mag-counter { display: none; }
  .mag-chapters { flex: 0 1 252px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .mag-ch { padding: 8px 2px; font-size: 11.5px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; }
}
/* Phones: no chapter buttons, a small Suggest pill between the arrows, and the book nearly edge to edge */
.mag-suggest-mini { display: none; }
@media (max-width: 700px) {
  .mag-chapters { display: none; }
  .mag .mag-foot { display: none; }
  .book-stage { margin: 8px 4px 0; }
  .mag-nav { justify-content: space-between; padding: 8px 12px max(10px, env(safe-area-inset-bottom)); }
  .mag-suggest-mini {
    display: inline-block;
    padding: 7px 14px;
    font: 700 12.5px/1 var(--f-body);
    color: var(--ink);
    background: var(--sun);
    border: 2px solid var(--ink);
    border-radius: 999px;
    box-shadow: 2px 2px 0 var(--pink);
    touch-action: manipulation;
  }
}
@media (max-width: 380px) {
  .mag-ch .lbl-short { display: none; }
  .mag-ch .lbl-tiny { display: inline; }
}

/* ============ Off the Menu + "We missed something?" ============ */
.mag-bar-right { display: flex; align-items: center; gap: 8px; }
.mag-om { text-decoration: none; background: var(--sun); }
.mag-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  padding: 0 16px max(10px, env(safe-area-inset-bottom));
}
.mag-foot .mag-hint { margin: 0; }

.missed {
  display: grid;
  gap: .8cqw;
  margin-top: auto;
  padding: 2.4cqw 2.8cqw;
  background: var(--sun);
  border: .45cqw solid var(--ink);
  border-radius: 2cqw;
  box-shadow: .8cqw .8cqw 0 var(--pink);
  transform: rotate(-1deg);
}
.missed b { font-family: var(--f-sign); font-weight: 400; font-size: 3.2cqw; }
.missed span { font-size: 2.35cqw; line-height: 1.35; }
.missed-btn {
  justify-self: start;
  padding: 1cqw 2.6cqw;
  font-family: var(--f-sign);
  font-size: 2.3cqw;
  color: var(--cream);
  background: var(--ink);
  border-radius: 99px;
  transition: transform .3s var(--spring);
}
.missed-btn:hover { transform: translateY(-.4cqw); }

/* "How this works" spread after the cover */
.howto .headline { font-size: 11cqw; margin-bottom: 2.4cqw; }
.howto em { font-style: normal; background: linear-gradient(transparent 55%, var(--acc2) 55%); }
.howto-steps { display: grid; gap: 3.4cqw; margin: 1.4cqw 0 0; padding: 0; list-style: none; }
.howto .kicker + .howto-steps { margin-top: 4.5cqw; }
.howto-step { display: grid; grid-template-columns: 8cqw 1fr; gap: 2.6cqw; align-items: start; }
.howto-no {
  display: grid;
  place-items: center;
  width: 8cqw;
  height: 8cqw;
  font-family: var(--f-sign);
  font-size: 3.8cqw;
  color: var(--cream);
  background: var(--ink);
  border-radius: 50%;
  box-shadow: .5cqw .5cqw 0 var(--acc);
}
.howto-step > div > b { display: block; margin-bottom: .6cqw; font-family: var(--f-sign); font-weight: 400; font-size: 4.3cqw; line-height: 1.1; }
.howto-step p { margin: 0; font-size: 3.45cqw; line-height: 1.38; }
.howto-more {
  display: grid;
  gap: 1cqw;
  margin-top: auto;
  padding: 2.8cqw 3cqw;
  background: var(--sun);
  border: .45cqw solid var(--ink);
  border-radius: 2cqw;
  box-shadow: .8cqw .8cqw 0 var(--pink);
  transform: rotate(-1deg);
}
.howto-more > b { font-family: var(--f-sign); font-weight: 400; font-size: 4.2cqw; }
.howto-more span { font-size: 3.3cqw; line-height: 1.38; }
.howto-btn {
  justify-self: start;
  margin-top: .6cqw;
  padding: 1.2cqw 3cqw;
  font-family: var(--f-sign);
  font-size: 3cqw;
  color: var(--cream);
  text-decoration: none;
  background: var(--ink);
  border-radius: 99px;
  transition: transform .3s var(--spring);
}
.howto-btn:hover { transform: translateY(-.4cqw); }
/* the left page is dark so it jumps out between the cover and the cream pages */
.howto-cover { --bg: #24104d; --acc: #ff4d9d; --acc2: #ff4d9d; color: var(--cream); }
.howto-cover .kicker { background: var(--pink); }
.howto-cover .headline { margin-top: 4cqw; font-size: 12.5cqw; color: var(--sun); text-shadow: .8cqw .8cqw 0 var(--pink); }
.howto-cover .lede { color: var(--cream); font-size: 3.5cqw; }
.howto-cover .howto-steps { gap: 2.6cqw; }
.howto-cover .howto-step p { font-size: 3.25cqw; }
.howto-cover .folio { color: var(--cream); }
.howto-cover em { background: linear-gradient(transparent 55%, rgba(255, 77, 157, .75) 55%); }
.howto-step:nth-child(3n+1) .howto-no { background: var(--pink); }
.howto-step:nth-child(3n+2) .howto-no { background: #00c2a8; }
.howto-step:nth-child(3n) .howto-no { color: var(--ink); background: var(--sun); }
.howto-no { border: .4cqw solid var(--ink); box-shadow: .5cqw .5cqw 0 var(--ink); }
.howto-cover .howto-no { border-color: var(--cream); box-shadow: none; }
.pg .howto-sticker {
  position: absolute;
  top: 3cqw;
  right: 5.5cqw;
  z-index: 3;
  padding: 1.6cqw 2.2cqw;
  font-family: var(--f-sign);
  font-size: 3cqw;
  line-height: 1;
  text-align: center;
  color: var(--ink);
  background: var(--sun);
  border: .5cqw solid var(--ink);
  border-radius: 2cqw;
  box-shadow: .8cqw .8cqw 0 var(--pink);
  transform: rotate(8deg);
  animation: stickerWiggle 2.6s ease-in-out infinite;
}
@keyframes stickerWiggle { 50% { transform: rotate(3deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .pg .howto-sticker { animation: none; } }
.howto-turn { margin: auto 0 0; align-self: flex-end; font-family: var(--f-hand); font-size: 5.4cqw; color: var(--sun); transform: rotate(-3deg); }

@media (max-width: 700px) {
  .mag-om { padding: 7px 10px; }
  .mag-bar-right { gap: 6px; }
}

/* "We missed something?" banner under the book (narrow screens) */
.mag-suggest {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  background: var(--sun);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--pink);
  transition: transform .35s var(--spring), box-shadow .3s var(--smooth);
  animation: nudge 5s ease-in-out 3s infinite;
}
.mag-suggest .ms-cta {
  padding: 6px 12px;
  font-family: var(--f-sign);
  font-size: 13px;
  font-weight: 400;
  color: var(--cream);
  background: var(--ink);
  border-radius: 999px;
}
.mag-suggest:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 6px 7px 0 var(--pink); animation: none; }
@keyframes nudge {
  0%, 88%, 100% { transform: none; }
  91% { transform: rotate(-2.5deg) scale(1.04); }
  94% { transform: rotate(2deg) scale(1.04); }
  97% { transform: rotate(-1deg); }
}

/* Side card on wide screens, in the space beside the book */
.mag-cta { display: none; }
@media (min-width: 900px) {
  .has-side-room .mag-cta {
    position: absolute;
    left: clamp(18px, 2.4vw, 40px);
    bottom: 96px;
    z-index: 2;
    display: grid;
    gap: 8px;
    width: clamp(200px, 15vw, 250px);
    padding: 18px 18px 16px;
    color: var(--ink);
    background: var(--sun);
    border: 4px solid var(--ink);
    border-radius: 20px;
    box-shadow: 8px 8px 0 var(--pink);
    transform: rotate(-2deg) translateY(30px);
    opacity: 0;
    transition: transform .7s var(--spring) .35s, opacity .4s var(--smooth) .35s, box-shadow .3s;
  }
  .mag.has-side-room.is-open .mag-cta { transform: rotate(-2deg); opacity: 1; }
  .mag.has-side-room.is-open .mag-cta:hover { transform: rotate(0) translateY(-4px); box-shadow: 10px 12px 0 var(--pink); }
  .has-side-room .mag-cta::before {
    content: '📝';
    position: absolute;
    top: -22px;
    right: -14px;
    font-size: 40px;
    transform: rotate(14deg);
    filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
  }
  .mc-kicker { font-family: var(--f-hand); font-size: 20px; color: var(--chilli); line-height: 1; }
  .has-side-room .mag-cta h3 { margin: 0; font-family: var(--f-sign); font-weight: 400; font-size: 24px; line-height: 1; }
  .has-side-room .mag-cta p { margin: 0; font-size: 13px; line-height: 1.45; }
  .mc-btn {
    margin-top: 4px;
    padding: 11px 14px;
    font-family: var(--f-sign);
    font-size: 14px;
    color: var(--cream);
    background: var(--ink);
    border-radius: 12px;
    box-shadow: 3px 3px 0 var(--pink);
    transition: transform .3s var(--spring);
  }
  .mc-btn:hover { transform: translateY(-2px); }
  .mc-link { font-size: 13px; font-weight: 700; color: var(--ink); text-align: center; }
  .side-compact .mag-cta p { display: none; }
  /* the card replaces the banner here */
  .has-side-room .mag-foot .mag-suggest { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mag-suggest { animation: none; } }

/* Photo page: tier sticker + save/chilli/been buttons stacked in one centred column */
.scrap-side {
  position: absolute;
  left: 6cqw;
  top: 85cqw;
  z-index: 3;
  width: 26cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8cqw;
}
.scrap-side .scrap-sticker {
  position: relative;
  left: auto;
  top: auto;
  width: 16.5cqw;
  height: 16.5cqw;
  transform: rotate(-6deg);
  box-shadow: 0 .9cqw 0 var(--ink);
}
.scrap-side .scrap-actions {
  position: static;
  width: 100%;
}


/* 24-hours itinerary: equal rows that always fit, times right-aligned against one dashed line,
   a dot per stop level with the spot name, and the sign-off as a sticker by the heading. */
.day .headline { font-size: 8.2cqw; margin: 2.4cqw 0 2.4cqw; }
.day .timeline {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
.day .timeline::before { display: none; }
.day .timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 13cqw 1fr;
  column-gap: 6cqw;
  align-items: start;
  min-height: 0;
  overflow: hidden;
}
/* the dashed line, drawn per row so it starts at the first dot and ends at the last */
.day .timeline li::after {
  content: '';
  position: absolute;
  left: calc(13cqw + 3cqw - .25cqw);
  top: 0;
  bottom: 0;
  width: .5cqw;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1cqw, transparent 1cqw 1.9cqw);
  opacity: .5;
}
.day .timeline li:first-child::after { top: 1.45cqw; }
.day .timeline li:last-child::after { bottom: auto; height: 1.45cqw; }
/* the dot */
.day .timeline li::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: calc(13cqw + 3cqw - 1.2cqw);
  top: .25cqw;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background: var(--sun);
  border: .45cqw solid var(--ink);
}
.day .tl-time {
  padding: 0;
  font-size: 2.1cqw;
  line-height: 2.9cqw;
  text-align: right;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 0;
}
.day .tl-body { display: grid; gap: .3cqw; padding: 0; min-width: 0; }
.day .tl-spot { font-size: 2.5cqw; line-height: 2.9cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.day .tl-spot i { font-size: 1.8cqw; }
.day .tl-what {
  font-size: 2.15cqw;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.day .day-note {
  position: absolute;
  top: 6.4cqw;
  right: 7cqw;
  margin: 0;
  padding: 1cqw 2cqw;
  max-width: 24cqw;
  font-size: 3.2cqw;
  line-height: 1.05;
  text-align: center;
  background: var(--cream);
  border: .4cqw solid var(--ink);
  border-radius: 1.4cqw;
  box-shadow: .6cqw .6cqw 0 var(--acc);
  transform: rotate(5deg);
}

/* ============ Spot page placeholder while its write-up loads ============ */
.spot-skel { display: grid; gap: 1.6cqw; margin-top: 3.4cqw; }
.spot-skel i {
  display: block;
  height: 2.6cqw;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(29, 15, 51, .1) 0%, rgba(29, 15, 51, .18) 40%, rgba(29, 15, 51, .1) 80%) 0 0 / 200% 100%;
  animation: skel 1.2s linear infinite;
}
.spot-skel i.short { width: 60%; }
.spot-skel i.pill { width: 40%; height: 4.6cqw; margin-top: 2cqw; }
.spot-skel i.block { height: 9cqw; border-radius: 2cqw; margin-top: 1cqw; }
@keyframes skel { to { background-position: -200% 0; } }
.spot.is-filled > *:not(.spot-top):not(.spot-head) { animation: fillIn .35s var(--smooth) both; }
@keyframes fillIn { from { opacity: 0; transform: translateY(.8cqw); } }
@media (prefers-reduced-motion: reduce) { .spot-skel i { animation: none; } }

/* Spot page that couldn't load after retries */
.spot.is-failed .spot-skel i { animation: none; opacity: .5; }
.spot-retry {
  display: grid;
  gap: 1cqw;
  justify-items: start;
  margin-top: 4cqw;
  padding: 3cqw;
  background: var(--cream);
  border: .45cqw dashed var(--ink);
  border-radius: 2cqw;
}
.spot-retry b { font-family: var(--f-sign); font-weight: 400; font-size: 3cqw; }
.spot-retry span { font-size: 2.4cqw; }
.spot-retry button {
  margin-top: .6cqw;
  padding: 1.2cqw 3cqw;
  font-family: var(--f-sign);
  font-size: 2.4cqw;
  color: var(--cream);
  background: var(--ink);
  border-radius: 99px;
}
.scrap-side .scrap-sticker span { font-size: 2.2cqw; }
.scrap-side .scrap-sticker b { font-size: 1.95cqw; max-width: 13cqw; }

/* ============ Top navigation ============ */
.topnav {
  position: fixed;
  top: clamp(14px, 3vh, 28px);
  right: clamp(16px, 3vw, 36px);
  z-index: 25;
  display: flex;
  gap: 8px;
  transition: opacity .3s var(--smooth), transform .4s var(--smooth);
}
.panel-open .topnav, .mag-open .topnav { opacity: 0; pointer-events: none; transform: translateY(-12px); }
.tn-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 15px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .35s var(--spring), box-shadow .3s var(--smooth), background .2s;
}
.tn-btn:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 5px 6px 0 var(--ink); }
.tn-menu { background: var(--sun); }
.tn-signin { background: var(--pink); }
.tn-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--cream);
  background: var(--chilli);
  border-radius: 999px;
}
.tn-me { padding: 0 4px; }
.avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  font-family: var(--f-sign);
  font-size: 15px;
  color: var(--ink);
  background: var(--sun);
  border-radius: 50%;
}
/* the edition sticker now sits under the nav */
.edition { top: calc(clamp(14px, 3vh, 28px) + 58px); }

/* ============ Toasts ============ */
.toasts {
  position: fixed;
  left: 50%;
  bottom: max(110px, calc(env(safe-area-inset-bottom) + 100px));
  z-index: 90;
  display: grid;
  gap: 8px;
  justify-items: center;
  translate: -50% 0;
  pointer-events: none;
  width: min(92vw, 460px);
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  background: var(--ink);
  border: 2px solid rgba(255, 250, 240, .2);
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(10, 3, 24, .4);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .25s var(--smooth), transform .4s var(--spring);
}
.toast.is-in { opacity: 1; transform: none; }
.toast button {
  flex: none;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--sun);
  border-radius: 999px;
}

/* ============ Sheets (sign in, suggest, account) ============ */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(20, 8, 40, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s var(--smooth);
}
.sheet.is-open { opacity: 1; }
.sheet-card {
  position: relative;
  width: min(420px, 100%);
  padding: 28px 26px 24px;
  color: var(--ink);
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 10px 10px 0 var(--pink);
  transform: translateY(30px) scale(.94);
  transition: transform .5s var(--spring);
}
.sheet-card.is-wide { width: min(560px, 100%); }
.sheet.is-open .sheet-card { transform: none; }
.sheet-card h2 { margin: 0 0 6px; font-family: var(--f-sign); font-weight: 400; font-size: 26px; line-height: 1.1; }
.sheet-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; }
.sheet-emoji { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  transition: transform .35s var(--spring);
}
.sheet-close:hover { transform: rotate(90deg); }
.sheet-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; opacity: .6; }
.sheet-or::before, .sheet-or::after { content: ''; flex: 1; border-top: 2px dashed rgba(29, 15, 51, .3); }
.sheet-fine { margin: 14px 0 0 !important; font-size: 12px !important; opacity: .7; }
.sheet-fine a { color: inherit; }

.btn-primary, .btn-ghost, .btn-google, .btn-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 14px;
  transition: transform .35s var(--spring), box-shadow .3s var(--smooth);
}
.btn-primary {
  width: 100%;
  padding: 13px 18px;
  font-size: 15px;
  color: var(--cream);
  background: var(--ink);
  box-shadow: 4px 4px 0 var(--pink);
}
.btn-primary:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--pink); }
.btn-primary:disabled { opacity: .6; cursor: progress; }
.btn-google {
  width: 100%;
  padding: 12px 18px;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-google:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.g-logo {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-family: Arial, sans-serif;
  font-weight: 900;
  color: #fff;
  background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  border-radius: 50%;
}
.btn-ghost { padding: 11px 16px; color: var(--cream); border: 2px solid rgba(255, 250, 240, .5); }
.btn-ghost:hover { transform: translateY(-2px); }
.btn-link { font-size: 13px; text-decoration: underline; opacity: .8; }
.btn-small { padding: 7px 12px; font-size: 13px; color: var(--ink); background: var(--sun); border: 2px solid var(--ink); border-radius: 999px; }
.btn-small.wa { background: #25d366; }

/* forms */
.email-form, .suggest-form { display: grid; gap: 12px; }
.sheet-card input[type=email], .sheet-card input[type=url], .sheet-card input:not([type]), .sheet-card select, .sheet-card textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
}
.sheet-card textarea { resize: vertical; }
.sheet-card input:focus, .sheet-card select:focus, .sheet-card textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--sun); }
.suggest-form > label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; }
.suggest-form small { font-weight: 500; opacity: .6; }
.suggest-form fieldset { margin: 0; padding: 0; border: 0; }
.suggest-form legend { margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.suggest-form .credit-hint { display: block; margin: 6px 0 0; font-size: 12.5px; font-weight: 500; line-height: 1.4; opacity: .85; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { cursor: pointer; }
.seg input, .emoji-pick input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input) { padding: 7px 12px; font-size: 13px; font-weight: 700; border: 2px solid var(--ink); border-radius: 999px; background: #fff; }
.seg label:has(input:checked) { background: var(--sun); }
.emoji-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.emoji-pick span { display: grid; place-items: center; width: 38px; height: 38px; font-size: 20px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; }
.emoji-pick input:checked + span { border-color: var(--ink); background: var(--sun); }
.check { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; font-weight: 600 !important; }

/* account menu */
.acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.acct-head .avatar { width: 46px; height: 46px; font-size: 20px; border: 3px solid var(--ink); }
.acct-head b { display: block; font-size: 17px; }
.acct-head small { opacity: .6; }
.acct-links { display: grid; gap: 4px; }
.acct-links a, .acct-links button {
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
  border-radius: 12px;
  transition: background .2s;
}
.acct-links a:hover, .acct-links button:hover { background: rgba(29, 15, 51, .07); }
.acct-links .danger { color: #c62828; }
.my-sugg { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.my-sugg li { display: grid; gap: 2px; padding: 12px 14px; background: #fff; border: 2px solid var(--ink); border-radius: 14px; }
.my-sugg small { opacity: .6; }
.my-sugg .st { font-size: 13px; font-weight: 700; }
.my-sugg em { font-size: 13px; opacity: .75; }

/* ============ Full-screen panels ============ */
.panel {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--cream);
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(255, 77, 157, .2), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .07) 1.2px, transparent 1.8px) 0 0 / 18px 18px,
    linear-gradient(180deg, #2a1150, #1d0f33 70%);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .35s var(--smooth), transform .5s var(--smooth);
  overflow: hidden;
}
.panel.is-open { opacity: 1; transform: none; }
.panel[hidden] { display: none; }
.panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--chilli) 0 40px, var(--cream) 40px 80px);
}
.panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px clamp(14px, 3vw, 32px) 10px;
}
.panel-bar .mag-btn { text-decoration: none; }
.panel-title { font-family: var(--f-sign); font-size: clamp(18px, 2.4vw, 28px); color: var(--sun); text-shadow: 2px 2px 0 var(--ink); text-align: center; }
.panel-title small { display: block; font-family: var(--f-body); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); text-shadow: none; opacity: .7; }
.panel-tabs { display: flex; gap: 6px; padding: 4px; background: rgba(255, 250, 240, .1); border-radius: 999px; }
.panel-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  font-weight: 700;
  font-size: 14px;
  color: var(--cream);
  text-decoration: none;
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.panel-tabs a.is-on { color: var(--ink); background: var(--sun); }
.panel-tabs b { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: rgba(29, 15, 51, .25); }
.panel-body { overflow-y: auto; padding: 8px clamp(14px, 3vw, 32px) 40px; }

/* ============ Off the Menu ============ */
.panel-om { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
.om-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; }
.om-filters button {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cream);
  border: 2px solid rgba(255, 250, 240, .35);
  border-radius: 999px;
  transition: background .2s, color .2s, border-color .2s;
}
.om-filters button.is-on { color: var(--ink); background: var(--cream); border-color: var(--cream); }
.om-deck { position: relative; margin: 0 auto; width: min(380px, calc(100vw - 32px)); min-height: 0; }
.om-card {
  --depth: 0;
  --save: 0;
  --skip: 0;
  --chilli: 0;
  position: absolute;
  inset: 0 0 6px;
  display: grid;
  grid-template-rows: minmax(0, 1.05fr) auto;
  overflow: hidden;
  color: var(--ink);
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: 26px;
  box-shadow: 0 18px 40px rgba(10, 3, 24, .45);
  touch-action: none;
  user-select: none;
  cursor: grab;
  translate: 0 calc(var(--depth) * 12px);
  scale: calc(1 - var(--depth) * .05);
  transition: transform .45s var(--spring), translate .45s var(--smooth), scale .45s var(--smooth), opacity .3s;
}
.om-card:not(:last-child) { pointer-events: none; }
.om-card:not(:last-child) .om-body { opacity: .4; }
.om-card.is-dragging { transition: none; cursor: grabbing; }
.om-card.is-leaving { transition: transform .4s cubic-bezier(.4, 0, .9, .6), opacity .4s; opacity: .2; }
.om-card.is-returning { transform: translate(0, -60vh) rotate(-8deg); transition: none; }
.om-photo {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(rgba(29, 15, 51, .16) 1.2px, transparent 1.8px) 0 0 / 12px 12px,
    linear-gradient(150deg, #ffd25e, #ff86bb);
  border-bottom: 4px solid var(--ink);
}
.om-emoji { font-size: 90px; filter: drop-shadow(0 8px 12px rgba(29, 15, 51, .25)); }
.om-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.om-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(29, 15, 51, .82);
  border-radius: 999px;
}
.om-badge.is-community { color: var(--ink); background: var(--sun); border: 2px solid var(--ink); }
.om-stamp {
  position: absolute;
  top: 34px;
  padding: 6px 14px;
  font-family: var(--f-sign);
  font-size: 26px;
  border: 5px solid;
  border-radius: 12px;
  background: rgba(255, 250, 240, .85);
  pointer-events: none;
}
.st-save { left: 22px; color: #0c8f5a; transform: rotate(-14deg); opacity: var(--save); }
.st-skip { right: 22px; color: var(--chilli); transform: rotate(14deg); opacity: var(--skip); }
.st-chilli { left: 50%; top: auto; bottom: 22px; translate: -50% 0; color: #c2185b; opacity: var(--chilli); }
.om-body { display: grid; gap: 5px; padding: 14px 18px 16px; transition: opacity .3s; }
.om-cat { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.om-body h3 { margin: 0; font-family: var(--f-sign); font-weight: 400; font-size: 24px; line-height: 1.05; }
.om-area { margin: 0; font-size: 13px; font-weight: 600; }
.om-order { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.om-order li { padding: 3px 9px; font-size: 12px; font-weight: 700; background: #fff; border: 2px solid var(--ink); border-radius: 999px; }
.om-blurb { margin: 0; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.om-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 2px; font-size: 12px; font-weight: 700; }
.om-meta a { margin-left: auto; color: var(--ink); }
/* "Find it" (Off the Menu cards, To-Eat List): a real button, not a text link */
.find-it {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cream) !important;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--pink);
  transition: transform .3s var(--spring), box-shadow .3s;
}
.find-it:hover { transform: translateY(-2px); box-shadow: 3px 4px 0 var(--pink); }
.om-actions { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 14px 0 6px; }
.om-act {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  font-size: 26px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .35s var(--spring), box-shadow .3s, opacity .2s;
}
.om-act:hover:not(:disabled) { transform: translateY(-4px) scale(1.06); box-shadow: 5px 7px 0 var(--ink); }
.om-act:active:not(:disabled) { transform: scale(.92); }
.om-act:disabled { opacity: .35; cursor: default; }
.om-undo { width: 46px; height: 46px; font-size: 20px; color: var(--ink); background: var(--cream); }
.om-skip { color: var(--chilli); background: var(--cream); }
.om-chilli { width: 52px; height: 52px; font-size: 22px; background: var(--sun); }
.om-save { color: var(--cream); background: var(--pink); }
.om-hint { margin: 0 0 max(14px, env(safe-area-inset-bottom)); text-align: center; font-size: 12px; opacity: .6; }
.om-loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-hand); font-size: 24px; color: var(--sun); }
.om-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 20px; }
.om-empty h3 { margin: 0; font-family: var(--f-sign); font-weight: 400; font-size: 22px; color: var(--sun); }
.om-empty p { margin: 0; opacity: .8; }
.om-empty .btn-primary { width: auto; background: var(--pink); color: var(--ink); box-shadow: 4px 4px 0 var(--cream); }
.om-empty-emoji { font-size: 56px; }

/* ============ To-Eat List ============ */
.share-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 auto 18px;
  max-width: 1100px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 250, 240, .08);
  border: 2px dashed rgba(255, 250, 240, .3);
  border-radius: 16px;
}
.share-box small { opacity: .7; }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: relative; width: 44px; height: 26px; border-radius: 999px; background: rgba(255, 250, 240, .25); transition: background .2s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--cream); transition: transform .3s var(--spring); }
.switch input:checked + span { background: #25d366; }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }

.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; }
.tl-card {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--pink);
  transition: transform .35s var(--spring), box-shadow .3s;
}
.tl-card:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: 7px 8px 0 var(--pink); }
.tl-card.is-been { box-shadow: 5px 5px 0 #25d366; }
.tl-photo {
  position: relative;
  height: 150px;
  display: grid;
  place-items: center;
  font-size: 54px;
  background: linear-gradient(150deg, #ffd25e, #ff86bb);
  border-bottom: 3px solid var(--ink);
}
.tl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tl-body { display: grid; gap: 3px; padding: 12px 14px 14px; }
.tl-body small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.tl-body h3 { margin: 0; font-family: var(--f-sign); font-weight: 400; font-size: 19px; line-height: 1.1; }
.tl-body p { margin: 0; font-size: 13px; font-weight: 600; }
.tl-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tl-actions a { font-size: 13px; font-weight: 700; color: var(--ink); }
.tl-been { padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 999px; transition: background .2s; }
.is-been .tl-been { background: #b9f6d1; }
.tl-remove { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; font-weight: 700; color: var(--ink); opacity: .55; transition: opacity .2s, background .2s; }
.tl-remove:hover { opacity: 1; background: rgba(29, 15, 51, .08); }
.tl-stamp {
  position: absolute;
  top: 16px;
  right: 12px;
  padding: 4px 10px;
  font-family: var(--f-sign);
  font-size: 15px;
  color: #0c8f5a;
  background: rgba(255, 250, 240, .9);
  border: 3px solid #0c8f5a;
  border-radius: 8px;
  transform: rotate(10deg);
}
.tl-empty { display: grid; justify-items: center; gap: 10px; max-width: 420px; margin: 8vh auto 0; text-align: center; }
.tl-empty > div { font-size: 56px; }
.tl-empty h3 { margin: 0; font-family: var(--f-sign); font-weight: 400; font-size: 22px; color: var(--sun); }
.tl-empty p { margin: 0; opacity: .8; line-height: 1.5; }
.tl-empty .btn-primary { width: auto; margin-top: 6px; background: var(--pink); color: var(--ink); box-shadow: 4px 4px 0 var(--cream); }
.shared-lede { max-width: 1100px; margin: 0 auto 18px; opacity: .85; }
.shared-cta { display: flex; justify-content: center; margin-top: 26px; }
.shared-cta .btn-primary { width: auto; background: var(--pink); color: var(--ink); box-shadow: 4px 4px 0 var(--cream); }

/* ============ Food Passport ============ */
.pp-progress { display: grid; gap: 12px; max-width: 1100px; margin: 0 auto 22px; }
.pp-city { padding: 14px 16px; color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--sun); }
.pp-city-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pp-city-head b { font-family: var(--f-sign); font-weight: 400; font-size: 20px; }
.pp-city-head span { font-size: 13px; font-weight: 700; }
.pp-bar { height: 12px; margin: 10px 0; overflow: hidden; background: rgba(29, 15, 51, .1); border: 2px solid var(--ink); border-radius: 999px; }
.pp-bar i { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--pink) 0 8px, var(--chilli) 8px 16px); transition: width .6s var(--smooth); }
.pp-cats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.pp-stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 16px; max-width: 1100px; margin: 0 auto; }
.pp-stamp {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  aspect-ratio: 1;
  padding: 14px;
  text-align: center;
  color: #c2185b;
  background: var(--cream);
  border: 4px dashed #c2185b;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--cream), 0 0 0 9px #c2185b;
  transform: rotate(var(--r));
  transition: transform .4s var(--spring);
}
.pp-stamp:hover { transform: rotate(0) scale(1.05); }
.pp-e { font-size: 34px; }
.pp-stamp b { font-family: var(--f-sign); font-weight: 400; font-size: 13px; line-height: 1.1; }
.pp-stamp small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ============ Magazine: save / chilli / been-there bar ============ */
.scrap-actions {
  position: absolute;
  left: 6cqw;
  top: 117cqw;
  z-index: 3;
  display: grid;
  gap: .9cqw;
  width: 26cqw;
}
.scrap-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8cqw;
  height: 4.9cqw;
  padding: 0 1.6cqw;
  font-family: var(--f-body);
  font-size: 2.2cqw;
  font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  border: .4cqw solid var(--ink);
  border-radius: 99px;
  box-shadow: .4cqw .4cqw 0 var(--ink);
  transition: transform .3s var(--spring), background .2s;
}
.scrap-actions button:hover { transform: translateY(-.4cqw); }
.scrap-actions .sa-on { display: none; }
.scrap-actions .is-on .sa-on { display: inline; }
.scrap-actions .is-on .sa-off { display: none; }
.scrap-actions [data-spot-act="save"].is-on { background: var(--pink); color: var(--cream); }
.scrap-actions [data-spot-act="chilli"].is-on { background: var(--sun); }
.scrap-actions [data-spot-act="been"].is-on { background: #b9f6d1; }

/* ============ Small screens ============ */
@media (max-width: 700px) {
  .tn-label { display: none; }
  .tn-btn { height: 38px; padding: 0 11px; }
  .topnav { gap: 6px; }
  .edition { top: calc(clamp(14px, 3vh, 28px) + 50px); }
  .panel-bar { padding-top: 20px; }
  .panel-bar .mag-btn { padding: 7px 11px; font-size: 13px; }
  .panel-tabs a { padding: 8px 10px; font-size: 13px; }
  .om-card { grid-template-rows: minmax(0, 1fr) auto; }
  .om-emoji { font-size: 70px; }
  .om-body h3 { font-size: 21px; }
  .om-act { width: 56px; height: 56px; }
}
@media (max-height: 720px) {
  .om-blurb { -webkit-line-clamp: 2; }
}
.sheet-card .sheet-note { padding: 10px 12px; font-size: 13px; background: #fff3c4; border: 2px dashed var(--ink); border-radius: 12px; }

/* ============ Phones: one-line top bars, readable tap targets ============ */
.lbl-short { display: none; }
.mag-btn, .panel-tabs a { white-space: nowrap; }
@media (max-width: 520px) {
  .lbl-long { display: none; }
  .lbl-short { display: inline; }
  .mag-bar, .panel-bar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .mag-btn { padding: 7px 11px; font-size: 13px; gap: 6px; box-shadow: 2px 2px 0 var(--pink); }
  .mag-bar-right { gap: 6px; }
  .panel-title { font-size: 17px; }
  .panel-title small { font-size: 10px; }
  .panel-tabs { gap: 2px; padding: 3px; }
  .panel-tabs a { padding: 7px 10px; font-size: 13px; gap: 5px; }
}
/* spot-page buttons never shrink below a finger-friendly size */
.scrap-actions button { font-size: max(2.2cqw, 11px); height: max(4.9cqw, 28px); }
.scrap-actions { gap: max(.9cqw, 5px); }

/* Passport stamps fit the screen on phones (the double ring adds ~9px around each stamp) */
@media (max-width: 520px) {
  .pp-stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; padding: 12px 10px; }
  .pp-stamp { padding: 10px; }
  .pp-e { font-size: 28px; }
  .pp-stamp b { font-size: 12px; }
}

/* Let people pinch-zoom magazine pages (page-flip sets touch-action: pan-y) */
.stf__parent { touch-action: pan-y pinch-zoom !important; }

/* Styled photo picker in the suggest form */
.sheet-card input[type=file] { font: inherit; font-size: 13px; color: var(--ink); max-width: 100%; }
.sheet-card input[type=file]::file-selector-button {
  margin-right: 10px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
}
.sheet-card .check input[type=checkbox] { width: 18px; height: 18px; flex: none; accent-color: var(--pink); }

/* Grid items must be allowed to shrink, or long stamp names widen the whole page */
.pp-stamp { min-width: 0; }
.pp-stamp b { overflow-wrap: anywhere; }

/* Off the Menu filters: one scrollable row on phones instead of wrapping */
@media (max-width: 520px) {
  .om-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-left: 14px; padding-right: 14px; }
  .om-filters::-webkit-scrollbar { display: none; }
  .om-filters button { flex: none; }
}

/* Small phones (≤380px): keep the logo, nav, tabs and banner from colliding */
@media (max-width: 380px) {
  .logo { font-size: 21px; }
  .tn-btn { height: 34px; padding: 0 9px; font-size: 13px; }
  .tn-me .avatar { width: 28px; height: 28px; }
  .panel-tabs a { padding: 6px 8px; font-size: 12px; }
  .panel-bar .mag-btn { padding: 6px 9px; font-size: 12px; }
  .mag-suggest { gap: 8px; padding: 5px 5px 5px 12px; font-size: 12px; white-space: nowrap; }
  .mag-suggest .ms-cta { padding: 5px 10px; font-size: 11px; }
}
@media (max-width: 520px) { .site-foot { font-size: 10px; } }