.story-chapter { padding: clamp(7rem, 13vw, 13rem) clamp(22px, 5vw, 80px) 0; }
.chapter-intro { display: grid; grid-template-columns: minmax(11rem, 22%) minmax(0, 1fr); gap: 2rem; align-items: start; margin-bottom: clamp(3rem, 7vw, 7rem); }
.chapter-intro .eyebrow { padding-top: .55rem; }
.chapter-intro h2 { max-width: 16ch; font-size: clamp(3.2rem, 7.2vw, 8rem); font-weight: 360; line-height: 1.02; letter-spacing: -.065em; text-wrap: balance; }
.chapter-intro p:not(.eyebrow) { max-width: 34rem; margin-top: 2rem; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.55; letter-spacing: -.025em; text-wrap: pretty; }
.story-photo { min-width: 0; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-photo figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .75rem; font-size: .72rem; font-weight: 450; letter-spacing: .05em; line-height: 1.35; text-transform: uppercase; }
.story-photo--feature img { height: clamp(500px, 62vw, 950px); object-position: center 52%; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 2.5rem); }
.photo-pair--offset { grid-template-columns: 1.18fr .82fr; margin-top: clamp(4rem, 8vw, 8rem); align-items: start; }
.photo-pair--offset .story-photo:first-child { margin-top: clamp(3rem, 10vw, 10rem); }
.photo-pair--offset img { height: clamp(400px, 47vw, 710px); }
.photo-pair--signature { margin-top: clamp(4rem, 8vw, 8rem); }
.photo-pair--signature img { height: clamp(460px, 53vw, 780px); }
.photo-aside { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(14rem, .6fr); gap: clamp(2rem, 9vw, 12rem); align-items: end; }
.photo-aside .story-photo img { height: clamp(620px, 74vw, 1050px); object-position: center 55%; }
.photo-aside > p { max-width: 18rem; padding-bottom: 2rem; font-size: clamp(1.3rem, 2.2vw, 2.1rem); font-weight: 360; line-height: 1.25; letter-spacing: -.04em; }
.chapter-bridge { display: grid; grid-template-columns: 22% 1fr; gap: 2rem; margin: clamp(7rem, 12vw, 12rem) 0 clamp(2rem, 4vw, 4rem); border-top: 1px solid #000; padding-top: 1.25rem; }
.chapter-bridge > p:last-child { max-width: 32rem; font-size: clamp(1.4rem, 2.4vw, 2.5rem); font-weight: 360; line-height: 1.25; letter-spacing: -.04em; }
.photo-triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 2rem); }
.photo-triptych img { height: clamp(400px, 47vw, 670px); }
.story-chapter--range { padding-bottom: clamp(7rem, 12vw, 12rem); }
.range-index { display: flex; align-items: stretch; gap: clamp(1rem, 2.6vw, 2.5rem); min-width: 0; overflow-x: auto; border-block: 1px solid #9b958b; margin: -1rem 0 clamp(2rem, 4vw, 4rem); padding: .35rem 0; scrollbar-width: thin; scrollbar-color: #8b877f transparent; }
.range-index a { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 2.75rem; color: inherit; font-size: .68rem; letter-spacing: .07em; line-height: 1.25; text-decoration: none; text-transform: uppercase; text-underline-offset: .3em; }
.range-index a:hover { text-decoration: underline; }
.range-index a:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.range-index a:first-child { margin-left: .15rem; }
.range-index a:last-child { margin-right: .15rem; }
.range-index + .range-group { margin-top: clamp(2rem, 4vw, 3.5rem); }
.range-group[id], .campaign-comparison[id] { scroll-margin-top: 1.5rem; }
.range-group { border-top: 1px solid #000; padding-top: 1.2rem; margin-top: clamp(5rem, 9vw, 9rem); }
.range-group__intro { display: grid; grid-template-columns: 22% 1fr; gap: 2rem; margin-bottom: 2rem; }
.range-group__intro p:last-child { max-width: 34rem; font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.3; letter-spacing: -.035em; }
.photo-pair--range img { height: clamp(410px, 48vw, 720px); }
.photo-triptych--range img { height: clamp(370px, 40vw, 600px); }
.photo-triptych--breakfast { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.65rem, 1.2vw, 1.4rem); }
.photo-triptych--breakfast img { height: clamp(300px, 32vw, 440px); }
.photo-triptych--signature { margin-top: clamp(4rem, 8vw, 8rem); }
.chapter-note { max-width: 32rem; margin-top: 2rem; font-size: clamp(1.4rem, 2.4vw, 2.5rem); font-weight: 360; line-height: 1.25; letter-spacing: -.04em; }
.story-chapter--use { border-top: 1px solid #000; padding-bottom: clamp(8rem, 14vw, 14rem); }
.use-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); margin: clamp(4rem, 7vw, 7rem) 0 3rem; }
.campaign-comparison { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.use-example { min-width: 0; border-top: 1px solid #000; padding-top: 1rem; }
.campaign-artwork--wide { grid-column: 1 / -1; }
.campaign-artwork img { display: block; width: 100%; height: auto; object-fit: contain; background: #f2f0eb; }
.campaign-artwork figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .9rem; font-size: .72rem; letter-spacing: .055em; line-height: 1.35; text-transform: uppercase; }
.story-chapter--use .text-link { display: inline-block; }
.hero-carousel { min-width: 0; }
.hero-carousel__viewport { display: flex; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; }
.hero-carousel__viewport::-webkit-scrollbar { display: none; }
.hero-carousel__viewport:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.hero-carousel__slide { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; }
.hero-carousel__slide img { display: block; width: 100%; height: clamp(420px, 55vw, 760px); object-fit: cover; }
.hero-carousel__footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .8rem; font-size: .72rem; font-weight: 450; letter-spacing: .055em; text-transform: uppercase; }
.hero-carousel__controls { display: flex; align-items: center; gap: .85rem; }
.hero-carousel__count { min-width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.hero-carousel__button { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid #111; border-radius: 50%; background: #fff; color: #111; cursor: pointer; font: inherit; font-size: 1rem; }
.hero-carousel__button:hover { background: #111; color: #fff; }
.hero-carousel__button:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.hero-carousel__button:disabled { opacity: .35; cursor: default; }
.photo-triptych--plate img { height: auto; object-position: center; }
.photo-triptych--moments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-rail-shell { min-width: 0; }
.photo-rail-shell:not(.is-enhanced) .photo-rail-control,
.photo-rail-shell:not(.has-overflow) .photo-rail-control { visibility: hidden; }
.photo-rail-control { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid #111; border-radius: 999px; background: #f5f3ef; color: #111; cursor: pointer; transition: background-color .18s ease, color .18s ease, opacity .18s ease, transform .18s ease; }
.photo-rail-control svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.photo-rail-control:hover:not(:disabled) { background: #111; color: #fff; transform: translateY(-1px); }
.photo-rail-control:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.photo-rail-control:disabled { opacity: .32; cursor: default; }
.photo-rail-track { display: flex; min-width: 0; gap: clamp(.75rem, 1.7vw, 1.5rem); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; }
.photo-rail-track::-webkit-scrollbar { display: none; }
.photo-rail-track:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
.photo-rail-track .story-photo { flex: 0 0 clamp(220px, 23vw, 300px); scroll-snap-align: start; }
.photo-rail-track .story-photo--landscape { flex-basis: clamp(300px, 34vw, 440px); }
.photo-rail-track .story-photo--square { flex-basis: clamp(260px, 29vw, 360px); }
.photo-rail-track .story-photo img { display: block; width: 100%; height: auto; object-fit: contain; }
.photo-rail-track .delivery-tile { flex: 0 0 clamp(240px, 27vw, 340px); scroll-snap-align: start; }
.photo-rail-track.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.photo-rail-track:not(.is-dragging) { cursor: grab; }
.photo-rail-footer { display: grid; grid-template-columns: minmax(4rem, 1fr) auto auto; align-items: center; gap: 1.25rem; margin: 1.15rem 0 0; }
.photo-rail-progress { height: 2px; overflow: hidden; background: #d8d5ce; }
.photo-rail-progress__fill { display: block; width: 100%; height: 100%; background: #171715; transform: scaleX(0); transform-origin: left center; transition: transform .2s ease; }
.photo-rail-count { min-width: 4rem; color: #68665f; font-size: .68rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-align: center; }
.photo-rail-controls { display: flex; gap: .45rem; }
.range-spread { margin: 0 0 clamp(1.5rem, 3vw, 3rem); }
.range-spread img { display: block; width: 100%; height: clamp(280px, 40vw, 560px); object-fit: cover; }
.range-spread figcaption, .delivery-tile figcaption { padding-top: .65rem; font-size: .7rem; letter-spacing: .05em; line-height: 1.35; text-transform: uppercase; }
.range-gap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; border-top: 1px solid #9b958b; padding: 1rem 0; font-size: .92rem; line-height: 1.45; }
.range-gap a { color: inherit; text-underline-offset: .2em; }
.range-gap--note { display: block; max-width: 48rem; margin-top: 1rem; border: 0; padding: 0; color: #5f5b54; font-size: .78rem; }
.delivery-rail { display: flex; min-width: 0; gap: clamp(.75rem, 1.7vw, 1.5rem); }
.delivery-tile { min-width: 0; border: 1px solid #d5d1c9; padding: .6rem; }
.delivery-tile img { display: block; width: 100%; height: clamp(240px, 27vw, 340px); aspect-ratio: 1; object-fit: cover; }
.food-ad-concept { position: relative; display: grid; min-height: 360px; grid-template-columns: minmax(0, 1fr) minmax(10rem, .72fr); align-items: center; overflow: hidden; gap: 1rem; padding: clamp(1rem, 3vw, 2.5rem); background: #d8c6a2; color: #182118; }
.food-ad-concept--wrap { background: #c7d0b5; }
.food-ad-concept--plate { background: #ead5a6; }
.food-ad-concept > img { display: block; width: 100%; height: clamp(220px, 28vw, 400px); object-fit: contain; mix-blend-mode: multiply; }
.food-ad-concept__copy { position: relative; z-index: 1; display: grid; gap: .8rem; }
.food-ad-concept__copy > span { font-size: .58rem; font-weight: 700; letter-spacing: .12em; }
.food-ad-concept__copy strong { font-size: clamp(1.8rem, 3.5vw, 3.6rem); font-weight: 500; line-height: .95; letter-spacing: -.06em; }
.food-ad-concept__copy small { font-size: .72rem; letter-spacing: .035em; }
@media (max-width: 760px) {
  .hero-carousel__slide img { height: 480px; }
  .story-chapter { padding-top: 7rem; }
  .chapter-intro, .chapter-bridge, .range-group__intro { grid-template-columns: 1fr; gap: 1.4rem; }
  .chapter-intro h2 { font-size: clamp(3rem, 10vw, 5.5rem); }
  .chapter-intro p:not(.eyebrow) { margin-top: 1.5rem; }
  .story-photo--feature img { height: 570px; }
  .photo-aside { grid-template-columns: 1fr; gap: 1.5rem; }
  .photo-aside .story-photo img { height: 650px; }
  .photo-aside > p { padding: 0; }
  .photo-pair--offset .story-photo:first-child { margin-top: 3rem; }
  .photo-pair--offset img, .photo-pair--signature img, .photo-pair--range img { height: 430px; }
  .photo-triptych img { height: 410px; }
}
@media (max-width: 520px) {
  .hero-carousel__slide img { height: auto; aspect-ratio: 3 / 2; }
  .hero-carousel__footer { align-items: start; }
  .hero-carousel__controls { gap: .5rem; }
  .hero-carousel__button { width: 2.5rem; height: 2.5rem; }
  .story-chapter { padding-left: 22px; padding-right: 22px; }
  .story-photo--feature img { height: 420px; }
  .photo-pair, .photo-pair--offset, .photo-pair--signature, .photo-pair--range, .photo-triptych, .photo-triptych--range { grid-template-columns: 1fr; gap: 2.5rem; }
  .photo-pair--offset .story-photo:first-child { margin-top: 0; }
  .photo-pair img, .photo-triptych img { height: 440px; }
  .photo-aside .story-photo img { height: 510px; }
  .use-proof { grid-template-columns: 1fr; gap: 2.5rem; }
  .campaign-comparison { grid-template-columns: 1fr; gap: 2.5rem; }
  .photo-triptych--plate { gap: .35rem; }
  .photo-rail-control { width: 2.35rem; height: 2.35rem; }
  .photo-rail-footer { gap: .8rem; margin-top: .9rem; }
  .photo-rail-track { gap: .7rem; }
  .photo-rail-track .story-photo, .photo-rail-track .story-photo--square { flex-basis: min(72vw, 290px); }
  .photo-rail-track .story-photo--landscape { flex-basis: min(86vw, 340px); }
  .photo-rail-track .story-photo figcaption { display: block; padding-top: .6rem; font-size: .62rem; }
  .photo-triptych--moments { grid-template-columns: 1fr; }
  .photo-rail-track .story-photo, .photo-rail-track .story-photo--square { flex-basis: min(72vw, 290px); }
  .photo-rail-track .story-photo--landscape { flex-basis: min(86vw, 340px); }
  .range-spread img { height: auto; aspect-ratio: 4 / 3; }
  .range-index + .range-group { margin-top: 2rem; }
  .range-gap { grid-template-columns: 1fr; }
  .photo-rail-track .delivery-tile { flex-basis: min(72vw, 290px); padding: .45rem; }
  .delivery-tile img { height: min(72vw, 290px); }
  .delivery-tile figcaption { font-size: .62rem; letter-spacing: 0; }
  .food-ad-concept { min-height: 235px; grid-template-columns: minmax(0, 1fr) minmax(7rem, .72fr); gap: .5rem; padding: .65rem; }
  .food-ad-concept > img { height: 220px; }
  .food-ad-concept__copy { gap: .45rem; }
  .food-ad-concept__copy > span { font-size: .47rem; letter-spacing: .08em; }
  .food-ad-concept__copy strong { font-size: clamp(1.35rem, 7vw, 2rem); }
  .food-ad-concept__copy small { font-size: .55rem; }
}