:root {
  --black: #000;
  --ink: #111;
  --white: #fff;
  --paper: #f6f2ea;
  --muted: #706d68;
  --line: #cfcac2;
  --red: #e3312d;
  --yellow: #ffd44a;
  --green: #598f51;
  --max: 1500px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --mono: "Courier New", monospace;
}

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--white);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
}

::selection {
  background: var(--yellow);
  color: var(--black);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 15px;
  top: -80px;
  z-index: 999;
  padding: 12px 16px;
  background: var(--yellow);
  color: var(--black);
  font-weight: 800;
  text-decoration: none;
  transition: top .2s;
}

.skip-link:focus {
  top: 15px;
}

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 500;
  width: 100%;
  height: 4px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
}

.promo-bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 8px 20px;
  border-top: 3px solid var(--black);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  font-size: .94rem;
  letter-spacing: .04em;
}

.promo-bar p {
  margin: 0;
}

.promo-install {
  padding: 0 0 0 20px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: #075bd8;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .08em;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 300;
  background: var(--black);
  color: var(--white);
  box-shadow: 0 1px 0 rgba(255,255,255,.28);
}

.masthead-row {
  width: min(var(--max), 100%);
  min-height: 82px;
  margin: auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.masthead {
  grid-column: 2;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 4.35rem);
  line-height: 1;
  letter-spacing: -.065em;
  text-decoration: none;
}

.header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-icon {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.header-icon svg {
  width: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.newsletter-button {
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.favorite-count {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--red);
  color: var(--white);
  font-size: .62rem;
  font-weight: 800;
}

.mobile-menu-button {
  display: none;
  grid-column: 1;
  justify-self: start;
}

.mobile-menu-button span {
  width: 22px;
  height: 2px;
  background: currentColor;
}

.category-nav {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(25px, 3vw, 55px);
  padding: 0 28px;
  border-top: 1px solid rgba(255,255,255,.35);
  overflow-x: auto;
  scrollbar-width: none;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.category-nav a {
  flex: 0 0 auto;
  color: var(--white);
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.category-nav a:hover,
.category-nav a:focus-visible {
  color: var(--yellow);
}

main {
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: calc(100svh - 180px);
  display: grid;
  grid-template-columns: minmax(360px, 32%) 1fr;
  background: var(--white);
}

.hero-copy {
  padding: clamp(50px, 8vw, 135px) clamp(30px, 5vw, 80px) 120px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.story-meta,
.kicker {
  margin: 0 0 16px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.story-meta span,
.kicker {
  color: var(--red);
}

.hero h1 {
  max-width: 660px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.3rem, 6vw, 7.6rem);
  font-weight: 400;
  line-height: .87;
  letter-spacing: -.065em;
}

.hero-deck {
  max-width: 620px;
  margin: 28px 0 0;
  color: #444;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.52;
}

.byline {
  margin-top: 34px;
  display: grid;
  gap: 5px;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.byline time {
  color: var(--muted);
}

.rating-row {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #59544e;
  font-family: var(--mono);
  font-size: .75rem;
}

.stars {
  color: var(--black);
  font-size: 1rem;
  letter-spacing: .06em;
}

.hero-buttons,
.music-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 2px solid var(--black);
  border-radius: 0;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background .2s, color .2s, transform .2s;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.button-dark {
  background: var(--black);
  color: var(--white);
}

.button-outline {
  background: transparent;
  color: var(--black);
}

.button-light {
  border-color: var(--white);
  background: var(--white);
  color: var(--black);
}

.button-red {
  border-color: var(--red);
  background: var(--red);
  color: var(--white);
}

.button-outline-dark {
  border-color: rgba(255,255,255,.65);
  background: transparent;
  color: var(--white);
}

.hero-media {
  position: relative;
  min-width: 0;
  min-height: 670px;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media figcaption {
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 8px 10px;
  background: rgba(0,0,0,.72);
  color: rgba(255,255,255,.85);
  font-size: .58rem;
}

.hero-trial-bar {
  position: absolute;
  left: 50%;
  right: 4%;
  bottom: 28px;
  z-index: 5;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--white);
  box-shadow: 0 4px 22px rgba(0,0,0,.12);
  font-size: .82rem;
}

.hero-trial-bar a {
  font-weight: 900;
  text-underline-offset: 3px;
  text-transform: uppercase;
}

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  background: var(--yellow);
}

.marquee-track {
  width: max-content;
  min-height: 55px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding-left: 20px;
  animation: marquee 27s linear infinite;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.marquee-track i {
  font-style: normal;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.recipes-section,
.culture-section {
  width: min(var(--max), calc(100% - 56px));
  margin: 0 auto;
  padding: clamp(78px, 9vw, 140px) 0;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 45px;
  border-bottom: 2px solid var(--black);
  padding-bottom: 24px;
}

.section-heading h2,
.culture-title h2,
.newsletter h2 {
  max-width: 950px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 6vw, 7.2rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.06em;
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.filter-tab {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--black);
  background: var(--white);
  cursor: pointer;
  font-size: .69rem;
  font-weight: 800;
  text-transform: uppercase;
}

.filter-tab.is-active {
  background: var(--black);
  color: var(--white);
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px 24px;
}

.recipe-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
}

.recipe-card:nth-child(1),
.recipe-card:nth-child(5) {
  grid-column: span 6;
}

.recipe-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
  cursor: pointer;
}

.recipe-card:nth-child(1) .recipe-card-media,
.recipe-card:nth-child(5) .recipe-card-media {
  aspect-ratio: 16 / 10;
}

.recipe-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}

.recipe-card:hover .recipe-card-media img {
  transform: scale(1.045);
}

.card-save {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  font-size: 1.05rem;
}

.card-save.is-saved {
  background: var(--red);
  color: var(--white);
}

.recipe-card-body {
  padding-top: 17px;
}

.recipe-card-meta {
  margin: 0 0 9px;
  color: var(--red);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.recipe-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.6vw, 3rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.035em;
}

.recipe-card p {
  margin: 14px 0 0;
  color: #5d5852;
  line-height: 1.55;
}

.recipe-card-footer {
  margin-top: auto;
  padding-top: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #68635d;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.card-open {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.popular-section {
  min-height: 760px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  background: var(--black);
  color: var(--white);
}

.popular-image {
  min-height: 760px;
}

.popular-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popular-list {
  padding: clamp(55px, 8vw, 120px);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.popular-list h2 {
  margin: 0 0 38px;
  font-family: var(--serif);
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.055em;
}

.popular-list ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.popular-list li {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 18px;
  padding: 23px 0;
  border-top: 1px solid rgba(255,255,255,.26);
}

.popular-list li:last-child {
  border-bottom: 1px solid rgba(255,255,255,.26);
}

.popular-list li > span {
  color: var(--yellow);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 800;
}

.popular-list button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  text-align: left;
}

.popular-list strong,
.popular-list small {
  display: block;
}

.popular-list strong {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
}

.popular-list small {
  margin-top: 5px;
  color: rgba(255,255,255,.58);
}

.video-section {
  padding: clamp(50px, 7vw, 100px);
  background: var(--paper);
}

.video-shell {
  position: relative;
  min-height: min(780px, 75svh);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}

.video-shell video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.12) 70%);
}

.video-copy {
  position: relative;
  z-index: 2;
  width: min(780px, 90%);
  min-height: inherit;
  padding: clamp(40px, 8vw, 130px);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.video-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 7vw, 8.6rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.06em;
}

.video-copy p:not(.kicker) {
  max-width: 620px;
  margin: 25px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 1rem;
  line-height: 1.65;
}

.video-copy .button {
  width: fit-content;
  margin-top: 28px;
}

.media-credit {
  position: absolute;
  right: 15px;
  bottom: 15px;
  z-index: 2;
  margin: 0;
  padding: 7px 9px;
  background: rgba(0,0,0,.65);
  font-size: .55rem;
}

.culture-title {
  padding-bottom: 35px;
  border-bottom: 2px solid var(--black);
}

.culture-lead {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(35px, 7vw, 110px);
  align-items: center;
  padding: 65px 0;
  border-bottom: 1px solid var(--line);
}

.culture-lead img {
  width: 100%;
  max-height: 720px;
  object-fit: cover;
}

.culture-lead h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 6rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.05em;
}

.culture-lead p:not(.story-meta) {
  max-width: 560px;
  color: #56514b;
  line-height: 1.65;
}

.text-link {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.culture-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.culture-cards article {
  min-height: 320px;
  padding: 38px;
  border-right: 1px solid var(--line);
}

.culture-cards article:last-child {
  border-right: 0;
}

.culture-cards span {
  color: var(--red);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 900;
}

.culture-cards h3 {
  margin: 70px 0 15px;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: .98;
}

.culture-cards p {
  color: #625d57;
  line-height: 1.55;
}

.music-section {
  min-height: 650px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  background: #17231b;
  color: var(--white);
}

.music-copy {
  padding: clamp(50px, 8vw, 125px);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.music-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 6vw, 7rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.055em;
}

.music-copy > p:not(.kicker) {
  max-width: 580px;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
}

.music-player-shell {
  min-height: 650px;
  display: grid;
  place-items: center;
  padding: 55px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,212,74,.18), transparent 19rem),
    repeating-linear-gradient(45deg, transparent 0 19px, rgba(255,255,255,.02) 20px);
}

.music-placeholder {
  width: min(560px, 100%);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.15);
  text-align: center;
}

.music-placeholder > span {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-size: 2.1rem;
}

.music-placeholder strong {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 400;
}

.music-placeholder small {
  color: rgba(255,255,255,.55);
}

.music-player-shell iframe {
  width: min(720px, 100%);
  aspect-ratio: 16 / 9;
  border: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.42);
}

.newsletter {
  min-height: 500px;
  padding: clamp(65px, 9vw, 140px) max(28px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: 1fr .7fr;
  align-items: center;
  gap: 70px;
  background: var(--red);
  color: var(--white);
}

.newsletter .kicker {
  color: var(--yellow);
}

.newsletter form {
  display: flex;
  border-bottom: 3px solid var(--white);
}

.newsletter input {
  min-width: 0;
  flex: 1;
  padding: 18px 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 1.05rem;
  outline: none;
}

.newsletter input::placeholder {
  color: rgba(255,255,255,.67);
}

.newsletter form button {
  padding: 0 0 0 22px;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
}

.form-message {
  grid-column: 2;
  margin: -50px 0 0;
  font-size: .76rem;
}

.site-footer {
  padding: 60px max(28px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 35px;
  background: var(--black);
  color: var(--white);
}

.footer-brand strong {
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 400;
  letter-spacing: -.06em;
}

.footer-brand p {
  color: rgba(255,255,255,.55);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 22px;
}

.footer-links a {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.credits {
  grid-column: 1 / -1;
  padding-top: 25px;
  border-top: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.6);
  font-size: .72rem;
  line-height: 1.6;
}

.credits summary {
  width: fit-content;
  cursor: pointer;
  color: var(--white);
  font-weight: 900;
  text-transform: uppercase;
}

.copyright {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(255,255,255,.4);
  font-size: .65rem;
}

dialog {
  border: 0;
}

dialog::backdrop {
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(5px);
}

.search-dialog {
  width: min(900px, calc(100% - 30px));
  padding: 28px;
  background: var(--white);
  color: var(--black);
}

.dialog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.dialog-top button,
.recipe-dialog-close,
.dialog-close {
  width: 45px;
  height: 45px;
  border: 1px solid var(--black);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 1.3rem;
}

.search-dialog > input {
  width: 100%;
  margin-top: 45px;
  padding: 18px 0;
  border: 0;
  border-bottom: 3px solid var(--black);
  background: transparent;
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 5rem);
  outline: none;
}

.search-results {
  margin-top: 30px;
  display: grid;
  gap: 0;
}

.search-result {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.search-result img {
  width: 90px;
  height: 65px;
  object-fit: cover;
}

.search-result strong,
.search-result small {
  display: block;
}

.search-result small {
  margin-top: 5px;
  color: var(--muted);
}

.recipe-dialog {
  width: min(1150px, calc(100% - 25px));
  max-height: calc(100svh - 24px);
  padding: 0;
  overflow: auto;
  background: var(--paper);
  color: var(--black);
}

.recipe-dialog-close {
  position: sticky;
  left: calc(100% - 60px);
  top: 15px;
  z-index: 4;
  background: var(--white);
}

.recipe-detail {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
}

.recipe-detail-image {
  min-height: 720px;
}

.recipe-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipe-detail-copy {
  padding: clamp(40px, 6vw, 85px);
}

.recipe-detail-copy h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.06em;
}

.recipe-detail-copy .deck {
  color: #57514b;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.55;
}

.recipe-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 27px 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.recipe-columns {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 30px;
}

.recipe-columns h3 {
  margin: 0 0 15px;
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.recipe-columns ul,
.recipe-columns ol {
  margin: 0;
  padding-left: 20px;
  line-height: 1.65;
}

.install-dialog {
  width: min(560px, calc(100% - 30px));
  padding: 0;
  background: var(--yellow);
  color: var(--black);
}

.install-dialog form {
  position: relative;
  padding: 50px;
}

.install-dialog h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 3.5rem;
  font-weight: 400;
  line-height: .9;
}

.install-dialog p:not(.kicker) {
  line-height: 1.6;
}

.dialog-close {
  position: absolute;
  right: 18px;
  top: 18px;
}

.toast,
.connection-status {
  position: fixed;
  z-index: 700;
  right: 18px;
  bottom: 18px;
  max-width: min(390px, calc(100% - 36px));
  padding: 14px 17px;
  background: var(--yellow);
  color: var(--black);
  box-shadow: 0 15px 45px rgba(0,0,0,.3);
  font-size: .72rem;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity .25s, transform .25s;
}

.toast.is-visible,
.connection-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.connection-status {
  left: 18px;
  right: auto;
  bottom: 18px;
  background: var(--black);
  color: var(--white);
}

@media (max-width: 1050px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    min-height: 620px;
  }

  .hero-media {
    min-height: 70svh;
  }

  .hero-trial-bar {
    left: 4%;
  }

  .recipe-card,
  .recipe-card:nth-child(1),
  .recipe-card:nth-child(5) {
    grid-column: span 6;
  }

  .popular-section,
  .music-section,
  .newsletter {
    grid-template-columns: 1fr;
  }

  .popular-image {
    min-height: 60svh;
  }

  .music-player-shell {
    min-height: 520px;
  }

  .newsletter {
    gap: 40px;
  }

  .form-message {
    grid-column: 1;
    margin: -25px 0 0;
  }

  .recipe-detail {
    grid-template-columns: 1fr;
  }

  .recipe-detail-image {
    min-height: 60svh;
  }
}

@media (max-width: 760px) {
  .promo-bar {
    justify-content: space-between;
    font-size: .72rem;
  }

  .promo-install {
    padding-left: 12px;
    font-size: .7rem;
  }

  .masthead-row {
    min-height: 68px;
    grid-template-columns: 50px 1fr auto;
    padding: 0 12px;
  }

  .mobile-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
  }

  .masthead {
    grid-column: 2;
    justify-self: center;
    font-size: 2.55rem;
  }

  .header-actions {
    grid-column: 3;
    gap: 0;
  }

  .newsletter-button,
  .favoritesButton {
    display: none;
  }

  .category-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 116px;
    height: calc(100svh - 116px);
    padding: 35px 24px;
    display: grid;
    align-content: start;
    justify-content: stretch;
    gap: 0;
    background: var(--black);
    transform: translateX(-103%);
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }

  .category-nav.is-open {
    transform: translateX(0);
  }

  .category-nav a {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,.25);
    font-family: var(--serif);
    font-size: 2.3rem;
    font-weight: 400;
    letter-spacing: -.02em;
    text-transform: none;
  }

  .hero-copy {
    min-height: 570px;
    padding: 50px 24px 105px;
  }

  .hero h1 {
    font-size: 16vw;
  }

  .hero-media {
    min-height: 63svh;
  }

  .hero-trial-bar {
    left: 15px;
    right: 15px;
    bottom: 15px;
    justify-content: space-between;
    font-size: .66rem;
  }

  .recipes-section,
  .culture-section {
    width: calc(100% - 30px);
  }

  .section-heading {
    align-items: start;
    flex-direction: column;
  }

  .filter-tabs {
    justify-content: flex-start;
  }

  .recipe-card,
  .recipe-card:nth-child(1),
  .recipe-card:nth-child(5) {
    grid-column: 1 / -1;
  }

  .popular-list {
    padding: 55px 24px;
  }

  .video-section {
    padding: 0;
  }

  .video-shell {
    min-height: 720px;
  }

  .video-copy {
    padding: 70px 24px;
  }

  .video-copy h2 {
    font-size: 15vw;
  }

  .culture-lead {
    grid-template-columns: 1fr;
  }

  .culture-cards {
    grid-template-columns: 1fr;
  }

  .culture-cards article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .music-copy,
  .music-player-shell {
    padding: 55px 24px;
  }

  .music-player-shell {
    min-height: 420px;
  }

  .newsletter {
    padding: 70px 24px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    padding: 50px 24px;
  }

  .footer-links {
    justify-content: flex-start;
  }

  .recipe-detail-copy {
    padding: 45px 24px;
  }

  .recipe-columns {
    grid-template-columns: 1fr;
  }

  .install-dialog form {
    padding: 55px 25px 30px;
  }

  .install-dialog h2 {
    font-size: 2.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   CULINARAX V2 - loading, local-media resilience, account, and scroll motion
   ========================================================================== */

html {
  scrollbar-width: thin;
  scrollbar-color: #e3312d #090909;
}

body::-webkit-scrollbar {
  width: 13px;
}

body::-webkit-scrollbar-track {
  background: #090909;
  border-left: 1px solid rgba(255,255,255,.15);
}

body::-webkit-scrollbar-thumb {
  min-height: 85px;
  border: 3px solid #090909;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd44a 0%, #e3312d 54%, #8d1217 100%);
}

body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fff1a5 0%, #ff4b40 50%, #b61620 100%);
}

body.is-loading {
  overflow: hidden;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: #0D0500;
  color: #FDF3E3;
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  opacity: 1;
  transform: scale(1);
  transition: opacity .6s cubic-bezier(.25,.1,.25,1), transform .6s cubic-bezier(.25,.1,.25,1);
}

.page-loader.is-completing {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.05);
}

.loader-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.loader-stars i {
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  height:var(--star-thickness,1px);
  width:var(--star-length,10px);
  border-radius:999px;
  transform-origin:left center;
  background:linear-gradient(90deg,transparent,currentColor 38%,currentColor);
  filter:drop-shadow(0 0 4px currentColor);
  will-change:transform,opacity;
  animation:loader-star-rush var(--star-speed,.65s) linear var(--star-delay,0s) infinite;
}

.loader-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.loader-emoji-orbit {
  position: relative;
  width: 8rem;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-orbit-star {
  position: absolute;
  font-size: 3rem;
  line-height: 1;
  animation: loader-food-orbit 3s linear infinite;
}

.loader-emoji {
  font-size: 3.75rem;
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(249,193,26,.8));
}

.loader-wordmark {
  text-align: center;
}

.loader-brand {
  margin: 0 0 .5rem;
  font-size: 3rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.025em;
  background: linear-gradient(135deg, #F9C11A, #F47B20, #E63329);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.loader-label {
  margin: 0;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(253,243,227,.5);
}

.loader-progress {
  width: 16rem;
  max-width: 72vw;
  height: .125rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(253,243,227,.1);
}

.loader-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #E63329, #F47B20, #F9C11A);
  transition: width .1s linear;
}

.loader-percent {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .75rem;
  line-height: 1rem;
  font-weight: 400;
  color: rgba(253,243,227,.3);
}

@keyframes loader-food-orbit {
  from { transform: rotate(0deg) translateX(50px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes loader-star-rush {
  0% {opacity:0;transform:translate3d(var(--star-start-x),var(--star-start-y),0) rotate(var(--star-angle)) scaleX(.18)}
  12% {opacity:.95}
  72% {opacity:.9}
  100% {opacity:0;transform:translate3d(var(--star-end-x),var(--star-end-y),0) rotate(var(--star-angle)) scaleX(2.8)}
}

.scroll-rail {
  position: fixed;
  right: 20px;
  top: 50%;
  z-index: 260;
  width: 30px;
  height: min(46vh, 430px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 10px;
  color: #fff;
  mix-blend-mode: difference;
  transform: translateY(-50%);
  pointer-events: none;
}

.scroll-rail__label {
  writing-mode: vertical-rl;
  font: 700 .48rem/1 "Courier New", monospace;
  letter-spacing: .18em;
}

.scroll-rail__track {
  position: relative;
  width: 2px;
  height: 100%;
  background: rgba(255,255,255,.25);
}

.scroll-rail__track i {
  position: absolute;
  left: -3px;
  top: 0;
  width: 8px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  transform: translateY(0);
  box-shadow: 0 0 18px rgba(255,255,255,.55);
}

.scroll-rail__percent {
  font: 700 .55rem/1 "Courier New", monospace;
}

.reveal-section {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.account-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.account-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: .72rem;
  font-weight: 900;
}

.account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-label {
  max-width: 105px;
  overflow: hidden;
  font-size: .67rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dialog {
  width: min(680px, calc(100% - 28px));
  padding: 0;
  overflow: visible;
  background: #ffd44a;
  color: #111;
}

.account-dialog::backdrop {
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(7px);
}

.account-dialog > div {
  padding: clamp(42px, 8vw, 80px);
}

.account-dialog h2 {
  max-width: 560px;
  margin: 0;
  font: 400 clamp(3.2rem, 8vw, 6.3rem)/.84 Georgia, serif;
  letter-spacing: -.065em;
}

.account-dialog p:not(.kicker) {
  max-width: 560px;
  line-height: 1.65;
}

.account-dialog-close {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 2;
}

.google-sign-in-slot {
  min-height: 48px;
  margin-top: 25px;
}

.google-setup-message {
  padding: 12px;
  border: 1px solid rgba(0,0,0,.3);
  font: 700 .65rem/1.55 "Courier New", monospace;
}

.profile-image {
  width: 112px;
  height: 112px;
  margin-bottom: 24px;
  border: 3px solid #111;
  border-radius: 50%;
  object-fit: cover;
}

.account-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.newsletter-trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.newsletter-owner {
  grid-column: 2;
  margin: -10px 0 0;
  color: rgba(255,255,255,.73);
  font-size: .67rem;
}

.recipe-card img,
.hero-media img,
.popular-image img,
.culture-lead img,
.search-result img,
.recipe-detail-image img {
  background: #eee7da url("/assets/images/fallback-food.svg") center / cover no-repeat;
}

.search-dialog {
  width: min(1050px, calc(100% - 30px));
  max-height: calc(100svh - 30px);
  overflow: auto;
}

.search-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

.search-result {
  position: relative;
  grid-template-columns: 150px 1fr;
  min-height: 128px;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid #cfcac2;
  background: transparent;
  color: #111;
  text-align: left;
}

.search-result img {
  width: 150px;
  height: 100px;
  border: 1px solid #cfcac2;
}

.search-result:hover img,
.search-result:focus-visible img {
  transform: scale(1.025);
}

.search-result strong {
  font: 400 1.55rem/1 Georgia, serif;
}

.search-result small {
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.search-empty {
  grid-column: 1 / -1;
  padding: 45px 0;
  font: 400 2.2rem/1 Georgia, serif;
}

@media (max-width: 900px) {
  .scroll-rail {
    display: none;
  }

  .account-label {
    display: none;
  }

  .account-button {
    padding-right: 5px;
  }

  .search-results {
    grid-template-columns: 1fr;
  }

  .newsletter-owner {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  #favoritesButton {
    display: grid;
  }

  .account-button {
    min-height: 38px;
  }

  .account-avatar {
    width: 28px;
    height: 28px;
  }

  .search-result {
    grid-template-columns: 115px 1fr;
  }

  .search-result img {
    width: 115px;
    height: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-orbit {
    animation: none;
  }

  .reveal-section {
    opacity: 1;
    transform: none;
  }
}


/* ======================================================================
   FINAL STABILITY OVERRIDES - single complete deployment
   ====================================================================== */
html,body{max-width:100%;overflow-x:hidden}
body.modal-open{overflow:hidden!important}
.page-loader{contain:layout paint style}
.scroll-rail{right:14px}

.account-button{flex:0 0 auto;min-width:42px;max-width:150px;overflow:hidden;background:rgba(255,255,255,.04)}
.account-button:hover,.account-button:focus-visible{border-color:#ffd44a;background:rgba(255,212,74,.12);outline:none}
.account-avatar{flex:0 0 auto}
.account-label{display:block;color:#fff}

/* Dialogs use one intentional vertical scroller and never horizontal scroll. */
dialog{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);margin:auto;overflow:hidden!important;padding:0!important}
dialog[open]{display:block}
.search-dialog{width:min(980px,calc(100vw - 30px));height:min(820px,calc(100dvh - 30px));padding:28px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}
.search-dialog>input{max-width:100%}
.search-results{width:100%;min-width:0}
.search-result{width:100%;min-width:0;overflow:hidden}
.search-result>span{min-width:0}
.search-result strong,.search-result small{overflow-wrap:anywhere}

.recipe-dialog{width:min(1160px,calc(100vw - 24px));height:min(900px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden!important;background:#f6f2ea}
.recipe-dialog-close{position:absolute!important;right:16px!important;top:16px!important;left:auto!important;z-index:20;background:#fff}
#recipeDialogContent{height:100%;max-width:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable}
.recipe-detail{width:100%;min-width:0;min-height:100%;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.recipe-detail-image{min-width:0;min-height:0;height:100%;max-height:none;background:#eee7da}
.recipe-detail-image img{width:100%;height:100%;min-height:620px;object-fit:cover}
.recipe-detail-copy{min-width:0;padding:clamp(48px,5vw,80px)}
.recipe-detail-copy h2,.recipe-detail-copy p,.recipe-columns{max-width:100%;overflow-wrap:anywhere}
.recipe-columns{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.recipe-columns li{overflow-wrap:anywhere}

.account-dialog,.install-dialog{width:min(680px,calc(100vw - 24px));height:auto;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}

/* Images always occupy their slots while loading and fall back cleanly. */
.recipe-card-media,.hero-media,.popular-image,.culture-lead img,.search-result img,.recipe-detail-image{background:#eee7da url('/assets/images/fallback-food.svg') center/cover no-repeat}
.recipe-card-media img,.hero-media img,.popular-image img,.culture-lead img,.search-result img,.recipe-detail-image img{display:block;opacity:1;color:transparent}

/* Prevent giant clipped hero typography on short laptop screens. */
@media (min-width:1051px) and (max-height:850px){
  .hero{min-height:720px}
  .hero-copy{padding-top:70px;padding-bottom:100px}
  .hero h1{font-size:clamp(3.4rem,5.2vw,6rem)}
  .hero-media{min-height:720px}
}

@media (max-width:900px){
  .recipe-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}
  .recipe-detail{grid-template-columns:1fr;display:block}
  .recipe-detail-image{height:min(42dvh,430px)}
  .recipe-detail-image img{min-height:0;height:100%}
  .recipe-detail-copy{padding:50px 24px 40px}
  .recipe-columns{grid-template-columns:1fr}
  .search-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px)}
}

@media (max-width:760px){
  .header-actions{gap:2px}
  .account-button{min-width:36px;width:36px;height:36px;padding:3px;border-color:rgba(255,255,255,.35)}
  .account-label{display:none}
  .account-avatar{width:28px;height:28px}
  .recipe-dialog-close{right:10px!important;top:10px!important}
}


/* YouTube food finder */
.youtube-food-section {
  padding: clamp(72px, 9vw, 140px) max(28px, calc((100vw - var(--max)) / 2));
  background: #0d0d0d;
  color: #fff;
}
.youtube-food-heading {
  max-width: 1050px;
}
.youtube-food-heading h2 {
  margin: 0;
  font: 400 clamp(3.4rem, 7vw, 8rem)/.86 var(--serif);
  letter-spacing: -.06em;
}
.youtube-food-heading > p:not(.kicker) {
  max-width: 760px;
  color: rgba(255,255,255,.68);
  line-height: 1.65;
}
.youtube-search-form {
  max-width: 1020px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 35px;
}
.youtube-search-form input {
  min-width: 0;
  padding: 17px 18px;
  border: 2px solid #fff;
  background: #fff;
  color: #111;
  font-size: 1rem;
  outline: none;
}
.youtube-search-form input:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(255,212,74,.18);
}
.youtube-query-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 35px;
}
.youtube-query-chips button {
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.youtube-query-chips button:hover,
.youtube-query-chips button:focus-visible {
  border-color: var(--yellow);
  background: var(--yellow);
  color: #111;
  outline: none;
}
.youtube-food-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: 26px;
  align-items: start;
}
.youtube-player-panel {
  position: sticky;
  top: 165px;
  min-height: 450px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.24);
  background: #171717;
}
.youtube-player-panel iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.youtube-player-placeholder {
  padding: 40px;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.youtube-player-placeholder span {
  width: 82px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  font-size: 1.8rem;
}
.youtube-player-placeholder strong {
  font: 400 2rem/1 var(--serif);
}
.youtube-player-placeholder small {
  color: rgba(255,255,255,.55);
}
.youtube-results {
  max-height: 620px;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--red) #222;
}
.youtube-result-card {
  width: 100%;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.youtube-result-card img {
  width: 150px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #252525;
}
.youtube-result-card strong,
.youtube-result-card small {
  display: block;
}
.youtube-result-card strong {
  font: 400 1.2rem/1.08 var(--serif);
}
.youtube-result-card small {
  margin-top: 7px;
  color: rgba(255,255,255,.55);
  font-size: .67rem;
  line-height: 1.35;
}
.youtube-result-card:hover strong,
.youtube-result-card:focus-visible strong {
  color: var(--yellow);
}
.youtube-status {
  padding: 30px 0;
  color: rgba(255,255,255,.62);
}
.youtube-api-note {
  margin: 25px 0 0;
  color: rgba(255,255,255,.42);
  font-size: .65rem;
  line-height: 1.5;
}
@media (max-width: 950px) {
  .youtube-food-layout { grid-template-columns: 1fr; }
  .youtube-player-panel { position: relative; top: auto; min-height: 0; }
  .youtube-results { max-height: none; }
}
@media (max-width: 620px) {
  .youtube-search-form { grid-template-columns: 1fr; }
  .youtube-result-card { grid-template-columns: 115px 1fr; }
  .youtube-result-card img { width: 115px; }
}


/* CULINARAX final video presentation */
.video-section{
  padding:clamp(30px,5vw,72px);
  background:var(--paper);
}
.video-editorial{
  min-height:min(760px,82svh);
  display:grid;
  grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);
  background:#050505;
  color:#fff;
  overflow:hidden;
}
.video-editorial .video-copy{
  width:auto;
  min-height:0;
  padding:clamp(42px,6.5vw,100px);
  justify-content:center;
  background:
    radial-gradient(circle at 12% 15%,rgba(227,49,45,.16),transparent 22rem),
    #050505;
}
.video-editorial .video-copy h2{
  max-width:620px;
  font-size:clamp(3.1rem,5.5vw,6.8rem);
  line-height:.86;
}
.video-editorial .video-copy p:not(.kicker){max-width:560px}
.video-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.button-outline-light{border-color:#fff;background:transparent;color:#fff;text-decoration:none}
.kitchen-film-stage{
  position:relative;
  min-height:560px;
  overflow:hidden;
  background:#1b120d;
  isolation:isolate;
}
.kitchen-film-stage>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.015);
}
.kitchen-film-gradient{
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,rgba(0,0,0,.62),rgba(0,0,0,.08) 60%),linear-gradient(0deg,rgba(0,0,0,.46),transparent 52%);
}
.kitchen-film-play{
  position:absolute;
  left:50%;top:50%;
  z-index:3;
  width:min(390px,calc(100% - 42px));
  display:grid;
  justify-items:center;
  gap:9px;
  padding:26px 24px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(0,0,0,.48);
  color:#fff;
  cursor:pointer;
  backdrop-filter:blur(12px);
  transform:translate(-50%,-50%);
  transition:transform .25s,background .25s;
}
.kitchen-film-play:hover,.kitchen-film-play:focus-visible{transform:translate(-50%,-50%) scale(1.025);background:rgba(0,0,0,.68);outline:none}
.kitchen-film-play>span{
  width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);color:#000;font-size:1.5rem;padding-left:5px
}
.kitchen-film-play strong{font-family:var(--serif);font-size:1.65rem;font-weight:400}
.kitchen-film-play small{color:rgba(255,255,255,.72);text-align:center}
.kitchen-film-stage iframe{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  border:0;
  background:#000;
}
.kitchen-film-stage .media-credit{z-index:5}
@media(max-width:960px){
  .video-editorial{grid-template-columns:1fr;min-height:0}
  .kitchen-film-stage{min-height:min(64svh,620px)}
}
@media(max-width:560px){
  .video-section{padding:0}
  .video-editorial .video-copy{padding:58px 24px}
  .video-editorial .video-copy h2{font-size:15vw}
  .kitchen-film-stage{min-height:55svh}
  .video-actions,.video-actions .button{width:100%}
}


/* ========================================================================== 
   Two-edition compendium library
   ========================================================================== */

.compendium-library {
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 12% 12%, rgba(249,193,26,.16), transparent 28rem),
    radial-gradient(circle at 88% 88%, rgba(227,49,45,.16), transparent 30rem),
    #080300;
  color: #fdf3e3;
  border-top: 1px solid rgba(253,243,227,.12);
  border-bottom: 1px solid rgba(253,243,227,.12);
}

.compendium-heading {
  width: min(1180px, 100%);
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, .8fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
}

.compendium-heading h2 {
  max-width: 820px;
  margin: .35rem 0 0;
  color: #fff;
  font-size: clamp(2.8rem, 7vw, 6.7rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.compendium-heading > p {
  margin: 0;
  color: rgba(253,243,227,.65);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
}

.compendium-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.compendium-card {
  position: relative;
  min-height: 560px;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 2rem;
  isolation: isolate;
}

.compendium-card::before,
.compendium-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.compendium-card::before {
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px);
}

.compendium-card::after {
  width: 20rem;
  height: 20rem;
  right: -7rem;
  bottom: -8rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .18;
  box-shadow: 0 0 0 3rem rgba(255,255,255,.025), 0 0 0 6rem rgba(255,255,255,.018);
}

.compendium-card--culinarax {
  color: #f9c11a;
  background: linear-gradient(145deg, #180700, #2c1000 54%, #110400);
  border: 1px solid rgba(249,193,26,.35);
  box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.06);
}

.compendium-card--food-main {
  color: #e3312d;
  background: linear-gradient(145deg, #fff5df, #f4dfbd 54%, #edcfa5);
  border: 1px solid rgba(141,18,23,.24);
  box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.7);
}

.compendium-card__number {
  position: absolute;
  top: clamp(1.2rem, 3vw, 2rem);
  right: clamp(1.2rem, 3vw, 2rem);
  font: 900 clamp(4rem, 9vw, 8rem)/.8 Arial, sans-serif;
  letter-spacing: -.08em;
  opacity: .12;
}

.compendium-card__eyebrow {
  margin: 0 0 1.2rem;
  font: 800 .7rem/1 "Courier New", monospace;
  letter-spacing: .22em;
}

.compendium-card h3 {
  max-width: 520px;
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.055em;
}

.compendium-card--culinarax h3 {
  color: #fff;
}

.compendium-card--food-main h3 {
  color: #18120c;
}

.compendium-card__copy {
  max-width: 560px;
  margin: 1.6rem 0 2rem;
  font-size: 1rem;
  line-height: 1.75;
}

.compendium-card--culinarax .compendium-card__copy {
  color: rgba(253,243,227,.68);
}

.compendium-card--food-main .compendium-card__copy {
  color: rgba(24,18,12,.72);
}

.compendium-stats {
  margin: auto 0 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.compendium-stats div {
  min-width: 0;
  padding: 1rem;
  border-radius: 1rem;
}

.compendium-card--culinarax .compendium-stats div {
  background: rgba(249,193,26,.07);
  border: 1px solid rgba(249,193,26,.18);
}

.compendium-card--food-main .compendium-stats div {
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(24,18,12,.12);
}

.compendium-stats dt {
  overflow: hidden;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
}

.compendium-card--culinarax .compendium-stats dt {
  color: #f9c11a;
}

.compendium-card--food-main .compendium-stats dt {
  color: #8d1217;
}

.compendium-stats dd {
  margin: .45rem 0 0;
  color: inherit;
  font: 700 .62rem/1.25 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .72;
}

.compendium-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.compendium-actions .button {
  min-height: 48px;
  justify-content: center;
  text-align: center;
}

.compendium-card--culinarax .button-light {
  background: #f9c11a;
  color: #0d0500;
}

.compendium-card--food-main .button-dark {
  background: #17110b;
  color: #fff;
}

.compendium-download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  font: 800 .7rem/1 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.compendium-download::after {
  content: "↓";
  margin-left: .55rem;
  font-size: 1rem;
}

.compendium-download:hover,
.compendium-download:focus-visible {
  opacity: .68;
}

@media (max-width: 860px) {
  .compendium-heading,
  .compendium-grid {
    grid-template-columns: 1fr;
  }

  .compendium-heading {
    align-items: start;
  }

  .compendium-card {
    min-height: 520px;
  }
}

@media (max-width: 560px) {
  .compendium-library {
    padding-inline: 1rem;
  }

  .compendium-card {
    min-height: 0;
    padding: 1.35rem;
    border-radius: 1.35rem;
  }

  .compendium-card__number {
    font-size: 4rem;
  }

  .compendium-stats {
    grid-template-columns: 1fr;
    margin-top: 1rem;
  }

  .compendium-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .compendium-actions .button,
  .compendium-download {
    width: 100%;
    justify-content: center;
  }
}


/* ========================================================================== 
   20260618m — paper compendiums + resilient video finder
   ========================================================================== */

.compendium-library {
  position: relative;
  padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5rem);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 7.5%, rgba(12,56,95,.06) 7.5% calc(7.5% + 1px), transparent calc(7.5% + 1px)),
    repeating-linear-gradient(0deg, rgba(24,18,12,.018) 0 1px, transparent 1px 5px),
    #f3eee3;
  color: #0b3b67;
  border-top: 12px solid #bf4c32;
  border-bottom: 1px solid rgba(11,59,103,.18);
}
.compendium-library::before {
  content: "CULINARAX · WORLD FOOD ARCHIVE · CULINARAX · WORLD FOOD ARCHIVE";
  position: absolute;
  top: 1.35rem;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: rgba(11,59,103,.24);
  font: 700 .58rem/1 "Courier New", monospace;
  letter-spacing: .25em;
  text-align: center;
}
.compendium-heading {align-items: center;}
.compendium-heading .kicker {color: #d83b35;}
.compendium-heading h2 {
  color: #0b3b67;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: -.065em;
}
.compendium-heading > p {color: rgba(22,30,39,.7);}
.compendium-grid {gap: clamp(1.25rem, 3vw, 2.5rem); align-items: stretch;}
.compendium-card {
  min-height: 0;
  padding: clamp(1.5rem, 3.4vw, 2.8rem);
  border-radius: 1.35rem;
  box-shadow: 0 24px 70px rgba(42,32,20,.13), inset 0 1px rgba(255,255,255,.8);
}
.compendium-card::before {
  background:
    linear-gradient(90deg, transparent 0 34px, rgba(216,59,53,.08) 34px 35px, transparent 35px),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(11,59,103,.018) 4px 5px);
}
.compendium-card::after {color: #d83b35; opacity: .12;}
.compendium-card--culinarax,
.compendium-card--food-main {
  color: #0b3b67;
  background: linear-gradient(145deg, #fbf8f0, #f3eddf 62%, #eee5d4);
  border: 1px solid rgba(11,59,103,.24);
}
.compendium-card--food-main {
  background: linear-gradient(145deg, #fff8e9, #f6e6c9 62%, #efd5ad);
  border-color: rgba(191,76,50,.28);
}
.compendium-card__number {color: #d83b35; opacity: .09;}
.compendium-card__eyebrow {color: #d83b35;}
.compendium-card h3,
.compendium-card--culinarax h3,
.compendium-card--food-main h3 {
  max-width: 600px;
  color: #0b3b67;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: clamp(2.25rem, 4.6vw, 4.45rem);
  line-height: .94;
}
.compendium-card__copy,
.compendium-card--culinarax .compendium-card__copy,
.compendium-card--food-main .compendium-card__copy {color: rgba(22,30,39,.72);}
.compendium-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .72rem;
  margin: .4rem 0 1.6rem;
}
.compendium-preview-grid figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,59,103,.18);
  border-radius: .8rem;
}
.compendium-preview-grid img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  display: block;
}
.compendium-preview-grid figcaption {padding: .72rem .72rem .82rem;}
.compendium-preview-grid strong,
.compendium-preview-grid span {display: block;}
.compendium-preview-grid strong {color: #0b3b67; font-size: .76rem; line-height: 1.2;}
.compendium-preview-grid span {margin-top: .25rem; color: rgba(22,30,39,.5); font-size: .58rem;}
.compendium-index-panel {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .7rem;
  margin: .4rem 0 1.6rem;
}
.compendium-index-panel span {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
  padding: .9rem;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(191,76,50,.18);
  border-radius: .8rem;
  color: rgba(22,30,39,.65);
  font: 700 .62rem/1.25 "Courier New", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.compendium-index-panel b {color: #b72e2f; font: 900 1.55rem/1 Arial,sans-serif;}
.compendium-stats {margin: auto 0 1.6rem;}
.compendium-card--culinarax .compendium-stats div,
.compendium-card--food-main .compendium-stats div {
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(11,59,103,.15);
}
.compendium-card--culinarax .compendium-stats dt,
.compendium-card--food-main .compendium-stats dt {color: #b72e2f;}
.compendium-stats dd {color: #0b3b67;}
.compendium-card--culinarax .button-light,
.compendium-card--food-main .button-dark {
  background: #0b3b67;
  color: #fff;
  border-color: #0b3b67;
}
.compendium-card--culinarax .button-light:hover,
.compendium-card--food-main .button-dark:hover {background: #d83b35; border-color: #d83b35;}
.compendium-download {color: #b72e2f;}

.youtube-food-section {
  position: relative;
  padding: clamp(4rem, 7vw, 7rem) clamp(1rem, 5vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(216,59,53,.09), transparent 28rem),
    repeating-linear-gradient(0deg, rgba(11,59,103,.018) 0 1px, transparent 1px 5px),
    #f3eee3;
  color: #14212d;
  border-top: 1px solid rgba(11,59,103,.16);
  border-bottom: 12px solid #0b3b67;
}
.youtube-food-shell {
  width: min(1280px,100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(270px,.7fr) minmax(0,1.3fr);
  gap: clamp(2rem,5vw,5rem);
  align-items: start;
}
.youtube-food-heading {margin: 0; position: sticky; top: 120px;}
.youtube-food-heading .kicker {color: #d83b35;}
.youtube-food-heading h2 {
  margin: .55rem 0 1.5rem;
  max-width: 600px;
  color: #0b3b67;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: 900;
  font-size: clamp(2.8rem,5.8vw,6rem);
  line-height: .9;
  letter-spacing: -.065em;
}
.youtube-food-heading > p {max-width: 560px; color: rgba(20,33,45,.68); font-size: 1rem; line-height: 1.75;}
.youtube-feature-list {display: grid; gap: .65rem; margin-top: 2rem;}
.youtube-feature-list span {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid rgba(11,59,103,.18);
  color: #0b3b67;
  font: 800 .7rem/1.2 "Courier New",monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.youtube-feature-list b {color: #d83b35;}
.youtube-search-workspace {
  padding: clamp(1.2rem,3vw,2.25rem);
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(11,59,103,.18);
  border-radius: 1.2rem;
  box-shadow: 0 24px 70px rgba(42,32,20,.12);
}
.youtube-search-form {grid-template-columns: minmax(0,1fr) auto; gap: .7rem; margin: 0;}
.youtube-search-form input {
  min-height: 58px;
  padding: 0 1.15rem;
  background: #fffdf8;
  color: #14212d;
  border: 2px solid #0b3b67;
  border-radius: 0;
  font-size: 1rem;
}
.youtube-search-form input:focus {outline: 3px solid rgba(216,59,53,.18); border-color: #d83b35;}
.youtube-search-form .button {min-height: 58px; background: #d83b35; color: #fff; border-color: #d83b35;}
.youtube-query-chips {margin: 1rem 0 1.5rem; gap: .5rem;}
.youtube-query-chips button {
  min-height: 36px;
  padding: 0 .8rem;
  background: transparent;
  color: #0b3b67;
  border: 1px solid rgba(11,59,103,.32);
  border-radius: 999px;
}
.youtube-query-chips button:hover,
.youtube-query-chips button:focus-visible {background: #0b3b67; color: #fff; border-color: #0b3b67;}
.youtube-food-layout {display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); gap: 1rem; align-items: start;}
.youtube-player-panel {
  position: sticky;
  top: 116px;
  min-height: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0b1118;
  border: 8px solid #0b3b67;
  box-shadow: 0 14px 34px rgba(11,59,103,.2);
}
.youtube-player-panel iframe {width:100%; height:100%; border:0; display:block;}
.youtube-player-placeholder {position:relative; min-height:100%; display:grid; place-content:center; justify-items:center; gap:.55rem; padding:1.4rem; overflow:hidden; color:#fff; text-align:center; isolation:isolate;}
.youtube-player-placeholder::after {content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.18));}
.youtube-player-placeholder img {position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; opacity:.78;}
.youtube-player-placeholder span {width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#d83b35;color:#fff;font-size:1.2rem;padding-left:4px;box-shadow:0 0 0 10px rgba(216,59,53,.18);}
.youtube-player-placeholder strong {font: 700 1.3rem/1.1 Arial,sans-serif;}
.youtube-player-placeholder small {color:rgba(255,255,255,.76);}
.youtube-results-panel {min-width:0; background:#fffdf8; border:1px solid rgba(11,59,103,.18);}
.youtube-results-heading {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-bottom:3px solid #d83b35;color:#0b3b67;text-transform:uppercase;}
.youtube-results-heading span {font:900 .72rem/1 Arial,sans-serif;letter-spacing:.08em;}
.youtube-results-heading small {font:700 .58rem/1 "Courier New",monospace;color:#d83b35;}
.youtube-results {max-height:510px; overflow:auto; padding:0 1rem; scrollbar-color:#d83b35 #eee5d4;}
.youtube-result-card {
  grid-template-columns: 112px minmax(0,1fr);
  gap: .8rem;
  padding: .9rem 0;
  border-bottom: 1px solid rgba(11,59,103,.15);
  color: #14212d;
}
.youtube-result-thumb {position:relative; display:block; overflow:hidden; background:#eee5d4;}
.youtube-result-thumb img {width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.youtube-result-thumb i {position:absolute;left:.45rem;bottom:.4rem;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#d83b35;color:#fff;font-style:normal;font-size:.62rem;padding-left:2px;}
.youtube-result-copy {min-width:0; display:grid; align-content:center;}
.youtube-result-copy em {color:#d83b35;font:800 .56rem/1 "Courier New",monospace;font-style:normal;letter-spacing:.1em;}
.youtube-result-card strong {margin-top:.28rem;color:#0b3b67;font:800 .9rem/1.15 Arial,sans-serif;}
.youtube-result-card small {margin-top:.42rem;color:rgba(20,33,45,.55);font-size:.6rem;}
.youtube-result-card:hover strong,
.youtube-result-card:focus-visible strong,
.youtube-result-card.is-playing strong {color:#d83b35;}
.youtube-result-card.is-playing {background:linear-gradient(90deg,rgba(216,59,53,.06),transparent);}
.youtube-status {color:rgba(20,33,45,.62);}
.youtube-api-note {margin:1rem 0 0;color:rgba(20,33,45,.52);font-size:.64rem;line-height:1.5;}

@media (max-width: 1000px) {
  .youtube-food-shell {grid-template-columns:1fr;}
  .youtube-food-heading {position:relative;top:auto;}
  .youtube-food-heading h2 {max-width:850px;}
}
@media (max-width: 860px) {
  .compendium-preview-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
  .youtube-food-layout {grid-template-columns:1fr;}
  .youtube-player-panel {position:relative;top:auto;}
  .youtube-results {max-height:none;}
}
@media (max-width: 620px) {
  .compendium-library {padding-inline:1rem;}
  .compendium-card {padding:1.25rem;}
  .compendium-preview-grid {grid-template-columns:1fr;}
  .compendium-preview-grid figure {display:grid;grid-template-columns:110px 1fr;align-items:center;}
  .compendium-preview-grid img {height:90px;}
  .compendium-index-panel {grid-template-columns:1fr 1fr;}
  .compendium-stats {grid-template-columns:repeat(3,minmax(0,1fr));}
  .compendium-stats div {padding:.75rem .45rem;}
  .compendium-stats dt {font-size:1.05rem;}
  .compendium-stats dd {font-size:.52rem;letter-spacing:.05em;}
  .youtube-food-section {padding-inline:.85rem;}
  .youtube-search-workspace {padding:.85rem;border-radius:.8rem;}
  .youtube-search-form {grid-template-columns:1fr;}
  .youtube-search-form .button {width:100%;}
  .youtube-result-card {grid-template-columns:102px minmax(0,1fr);}
}
@media (max-width: 410px) {
  .compendium-index-panel {grid-template-columns:1fr;}
  .youtube-results-heading {align-items:flex-start;flex-direction:column;gap:.3rem;}
}

.youtube-food-heading > p:not(.kicker) {max-width:560px;color:rgba(20,33,45,.68);font-size:1rem;line-height:1.75;}


/* ========================================================================== 
   20260618m — open editorial compendiums (recipe-section visual language)
   ========================================================================== */
.compendium-library {
  width: min(var(--max), calc(100% - 56px));
  margin: 0 auto;
  padding: clamp(78px, 9vw, 140px) 0;
  overflow: visible;
  background: #fbf7ef;
  color: var(--black);
  border: 0;
}
.compendium-library::before,
.compendium-library::after {display:none !important; content:none !important;}
.compendium-section-heading {align-items:end;}
.compendium-section-heading .kicker {color:var(--red);}
.compendium-section-heading h2 {
  max-width: 940px;
  margin: 0;
  color: var(--black);
  font-family: var(--serif);
  font-size: clamp(3.2rem, 6vw, 7.2rem);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.06em;
}
.compendium-heading-note {
  max-width: 470px;
  margin: 0;
  color: #5d5852;
  font-size: .92rem;
  line-height: 1.65;
}
.compendium-editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  gap: clamp(24px, 3.2vw, 48px);
  align-items: start;
}
.compendium-edition {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 0 28px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.compendium-edition-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
  color: #fff;
}
.compendium-edition--lead .compendium-edition-media {aspect-ratio: 16 / 10;}
.compendium-edition-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .7s cubic-bezier(.16,1,.3,1);
}
.compendium-edition:hover .compendium-edition-media img,
.compendium-edition-media:focus-visible img {transform: scale(1.04); filter: saturate(1.04);}
.compendium-volume {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 9px 11px;
  background: var(--black);
  color: var(--white);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.compendium-edition-copy {padding-top: 18px;}
.compendium-edition-copy h3 {
  max-width: 720px;
  margin: 0;
  color: var(--black);
  font-family: var(--serif);
  font-size: clamp(2rem, 3.7vw, 4.2rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.045em;
}
.compendium-edition-copy > p:not(.recipe-card-meta) {
  max-width: 690px;
  margin: 14px 0 0;
  color: #5d5852;
  line-height: 1.62;
}
.compendium-edition-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #68635d;
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.compendium-edition-meta span:not(:last-child)::after {content:" ·"; margin-left:18px; color:var(--red);}
.compendium-edition-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 21px;
}
.compendium-edition-actions .button {min-height: 46px; padding: 12px 18px;}
.compendium-download-link {color:var(--black); font-size:.69rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em;}
.compendium-download-link:hover,
.compendium-download-link:focus-visible {color:var(--red);}

.youtube-query-chips {display:flex; flex-wrap:wrap;}
.youtube-status--searching {display:flex; align-items:center; gap:.7rem; padding:1.25rem 0;}
.youtube-status--searching::before {content:""; width:16px; height:16px; border:2px solid rgba(216,59,53,.25); border-top-color:#d83b35; border-radius:50%; animation:youtube-search-spin .75s linear infinite;}
.youtube-search-fallback {padding:1.15rem 0; color:rgba(20,33,45,.68); line-height:1.55;}
.youtube-search-fallback a {display:inline-block; margin-top:.7rem; color:#0b3b67; font-weight:900; text-underline-offset:4px;}
@keyframes youtube-search-spin {to{transform:rotate(360deg)}}

@media (max-width: 920px) {
  .compendium-section-heading {align-items:flex-start; flex-direction:column;}
  .compendium-heading-note {max-width:760px;}
  .compendium-editorial-grid {grid-template-columns:1fr;}
  .compendium-edition-media,
  .compendium-edition--lead .compendium-edition-media {aspect-ratio:16/10;}
}
@media (max-width: 620px) {
  .compendium-library {width:calc(100% - 28px); padding:72px 0;}
  .compendium-section-heading h2 {font-size:clamp(2.8rem,15vw,4.6rem);}
  .compendium-edition-copy h3 {font-size:clamp(2rem,10vw,3rem);}
  .compendium-edition-meta span:not(:last-child)::after {display:none;}
  .compendium-edition-actions {align-items:stretch; flex-direction:column;}
  .compendium-edition-actions .button,
  .compendium-download-link {width:100%; text-align:center;}
}


/* ========================================================================== 
   20260618p — isolated loader, fast star field, then START entry gate
   ========================================================================== */
body.is-loading,
body.is-entry,
body.is-starting {overflow:hidden !important; overscroll-behavior:none;}
/* Startup isolation: website is completely absent until START is pressed. */
body.is-loading > :not(#pageLoader):not(#entryGate):not(script):not(style),
body.is-entry > :not(#entryGate):not(script):not(style) {
  display:none !important;
}
body.is-loading,
body.is-entry {background:#0d0500 !important;}

.entry-gate[hidden] {display:none !important;}
.entry-gate {
  position:fixed;
  inset:0;
  z-index:2147482000;
  display:grid;
  place-items:center;
  min-height:100svh;
  padding:clamp(1rem,3vw,2.5rem);
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(ellipse at 50% 48%,#1a0800 0%,#0d0500 72%,#080300 100%);
  color:#fdf3e3;
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  opacity:0;
  transform:scale(1.025);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1);
}
.entry-gate.is-visible {opacity:1;transform:scale(1);}
.entry-gate.is-leaving {opacity:0;transform:scale(.95);pointer-events:none;}
.entry-gate__grid {
  position:absolute;inset:0;z-index:-4;opacity:.1;
  background-image:linear-gradient(rgba(230,51,41,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(230,51,41,.3) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(circle at center,#000 15%,transparent 82%);
}
.entry-gate::after {
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(circle at 50% 48%,transparent 0 22%,rgba(13,5,0,.12) 48%,rgba(13,5,0,.72) 100%);
}
.entry-gate__stars {position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none;}
.entry-gate__stars i {position:absolute;display:block;border-radius:999px;animation:entry-star-twinkle 2.8s ease-in-out infinite;}
.entry-gate__foods {position:absolute;inset:0;z-index:-1;pointer-events:none;}
.entry-gate__foods span {
  position:absolute;left:var(--x);top:var(--y);font-size:var(--size);line-height:1;
  opacity:.56;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28));
  animation:entry-food-float 4.8s ease-in-out var(--delay) infinite;
}
.entry-gate__content {
  width:min(92vw,760px);display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,2.5vh,2rem);
  text-align:center;position:relative;z-index:5;
}
.entry-gate__orbit {position:relative;width:12rem;height:12rem;display:grid;place-items:center;}
.entry-gate__ring {position:absolute;border-radius:50%;pointer-events:none;}
.entry-gate__ring--outer {inset:0;border:1px dashed rgba(244,123,32,.3);animation:entry-ring-spin 20s linear infinite;}
.entry-gate__ring--inner {inset:1.5rem;border:1px solid rgba(249,193,26,.32);}
.entry-gate__orbit-star {
  position:absolute;left:50%;top:50%;font-size:3.4rem;line-height:1;
  margin:-1.7rem 0 0 -1.7rem;filter:drop-shadow(0 0 20px rgba(249,193,26,.7));
  animation:entry-star-orbit 8s linear infinite;
}
.entry-gate__globe {font-size:4rem;line-height:1;filter:drop-shadow(0 0 28px rgba(249,193,26,.48));}
.entry-gate__brand {
  margin:0;font-size:clamp(3.2rem,7vw,6.8rem);line-height:.9;font-weight:900;letter-spacing:-.045em;
  background:linear-gradient(135deg,#f9c11a 0%,#f47b20 50%,#e63329 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:entry-rise .8s .15s cubic-bezier(.22,1,.36,1) both;
}
.entry-gate__headphones {
  margin:0;display:flex;align-items:center;gap:.65rem;padding:.65rem 1.15rem;border:1px solid rgba(253,243,227,.15);
  border-radius:999px;background:rgba(253,243,227,.04);color:rgba(253,243,227,.52);font-size:.82rem;
  animation:entry-fade .8s .55s ease both;
}
.entry-gate__start {
  position:relative;min-width:min(13rem,72vw);min-height:4.35rem;padding:1rem 2.6rem;overflow:hidden;
  background:transparent;color:#fdf3e3;border:1.5px solid rgba(253,243,227,.42);border-radius:4px;
  font:800 1rem/1 "DM Sans",sans-serif;letter-spacing:.28em;cursor:pointer;
  transition:color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;
  animation:entry-rise .7s .75s cubic-bezier(.22,1,.36,1) both;
}
.entry-gate__start::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,#f9c11a,#f47b20,#e63329);transform:translateY(102%);transition:transform .35s cubic-bezier(.22,1,.36,1);}
.entry-gate__start:hover {color:#0d0500;border-color:transparent;box-shadow:0 0 40px rgba(249,193,26,.34),0 0 80px rgba(230,51,41,.18);transform:translateY(-2px);outline:none;}
.entry-gate__start:hover::before {transform:translateY(0);}
.entry-gate__start:focus-visible {outline:2px solid #f9c11a;outline-offset:5px;}
.entry-gate__hint {margin:0;color:rgba(253,243,227,.3);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;animation:entry-fade .8s 1.05s ease both;}
@keyframes entry-star-twinkle {0%,100%{opacity:.22;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
@keyframes entry-food-float {0%,100%{transform:translateY(0) rotate(-5deg);opacity:.42}50%{transform:translateY(-20px) rotate(5deg);opacity:.82}}
@keyframes entry-ring-spin {to{transform:rotate(360deg)}}
@keyframes entry-star-orbit {from{transform:rotate(0deg) translateX(72px) rotate(0deg)}to{transform:rotate(360deg) translateX(72px) rotate(-360deg)}}
@keyframes entry-rise {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes entry-fade {from{opacity:0}to{opacity:1}}
@media (max-width:620px){
  .entry-gate {padding:1rem;}
  .entry-gate__content {gap:1rem;}
  .entry-gate__orbit {width:9rem;height:9rem;}
  .entry-gate__ring--inner {inset:1.15rem;}
  .entry-gate__orbit-star {font-size:2.7rem;margin:-1.35rem 0 0 -1.35rem;animation-name:entry-star-orbit-mobile;}
  .entry-gate__globe {font-size:3.1rem;}
  .entry-gate__brand {font-size:clamp(3rem,16vw,4.6rem);}
  .entry-gate__headphones {font-size:.72rem;}
  .entry-gate__foods span {font-size:clamp(1rem,var(--size),2rem);}
}
@keyframes entry-star-orbit-mobile {from{transform:rotate(0deg) translateX(54px) rotate(0deg)}to{transform:rotate(360deg) translateX(54px) rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){
  .entry-gate,.entry-gate * {animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;}
}

/* ========================================================================== 
   20260618p — video search layout: concise editorial copy, no overlap
   ========================================================================== */
.youtube-food-section {overflow:clip;}
.youtube-food-shell {
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(2.5rem,5.5vw,6.5rem);
  align-items:start;
}
.youtube-food-heading,
.youtube-search-workspace,
.youtube-food-layout,
.youtube-player-panel,
.youtube-results-panel {min-width:0;}
.youtube-food-heading {max-width:100%;padding-right:clamp(0rem,1vw,1rem);}
.youtube-food-heading h2 {
  max-width:8.2ch;
  margin:.55rem 0 1.35rem;
  color:var(--black,#111);
  font-family:var(--serif,Georgia,serif);
  font-size:clamp(3rem,5.3vw,6.2rem);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.055em;
  text-wrap:balance;
  overflow-wrap:normal;
}
.youtube-food-heading > p:not(.kicker) {max-width:35rem;line-height:1.7;}
.youtube-feature-list span {grid-template-columns:2.7rem minmax(0,1fr);}
.youtube-search-workspace {width:100%;overflow:hidden;}
.youtube-search-form {display:grid;width:100%;}
.youtube-search-form input {width:100%;min-width:0;}
.youtube-query-chips {max-width:100%;}
.youtube-food-layout {grid-template-columns:minmax(0,1.18fr) minmax(17rem,.82fr);}
.youtube-player-panel {position:relative;top:auto;width:100%;}
.youtube-results-panel {width:100%;overflow:hidden;}
.youtube-result-copy strong {overflow-wrap:anywhere;}
@media (max-width:1180px){
  .youtube-food-shell {grid-template-columns:1fr;gap:2rem;}
  .youtube-food-heading {position:relative;top:auto;padding-right:0;}
  .youtube-food-heading h2 {max-width:11ch;font-size:clamp(3rem,8.5vw,6.4rem);}
}
@media (max-width:900px){
  .youtube-food-layout {grid-template-columns:1fr;}
  .youtube-results {max-height:34rem;}
}
@media (max-width:620px){
  .youtube-food-heading h2 {max-width:9ch;font-size:clamp(2.7rem,15vw,4.7rem);}
  .youtube-food-heading > p:not(.kicker) {font-size:.92rem;}
}


/* ========================================================================== 
   20260618p — readable white typography on black editorial sections
   ========================================================================== */
.recipes-section,
.culture-section {
  position: relative;
  isolation: isolate;
  color: #fff;
}

.recipes-section::before,
.culture-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #0d0500;
}

.recipes-section .section-heading,
.culture-section .culture-title {
  border-color: rgba(255,255,255,.9);
}

.recipes-section .kicker,
.culture-section .kicker,
.recipes-section .section-heading h2,
.culture-section .culture-title h2,
.recipe-card h3,
.recipe-card p,
.recipe-card-meta,
.recipe-card-footer,
.recipe-card-footer span,
.recipe-card-footer button,
.recipe-card .card-open,
.culture-lead h3,
.culture-lead p,
.culture-lead .story-meta,
.culture-lead .text-link,
.culture-cards h3,
.culture-cards p,
.culture-cards span {
  color: #fff !important;
  opacity: 1 !important;
  text-shadow: none;
}

.recipe-card,
.culture-lead,
.culture-cards article {
  border-color: rgba(255,255,255,.34);
}

.recipes-section .filter-tab {
  border-color: #fff;
  background: #fff;
  color: #0d0500;
}

.recipes-section .filter-tab.is-active {
  border-color: #fff;
  background: #0d0500;
  color: #fff;
}

.recipes-section .card-save {
  background: #fff;
  color: #0d0500;
}

.recipes-section .card-save.is-saved {
  background: var(--red);
  color: #fff;
}

.recipes-section .card-open:focus-visible,
.culture-section .text-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}