/* Stories page (Figma node 688:184 "Page · Stories v3 (10 Nov)"). 1440px canvas, scaled by fit.js.
   Nav, type helpers, closing and footer come from styles.css and features.css. */
.page--stories { gap: 0; overflow: clip; }
.page--stories > section, .page--stories > p { flex-shrink: 0; }
.t-h2 { font-family: var(--f-display); font-weight: 400; font-size: 56px; line-height: 1.04; letter-spacing: -2.24px; color: var(--ink); }
/* Reset for the Stories video buttons only (not the closing form's Pre-order button) */
.page--stories :where(.sfeat, .spair, .smore) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

/* Play button: 40px cream circle with a dark triangle (Figma "Play" + "Play icon") */
.splay { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: #ede8de; display: block; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.splay::after { content: ""; position: absolute; left: 15.6px; top: 13.2px; width: 12px; height: 13.6px; background: #0b0a09;
  clip-path: polygon(6% 4%, 94% 46%, 94% 54%, 6% 96%); border-radius: 1px; }
.splay--lg { width: 64px; height: 64px; }
.page--stories button.splay { background: #ede8de; }   /* beats the button reset above */
.splay--lg::after { left: 24.96px; top: 21.12px; width: 19.2px; height: 21.76px; }
button:hover > .splay, .splay:hover { transform: scale(1.08); }

/* Dark pill used for "At the stove", "First bite" and durations */
.schip { position: absolute; left: 16px; top: 16px; height: 32px; padding: 0 14px; display: flex; align-items: center; border-radius: 16px;
  background: rgba(11, 10, 9, .92); font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #ede8de; white-space: nowrap; }

/* ───────── 01 Hero ───────── */
.shero { position: relative; height: 308px; margin-top: 3px; }
.shero__title { position: absolute; left: 64px; top: 80px; width: 900px; }
.shero__lead { position: absolute; left: 996px; top: 154px; width: 380px; }

/* ───────── 02 Featured story ───────── */
.sfeat { position: relative; height: 768px; }
.sfeat__video { position: absolute; left: 64px; top: 0; width: 432px; height: 768px; border-radius: 16px; overflow: hidden; background: #131110; }
.sfeat__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.sfeat__shade { position: absolute; left: 0; top: 488px; width: 432px; height: 280px; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 9, 0), rgba(10, 10, 9, .92)); transition: opacity .3s; }
.sfeat__dur { position: absolute; left: 24px; top: 24px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #ede8de; transition: opacity .3s; }
.sfeat__play { left: 184px; top: 352px; }
.sfeat__play::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(237, 232, 222, .35);
  animation: sfeat-ring 2.4s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes sfeat-ring { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.sfeat.is-playing .sfeat__play, .sfeat.is-playing .sfeat__dur, .sfeat.is-playing .sfeat__shade { opacity: 0; pointer-events: none; }
.sfeat__play { transition: opacity .3s, transform .3s cubic-bezier(.16, 1, .3, 1); }

.sfeat__panel { position: absolute; left: 512px; top: 0; width: 864px; height: 768px; border-radius: 16px; background: #131110; overflow: hidden; }
.sfeat__panel > * { position: absolute; left: 56px; margin: 0; }
.sfeat__eyebrow { top: 56px; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #c77a4d; }
.sfeat__name { top: 92px; font-family: var(--f-display); font-weight: 400; font-size: 56px; line-height: 1.04; letter-spacing: -2.24px; color: #ede8de; }
.sfeat__sub { top: 162px; width: 700px; }
.sfeat__quote { top: 232px; width: 700px; }
.sfeat__words { top: 344px; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #9c958a; }
.sfeat__lines { top: 380px; width: 752px; padding: 0; list-style: none; border-top: 1px solid #262421; }
.sfeat__lines li { border-bottom: 1px solid #262421; }
.sfeat__lines li:last-child { border-bottom: 0; }
.sfeat__lines button { display: flex; align-items: baseline; width: 100%; height: 59px; padding-top: 14px; }
.sfeat__lines li:first-child button { height: 59px; }
.sfeat__t { width: 64px; flex: none; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #9c958a; font-variant-numeric: tabular-nums; transition: color .2s; }
.sfeat__line { font-size: 20px; line-height: 1.5; letter-spacing: -0.6px; color: #ede8de; transition: color .2s, transform .3s cubic-bezier(.16, 1, .3, 1); }
.sfeat__lines button:hover .sfeat__t, .sfeat__lines button.is-active .sfeat__t { color: #c77a4d; }
.sfeat__lines button:hover .sfeat__line { transform: translateX(4px); }
.sfeat__lines button.is-active .sfeat__line { color: #f2c9a8; }
.sfeat__hint { top: 572px; }
.sfeat__facts { top: 638px; width: 752px; height: 130px; border-top: 1px solid #262421; display: flex; }
.sfeat__facts div { width: 256px; padding-top: 23px; }
.sfeat__facts dt { font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a; }
.sfeat__facts dd { margin: 3px 0 0; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #ede8de; }

/* ───────── 03 First the cook. Then the verdict. ───────── */
.spair { position: relative; height: 1124px; margin-top: 160px; }
.spair__title { position: absolute; left: 64px; top: 0; width: 820px; }
.spair__lead { position: absolute; left: 996px; top: 56px; width: 380px; }
.spair__cols { position: absolute; left: 64px; top: 172px; display: flex; gap: 16px; }
.spair__col { position: relative; width: 427px; height: 952px; }
.ssq { position: absolute; left: 0; top: 0; width: 427px; height: 427px; border-radius: 16px; overflow: hidden; display: block; background: #131110; }
.ssq--video { top: 435px; }
.ssq > img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.ssq--video:hover > img { transform: scale(1.04); }
.ssq .splay { left: 371px; top: 16px; }
.ssq .schip--dur { left: auto; right: 16px; top: 380px; height: auto; padding: 5px 12px; border-radius: 14px; }
.spair__name { position: absolute; left: 0; top: 886px; }
.spair__role { position: absolute; left: 0; top: 928px; color: #9c958a; }

/* ───────── 04 The Tara in these videos ───────── */
.sdev { position: relative; height: 588px; margin-top: 160px; }
.sdev__title { position: absolute; left: 64px; top: 0; width: 420px; }
.sdev__lead { position: absolute; left: 64px; top: 140px; width: 400px; }
.sdev__link { position: absolute; left: 64px; top: 292px; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #c77a4d; transition: color .2s; }
.sdev__link span { display: inline-block; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.sdev__link:hover { color: #db9466; }
.sdev__link:hover span { transform: translateX(4px); }
.sdev__fig { position: absolute; top: 0; width: 416px; margin: 0; }
.sdev__fig--early { left: 528px; }
.sdev__fig--today { left: 960px; }
.sdev__img { position: relative; height: 520px; border-radius: 16px; overflow: hidden; }
.sdev__fig figcaption { margin-top: 20px; width: 400px; color: #9c958a; }

/* ───────── 05 More kitchens ───────── */
.smore { position: relative; height: 1331px; margin-top: 160px; }
.smore__title { position: absolute; left: 64px; top: 0; white-space: nowrap; }
.smore__lead { position: absolute; left: 996px; top: -2px; width: 380px; }
.smore__grid { position: absolute; left: 64px; top: 114px; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 316px); gap: 16px; }
.scard { position: relative; width: 316px; height: 395px; border-radius: 16px; overflow: hidden; background: #131110; }
.scard > button { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.scard img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.scard > button:hover img { transform: scale(1.04); }
.scard__shade { position: absolute; left: 0; top: 215px; width: 316px; height: 180px; background: linear-gradient(180deg, rgba(10, 10, 9, 0), rgba(10, 10, 9, .9)); }
.scard .splay { left: 20px; top: 20px; }
.scard__dur { position: absolute; right: 20px; top: 30px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #ede8de; font-variant-numeric: tabular-nums; }
.scard__name { position: absolute; left: 20px; top: 329px; font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #ede8de; }
.scard__role { position: absolute; left: 20px; top: 354px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a; }
.scard--next > * { position: absolute; left: 28px; width: 260px; margin: 0; }
.scard--next .t-h3 { top: 32px; }
.scard--next .t-body { top: 80px; color: #9c958a; }
.scard__btn { top: 319px; width: auto; height: 48px; padding: 0 20px; display: flex; align-items: center; border-radius: 24px; background: #c77a4d;
  font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #0b0a09; transition: background .2s; }
.scard__btn:hover { background: #db9466; }

/* ───────── Note ───────── */
.snote { margin: 48px 0 0 64px; width: 1312px; color: #9c958a; }
.page--stories > .closing-wrap { margin-top: 166px; }

/* ───────── Video lightbox ───────── */
.slight { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(8, 7, 6, .94); display: none; align-items: center; justify-content: center; }
.slight[open] { display: flex; animation: slight-in .25s ease both; }
.slight::backdrop { background: transparent; }
@keyframes slight-in { from { opacity: 0; } }
.slight__video { display: block; width: auto; height: auto; max-width: min(92vw, 1280px); max-height: 86vh; min-width: 240px; object-fit: contain; background: #000; border-radius: 12px; }
.slight__close { position: absolute; right: 24px; top: 24px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(237, 232, 222, .12); display: grid; place-items: center; transition: background .2s; }
.slight__close:hover { background: rgba(237, 232, 222, .22); }