/* ===========================================================================
   Sound Economics, Third Edition.
   Palette from the Constructivist board: navy field, gold arc, forest green,
   ivory paper. Three faces only:
     Oswald             hero title, small labels, buttons
     Cormorant Garamond ITALIC ONLY: names of works, Suzie's name, quotes
     Quattrocento Sans  body (the site's own face, served by the theme)
   Vertical rhythm is tight: sections 48 to 88px, rows 84 to 96px.
   =========================================================================== */
.hg-se-page {
	--se-navy:#0F1E2E; --se-navy-2:#0B1621; --se-green:#1E4A3F; --se-green-2:#17362E;
	--se-gold:#C9A85A; --se-gold-2:#B8963F; --se-ivory:#F2EFE6; --se-paper:#F6F2EA;
	--se-ink:#1A2328; --se-ink-soft:#5B6A72; --se-ink-light:#A9B6C2;
	--se-line:rgba(15,30,46,.12); --se-line-gold:rgba(201,168,90,.35);
	--se-osw:'Oswald',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	--se-jost:'QuattrocentoSans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	--se-cg:'Cormorant Garamond',Georgia,'Times New Roman',serif;
	--se-pad:clamp(48px,6.5vw,88px);
}
.hg-se-page .se, .hg-se-page .se-ded, .hg-se-page .se-sec { font-family:var(--se-jost); color:var(--se-ink); line-height:1.55; }
.hg-se-page .se *, .hg-se-page .se-sec *, .hg-se-page .se-ded * { box-sizing:border-box; }

/* ── Shared atoms ─────────────────────────────────────────────────────── */
.se-wrap { max-width:1120px; margin:0 auto; padding:0 clamp(16px,5vw,48px); }
.se-wrap--narrow { max-width:820px; }
.se-center { text-align:center; }
.se-label { font-family:var(--se-osw); font-weight:500; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--se-green); margin:0 0 14px; display:flex; align-items:center; gap:12px; }
.se-label::before { content:''; width:24px; height:1px; background:currentColor; flex:none; opacity:.8; }
.se-label--gold { color:var(--se-gold); }
.se-label--center { justify-content:center; }
.se-label--center::after { content:''; width:24px; height:1px; background:currentColor; flex:none; opacity:.8; }
.se-rule { display:block; width:44px; height:1px; background:var(--se-gold); margin:18px 0; }
.se-rule--center { margin-left:auto; margin-right:auto; }
.se-h2 { font-family:var(--se-osw); font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(30px,3.6vw,44px); line-height:1.05; margin:0 0 14px; color:var(--se-navy); }
.se-h3 { font-family:var(--se-osw); font-weight:500; text-transform:uppercase; letter-spacing:.2em; font-size:12px; color:var(--se-ink-soft); margin:clamp(32px,4vw,44px) 0 18px; padding-top:18px; border-top:1px solid var(--se-line); }
.se-head { max-width:760px; margin-bottom:clamp(20px,3vw,32px); }
.se-head--light .se-h2 { color:var(--se-ivory); }
.se-link { color:var(--se-green); text-decoration:underline; text-decoration-color:var(--se-gold); text-underline-offset:4px; text-decoration-thickness:1px; font-weight:500; font-size:15px; }
.se-link:hover, .se-link:focus-visible { color:var(--se-navy); text-decoration-color:currentColor; }
.se-link--light { color:var(--se-ivory); }
.se-link--light:hover, .se-link--light:focus-visible { color:var(--se-gold); }

.se-sec { padding:var(--se-pad) 0; position:relative; }
.se-sec--tight { padding:clamp(36px,4.5vw,56px) 0; }
.se-sec--paper { background:var(--se-paper); }
.se-sec--ivory { background:var(--se-ivory); }
.se-sec--white { background:#fff; }
.se-sec--navy { background:var(--se-navy); color:var(--se-ivory); }
.se-sec--navy2 { background:var(--se-navy-2); color:var(--se-ivory); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.se__cta { display:inline-flex; align-items:center; gap:10px; font-family:var(--se-osw); font-weight:500; font-size:13px; letter-spacing:.18em; text-transform:uppercase; background:var(--se-green); color:var(--se-ivory); padding:14px 24px; border-radius:2px; text-decoration:none; transition:background .2s, color .2s; }
.se__cta:hover, .se__cta:focus-visible { background:var(--se-green-2); color:var(--se-ivory); }
.se__cta:focus-visible { outline:3px solid var(--se-gold); outline-offset:3px; }
.se__cta svg { width:13px; height:13px; }
.se__cta--ghost { background:transparent; color:var(--se-ivory); box-shadow:inset 0 0 0 1px rgba(242,239,230,.5); }
.se__cta--ghost:hover, .se__cta--ghost:focus-visible { background:rgba(242,239,230,.08); box-shadow:inset 0 0 0 1px var(--se-gold); }
.se__cta--gold { background:var(--se-gold); color:var(--se-navy); }
.se__cta--gold:hover, .se__cta--gold:focus-visible { background:var(--se-gold-2); color:var(--se-navy); }
.se__cta--navy { background:var(--se-navy); }
.se__cta--navy:hover, .se__cta--navy:focus-visible { background:var(--se-navy-2); }

/* ===========================================================================
   Hero. Artwork full bleed; type in the navy clear zone.
   =========================================================================== */
.se { position:relative; isolation:isolate; overflow:hidden; background:var(--se-navy); color:var(--se-ivory); }
.se__bg { position:absolute; inset:0; z-index:0; }
.se__bg picture { display:block; width:100%; height:100%; }
.se__bg img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.se__haze { position:absolute; inset:0; z-index:2; pointer-events:none;
	--haze-1:linear-gradient(to bottom,#000 0 46%,transparent 64%);
	--haze-2:linear-gradient(to bottom,#000 0 34%,transparent 50%);
	--haze-3:linear-gradient(to bottom,#000 0 18%,transparent 36%); }
@media (min-width:1000px) {
	.se__haze { --haze-1:linear-gradient(to right,#000 0 46%,transparent 56%);
		--haze-2:linear-gradient(to right,#000 0 34%,transparent 47%);
		--haze-3:linear-gradient(to right,#000 0 20%,transparent 35%); }
}
.se__haze::after { content:''; position:absolute; inset:0; display:block; pointer-events:none;
	background:linear-gradient(to bottom, rgba(15,30,46,0) 28%, rgba(15,30,46,.72) 52%, rgba(15,30,46,.94) 72%, #0F1E2E 100%); }
@media (min-width:1000px) { .se__haze::after { display:none; } }
.se__haze span { position:absolute; inset:0; display:block; }
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
	.se__haze span:nth-child(1) { -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); -webkit-mask-image:var(--haze-1); mask-image:var(--haze-1); }
	.se__haze span:nth-child(2) { -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); -webkit-mask-image:var(--haze-2); mask-image:var(--haze-2); }
	.se__haze span:nth-child(3) { -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); -webkit-mask-image:var(--haze-3); mask-image:var(--haze-3); }
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
	.se__haze span:nth-child(1) { background:var(--se-navy); opacity:.34; -webkit-mask-image:var(--haze-2); mask-image:var(--haze-2); }
}

.se__grid { position:relative; z-index:4; min-height:min(78vh,780px); display:flex; align-items:flex-start; padding:clamp(28px,4.5vw,60px) clamp(16px,6vw,120px); }
.se__content { max-width:min(100%,600px); }
@media (min-width:1000px) {
	.se__grid { align-items:center; }
	.se__content { max-width:44%; }
	.se--art .se__grid { min-height:clamp(560px,52vw,820px); }
}
@media (max-width:999px) { .se--art .se__grid { min-height:min(170vw,720px); } }

.se__eyebrow { font-family:var(--se-osw); font-weight:500; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--se-gold); margin:0 0 clamp(12px,1.6vw,18px); }
.se__title { margin:0; color:var(--se-ivory); font-family:var(--se-osw); font-weight:700; text-transform:uppercase; font-size:clamp(50px,8vw,112px); line-height:.9; letter-spacing:-.018em; }
.se__edition { font-family:var(--se-osw); font-weight:500; font-size:clamp(12px,1vw,14px); letter-spacing:.24em; text-transform:uppercase; color:var(--se-ink-light); margin:clamp(12px,1.6vw,18px) 0 0; }
.se__edition span { color:var(--se-gold); margin:0 .35em; }
.se__rule { display:block; width:44px; height:1px; background:var(--se-gold); margin:clamp(16px,2.4vw,24px) 0; }
.se__premiere { font-family:var(--se-jost); font-weight:400; font-size:clamp(17px,1.5vw,20px); line-height:1.45; color:var(--se-ivory); margin:0 0 clamp(12px,1.8vw,18px); }
.se__premiere em { font-family:var(--se-cg); font-style:italic; font-weight:500; font-size:1.35em; color:var(--se-gold); }
.se__date { margin:0; font-family:var(--se-osw); font-weight:500; font-size:clamp(19px,2vw,26px); letter-spacing:.04em; text-transform:uppercase; color:var(--se-ivory); }
.se__meta { margin:6px 0 0; font-size:clamp(14px,1.1vw,15px); color:var(--se-ink-light); }
.se__meta span { color:var(--se-gold); margin:0 .35em; }
.se__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(20px,2.6vw,28px); }

.se__draw { position:absolute; inset:0; z-index:1; pointer-events:none; }
.se__draw > * { position:absolute; }
.se__d1 { width:min(46vw,430px); aspect-ratio:1; border-radius:50%; background:var(--se-gold); right:24%; top:6%; }
.se__d2 { inset:0; background:#D9D4C6; clip-path:polygon(66% 0,100% 0,100% 86%,84% 100%,34% 100%); }
.se__d3 { inset:0; background:var(--se-green); clip-path:polygon(34% 100%,58% 62%,72% 100%); }

/* ===========================================================================
   Dedication band. Suzie's name is the one place the serif goes large.
   =========================================================================== */
.se-ded { background:var(--se-navy-2); color:var(--se-ivory); padding:clamp(40px,5.5vw,72px) clamp(16px,6vw,120px); text-align:center; border-top:1px solid var(--se-line-gold); }
.se-ded__in { max-width:640px; margin:0 auto; }
.se-ded .se-label { justify-content:center; }
.se-ded .se-label::after { content:''; width:24px; height:1px; background:currentColor; flex:none; opacity:.8; }
.se-ded__role { font-family:var(--se-osw); font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--se-ink-light); margin:12px 0 0; line-height:1.7; }
.se-ded__text { font-size:clamp(15px,1.15vw,17px); line-height:1.65; color:#D5DBE1; margin:0 0 16px; }

/* ===========================================================================
   Programme: a title page inside a double hairline.
   =========================================================================== */
.se-prog { padding-bottom:clamp(36px,5vw,64px); }
.se-prog__ded { max-width:640px; margin:0 auto clamp(26px,3.5vw,40px); text-align:center; font-size:clamp(15px,1.15vw,17px); line-height:1.6; color:#D5DBE1; }
.se-prog__ded em { font-family:var(--se-cg); font-style:italic; font-weight:500; font-size:1.5em; color:var(--se-ivory); line-height:1; }
.se-frame { max-width:680px; margin:0 auto; text-align:center; position:relative; padding:clamp(28px,4vw,44px) clamp(20px,4vw,40px); border-top:1px solid var(--se-gold); border-bottom:1px solid var(--se-gold); }
.se-frame::before, .se-frame::after { content:''; position:absolute; left:0; right:0; height:1px; background:var(--se-gold); opacity:.7; }
.se-frame::before { top:-5px; } .se-frame::after { bottom:-5px; }
.se-frame__composer { font-family:var(--se-osw); font-weight:500; text-transform:uppercase; font-size:14px; letter-spacing:.24em; color:var(--se-gold); margin:0; }
.se-frame__work { font-family:var(--se-cg); font-style:italic; font-weight:400; font-size:clamp(46px,6.5vw,78px); line-height:1; margin:6px 0 14px; color:var(--se-ivory); }
.se-frame__meta { font-family:var(--se-jost); font-size:15px; color:rgba(242,239,230,.8); margin:0; }
.se-frame__meta > span[aria-hidden] { color:var(--se-gold); margin:0 .4em; }
.se-frame__premiere { font-family:var(--se-osw); font-weight:500; text-transform:uppercase; font-size:12px; letter-spacing:.18em; color:var(--se-gold); }
.se-frame__premiere sup, .se-frame__note sup { color:var(--se-gold); font-size:.8em; margin-right:2px; }
.se-frame__duration { font-family:var(--se-jost); font-style:italic; font-size:15px; color:rgba(242,239,230,.6); margin:8px 0 0; }
.se-frame__performers { margin:clamp(18px,2.4vw,26px) 0 0; font-family:var(--se-osw); font-weight:500; text-transform:uppercase; letter-spacing:.2em; font-size:14px; color:var(--se-ivory); line-height:1.8; }
.se-frame__performers span { display:block; font-family:var(--se-jost); font-weight:400; text-transform:none; letter-spacing:0; font-size:15px; color:rgba(242,239,230,.75); }
.se-frame__note { margin:clamp(14px,2vw,20px) 0 0; font-family:var(--se-jost); font-style:italic; font-size:14px; color:rgba(242,239,230,.55); }

/* ===========================================================================
   How this concert came to be. Five events on a five-line staff, one note
   head each. Date above, event on the line. Prose beside it.
   =========================================================================== */
.se-story { color:var(--se-ink); background:var(--se-paper); border-bottom:1px solid var(--se-line-gold); }
/* The section is the sheet itself: the manuscript image full bleed under a
   light ivory wash so type stays legible over the notation. */
.se-story::before { content:''; position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(rgba(246,242,234,.74), rgba(246,242,234,.74)), var(--se-paper-img,none) center/cover no-repeat; }
.se-story__grid { position:relative; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,72px); align-items:start; }
@media (max-width:900px) { .se-story__grid { grid-template-columns:1fr; gap:28px; } }

.se-staff { list-style:none; margin:12px 0 0; padding:0 0 0 clamp(30px,3.4vw,44px); position:relative; }
/* The theme sets display:flex on list items with a heavier selector; a flex
   li splits text and <em> into separate items, so these are pinned. */
.hg-se-page .se-staff .se-staff__li { display:block; position:relative; min-height:88px; padding:26px 0 14px; border-bottom:1px solid rgba(15,30,46,.28); font-family:var(--se-jost); font-weight:400; font-size:clamp(16px,1.25vw,18px); line-height:1.45; color:var(--se-navy); }
.hg-se-page .se-staff .se-staff__li:first-child { border-top:1px solid rgba(15,30,46,.28); }
.hg-se-page .se-staff .se-staff__li em { display:inline; font-family:var(--se-cg); font-style:italic; font-weight:500; font-size:1.2em; color:var(--se-green); }
.se-staff__note { position:absolute; left:calc(-1 * clamp(30px,3.4vw,44px) + 3px); bottom:-7px; width:17px; height:12px; border-radius:50%; background:var(--se-navy); transform:rotate(-22deg); box-shadow:0 0 0 3px var(--se-paper); }
.se-staff__li--open .se-staff__note { background:transparent; border:2px solid var(--se-navy); }
.se-staff__li--final .se-staff__note { background:var(--se-gold); box-shadow:0 0 0 3px var(--se-paper), 0 0 0 5px var(--se-navy); }
.se-staff__li::after { content:attr(data-when); position:absolute; left:0; top:8px; font-family:var(--se-osw); font-weight:500; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--se-green); }

.se-story__prose { font-size:clamp(15.5px,1.15vw,17px); line-height:1.65; color:var(--se-ink); max-width:62ch; padding-top:clamp(0px,1.5vw,30px); }
.se-story__prose p { margin:0 0 1.1em; }
.se-story__prose em { color:var(--se-navy); }
.se-story__pull { font-family:var(--se-cg); font-style:italic; font-weight:500; font-size:clamp(21px,2vw,27px); line-height:1.3; color:var(--se-navy); padding:4px 0 4px clamp(16px,2vw,22px); border-left:1px solid var(--se-gold); margin:1.2em 0 !important; }

/* ===========================================================================
   About the artists: an ivory programme insert. Roman numerals anchor each
   entry; the name runs into the paragraph in small caps, the role in italic.
   The engraving is not a placed picture: it is masked so it dissolves into
   the paper from its top and left edges, and multiplied so its own cream
   ground disappears.
   =========================================================================== */
.se-artists { overflow:hidden; }
.se-artists__engraving { position:absolute; right:-14%; bottom:-12%; width:min(68vw,880px); opacity:.42; pointer-events:none; mix-blend-mode:multiply;
	-webkit-mask-image:radial-gradient(ellipse 70% 75% at 68% 78%, #000 25%, rgba(0,0,0,.6) 50%, transparent 82%);
	mask-image:radial-gradient(ellipse 70% 75% at 68% 78%, #000 25%, rgba(0,0,0,.6) 50%, transparent 82%); }
.se-artists__engraving--left { right:auto; left:-10%; bottom:-14%; width:min(34vw,440px); opacity:.36;
	-webkit-mask-image:radial-gradient(ellipse 72% 78% at 38% 80%, #000 20%, rgba(0,0,0,.55) 50%, transparent 82%);
	mask-image:radial-gradient(ellipse 72% 78% at 38% 80%, #000 20%, rgba(0,0,0,.55) 50%, transparent 82%); }
@media (max-width:900px) { .se-artists__engraving { width:130vw; right:-40vw; bottom:-12%; opacity:.3; } .se-artists__engraving--left { display:none; } }
.se-artists .se-wrap { position:relative; }
.se-artist { display:grid; grid-template-columns:clamp(48px,6vw,76px) minmax(0,1fr); gap:clamp(14px,2vw,24px); padding:clamp(22px,3vw,32px) 0; border-top:1px solid var(--se-line-gold); }
.se-artist:first-of-type { border-top:0; padding-top:6px; }
.se-artist__num { font-family:var(--se-osw); font-weight:500; font-size:clamp(36px,4.6vw,58px); line-height:.9; color:var(--se-gold); margin-top:-.04em; }
.se-artist__bio { font-family:var(--se-jost); font-size:clamp(15.5px,1.15vw,17px); line-height:1.65; color:var(--se-ink); margin:0 0 10px; max-width:62ch; }
.se-artist__name { font-family:var(--se-osw); font-weight:600; text-transform:uppercase; font-size:1.15em; letter-spacing:.08em; color:var(--se-navy); line-height:1; }
.se-artist__role { font-family:var(--se-jost); font-style:italic; font-weight:400; font-size:1em; color:var(--se-green); margin:0 .25em 0 .2em; }
@media (max-width:640px) {
	.se-artist { grid-template-columns:1fr; gap:4px; }
	.se-artist__num { font-size:34px; }
}

/* ===========================================================================
   The evening.
   =========================================================================== */
.se-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(20px,2.6vw,32px); margin:0 0 clamp(24px,3vw,36px); }
.se-fact dt { font-family:var(--se-osw); font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--se-gold); margin:0 0 8px; padding-bottom:8px; border-bottom:1px solid var(--se-line-gold); }
.se-fact dd { margin:0; font-size:15.5px; line-height:1.6; color:#D5DBE1; }

/* ===========================================================================
   The series and past editions.
   =========================================================================== */
.se-prose { max-width:720px; font-size:clamp(15.5px,1.15vw,17px); line-height:1.65; }
.se-prose p { margin:0 0 1.1em; }
.se-prose__lede { font-family:var(--se-jost); font-weight:400; font-size:clamp(17px,1.4vw,20px); line-height:1.55; color:var(--se-navy); }
.se-editions { list-style:none; margin:0; padding:0; display:grid; gap:clamp(22px,3vw,34px); }
.se-edition { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(18px,2.6vw,32px); align-items:start; padding-bottom:clamp(22px,3vw,34px); border-bottom:1px solid var(--se-line); }
.se-edition:last-child { border-bottom:0; padding-bottom:0; }
@media (max-width:760px) { .se-edition { grid-template-columns:1fr; } }
.se-edition__media img { width:100%; height:auto; display:block; border-radius:2px; filter:grayscale(1) contrast(1.05); transition:filter .4s; }
.se-edition:hover .se-edition__media img { filter:grayscale(0); }
.se-edition__media--pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.se-edition__media--pair img { aspect-ratio:4/3; object-fit:cover; }
.se-edition__year { font-family:var(--se-osw); font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--se-green); margin:0 0 6px; }
.se-edition__title { font-family:var(--se-cg); font-style:italic; font-weight:500; font-size:clamp(23px,2.2vw,30px); line-height:1.12; margin:0 0 8px; color:var(--se-navy); }
.se-edition__body p:last-child { margin:0; font-size:15.5px; line-height:1.6; color:var(--se-ink); }

/* ── Support ─────────────────────────────────────────────────────────── */
.se-support { max-width:620px; margin:0 auto 20px; font-size:16px; line-height:1.6; color:var(--se-ink); }

/* ── Motion and print ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) { .hg-se-page * { transition:none !important; } }
@media print {
	.se, .se-ded, .se-sec--navy, .se-sec--navy2 { background:#fff !important; color:#000 !important; }
	.se__bg, .se__draw, .se__haze, .se__actions, .se__cta, .se-artists__engraving, .se-story::before { display:none !important; }
	.se__title, .se__date, .se-h2, .se-fact dd, .se-frame__work, .se-staff__li, .se-story__prose { color:#000 !important; }
}