/* Shared page frame and masthead. Page-specific content keeps its own layout. */
:root {
  --page-content-width: 1280px;
  --page-gutter: 42px;
  --page-top-space: 40px;
  --page-title-size: clamp(32px, 3.4vw, 44px);
}
#main {
  width: 100%; max-width: calc(var(--page-content-width) + 2 * var(--page-gutter));
  margin-inline: auto; padding: var(--page-top-space) var(--page-gutter) 64px;
}
#main > :is(.overview-page, .reading-room, .ideas-page, .article-page, .community-page,
  .clue-page, .interview-room, .transcript-review, .company-research,
  .account-archive, .connections-page, .bridge-room) {
  width: 100%; max-width: none; margin-inline: 0; margin-top: 0; padding-top: 0; padding-inline: 0;
}
#main h1 {
  font-family: var(--display); font-size: var(--page-title-size); font-weight: 550;
  line-height: 1.12; letter-spacing: -.035em; color: var(--text);
  text-align: left; text-wrap: balance; overflow-wrap: anywhere; max-width: 100%;
}
#main .page-header {
  display: block; position: relative; width: 100%; max-width: none;
  margin: 0 0 24px; padding: 0; border: 0; background: none;
}
#main .page-header-copy { width: 100%; max-width: none; min-width: 0; }
#main .page-header .page-header-kicker {
  display: block; position: static; width: auto; max-width: none;
  margin: 0 0 12px; padding: 0; color: var(--muted);
  font: 12px/1.5 var(--mono); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase;
}
#main .page-header .page-header-kicker::before { content: none; }
#main .page-header .page-header-title { margin: 0; padding: 0; max-width: 100%; }
#main .page-header .page-header-description {
  display: block; position: static; width: auto; max-width: 74ch;
  margin: 16px 0 0; padding: 0; color: var(--muted);
  font: 400 16px/1.65 var(--display); letter-spacing: normal; text-wrap: pretty;
}
#main .page-header-meta {
  margin-top: 16px; color: var(--muted); font: 12px/1.6 var(--display);
  font-variant-numeric: tabular-nums;
}
#main .page-header-meta p { margin: 0; font: 12px/1.6 var(--display); }
#main .page-header-meta .community-intro-bottom { margin: 0; }
#main .page-header-meta .clue-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
#main .page-header-meta .clue-stats > div { flex-direction: row-reverse; align-items: baseline; gap: 6px; }
#main .page-header-meta .clue-stats :is(dt,dd) { margin: 0; font: 12px/1.6 var(--display); letter-spacing: normal; }

/* Page tabs always follow the masthead, with one quiet underline treatment. */
#main :is(.page-header + .ui-section-switch, .reading-view-nav, .community-collections,
  .account-tabs, .clue-collection-nav, .bridge-primary-nav) {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 0 24px;
  width: 100%; max-width: 100%; min-width: 0;
  margin: 0 0 24px; padding: 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; overflow-x: auto; scrollbar-width: thin;
}
#main :is(.reading-view-nav, .community-collections, .account-tabs, .clue-collection-nav,
  .bridge-primary-nav) > :is(a, button),
#main .reading-view-nav summary {
  display: inline-flex; align-items: center; justify-content: flex-start;
  flex: 0 0 auto; gap: 8px; min-height: 44px; margin: 0; padding: 10px 0;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--muted); box-shadow: none;
  font: 500 13px/1.5 var(--display); text-decoration: none; white-space: nowrap;
}
#main :is(.reading-view-nav, .community-collections, .account-tabs, .clue-collection-nav,
  .bridge-primary-nav) > :is([aria-current="page"], [aria-pressed="true"], .active) {
  color: var(--text); background: transparent; border-color: var(--lime);
}
#main :is(.reading-view-nav, .community-collections, .account-tabs, .clue-collection-nav,
  .bridge-primary-nav) > :is(a, button):hover { color: var(--lime); background: transparent; }
#main .page-header + .ui-section-switch wa-button { flex: 0 0 auto; min-height: 44px; }
#main .page-header + .ui-section-switch wa-button::part(button) {
  min-height: 44px; padding: 10px 0; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: transparent; color: var(--muted); box-shadow: none;
  font: 500 13px/1.5 var(--display);
}
#main .page-header + .ui-section-switch wa-button::part(label) { white-space: nowrap; }
#main .page-header + .ui-section-switch wa-button.selected::part(button) {
  color: var(--text); border-bottom-color: var(--lime); background: transparent;
}
#main .page-header + .ui-section-switch wa-button:hover::part(button) { color: var(--lime); }
#main :is(.page-header + .ui-section-switch, .reading-view-nav, .community-collections,
  .account-tabs, .clue-collection-nav, .bridge-primary-nav) :focus-visible {
  outline: 2px solid var(--lime); outline-offset: -3px;
}
@media (max-width: 1100px) { :root { --page-gutter: 28px; } }
@media (max-width: 700px) {
  :root { --page-gutter: 20px; --page-top-space: 28px; }
  #main { padding-bottom: 48px; }
  #main .page-header .page-header-description { font-size: 15px; }
  #main :is(.page-header + .ui-section-switch, .reading-view-nav, .community-collections,
    .account-tabs, .clue-collection-nav, .bridge-primary-nav) { gap: 0 20px; }
}

/* Long source identifiers should wrap inside the shared mobile page frame. */
#main .chronicle .chronology-card { overflow-wrap: anywhere; }
#main .timeline-filters :is(label, input) { min-width: 0; max-width: 100%; }