/* Page names share a calm, readable hierarchy; recipe titles keep their own layout. */
.page .page-title.serif {
  font-size:clamp(30px,3vw,40px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.04em;
  margin:0 0 10px;
  padding:0;
  background:transparent;
  border:0;
  text-wrap:balance;
}
.page .page-title + p {
  margin-top:0;
  font-size:13px;
  line-height:1.6;
}
.page .editor-title.page-title {margin-top:26px}
.page .showdown-intro {margin-bottom:24px}

/* Main navigation pages share one fluid frame; grids add columns as space grows. */
.workspace>.app-page {width:100%;max-width:none!important;min-width:0}
.workspace>.app-page .recipes-grid {grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.workspace>.people-page.app-page .people-grid {grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.workspace>.passport-page.app-page .passport-grid {grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.app-page :is(.recipes-grid>.empty-state,.people-grid>.cooks-empty):only-child {grid-column:1/-1}
.app-page .activity-card :is(.activity-action,.activity-note,.activity-change) {max-width:75ch}
@media(min-width:901px){
 .workspace>.activity-page.app-page .community-layout {grid-template-columns:minmax(0,960px) clamp(245px,22vw,300px);justify-content:start}
}

/* Main sections share Discover's lighter panel, with ink on a clear text surface. */
:root {--page-banner-bg:#e4ebdc;--page-banner-line:#d4dfcc;--page-banner-copy:#526750}
html[data-theme="dark"] {--page-banner-bg:#304936;--page-banner-line:var(--theme-line);--page-banner-copy:var(--theme-muted)}
html[data-theme] body .page .page-banner {
  min-width:0;padding:26px 30px;margin:0 0 26px;
  background:var(--page-banner-bg)!important;border:1px solid var(--page-banner-line);
  border-radius:20px;box-shadow:inset 3px 0 0 var(--highlight-edge);overflow:hidden;
}
.page .page-banner>* {min-width:0}
html[data-theme] body .page .page-banner .page-title {margin:0 0 10px;color:var(--ink);background:transparent}
html[data-theme] body .page .page-banner p {font-size:13px;line-height:1.6;color:var(--page-banner-copy);margin:0;max-width:74ch}
html[data-theme] body .page .discover-intro.page-banner p {margin-bottom:14px}
html[data-theme] body .page .page-banner .page-title:last-child {margin-bottom:0}
.page .community-head.page-banner::after {display:none}
.page .showdown-intro.page-banner {max-width:none}
.page .editor-banner {margin-top:24px}
.page .passport-banner {display:flex;align-items:center;justify-content:space-between;gap:24px}
.page .passport-banner .page-banner-copy {max-width:680px}
.page .passport-banner .btn {margin-top:16px}
.page .page-banner-portrait {flex:none;padding:8px}
.page .page-banner-portrait .avatar {width:76px;height:76px;min-width:76px;font-size:24px;outline:4px solid var(--highlight-soft)}
@media(max-width:850px){html[data-theme] body .page .page-banner {padding:24px}}
@media(max-width:600px){
 html[data-theme] body .page .page-banner {padding:21px 20px;margin-bottom:20px}
 html[data-theme] body .page .page-banner p {font-size:12px}
 .page .passport-banner {gap:16px;flex-wrap:wrap}
 .page .page-banner-portrait {display:none}
}