/* Food science: three open, linked editorial stories. */
.food-detail {
  --food-rule: rgba(112, 47, 66, .18);
}

.food-hero .detail-hero-copy h1 {
  font-size: clamp(52px, 6.3vw, 88px);
}

.food-hero-context {
  max-width: 490px;
  margin: 24px 0 0;
  color: #6e5a60;
  font-size: 17px;
  line-height: 1.7;
}

.food-hero-figure {
  margin: 0;
}

.food-hero-image {
  overflow: hidden;
  border-radius: 160px 160px 24px 24px;
}

.food-hero .food-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 42% center;
}

.food-category-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding: 10px 0 20px;
  border-bottom: 1px solid var(--food-rule);
  scroll-margin-top: 110px;
}

.food-category-nav a {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 14px;
  padding-block: 8px;
  color: var(--wine);
}

.food-category-nav a > span:first-child {
  font-size: 13px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.food-category-nav strong {
  font-family: var(--font-brand);
  font-size: clamp(19px, 1.85vw, 26px);
  font-weight: 500;
}

.food-category-nav a > span:last-child {
  margin-left: auto;
  font-size: 20px;
  transition: transform .2s ease;
}

.food-category-nav a:hover > span:last-child {
  transform: translate(2px, -2px);
}

.food-story {
  border-bottom: 1px solid var(--food-rule);
  scroll-margin-top: 90px;
}

.food-story .food-story-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(38px, 6vw, 88px);
}

.food-story-reverse .food-story-layout {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.food-story-reverse .food-story-photo {
  grid-column: 2;
  grid-row: 1;
}

.food-story-reverse .food-story-copy {
  grid-column: 1;
  grid-row: 1;
}

.food-story-photo {
  min-width: 0;
  margin: 0;
}

.food-story-photo .detail-visual {
  overflow: hidden;
  border-radius: 24px;
}

.food-story .food-story-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.food-story-photo figcaption {
  margin-top: 16px;
  color: #78636a;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .04em;
}

.food-story-copy h2 {
  margin: 0 0 26px;
  font-family: var(--font-brand);
  font-size: clamp(37px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.09;
  text-wrap: balance;
}

.food-story-copy h2 em,
.food-research h2 em {
  color: var(--wine);
  font-family: var(--font-soul);
  font-style: italic;
  font-weight: 400;
}

.food-story-copy > p:not(.detail-kicker) {
  color: #6e5a60;
  font-size: 17px;
  line-height: 1.75;
}

.food-story-notes {
  margin: 30px 0;
}

.food-story-notes > div {
  padding: 17px 0;
  border-top: 1px solid var(--food-rule);
}

.food-story-notes dt {
  color: var(--wine);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.food-story-notes dd {
  margin: 6px 0 0;
  color: #6e5a60;
  font-size: 16px;
  line-height: 1.65;
}

.food-research {
  margin-top: 88px;
  scroll-margin-top: 110px;
}

.food-research-heading {
  max-width: 760px;
}

.food-research .detail-kicker,
.food-research h2 em {
  color: #e2b6c3;
}

.food-research-heading > p:last-child {
  max-width: 630px;
}

.food-research-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 44px;
}

.food-research-points article {
  border-top: 1px solid rgba(255, 255, 255, .24);
  padding-top: 23px;
}

.food-research-points span {
  color: #e2b6c3;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .06em;
}

.food-research-points h3 {
  margin: 18px 0 12px;
  font-family: var(--font-brand);
  font-size: 27px;
  line-height: 1.2;
  font-weight: 500;
}

.food-research .food-research-points p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

.food-research .food-research-note {
  margin: 38px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: #cdbac2;
  font-size: 13px;
  line-height: 1.6;
}

.food-contact-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

@media (max-width: 900px) {
  .food-category-nav { gap: 20px; }
  .food-category-nav a { gap: 10px; }
  .food-research-points { gap: 24px; }
}

@media (max-width: 760px) {
  .food-hero .detail-hero-copy h1 { font-size: clamp(49px, 10.6vw, 72px); }
  .food-hero-image { border-radius: 120px 120px 22px 22px; }
  .food-hero .food-hero-image img { aspect-ratio: 5 / 4; object-position: center; }
  .food-category-nav { grid-template-columns: 1fr; gap: 0; padding: 4px 0 14px; }
  .food-category-nav a { min-height: 60px; border-top: 1px solid var(--food-rule); }
  .food-category-nav a:first-child { border-top: 0; }
  .food-category-nav strong { font-size: 23px; }
  .food-story .food-story-layout { grid-template-columns: 1fr; gap: 34px; }
  .food-story-reverse .food-story-photo,
  .food-story-reverse .food-story-copy { grid-column: auto; grid-row: auto; }
  .food-story .food-story-photo img { aspect-ratio: 4 / 3; }
  .food-story-copy h2 { font-size: clamp(36px, 8vw, 49px); }
  .food-story-notes { margin-bottom: 20px; }
  .food-research { margin-top: 58px; }
  .food-research-points { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .food-research-points h3 { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .food-category-nav a > span:last-child { transition: none; }
  .food-category-nav a:hover > span:last-child { transform: none; }
}