:root {
  --black: #141414;
  --ink: #131313;
  --cream: #f3ecdc;
  --yellow: #faf0c0;
  --pink: #f9d8de;
  --lilac: #e5d5f5;
  --peach: #fce3ce;
  --radius-panel: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--black);
  font-family: "Archivo", system-ui, sans-serif;
  color: var(--ink);
  padding: 16px;
  -webkit-font-smoothing: antialiased;
}

.sheet {
  background: var(--cream);
  border-radius: 6px;
  min-height: calc(100vh - 32px);
  padding: 36px clamp(20px, 5vw, 72px) 64px;
}

a { color: inherit; text-decoration: none; }

/* Nav */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: clamp(16px, 3vw, 44px);
  font-size: 15px;
  font-weight: 500;
}

.nav-links a:hover { opacity: 0.6; }

.pill-btn {
  display: inline-block;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.pill-btn:hover { background: var(--ink); color: var(--cream); }

/* Hero */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 22px);
  padding: clamp(48px, 9vh, 110px) 0 clamp(40px, 7vh, 90px);
}

.hero-words {
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(40px, 7vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.hero-words .word { white-space: nowrap; display: inline-block; }

.hero-words .ch { display: inline-block; }

.capsule { flex: 0 0 auto; width: clamp(44px, 6vw, 104px); }

.hero-sub {
  text-align: center;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 500;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: clamp(48px, 8vh, 96px);
}

/* Filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding-bottom: 14px;
}

.filters-cal { padding-bottom: 44px; }

.filters-cal .filter-pill { font-size: 12px; padding: 8px 18px; opacity: 0.85; }

.filters-cal .filter-pill.active { opacity: 1; }

.filter-pill {
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.filter-pill.active { background: var(--ink); color: var(--cream); }

/* Mosaic grid */

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  gap: clamp(14px, 1.8vw, 26px);
}

.tile { display: flex; align-items: center; justify-content: center; }

.tile-dot {
  grid-column: span 1;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  padding: 12px;
  transition: transform 0.18s ease;
}

.tile-card {
  grid-column: span 2;
  border-radius: 999px;
  justify-content: space-between;
  padding: 20px clamp(20px, 2.4vw, 40px);
  gap: 16px;
  transition: transform 0.18s ease;
}

.tile:hover { transform: scale(1.03); }

.tile .pair { font-size: clamp(28px, 3.4vw, 46px); line-height: 1; white-space: nowrap; }

.tile-dot .pair { font-size: clamp(30px, 3.8vw, 52px); }

.tile-dot .label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.tile-dot .label .flag { display: block; font-size: 13px; margin-top: 2px; }

.tile-card .info { min-width: 0; }

.tile-card .name {
  display: block;
  font-weight: 800;
  font-size: clamp(18px, 1.9vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.tile-card .meta {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
  opacity: 0.75;
}

.bg-yellow { background: var(--yellow); }
.bg-pink { background: var(--pink); }
.bg-lilac { background: var(--lilac); }
.bg-peach { background: var(--peach); }

/* Footer */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 72px;
  font-size: 14px;
  font-weight: 500;
}

.footer .mini-capsules { display: flex; gap: 6px; }

.footer .mini-capsules svg { width: 18px; }

/* Recipe page */

.recipe-head { padding: clamp(40px, 7vh, 80px) 0 24px; }

.back-link {
  display: inline-block;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 36px;
}

.back-link:hover { background: var(--ink); color: var(--cream); }

.recipe-title {
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(38px, 7vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  max-width: 18ch;
}

.native-name { font-size: 18px; font-weight: 500; margin-top: 14px; opacity: 0.75; }

.meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 28px 0 8px;
}

.meta-pill {
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.meta-pill.solid { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.surprise-meter { display: inline-flex; align-items: center; gap: 4px; }

.surprise-meter svg { width: 15px; display: block; }

.recipe-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: 32px 0 16px;
}

.hook { font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }

.why { font-size: 16px; line-height: 1.6; margin-top: 20px; font-weight: 400; }

.emoji-hero {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(64px, 8vw, 120px);
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  white-space: nowrap;
}

.section-label {
  display: inline-block;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 48px 0 24px;
}

.story p { font-size: 16px; line-height: 1.7; max-width: 68ch; }

.story p + p { margin-top: 16px; }

.warning {
  border-radius: 24px;
  padding: 20px 28px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  max-width: 68ch;
  margin-top: 24px;
}

.warning strong { font-weight: 800; }

.recipe-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}

.ingredients-panel {
  border-radius: var(--radius-panel);
  padding: 32px;
  position: sticky;
  top: 24px;
}

.ingredients-panel h3, .steps h3 {
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.ingredients-panel ul { list-style: none; }

.ingredients-panel li {
  padding: 10px 0;
  border-bottom: 1.5px solid rgba(19, 19, 19, 0.15);
  font-size: 15px;
  line-height: 1.45;
}

.ingredients-panel li:last-child { border-bottom: none; }

.ingredients-panel .amt { font-weight: 700; }

.ingredients-panel .ing-note { display: block; font-size: 13px; opacity: 0.7; margin-top: 2px; }

.steps ol { list-style: none; counter-reset: step; }

.steps li {
  counter-increment: step;
  display: flex;
  gap: 18px;
  padding: 14px 0;
  font-size: 16px;
  line-height: 1.6;
}

.steps li::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.sourcing-panel {
  border-radius: 24px;
  border: 2px solid var(--ink);
  padding: 22px 28px;
  font-size: 15px;
  line-height: 1.6;
  max-width: 68ch;
}

.sources { margin-top: 28px; font-size: 13px; opacity: 0.65; }

.sources a { text-decoration: underline; }

.recipe-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 72px;
}

.recipe-nav .pill-btn { font-size: 14px; padding: 12px 24px; }

/* CTA banner */

.cta-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 26px 40px;
  margin-top: clamp(28px, 4vw, 52px);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.cta-banner strong { font-weight: 800; }

.cta-banner .cta-capsule { width: 34px; flex: 0 0 auto; }

.cta-banner:hover { background: var(--ink); color: var(--cream); }

.cta-banner:hover .cta-capsule rect,
.cta-banner:hover .cta-capsule path { stroke: var(--cream); }

.cta-banner:hover .cta-capsule circle { fill: var(--cream); }

/* Watch it made */

.watch-panel {
  border: 2px solid var(--ink);
  border-radius: 28px;
  margin-bottom: clamp(24px, 3vw, 40px);
  overflow: hidden;
  max-width: 820px;
}

.watch-btn {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 18px 24px;
  background: transparent;
  border: none;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.watch-btn:hover { background: var(--ink); color: var(--cream); }

.play-pill {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.watch-btn:hover .play-pill { background: var(--cream); color: var(--ink); }

.play-pill svg { width: 22px; height: 22px; margin-left: 2px; }

.watch-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.watch-info strong { font-size: 15px; font-weight: 800; }

.watch-meta {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.watch-panel iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Comments and forms */

.comments { max-width: 68ch; }

.comments-intro { font-size: 15px; line-height: 1.6; margin-bottom: 20px; }

.comments-empty { font-size: 14px; opacity: 0.65; }

.comment {
  border-radius: 24px;
  padding: 18px 24px;
  margin-bottom: 12px;
}

.comment .who { font-weight: 800; font-size: 13px; }

.comment .when { font-weight: 500; opacity: 0.55; font-size: 12px; margin-left: 8px; }

.comment p { font-size: 15px; line-height: 1.55; margin-top: 6px; overflow-wrap: break-word; }

.comment-form, .suggest-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  max-width: 68ch;
}

.suggest-form { margin-top: 8px; }

.suggest-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.comment-form input, .comment-form textarea,
.suggest-form input, .suggest-form textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  padding: 12px 20px;
  border-radius: 24px;
}

.comment-form input, .suggest-form input { border-radius: 999px; }

.comment-form input::placeholder, .comment-form textarea::placeholder,
.suggest-form input::placeholder, .suggest-form textarea::placeholder { color: rgba(19, 19, 19, 0.45); }

.comment-form textarea:focus, .comment-form input:focus,
.suggest-form textarea:focus, .suggest-form input:focus {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.comment-form .pill-btn, .suggest-form .pill-btn { align-self: flex-start; }

.form-error { font-size: 13px; font-weight: 600; color: #8c2f1b; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.suggest-thanks { padding: 24px 0 48px; max-width: 68ch; }

.suggest-thanks p { font-size: 16px; line-height: 1.6; margin-bottom: 12px; }

.suggest-thanks .thanks-capsule { width: 56px; margin-bottom: 16px; display: block; }

.suggest-thanks .pill-btn { display: inline-block; margin-top: 8px; }

/* About */

.prose { max-width: 68ch; padding: 24px 0; }

.prose h2 {
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.01em;
  margin: 40px 0 16px;
  line-height: 1;
}

.prose p { font-size: 16px; line-height: 1.7; margin-bottom: 16px; }

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  .js .hero-words .ch {
    animation: hero-rise 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) backwards;
    animation-delay: calc(0.35s + var(--i) * 0.045s);
  }

  @keyframes hero-rise {
    from { transform: translateY(0.55em) scaleY(0.6); opacity: 0; }
  }

  .hero .capsule {
    animation: bob 3.6s ease-in-out infinite alternate;
  }

  .hero .capsule.smile { animation-delay: -1.8s; }

  .mini-capsules svg { animation: bob 3.6s ease-in-out infinite alternate; }

  .mini-capsules svg:last-child { animation-delay: -1.8s; }

  @keyframes bob {
    from { transform: translateY(-5px) rotate(-2.5deg); }
    to { transform: translateY(7px) rotate(2.5deg); }
  }

  .capsule .eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: blink 4.4s infinite;
  }

  .capsule.smile .eye { animation-delay: 2.2s; }

  @keyframes blink {
    0%, 91%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.08); }
  }

  .js .mosaic .tile {
    opacity: 0;
    transform: translateY(28px) scale(0.9);
  }

  .js .mosaic .tile.in {
    opacity: 1;
    transform: none;
    transition: transform 0.55s cubic-bezier(0.22, 1.4, 0.36, 1), opacity 0.4s ease;
  }

  .mosaic .tile.in:hover { transform: scale(1.05) rotate(-1.6deg); transition-duration: 0.35s; }

  .mosaic .tile.in:nth-child(even):hover { transform: scale(1.05) rotate(1.6deg); }

  .tile:hover .pair { animation: jiggle 0.6s ease; }

  @keyframes jiggle {
    25% { transform: rotate(-7deg) scale(1.14); }
    60% { transform: rotate(5deg) scale(1.05); }
  }

  .tile .pair { display: inline-block; }

  .pill-btn:hover, .filter-pill:hover { animation: nudge 0.35s ease; }

  @keyframes nudge {
    40% { transform: rotate(-1.6deg) scale(1.05); }
    75% { transform: rotate(1.2deg); }
  }

  .filter-pill:active, .pill-btn:active { transform: scale(0.93); }

  .js .meta-pill {
    animation: pop-in 0.5s cubic-bezier(0.22, 1.4, 0.36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 0.07s);
  }

  @keyframes pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.85); }
  }

  .emoji-hero { animation: floaty 5s ease-in-out infinite alternate; }

  @keyframes floaty {
    from { transform: translateY(-7px) rotate(-1.5deg); }
    to { transform: translateY(9px) rotate(1.5deg); }
  }

  .js .reveal {
    opacity: 0;
    transform: translateY(22px);
  }

  .js .reveal.in {
    opacity: 1;
    transform: none;
    transition: transform 0.55s cubic-bezier(0.22, 1.2, 0.36, 1), opacity 0.4s ease;
  }
}

/* Responsive */

@media (max-width: 980px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); }
  .recipe-intro, .recipe-grid { grid-template-columns: 1fr; }
  .ingredients-panel { position: static; }
  .nav-links { display: none; }
  .hero-words { white-space: normal; }
}

@media (max-width: 560px) {
  body { padding: 8px; }
  .sheet { padding: 24px 18px 48px; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .tile-card { grid-column: span 2; }
  .hero { flex-direction: column; }
  .capsule { width: 64px; }
}