/* ============================================================================
   Interior page shell, shared by workplace, topic and section pages.
   system.css is the global layer (type, bands, buttons, chrome); this is the
   layer below it: the parts every interior page has regardless of its kind.
   Page-kind files (workplace.css, topic.css, section.css) add only what is
   particular to that kind, so pages share a system without flattening into one
   template (DESIGN-HANDOFF.md).
   ========================================================================= */

.page-head{padding-top:40px;padding-bottom:70px}
.page-head .label{color:var(--muted)}
.page-head h1{font:400 clamp(52px,6.6vw,96px)/1.02 var(--body);letter-spacing:-.06em;margin-top:26px}
.page-head>p:not(.label){font-size:19px;line-height:1.6;max-width:520px;color:var(--muted);margin-top:30px}

.page-section{padding-block:70px 80px}
.page-section h2{font:400 clamp(32px,3.6vw,52px)/1.1 var(--body);letter-spacing:-.05em;margin-top:22px}
.page-section>p:not(.label){max-width:560px;font-size:17px;line-height:1.75;margin-top:26px}

/* An image position that is not yet filled. The production images for these
   pages are still in the queue (phase `generating`), and this build must not
   substitute guessed imagery, so the slot states its declared desktop ratio and
   the section it belongs to rather than showing a stand-in picture. */
.slot{
  border:1px solid var(--rule-dark);
  display:flex;align-items:flex-end;padding:14px 16px;
  color:var(--muted);
}
.slot span{font:400 var(--label-size)/1.5 var(--label-face);letter-spacing:.13em;text-transform:uppercase;opacity:.75}
.band-cream .slot{border-color:#C3B8A6}
.band-cream .slot span{color:var(--ink-on-bronze)}

@media(max-width:900px){
  .page-head{padding-bottom:54px}
  .page-head h1{font-size:62px}
  .page-section{padding-block:54px 60px}
}
@media(max-width:650px){
  .page-head{padding-top:26px;padding-bottom:42px}
  .page-head h1{font-size:clamp(46px,12vw,62px);margin-top:20px}
  .page-head>p:not(.label){font-size:17px;margin-top:24px}
  .page-section{padding-block:42px 48px}
  .page-section>p:not(.label){font-size:16px;margin-top:22px}
}