/* Shared framing for the introduction, listening, viewing, concert and places pages. */
:root{--site-paper:#f6f6ff;--site-ink:#292646;--site-muted:#5a5570;--site-blue:#4743d4;--site-gold:#ffdf76;--site-line:#d3cde5;--site-serif:Georgia,'Times New Roman',serif;--site-mono:ui-monospace,SFMono-Regular,Menlo,monospace}
body:has(.archive-page){background:var(--site-paper);color:var(--site-ink);font-family:Arial,Helvetica,sans-serif}
.archive-page.site-shell,.archive-page.shell{max-width:1440px;margin:0 auto;padding:0 64px}
.archive-page .masthead{height:auto;min-height:114px;padding:16px 0;border-bottom:1px solid #303478}
.archive-page .opening,.archive-page .heath-intro{padding:48px 0 44px;align-items:start}
.archive-page .concert-page{padding:48px 0 60px}
.archive-page .opening{grid-template-columns:minmax(0,1fr) 330px;gap:64px}
.archive-page .heath-intro{min-height:calc(100svh - 230px)}
.archive-page .case-heading{display:flex;align-items:center;gap:14px;margin:0;font:600 12px/1.5 var(--site-mono);letter-spacing:1px;color:var(--site-muted);text-transform:uppercase}
.archive-page .case-badge{display:inline-block;flex:none;white-space:nowrap;background:var(--site-gold);border-radius:999px;padding:6px 10px;color:#4c3e60}
.archive-page .case-description{min-width:0}
.archive-page h1.page-title{font:400 clamp(44px,4.7vw,66px)/1.06 var(--site-serif);letter-spacing:-2px;color:var(--site-ink);margin:24px 0 22px;max-width:100%;text-wrap:balance}
.archive-page h1.page-title>em,.archive-page h1.page-title>span{color:var(--site-blue);font-style:italic;font-weight:400}
.archive-page .heath-intro h1.page-title>span{color:#ec6a44;font-style:normal}
.archive-page .concert-page h1.page-title{max-width:900px}
.archive-page .introduction,.archive-page .intro,.archive-page .heath-intro-copy>p{font-size:17px;line-height:1.7;color:var(--site-muted);margin:0 0 22px;max-width:660px}
.archive-page .eyebrow{font-family:var(--site-mono);color:var(--site-muted)}
.archive-page .section-heading h2{font:400 32px/1.2 var(--site-serif);letter-spacing:-.7px;color:#353267;margin:8px 0 0}
.archive-page .subject,.archive-page .subject-file{background:#ffe68c;border:1px solid #d1b963;border-radius:22px;padding:14px;box-shadow:5px 7px 0 #e7cef2;transform:rotate(1.4deg);align-self:start}
.archive-page .portrait,.archive-page .portrait-wrap{border-radius:14px;overflow:hidden}
.archive-page .subject-caption strong,.archive-page .photo-caption strong{font:400 25px/1.2 var(--site-serif);color:var(--site-ink)}
.archive-page .archive-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;border-top:1px solid var(--site-line);padding:24px 0 28px;color:var(--site-muted);font:13px/1.5 Arial,Helvetica,sans-serif}
.archive-page .archive-footer>span{font:700 12px/1.5 Arial,Helvetica,sans-serif;color:#514a70;letter-spacing:.4px}
.archive-page .archive-footer .site-credit{font:italic 13px/1.5 var(--site-serif);margin:0;color:var(--site-muted)}
.archive-page .archive-footer a,.archive-page .archive-footer button{font:13px/1.5 Arial,Helvetica,sans-serif;color:var(--site-muted)}
.archive-page .archive-footer #snapshot{flex-basis:100%;font:12px/1.5 Arial,Helvetica,sans-serif;margin:0;order:2}
@media(min-width:1400px){.archive-page .opening{grid-template-columns:minmax(0,1fr) 370px}}
@media(max-width:1100px){.archive-page.site-shell,.archive-page.shell{padding:0 32px}.archive-page .opening{grid-template-columns:minmax(0,1fr) 290px;gap:32px}.archive-page .case-heading{font-size:11px;gap:10px}}
@media(max-width:760px){.archive-page.site-shell,.archive-page.shell{padding:0 20px}.archive-page .masthead{min-height:0}.archive-page .opening,.archive-page .heath-intro{padding:32px 0 36px;grid-template-columns:1fr;gap:30px}.archive-page .concert-page{padding:32px 0 40px}.archive-page .heath-intro{min-height:0}.archive-page .case-heading{flex-wrap:wrap;font-size:10px;gap:8px 10px;letter-spacing:.7px}.archive-page .case-badge{padding:6px 10px}.archive-page h1.page-title{font-size:clamp(40px,9vw,58px);line-height:1.08;letter-spacing:-1.5px;margin:20px 0}.archive-page .introduction,.archive-page .intro,.archive-page .heath-intro-copy>p{font-size:16px;line-height:1.7;margin-bottom:20px}.archive-page .subject,.archive-page .subject-file{max-width:420px;width:100%;margin:0 auto}.archive-page .section-heading h2{font-size:28px}.archive-page .archive-footer{gap:14px;padding:22px 0}.archive-page .archive-footer>span{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Compact phone header and a portrait in the first screenful. */
.archive-mobile-label,.intro-mobile-portrait{display:none}
@media(max-width:760px){
  .archive-page .masthead{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0}
  .archive-page .masthead .media-switch{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);width:100%;min-width:0;gap:3px;padding:4px;border-radius:14px}
  .archive-page .media-switch a{min-width:0;min-height:56px;align-items:center;gap:5px;padding:8px 3px;border-radius:10px}
  .archive-page .media-switch .archive-label{display:none}
  .archive-page .media-switch .archive-mobile-label{display:block;font:700 12px/1.2 Arial,Helvetica,sans-serif;text-align:center;white-space:nowrap;text-transform:uppercase}
  .archive-page .media-switch .archive-number{font:11px/1 var(--site-mono);letter-spacing:1px}
  .archive-page .masthead .site-actions{display:flex!important;width:100%;min-width:0;justify-content:space-between;align-items:center;gap:8px;flex-wrap:nowrap;margin:0}
  .archive-page .site-actions>a{font-size:12px;min-height:44px;display:inline-flex;align-items:center}
  .archive-page .site-actions .recommend-nav{flex:0 1 auto;max-width:none;width:auto;min-width:0;min-height:44px;height:auto;padding:10px 12px;gap:6px;border-radius:999px;white-space:normal;font:13px/1.3 Arial,Helvetica,sans-serif;overflow:visible}
  .archive-page .site-actions .recommend-nav>span{flex:none;font:22px/16px Arial,Helvetica,sans-serif}
  .archive-page .heath-intro,.archive-page .opening{padding-top:24px}
  .archive-page .concert-page{padding-top:24px}
  .archive-page .intro-title-row{display:flex;align-items:center;gap:16px;margin:20px 0 22px}
  .archive-page .intro-title-row h1.page-title{flex:1;min-width:0;margin:0;text-wrap:initial}
  .archive-page .intro-mobile-portrait{display:block;flex:0 0 clamp(96px,29vw,128px);margin:0;padding:5px;background:#fffdf8;border:1px solid #d8cddc;border-radius:13px;box-shadow:3px 4px 0 #ded5e6;transform:rotate(3deg)}
  .archive-page .intro-mobile-portrait img{display:block;width:100%;height:auto;border-radius:8px}
  .archive-page .heath-intro-photos{grid-template-columns:1fr 1fr;grid-template-rows:auto;max-width:350px;gap:16px;padding:6px 12px 10px}
  .archive-page .heath-intro-photos .intro-photo-delight{display:none}
  .archive-page .heath-intro-photos .intro-photo-stairs,.archive-page .heath-intro-photos .intro-photo-dubious{width:100%;align-self:center}
}

@media(max-width:400px){.archive-page .media-switch .archive-mobile-label{font-size:11px}}

/* Six archives, retaining readable labels on phones. */
.masthead .media-switch,.archive-page .masthead .media-switch{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:760px){.masthead .media-switch,.archive-page .masthead .media-switch{grid-template-columns:repeat(3,minmax(0,1fr))}.media-switch a,.archive-page .media-switch a{min-height:48px}}