/* Approved typography roles. Deliberate hero compositions retain their page rules. */
:root{
 --label-font:500 12px/1.5 var(--font-body);
 --label-tracking:.13em;
 --type-section-size:clamp(32px,calc(22.14px + 2.63vw),60px);
 --type-section-leading:1.08;
 --type-section-tracking:-.035em;
 --type-body-size:18px;
 --type-body-leading:1.65;
 --type-paragraph-gap:1.2em;
}
/* Only the true face is used when a component calls for display italic. */
:where(.editorial-hero,.blog-editorial-hero,.about-intro,.music-heading,.restaurant-detail,.not-found-page,#restaurant-grid){font-synthesis:none}
.section-head h2,h2.display{
 font:500 var(--type-section-size)/var(--type-section-leading) var(--font-display);
 letter-spacing:var(--type-section-tracking);text-transform:none;font-style:normal;
}
#main:has(#filters) .page-head h1.guide-heading{font-style:normal;text-transform:none}
.home-guide-about-band .home-food-guide h2{
 font-family:var(--font-display);font-weight:500;font-style:normal;
 font-size:var(--type-section-size);line-height:var(--type-section-leading);
 letter-spacing:var(--type-section-tracking);text-transform:none;
 margin-bottom:24px;
}
#restaurant-grid .card-name{font-family:var(--font-display);font-weight:500;font-style:normal}
.map-list strong,.map-popup h3{font-family:var(--font-display);font-weight:500;font-style:normal}
#restaurant-grid .card-meta,.restaurant-detail .detail-metadata{
 font:400 12px/1.5 var(--font-body);letter-spacing:0;text-transform:none;
}
.restaurant-detail .detail-metadata{margin-top:16px}
/* Small editorial labels and functional labels share a single role. */
.eyebrow,.editorial-home .home-label,
.home-discovery-band .current-meta .home-label,
.blog-landing .eyebrow,
#restaurant-grid .order-label,
.restaurant-detail .detail-main h2,.restaurant-detail .detail-aside dt,
#filters.guide-utility .filter-grid>label{
 font:var(--label-font);letter-spacing:var(--label-tracking);text-transform:uppercase;
}
/* The paper tab geometry and READ THE POST treatment are intentionally retained. */
.journal-folder-tab,.journal-folder-meta .eyebrow,.journal-folder-meta .blog-meta{
 font:var(--label-font);letter-spacing:var(--label-tracking);text-transform:uppercase;
}
.restaurant-detail .detail-main .take,.about-intro-description,
.blog-post-body.story p,.home-enabler p{
 font:400 var(--type-body-size)/var(--type-body-leading) var(--font-body);letter-spacing:0;
}
.about-intro-description p+p{margin-top:var(--type-paragraph-gap)}
.blog-post-body.story p{margin-top:0;margin-bottom:var(--type-paragraph-gap)}
.blog-post-body.story p:last-child{margin-bottom:0}
/* Protected compact component: do not inherit the larger shared label token. */
.about-details h2{font:500 11px/1.5 var(--font-body);letter-spacing:.15em}
/* Playlist numbers/durations are branded microtype, not generic utility labels. */
.music-track-number,.music-track-time{font:500 11px/1.5 var(--font-body)}
/* 404 adopts existing faces without changing its established size or composition. */
.not-found-page .page-head h1{font-family:var(--font-display);font-weight:500}
.not-found-page .page-head h1 em{font-family:var(--font-display);font-weight:500;font-style:italic}
@media(min-width:721px){
 .blog-editorial-hero h1{font-size:clamp(90px,12.8vw,165px)}
}
/* Avoid a 43px-to-34px folder title drop at 720/721 without changing its grid. */
@media(min-width:721px) and (max-width:1048px){
 .journal-folder h2{font-size:43px}
}
@media(max-width:720px){
 :root{--type-body-size:17px}
 .home-guide-about-band .home-food-guide h2{margin-bottom:20px}
}