/* Static information pages share the recommendation app's semantic tokens. */
.content-page { overflow-wrap: anywhere; }
.content-shell { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.content-header { gap: var(--space-6); }
.content-header a { min-height: 44px; }
.content-header nav { gap: var(--space-6); }
.content-header nav a { display: inline-flex; align-items: center; font-size: 14px; font-weight: 650; text-decoration: none; }
.content-header nav a:hover, .content-header nav a[aria-current="page"] { color: var(--accent); }
.content-breadcrumb { padding-block: var(--space-4); color: var(--muted); font-size: 13px; }
.content-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; padding: 0; list-style: none; }
.content-breadcrumb li { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.content-breadcrumb li + li::before { content: "/"; color: var(--muted); }
.content-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.content-breadcrumb a:hover { text-decoration: underline; }
.content-breadcrumb [aria-current="page"] { color: var(--ink); }
.content-intro { max-width: 780px; padding: var(--space-6) 0 var(--space-10); }
.content-kicker { display: block; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .025em; margin-bottom: var(--space-3); }
.content-page h1 { font-size: clamp(32px, 4.8vw, 52px); font-weight: 820; line-height: 1.25; letter-spacing: -.045em; word-break: keep-all; }
.content-page h2 { font-size: 22px; line-height: 1.4; letter-spacing: -.035em; }
.content-page h3 { font-size: 19px; line-height: 1.45; letter-spacing: -.025em; }
.content-lead { margin-top: var(--space-5); color: var(--muted); font-size: 17px; line-height: 1.85; }
.content-caption { color: var(--muted); font-size: 13px; line-height: 1.7; }
.content-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 48px; margin-top: var(--space-6); padding: var(--space-3) var(--space-5); border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: var(--surface); font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; }
.content-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.content-button-secondary { color: var(--ink); border-color: var(--line); background: var(--surface); }
.content-button-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.content-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.content-section-heading > a { display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-2); color: var(--accent); font-size: 14px; text-underline-offset: 4px; }
.content-panel { min-width: 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.content-panel h2 { margin-bottom: var(--space-4); }
.content-panel > p + p { margin-top: var(--space-3); }
.content-panel > p { line-height: 1.85; }
.content-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.content-tags li { padding: 5px var(--space-3); color: var(--green); background: var(--green-soft); border-radius: var(--radius-pill); font-size: 13px; font-weight: 650; }
.content-tags-neutral { margin-top: var(--space-4); }
.content-tags-neutral li { background: var(--page); color: var(--muted); }
.directory-tools { padding-block: var(--space-6); border-block: 1px solid var(--line); }
.directory-search { max-width: 620px; margin-bottom: var(--space-6); }
.directory-search label { display: block; margin-bottom: var(--space-2); font-size: 15px; font-weight: 700; }
.directory-search-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.directory-search input { flex: 1; width: 0; min-width: 0; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.directory-search button { min-width: 64px; min-height: 48px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; }
.directory-search button:hover { border-color: var(--accent); color: var(--accent); }
.directory-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.directory-jump a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); text-decoration: none; font-size: 14px; font-weight: 650; }
.directory-jump a span { color: var(--muted); font-size: 12px; }
.directory-jump a:hover { border-color: var(--accent); color: var(--accent); }
.directory-status { margin-bottom: var(--space-2); font-size: 14px; font-weight: 700; }
.directory-empty { margin-top: var(--space-6); }
.directory-group { margin-top: var(--space-10); scroll-margin-top: var(--space-5); }
.directory-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.directory-list li { min-width: 0; }
.directory-menu { display: flex; height: 100%; min-height: 112px; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; }
.directory-menu:hover { border-color: var(--accent); background: var(--accent-soft); }
.directory-menu-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.directory-menu-heading strong { font-size: 16px; }
.directory-menu-description { color: var(--muted); font-size: 14px; line-height: 1.75; }
.menu-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: var(--space-10); padding: var(--space-6) 0 var(--space-10); }
.menu-detail-copy { min-width: 0; }
.content-aliases { margin-top: var(--space-4); color: var(--muted); font-size: 13px; }
.content-aliases span { color: var(--ink); font-weight: 700; margin-right: var(--space-2); }
.menu-detail-art { padding: var(--space-5) var(--space-3); border-radius: var(--radius-lg); background: var(--yellow-soft); }
.content-dish-illustration { width: 100%; height: auto; }
.menu-detail-art p { color: var(--warm-ink); font-size: 11px; text-align: center; }
.menu-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.content-panel-wide { grid-column: 1 / -1; }
.content-contexts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: 0 0 var(--space-5); }
.content-contexts dt { margin-bottom: var(--space-1); font-size: 15px; font-weight: 750; }
.content-contexts dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.content-sources { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.content-sources li + li { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.content-sources li > .content-caption { display: block; }
.content-prose p { color: var(--muted); line-height: 1.9; }
.content-prose a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; color: var(--accent); text-underline-offset: 4px; }
.content-prose ul:not(.content-sources) { padding-left: var(--space-6); margin: var(--space-4) 0; color: var(--muted); line-height: 1.9; }
.content-prose ul:not(.content-sources) li + li { margin-top: var(--space-2); }
.content-related { margin-top: var(--space-12); }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: 0; margin: var(--space-5) 0 0; list-style: none; }
.related-grid li { min-width: 0; }
.related-grid a { display: flex; height: 100%; flex-direction: column; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; }
.related-grid a:hover { border-color: var(--accent); }
.related-grid .content-kicker { margin-bottom: var(--space-2); font-size: 12px; }
.related-grid p { margin-top: var(--space-3); color: var(--muted); font-size: 14px; line-height: 1.8; }
.related-common { margin-top: auto; padding-top: var(--space-4); color: var(--green); font-size: 12px; }
.content-reading { display: grid; gap: var(--space-4); max-width: 820px; }
.content-reading .content-panel { padding: var(--space-8); }
.content-end-action { margin-top: var(--space-4); }
.content-not-found { min-height: 55vh; }
.content-actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.content-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-top: var(--space-16); padding-block: var(--space-6); border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.content-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.content-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.content-footer a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 760px) {
  .content-shell { width: calc(100% - 40px); }
  .content-header { flex-wrap: wrap; gap: 0 var(--space-5); padding-block: var(--space-4); }
  .content-header nav { gap: var(--space-4); }
  .menu-detail-hero { grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-5); }
  .menu-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .content-contexts { grid-template-columns: minmax(0, 1fr); }
  .content-reading .content-panel { padding: var(--space-6); }
}

@media (max-width: 560px) {
  .content-shell { width: calc(100% - 32px); }
  .content-header { display: block; }
  .content-header nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-top: var(--space-2); }
  .content-header nav a { font-size: 13px; }
  .content-breadcrumb { padding-block: var(--space-2); font-size: 12px; }
  .content-intro { padding-top: var(--space-5); padding-bottom: var(--space-8); }
  .content-lead { font-size: 16px; }
  .content-page h2 { font-size: 20px; }
  .content-panel, .content-reading .content-panel { padding: var(--space-5); }
  .directory-list, .related-grid { grid-template-columns: minmax(0, 1fr); }
  .directory-menu { min-height: 104px; padding: var(--space-4); }
  .directory-group { margin-top: var(--space-8); }
  .menu-detail-hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-5); gap: var(--space-6); }
  .menu-detail-art { max-width: 300px; width: 100%; justify-self: center; padding-block: var(--space-3); }
  .content-section-heading { align-items: flex-start; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .content-related { margin-top: var(--space-10); }
  .content-footer { margin-top: var(--space-12); }
  .content-footer nav { gap: 0 var(--space-4); }
}