/* =========================================================
   BestPumpkinSlice — design tokens & global styles
   ========================================================= */
:root {
  /* Spice palette */
  --pumpkin-spice: #C95A2C;
  --spiced-wine:   #7A2E2A;
  --butter-gold:   #E2A93D;
  --sage-leaf:     #5B7355;
  --walnut-brown:  #4A3429;
  --mangosteen:    #5C2126;

  /* Neutrals */
  --espresso-ink:   #1F1916;
  --parchment:      #F5EBD9;
  --linen:          #EBDFC8;
  --cream-whisper:  #F8F2E4;
  --ink-60:         rgba(245, 235, 217, 0.62);

  /* Type */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'General Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-brush:   'Caveat Brush', 'Marker Felt', cursive;
  --font-script:  'Reenie Beanie', 'Bradley Hand', cursive;

  --radius-card: 24px;
  --radius-hero: 40px;
  --radius-tile: 32px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse 1100px 760px at 4% -4%,  rgba(226,169,61,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 900px 700px  at 96% 18%, rgba(201,90,44,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 1100px 700px at 50% 105%, rgba(122,46,42,0.10) 0%, transparent 60%),
    var(--parchment);
  background-attachment: fixed;
  color: var(--espresso-ink);
  font-family: var(--font-body);
  font-weight: 450;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }

/* Body atmosphere: subtle paper grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(rgba(74,52,41,0.04) 1px, transparent 1px),
    radial-gradient(rgba(74,52,41,0.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
  mix-blend-mode: multiply;
}

/* =========================================================
   Typographic utilities
   ========================================================= */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-dot, var(--pumpkin-spice));
  box-shadow: 0 0 0 4px rgba(201,90,44,0.12);
}

.upper-meta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* =========================================================
   Buttons / pills
   ========================================================= */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  background: transparent;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s;
}
.pill .arrow { display: inline-block; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pill:hover .arrow { transform: translateX(4px); }

.pill--outline-light {
  border: 1.5px solid rgba(245,235,217,0.55);
  color: var(--parchment);
}
.pill--outline-light:hover {
  background: var(--parchment);
  color: var(--espresso-ink);
  border-color: var(--parchment);
}
.pill--outline-dark {
  border: 1.5px solid rgba(31,25,22,0.35);
  color: var(--espresso-ink);
}
.pill--outline-dark:hover {
  background: var(--espresso-ink);
  color: var(--parchment);
}
.pill--ink {
  background: var(--espresso-ink);
  color: var(--parchment);
}
.pill--ink:hover { transform: translateY(-2px); }

/* Sticker — rotated, hard shadow, magnetic on hover */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--espresso-ink);
  box-shadow: 3px 3px 0 var(--espresso-ink);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  cursor: pointer;
  border: 1.5px solid var(--espresso-ink);
  white-space: nowrap;
}
.sticker--pumpkin { background: var(--pumpkin-spice); color: var(--parchment); border-color: var(--espresso-ink); box-shadow: 3px 3px 0 var(--espresso-ink); }
.sticker--gold    { background: var(--butter-gold); }
.sticker--sage    { background: var(--sage-leaf); color: var(--parchment); }
.sticker:hover {
  transform: rotate(0deg) translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 var(--espresso-ink);
}
.sticker--brush {
  font-family: var(--font-brush);
  font-size: 19px;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 400;
  padding: 6px 16px 4px;
}

/* =========================================================
   Floating pill nav
   ========================================================= */
.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 22px;
  background: rgba(31,25,22,0.88);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-radius: 999px;
  border: 1px solid rgba(245,235,217,0.08);
  box-shadow: 0 16px 40px -12px rgba(31,25,22,0.4);
  color: var(--parchment);
  font-size: 14px;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s;
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding-right: 18px;
  border-right: 1px solid rgba(245,235,217,0.18);
  display: flex; align-items: center; gap: 8px;
}
.nav__logo-mark {
  display: inline-block;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
}
.nav__link {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(245,235,217,0.78);
  transition: color .2s, background .25s;
}
.nav__link:hover { color: var(--parchment); background: rgba(245,235,217,0.06); }
.nav__cta {
  margin-left: 6px;
  background: var(--pumpkin-spice);
  color: var(--parchment);
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(245,235,217,0.9);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  border: 1.5px solid var(--parchment);
  display: inline-flex; align-items: center; gap: 6px;
}
.nav__cta:hover {
  transform: rotate(-2deg) translate(-1px,-1px);
  box-shadow: 4px 4px 0 rgba(245,235,217,0.9);
}
@media (max-width: 900px) {
  .nav__links { display: none; }
}

/* =========================================================
   Layout
   ========================================================= */
.shell { padding: 0 32px; }
.container { max-width: 1320px; margin: 0 auto; }
@media (max-width: 720px) { .shell { padding: 0 16px; } }

section { position: relative; z-index: 2; }

/* =========================================================
   Brush / annotation accents
   ========================================================= */
.brush  { font-family: var(--font-brush);  font-weight: 400; letter-spacing: 0; }
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0; }

/* a hand-drawn underline using two stacked wobbly gradients */
.brush-underline {
  background-image:
    radial-gradient(ellipse 60% 38% at 20% 100%, var(--pumpkin-spice) 38%, transparent 41%),
    radial-gradient(ellipse 50% 42% at 55% 100%, var(--pumpkin-spice) 38%, transparent 41%),
    radial-gradient(ellipse 55% 38% at 88% 100%, var(--pumpkin-spice) 38%, transparent 41%);
  background-repeat: no-repeat;
  background-size: 100% 8px;
  background-position: 0 100%;
  padding-bottom: 6px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  padding: 110px 32px 24px;
  position: relative;
  overflow: visible;
}

/* Big lowercase brush watermarks behind/around the frame */
.hero__watermark {
  position: absolute;
  pointer-events: none;
  font-family: var(--font-brush);
  line-height: 0.82;
  color: var(--pumpkin-spice);
  text-transform: lowercase;
  white-space: nowrap;
  z-index: 1;
  opacity: 0;
  animation: watermark-in 1.6s cubic-bezier(.2,.8,.2,1) .2s forwards;
}
.hero__watermark--left {
  top: 38px;
  left: 24px;
  font-size: clamp(110px, 17vw, 260px);
  letter-spacing: -0.04em;
  transform: rotate(-4deg);
  color: var(--spiced-wine);
}
.hero__watermark--right {
  bottom: -60px;
  right: 28px;
  font-size: clamp(70px, 9vw, 140px);
  transform: rotate(3deg);
  color: var(--butter-gold);
}
@keyframes watermark-in {
  from { opacity: 0; transform: translateY(20px) rotate(-8deg); }
  to   { opacity: 0.13; }
}
.hero__watermark--right { animation-name: watermark-in-right; }
@keyframes watermark-in-right {
  from { opacity: 0; transform: translateY(20px) rotate(8deg); }
  to   { opacity: 0.55; transform: rotate(3deg); }
}

/* Handwritten editor's annotation tucked at the bottom-right of the hero frame */
.hero__annotation {
  position: absolute;
  bottom: 90px;
  right: 64px;
  font-family: var(--font-script);
  font-size: 28px;
  color: var(--butter-gold);
  line-height: 1.05;
  transform: rotate(-4deg);
  z-index: 5;
  pointer-events: none;
  text-align: right;
  opacity: 0;
  animation: rise-fade 1s cubic-bezier(.2,.8,.2,1) 1.4s forwards;
}
.hero__annotation::after {
  content: '';
  position: absolute;
  bottom: -22px;
  right: 8px;
  width: 70px;
  height: 36px;
  border-left: 2px solid var(--butter-gold);
  border-bottom: 2px solid var(--butter-gold);
  border-bottom-left-radius: 30px;
  transform: rotate(-10deg);
  opacity: 0.7;
}
@media (max-width: 1100px) { .hero__annotation { display: none; } }
.hero__frame {
  position: relative;
  height: 78vh;
  min-height: 620px;
  border-radius: var(--radius-hero);
  overflow: hidden;
  background: var(--espresso-ink);
  isolation: isolate;
}
.hero__photo {
  position: absolute;
  inset: 0;
  transform: scale(1.08);
  animation: kenburns 18s ease-in-out infinite alternate;
  background:
    radial-gradient(ellipse at 30% 45%, rgba(226,169,61,0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 65%, rgba(201,90,44,0.65) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 30%, rgba(122,46,42,0.45) 0%, transparent 60%),
    linear-gradient(135deg, #3a1e15 0%, #6b3220 45%, #c95a2c 100%);
}
.hero__photo--real {
  background:
    linear-gradient(180deg, rgba(31,25,22,0.10) 0%, rgba(31,25,22,0.0) 35%),
    url("images/hero.webp") center/cover no-repeat;
  background-color: #3a1e15;
}
.hero__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(31,25,22,0.04) 0 2px, transparent 2px 5px);
}
.hero__photo::after {
  /* dark gradient at bottom for legibility */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(31,25,22,0) 30%, rgba(31,25,22,0.85) 100%),
    radial-gradient(circle at 22% 80%, rgba(31,25,22,0.55), transparent 50%);
}
.hero__photo-cred {
  position: absolute;
  top: 28px; left: 32px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,235,217,0.55);
  padding: 6px 10px;
  border: 1px solid rgba(245,235,217,0.25);
  border-radius: 4px;
  z-index: 2;
}
.hero__content {
  position: absolute;
  bottom: 56px;
  left: 56px;
  right: 56px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  color: var(--parchment);
}
.hero__text { max-width: 820px; }
.hero__eyebrow { --accent-dot: var(--butter-gold); color: var(--parchment); }
.hero__title {
  font-size: clamp(48px, 6.4vw, 84px);
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 22px 0 28px;
  font-weight: 500;
}
.hero__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.hero__title .word > span {
  display: inline-block;
  transform: translateY(110%);
  animation: word-rise .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero__meta {
  display: flex; align-items: center; gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  opacity: 0;
  animation: rise-fade 1s cubic-bezier(.2,.8,.2,1) .85s forwards;
}
.hero__byline { color: rgba(245,235,217,0.7); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.hero__cta-row {
  display: flex; align-items: center; gap: 14px;
  opacity: 0;
  animation: rise-fade 1s cubic-bezier(.2,.8,.2,1) 1.05s forwards;
}
.hero__rating-block {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.hero__rating-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,235,217,0.55);
}
.hero__sticker {
  position: absolute;
  top: 36px;
  right: 36px;
  transform: rotate(-3deg);
  z-index: 4;
  font-size: 13px;
  padding: 12px 18px;
  animation: sticker-pop .8s cubic-bezier(.34,1.56,.64,1) 1.2s backwards;
}
@media (max-width: 900px) {
  .hero { padding: 90px 16px 16px; }
  .hero__content { left: 28px; right: 28px; bottom: 32px; flex-direction: column; align-items: flex-start; }
  .hero__sticker { top: 20px; right: 20px; font-size: 11px; padding: 8px 12px; }
}

/* =========================================================
   Marquee strip
   ========================================================= */
.marquee {
  background: var(--espresso-ink);
  color: var(--parchment);
  padding: 26px 0;
  overflow: hidden;
  position: relative;
}
.marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: scroll-left 60s linear infinite;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__item { display: inline-flex; align-items: center; gap: 14px; }
.marquee__item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pumpkin-spice); }
.marquee__item .score {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--butter-gold);
  letter-spacing: -0.02em;
  text-transform: none;
  margin-left: 8px;
}
.marquee--pumpkin { background: var(--pumpkin-spice); color: var(--parchment); }
.marquee--pumpkin .marquee__item .dot { background: var(--parchment); }
.marquee--pumpkin .marquee__item .score { color: var(--espresso-ink); }

/* =========================================================
   Section: Rankings teaser
   ========================================================= */
.section { padding: 110px 0; position: relative; }
.section__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.section__header h2 {
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.02em;
  font-weight: 500;
}
.section__header .lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--walnut-brown);
  max-width: 480px;
}
@media (max-width: 820px) {
  .section { padding: 70px 0; }
  .section__header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
}

.rank-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.rank-card {
  position: relative;
  background: var(--linen);
  border-radius: var(--radius-tile);
  padding: 28px 28px 24px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
.rank-card:hover { transform: translateY(-6px); }
.rank-card__photo {
  position: relative;
  height: 280px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
}
.rank-card__photo-bg {
  position: absolute; inset: 0;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.rank-card:hover .rank-card__photo-bg { transform: scale(1.06); }
.rank-card__num {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 132px;
  letter-spacing: -0.05em;
  line-height: 0.78;
  color: var(--parchment);
  text-shadow: 0 6px 24px rgba(31,25,22,0.4);
  z-index: 2;
  font-feature-settings: 'lnum';
}
.rank-card__rating {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 2;
  background: rgba(31,25,22,0.78);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}
.rank-card__bakery {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.rank-card__city {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--walnut-brown);
  font-weight: 500;
}
.rank-card__pick {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--walnut-brown);
  margin-top: 10px;
}

@media (max-width: 900px) {
  .rank-row { grid-template-columns: 1fr; }
}

/* =========================================================
   Latest reviews grid
   ========================================================= */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.review-card {
  background: var(--linen);
  border-radius: var(--radius-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  cursor: pointer;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), background .3s;
}
.review-card:hover { transform: translateY(-4px); background: var(--cream-whisper); }
.review-card__top { display: flex; align-items: center; gap: 18px; }
.review-card__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: var(--espresso-ink);
}
.review-card__photo-inner {
  position: absolute; inset: 0;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.review-card:hover .review-card__photo-inner { transform: scale(1.1) rotate(2deg); }
.review-card__title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0;
}
.review-card__excerpt {
  font-size: 14px;
  line-height: 1.5;
  color: var(--walnut-brown);
  margin: 0;
}
.review-card__meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--walnut-brown);
  font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.review-card__meta::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pumpkin-spice);
}
@media (max-width: 1000px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .reviews-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Methodology color-block
   ========================================================= */
.colorblock {
  background: var(--spiced-wine);
  color: var(--parchment);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.colorblock--sage    { background: var(--sage-leaf); }
.colorblock--walnut  { background: var(--walnut-brown); }

.method {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: center;
}
.method__text h2 {
  font-size: clamp(36px, 4.4vw, 52px);
  margin: 22px 0 26px;
}
.method__text p { font-size: 17px; line-height: 1.62; opacity: 0.85; max-width: 560px; margin-bottom: 28px; }
.method__mark {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
}
.method__mark .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(245,235,217,0.3);
  animation: spin 60s linear infinite;
}
.method__mark .ring--inner {
  inset: 36px;
  animation: spin 90s linear infinite reverse;
}
.method__mark .ring-text {
  position: absolute;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,235,217,0.4);
  top: -6px; left: 50%;
  transform: translateX(-50%);
  background: var(--spiced-wine);
  padding: 0 8px;
}

/* =========================================================
   City showcase
   ========================================================= */
.cities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.city-card {
  position: relative;
  border-radius: var(--radius-tile);
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  isolation: isolate;
}
.city-card__bg {
  position: absolute; inset: 0;
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.city-card:hover .city-card__bg { transform: scale(1.08); }
.city-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31,25,22,0) 30%, rgba(31,25,22,0.85) 100%);
}
.city-card__content {
  position: absolute; inset: 0;
  padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--parchment);
  z-index: 2;
}
.city-card__name {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}
.city-card__meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,235,217,0.7);
  margin-top: 6px;
}
.city-card__cta { align-self: flex-start; }
.city-card__sticker {
  position: absolute;
  top: 18px; right: 18px;
  transform: rotate(4deg);
  z-index: 3;
  font-size: 10px;
  padding: 8px 12px;
}
@media (max-width: 1100px) { .cities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cities-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Newsletter
   ========================================================= */
.newsletter {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}
.newsletter h2 { font-size: clamp(36px, 4.4vw, 52px); margin: 22px 0 22px; }
.newsletter p  { font-size: 17px; line-height: 1.6; opacity: 0.85; max-width: 480px; }
.newsletter__form {
  display: flex;
  background: var(--parchment);
  border-radius: 16px;
  padding: 8px;
  align-items: center;
  gap: 8px;
  box-shadow: 0 20px 50px -20px rgba(31,25,22,0.4);
}
.newsletter__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 450;
  color: var(--espresso-ink);
  outline: none;
}
.newsletter__input::placeholder { color: rgba(74,52,41,0.5); }
.newsletter__submit {
  background: var(--butter-gold);
  border: 1.5px solid var(--espresso-ink);
  color: var(--espresso-ink);
  padding: 12px 22px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transform: rotate(2deg);
  box-shadow: 3px 3px 0 var(--espresso-ink);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.newsletter__submit:hover {
  transform: rotate(2deg) translate(-2px,-2px);
  box-shadow: 5px 5px 0 var(--espresso-ink);
}
.newsletter__perks {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.newsletter__perks li {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245,235,217,0.7);
  display: flex; align-items: center; gap: 10px;
}
.newsletter__perks li::before {
  content: ''; width: 14px; height: 1px; background: rgba(245,235,217,0.5);
}
@media (max-width: 900px) {
  .newsletter, .method { grid-template-columns: 1fr; gap: 36px; }
}

/* =========================================================
   Pull quote
   ========================================================= */
.pullquote {
  text-align: center;
  padding: 120px 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.pullquote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--walnut-brown);
  text-wrap: balance;
}
.pullquote__attr {
  margin-top: 32px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--walnut-brown);
  opacity: 0.65;
  font-weight: 500;
}
.pullquote__rule {
  width: 60px; height: 2px;
  background: var(--walnut-brown);
  margin: 28px auto 0;
  opacity: 0.4;
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  background: var(--espresso-ink);
  color: var(--parchment);
  padding: 120px 32px 40px;
  position: relative;
  overflow: hidden;
}
.footer h2 {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  font-weight: 500;
  max-width: 920px;
  margin-bottom: 90px;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid rgba(245,235,217,0.12);
  padding-top: 56px;
}
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--butter-gold);
  margin-bottom: 16px;
  font-weight: 600;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a { color: var(--parchment); font-size: 15px; opacity: 0.78; transition: opacity .2s; }
.footer__col a:hover { opacity: 1; }
.footer__contributors {
  margin-top: 72px;
  padding: 24px 0;
  border-top: 1px solid rgba(245,235,217,0.12);
  border-bottom: 1px solid rgba(245,235,217,0.12);
  overflow: hidden;
}
.footer__contributors-track {
  display: flex; gap: 48px;
  width: max-content;
  animation: scroll-left 80s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: rgba(245,235,217,0.75);
  white-space: nowrap;
}
.footer__contributors-track span { display: inline-flex; align-items: center; gap: 24px; }
.footer__contributors-track span::after { content: '·'; opacity: 0.4; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  font-size: 12px;
  color: rgba(245,235,217,0.55);
  letter-spacing: 0.06em;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__socials { display: flex; gap: 18px; align-items: center; }
.footer__socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(245,235,217,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: background .25s, color .25s;
}
.footer__socials a:hover { background: var(--parchment); color: var(--espresso-ink); }
@media (max-width: 900px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================
   Lead modal — "Submit a slice"
   ========================================================= */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(31,25,22,0.62);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lead-fade-in .25s ease-out;
}
@keyframes lead-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lead-modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--parchment);
  border-radius: 24px;
  padding: 44px 44px 36px;
  box-shadow: 0 40px 80px -20px rgba(31,25,22,0.55);
  border: 1.5px solid var(--espresso-ink);
  animation: lead-pop-in .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lead-pop-in {
  0%   { opacity: 0; transform: translateY(24px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.lead-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--espresso-ink);
  background: transparent;
  color: var(--espresso-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.lead-modal__close:hover {
  background: var(--espresso-ink);
  color: var(--parchment);
  transform: rotate(90deg);
}
.lead-modal__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 14px 0 12px;
  color: var(--espresso-ink);
}
.lead-modal__lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--walnut-brown);
  margin: 0 0 24px;
  max-width: 480px;
}
.lead-modal__success {
  text-align: left;
  padding: 8px 0;
}
.lead-modal__success .pill {
  margin-top: 18px;
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lead-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) {
  .lead-modal__panel { padding: 32px 22px 26px; border-radius: 18px; }
  .lead-form__row { grid-template-columns: 1fr; }
}
.lead-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lead-form__field > span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--walnut-brown);
}
.lead-form__field input[type="text"],
.lead-form__field input[type="email"],
.lead-form__field textarea {
  border: 1.5px solid rgba(74,52,41,0.25);
  background: var(--cream-whisper);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 450;
  color: var(--espresso-ink);
  outline: none;
  transition: border-color .2s, background .2s;
  font-family: var(--font-body);
}
.lead-form__field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.5;
}
.lead-form__field input:focus,
.lead-form__field textarea:focus {
  border-color: var(--pumpkin-spice);
  background: var(--parchment);
}
.lead-form__field input::placeholder,
.lead-form__field textarea::placeholder {
  color: rgba(74,52,41,0.45);
}
.lead-form__field--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: -4px;
}
.lead-form__field--inline > span {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 450;
  font-size: 14px;
  color: var(--espresso-ink);
}
.lead-form__field--inline input[type="radio"] {
  accent-color: var(--pumpkin-spice);
  width: 16px;
  height: 16px;
}
.lead-form__error {
  background: rgba(122,46,42,0.10);
  border: 1px solid var(--mangosteen);
  color: var(--mangosteen);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.lead-form__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.lead-form__submit {
  background: var(--pumpkin-spice);
  color: var(--parchment);
  border: 1.5px solid var(--espresso-ink);
  padding: 13px 22px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transform: rotate(-1.5deg);
  box-shadow: 3px 3px 0 var(--espresso-ink);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, opacity .2s;
}
.lead-form__submit:hover:not(:disabled) {
  transform: rotate(-1.5deg) translate(-2px,-2px);
  box-shadow: 5px 5px 0 var(--espresso-ink);
}
.lead-form__submit:disabled {
  opacity: 0.55;
  cursor: progress;
}
.lead-form__fineprint {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(74,52,41,0.65);
  margin: 12px 0 0;
  line-height: 1.5;
}

/* =========================================================
   Slice Rating
   ========================================================= */
.slice-rating {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.slice-rating__svg { display: block; transform: rotate(-90deg); }
.slice-rating__num {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 500;
  color: currentColor;
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 2px;
}
.slice-rating__sep { opacity: 0.45; padding: 0 1px; }
.slice-rating__denom { opacity: 0.45; }

/* Subtle SVG placeholder “photo” pattern */
.placeholder-photo {
  position: relative;
  overflow: hidden;
}
.placeholder-photo__label {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,235,217,0.55);
  padding: 4px 8px;
  border: 1px solid rgba(245,235,217,0.22);
  border-radius: 3px;
  z-index: 2;
  pointer-events: none;
}

/* =========================================================
   Reveal animation utilities
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--stagger > * { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal--stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }

/* =========================================================
   Keyframes
   ========================================================= */
@keyframes kenburns {
  0%   { transform: scale(1.05) translate(0%, 0%); }
  100% { transform: scale(1.16) translate(-2%, -1%); }
}
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes word-rise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}
@keyframes rise-fade {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes sticker-pop {
  0%   { transform: rotate(-12deg) scale(0.6); opacity: 0; }
  60%  { transform: rotate(0deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(-3deg) scale(1); opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes wedge-draw {
  from { stroke-dashoffset: var(--wedge-len); fill-opacity: 0; }
  to   { stroke-dashoffset: 0; fill-opacity: 1; }
}