/* ==========================================================================
   Base: reset, typography, surfaces, utilities
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--c-house);color:var(--c-platinum);font:400 var(--t-body)/1.6 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,picture,video,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,fieldset{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
a{color:var(--c-spotlight);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--c-lame);outline-offset:3px}
::selection{background:var(--c-lame);color:var(--c-house)}

/* Skip link */
.skip-link{position:absolute;left:var(--s-4);top:-100px;z-index:100;background:var(--c-lame);color:var(--c-house);padding:var(--s-3) var(--s-4);font-weight:700;text-decoration:none;border-radius:var(--radius)}
.skip-link:focus{top:var(--s-4)}

/* ---- Surfaces ---- */
.stage{background:var(--c-house);color:var(--c-platinum)}
.program{background:var(--c-paper);color:var(--c-ink)}
.program a{color:var(--c-velvet)}
.program :focus-visible{outline-color:var(--c-velvet)}

/* ---- Layout ---- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.stack{display:grid;gap:var(--stack,var(--s-5))}

/* ---- Type roles ---- */
.marquee{font-family:var(--f-marquee);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.88;text-wrap:balance}
.h1{font-size:var(--t-h1)}
.h2{font-size:var(--t-h2)}
.h3{font-size:var(--t-h3);line-height:.95}
.aside{font-family:var(--f-aside);font-style:italic;font-weight:400}
.lede{font-size:var(--t-lede);line-height:1.55;max-width:58ch}
.eyebrow{display:block;font:700 var(--t-label)/1.2 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--c-lame)}
.program .eyebrow{color:var(--c-velvet)}
.mute{color:var(--c-mute-dark)}
.program .mute{color:var(--c-mute-light)}
.small{font-size:var(--t-small)}
p{max-width:68ch}

/* Footnote device: plain statement above, punchline below */
.fn-mark{font-family:var(--f-aside);font-style:normal;color:var(--c-lame);font-size:.55em;vertical-align:super;line-height:0}
.program .fn-mark{color:var(--c-velvet)}
.footnote{font:italic 400 1rem/1.45 var(--f-aside);color:var(--c-mute-dark)}
.program .footnote{color:var(--c-mute-light)}

/* Hairline rule */
.rule{border-top:1px solid var(--c-rule-dark)}
.program .rule{border-top-color:var(--c-rule-light)}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Reveal on scroll (progressive: content is visible without JS) ---- */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* Pictures fill their media containers */
picture{display:block}
.page-hero__media picture,.hero-split__media picture,.home-hero__media picture,.photo picture,.filmstrip picture,.insta-grid picture,.inquire__portrait picture{height:100%}
