/* ==========================================================================
   CLARKE VITALITY · EAT PILLAR STYLES
   Per-pillar accent: var(--pillar-eat) — gold (signature Clarke).
   Editorial drill-down: overview → category → tier → food.
   ========================================================================== */

#panel-eat {
  --pillar-accent: var(--pillar-eat);
}

/* ==========================================================================
   HERO
   ========================================================================== */

.eat-hero {
  padding: var(--s-6) 0 var(--s-7);
  border-bottom: 1px solid var(--ink-border);
  margin-bottom: var(--s-7);
}

.eat-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--pillar-accent);
  margin-bottom: var(--s-3);
}

.eat-hero__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 4rem;
  line-height: 1;
  color: var(--text-primary);
  margin-bottom: var(--s-3);
  letter-spacing: -0.015em;
}

.eat-hero__subtitle {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: var(--s-5);
  letter-spacing: 0.01em;
}

.eat-hero__body {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 720px;
  margin-bottom: var(--s-4);
}

.eat-hero__anchor {
  display: inline-block;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--gold);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  background: rgba(201, 168, 76, 0.05);
}

/* ==========================================================================
   SECTION HEADERS · shared
   ========================================================================== */

.eat-section-header {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--ink-line);
}

.eat-section-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--pillar-accent);
  margin-bottom: var(--s-2);
}

.eat-section-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

.eat-section-sub {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-tertiary);
  max-width: 680px;
}

/* ==========================================================================
   BEST PRACTICES · 4 tappable cards in a strip
   ========================================================================== */

.eat-practices {
  margin-bottom: var(--s-8);
}

.eat-practices__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

.eat-practice {
  text-align: left;
  background: var(--ink-surface);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.eat-practice:hover {
  border-color: var(--pillar-accent);
  background: var(--ink-elevated);
}

.eat-practice.open {
  grid-column: 1 / -1;
  border-color: var(--pillar-accent);
  background: var(--ink-elevated);
}

.eat-practice__label {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-1);
}

.eat-practice__value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--text-primary);
  letter-spacing: var(--tracking-med);
  font-weight: 500;
  line-height: 1.2;
}

.eat-practice.open .eat-practice__value {
  font-size: 1.5rem;
  color: var(--pillar-accent);
}

.eat-practice__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-top: 4px;
}

.eat-practice__detail {
  display: none;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-border);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.eat-practice.open .eat-practice__detail {
  display: block;
}

/* ==========================================================================
   CATEGORIES OVERVIEW · 17-card grid
   ========================================================================== */

.eat-categories {
  margin-bottom: var(--s-7);
}

.eat-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}

.eat-cat {
  text-align: left;
  background: var(--ink-surface);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-height: 160px;
  position: relative;
}

.eat-cat--deep:hover {
  border-color: var(--pillar-accent);
  background: var(--ink-elevated);
  transform: translateY(-2px);
}

.eat-cat--deep.active {
  border-color: var(--pillar-accent);
  background: var(--ink-elevated);
  box-shadow: 0 0 0 1px var(--pillar-accent);
}

.eat-cat--stub {
  opacity: 0.55;
  cursor: not-allowed;
}

.eat-cat__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-2);
}

.eat-cat__n {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--pillar-accent);
  letter-spacing: var(--tracking-med);
  font-weight: 500;
}

.eat-cat--stub .eat-cat__n {
  color: var(--text-tertiary);
}

.eat-cat__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.eat-cat__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.eat-cat--stub .eat-cat__name {
  color: var(--text-secondary);
}

.eat-cat__tagline {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  line-height: 1.4;
  flex: 1;
}

.eat-cat__arrow {
  position: absolute;
  bottom: var(--s-3);
  right: var(--s-4);
  color: var(--pillar-accent);
  font-size: 1.125rem;
}

.eat-cat__stub-label {
  position: absolute;
  bottom: var(--s-3);
  right: var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 2px var(--s-2);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   CATEGORY DETAIL · drill-down view
   ========================================================================== */

.eat-cat-detail {
  margin-bottom: var(--s-8);
  animation: detailEnter var(--t-med) var(--ease-out);
}

@keyframes detailEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.eat-cat-detail__head {
  background: var(--ink-surface);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
}

.eat-cat-detail__close {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  padding: var(--s-2) 0;
  cursor: pointer;
  margin-bottom: var(--s-4);
  transition: color var(--t-fast) var(--ease-out);
}

.eat-cat-detail__close:hover {
  color: var(--pillar-accent);
}

.eat-cat-detail__title-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--ink-border);
}

.eat-cat-detail__icon {
  font-size: 3rem;
  line-height: 1;
}

.eat-cat-detail__n {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--pillar-accent);
  margin-bottom: 4px;
}

.eat-cat-detail__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.25rem;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
}

.eat-cat-detail__tagline {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--text-secondary);
  margin: 0;
}

.eat-cat-detail__layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}

.eat-layer {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  background: var(--ink-elevated);
  border-left: 3px solid var(--ink-border);
}

.eat-layer--dna   { border-left-color: var(--pillar-accent); }
.eat-layer--dga   { border-left-color: var(--status-blue); }
.eat-layer--blood { border-left-color: var(--pillar-care); }

.eat-layer__label {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--s-2);
}

.eat-layer__text {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* ==========================================================================
   TIERS · 1, 2, 3
   ========================================================================== */

.eat-tier {
  margin-bottom: var(--s-6);
}

.eat-tier__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--ink-line);
}

.eat-tier__label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: var(--tracking-med);
  font-weight: 500;
}

.eat-tier--tier1 .eat-tier__label { color: var(--status-green); }
.eat-tier--tier2 .eat-tier__label { color: var(--pillar-accent); }
.eat-tier--tier3 .eat-tier__label { color: var(--status-amber); }

/* AVOID section · red treatment for clear "do not eat" signal */
.eat-tier--avoid {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 2px dashed rgba(220, 90, 90, 0.4);
}

.eat-tier--avoid .eat-tier__label {
  color: #DC5A5A; /* red, sits in same warm palette as gold */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eat-tier--avoid .eat-tier__sub {
  color: #DC5A5A;
  opacity: 0.7;
}

.eat-tier--avoid .eat-food {
  border-color: rgba(220, 90, 90, 0.25);
}

.eat-tier--avoid .eat-food__name {
  color: #DC5A5A;
}

.eat-tier--avoid .eat-food__sub {
  color: rgba(220, 90, 90, 0.7);
}

.eat-tier--avoid .eat-food__chevron {
  color: #DC5A5A;
}

.eat-tier--avoid .eat-food:hover {
  border-color: rgba(220, 90, 90, 0.5);
}

.eat-tier--avoid .eat-food.open {
  border-color: #DC5A5A;
  background: rgba(220, 90, 90, 0.04);
}

.eat-tier__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.eat-tier__foods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}

/* ==========================================================================
   FOOD CARD · collapsed and expanded
   ========================================================================== */

.eat-food {
  background: var(--ink-surface);
  border: 1px solid var(--ink-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-out);
}

.eat-food:hover {
  border-color: var(--ink-border-strong);
}

.eat-food.open {
  grid-column: 1 / -1;
  border-color: var(--pillar-accent);
}

.eat-food__head {
  width: 100%;
  text-align: left;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  background: transparent;
}

.eat-food__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}

.eat-food__name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--text-primary);
  margin: 0;
  font-weight: 400;
}

.eat-food__chevron {
  color: var(--pillar-accent);
  font-size: 1.25rem;
  font-weight: 300;
  transition: transform var(--t-med) var(--ease-out);
}

.eat-food.open .eat-food__chevron {
  transform: rotate(45deg);
}

.eat-food__sub {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  margin-top: 2px;
}

.eat-food__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out);
  padding: 0 var(--s-4);
}

.eat-food.open .eat-food__body {
  max-height: 1200px;
  padding: 0 var(--s-4) var(--s-4);
}

.eat-food__row {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--ink-line);
}

.eat-food__row-label {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--pillar-accent);
  margin-bottom: var(--s-2);
}

.eat-food__row-text {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.eat-food__brands {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.eat-food__brand {
  padding: var(--s-3);
  background: var(--ink-elevated);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--pillar-accent);
}

.eat-food__brand-name {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.eat-food__brand-product {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.eat-food__brand-why {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.eat-food__brand-where {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

.eat-food__shop-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-2);
  border-top: 1px solid var(--ink-line);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}

.eat-food__shop-label {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.eat-food__shop-value {
  flex: 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.eat-food__add {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--s-2) var(--s-3);
  background: var(--pillar-accent);
  color: var(--ink-bg);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  min-height: var(--touch-min);
}

.eat-food__add:hover {
  background: var(--gold-soft);
}

.eat-food__add.added {
  background: var(--status-green);
}

/* "Instead: ..." note for avoid items (no Add to List, just guidance) */
.eat-food__avoid-note {
  padding: var(--s-3);
  margin-top: var(--s-2);
  background: rgba(220, 90, 90, 0.06);
  border: 1px solid rgba(220, 90, 90, 0.2);
  border-radius: var(--radius-sm);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.eat-food__avoid-note strong {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #DC5A5A;
  margin-right: var(--s-2);
}

/* ==========================================================================
   AVOID ALL · consolidated cross-category avoid view
   ========================================================================== */

.eat-avoid-all-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label arrow"
    "value arrow"
    "sub arrow";
  gap: 4px var(--s-3);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(135deg, rgba(220, 90, 90, 0.06) 0%, rgba(220, 90, 90, 0.02) 100%);
  border: 1px solid rgba(220, 90, 90, 0.3);
  border-left: 3px solid #DC5A5A;
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-bottom: var(--s-5);
  width: 100%;
  text-align: left;
  transition: all var(--t-fast) var(--ease-out);
}

.eat-avoid-all-btn:hover {
  border-color: #DC5A5A;
  background: linear-gradient(135deg, rgba(220, 90, 90, 0.1) 0%, rgba(220, 90, 90, 0.04) 100%);
  transform: translateY(-1px);
}

.eat-avoid-all-btn__label {
  grid-area: label;
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #DC5A5A;
  font-weight: 600;
}

.eat-avoid-all-btn__value {
  grid-area: value;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--text-primary);
}

.eat-avoid-all-btn__sub {
  grid-area: sub;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.eat-avoid-all-btn__arrow {
  grid-area: arrow;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #DC5A5A;
  align-self: center;
}

/* All-avoid view */
.eat-cat-detail--avoid-all .eat-cat-detail__title--avoid {
  color: #DC5A5A;
}

.eat-avoid-group {
  margin-bottom: var(--s-6);
}

.eat-avoid-group__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid rgba(220, 90, 90, 0.2);
}

.eat-avoid-group__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.eat-avoid-group__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.eat-avoid-group__count {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #DC5A5A;
  margin-left: auto;
  padding: 4px var(--s-3);
  background: rgba(220, 90, 90, 0.08);
  border: 1px solid rgba(220, 90, 90, 0.25);
  border-radius: var(--radius-pill);
}

.eat-avoid-group .eat-tier--avoid {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.eat-avoid-footer {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--ink-surface);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.eat-avoid-footer p {
  margin: 0;
}

/* ==========================================================================
   GUT HEALTH PROTOCOL · footer
   ========================================================================== */

.eat-gut {
  padding: var(--s-6);
  background: linear-gradient(180deg, var(--ink-surface) 0%, var(--ink-elevated) 100%);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  margin-bottom: var(--s-7);
}

.eat-gut__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}

.eat-gut__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.75rem;
  color: var(--text-primary);
  margin-bottom: var(--s-3);
}

.eat-gut__body {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--s-5);
  max-width: 680px;
}

.eat-gut__anchors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

.eat-gut__anchor {
  padding: var(--s-4);
  background: var(--ink-bg);
  border-radius: var(--radius-md);
  border-top: 2px solid var(--gold);
}

.eat-gut__anchor-name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: var(--tracking-med);
  color: var(--gold);
  margin-bottom: var(--s-2);
}

.eat-gut__anchor-why {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-bottom: var(--s-2);
}

.eat-gut__anchor-examples {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .eat-hero__title {
    font-size: 3rem;
  }
  .eat-practices__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .eat-categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .eat-cat-detail__layers {
    grid-template-columns: 1fr;
  }
  .eat-tier__foods {
    grid-template-columns: 1fr;
  }
  .eat-gut__anchors {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .eat-hero__title {
    font-size: 2.5rem;
  }
  .eat-section-title {
    font-size: 1.5rem;
  }
  .eat-practices__grid {
    grid-template-columns: 1fr;
  }
  .eat-categories__grid {
    grid-template-columns: 1fr;
  }
  .eat-cat-detail__head {
    padding: var(--s-4);
  }
  .eat-cat-detail__title {
    font-size: 1.75rem;
  }
  .eat-cat-detail__icon {
    font-size: 2.25rem;
  }
  .eat-cat-detail__title-row {
    grid-template-columns: auto 1fr;
    gap: var(--s-3);
  }
  .eat-food__shop-row {
    flex-direction: column;
    align-items: stretch;
  }
  .eat-gut {
    padding: var(--s-4);
  }
}

/* ==========================================================================
   SPECIAL CARD · category-specific featured block
   Currently used by Grains for Sandwich Alternatives.
   ========================================================================== */

.eat-special {
  margin-top: var(--s-6);
  margin-bottom: var(--s-6);
  padding: var(--s-5);
  background: linear-gradient(
    180deg,
    rgba(201, 168, 76, 0.06) 0%,
    rgba(201, 168, 76, 0.02) 100%
  );
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 4px;
}

.eat-special__head {
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

.eat-special__label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: var(--tracking-med);
  font-weight: 500;
  color: var(--pillar-accent);
  margin-bottom: var(--s-1);
}

.eat-special__sub {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.eat-special__body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 var(--s-4) 0;
}

.eat-special__items {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .eat-special__items {
    grid-template-columns: 1fr 1fr;
  }
}

.eat-special__item {
  padding: var(--s-3);
  background: rgba(15, 20, 25, 0.4);
  border: 1px solid var(--ink-line);
  border-radius: 3px;
}

.eat-special__item-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--s-2);
  letter-spacing: 0.02em;
}

.eat-special__item-use,
.eat-special__item-where {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: var(--s-1);
}

.eat-special__item-use strong,
.eat-special__item-where strong {
  color: var(--pillar-accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.eat-special__item-why {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: var(--s-2) 0;
}