/* Hallmark 路 shared detail shell · pre-emit critique: P5 H5 E5 S5 R5 V4 · genre: atmospheric editorial · tone: quiet, image-led · anchor: warm amber · macrostructure: image-integrated detail routes */
@import url('tokens.css');

*{box-sizing:border-box;}
html{overflow-x:clip;background:var(--color-paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{overflow-x:clip;margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-weight:300;line-height:1.8;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font:inherit;}
h1,h2,h3{min-width:0;overflow-wrap:anywhere;}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;}
a:active,summary:active{color:var(--color-accent-bright);}
button:active:not(:disabled){background:var(--color-surface);color:var(--color-ink);}
button:disabled,[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none;}

.progress{display:none;position:fixed;inset:0 auto auto 0;z-index:30;width:100%;height:2px;background:linear-gradient(90deg,var(--color-accent-deep),var(--color-accent-bright));transform:scaleX(0);transform-origin:left;will-change:transform;}
.detail-wrap{width:min(100% - 2 * clamp(20px,5vw,80px),1240px);margin-inline:auto;}
.detail-section{content-visibility:auto;contain-intrinsic-size:auto 700px;}
.music-event,.music-study-row{content-visibility:auto;contain-intrinsic-size:auto 420px;}
.detail-nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:64px;padding-inline:clamp(20px,5vw,80px);border-bottom:1px solid var(--color-rule);background:var(--effect-nav-surface-soft);backdrop-filter:blur(var(--effect-nav-blur)) saturate(var(--effect-nav-saturation));-webkit-backdrop-filter:blur(var(--effect-nav-blur)) saturate(var(--effect-nav-saturation));transition:background var(--dur-medium) var(--ease-out),border-color var(--dur-medium) var(--ease-out);}
.detail-nav.solid{background:var(--effect-nav-surface);border-color:var(--color-rule);}
.detail-nav .brand{display:flex;align-items:center;min-height:44px;font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;letter-spacing:.12em;color:var(--color-ink);white-space:nowrap;}
.detail-nav .links,.detail-nav .nav-actions{display:flex;align-items:center;gap:clamp(12px,2vw,28px);}
.detail-nav .links{font-size:var(--text-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--color-muted);}
.detail-nav .links a,.detail-nav .back-link{display:flex;align-items:center;min-height:44px;white-space:nowrap;transition:color var(--dur-short) var(--ease-out);}
.detail-nav .links a:hover,.detail-nav .back-link:hover{color:var(--color-accent-bright);}
.detail-nav .back-link{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);}
.lang-switch{display:inline-flex;align-items:center;border:1px solid var(--color-rule);border-radius:var(--radius-pill);font-size:var(--text-xs);color:var(--color-muted);}
.lang-switch button{min-width:44px;min-height:44px;padding-inline:var(--space-xs);border:0;border-radius:var(--radius-pill);background:transparent;color:inherit;cursor:pointer;white-space:nowrap;}
.lang-switch button:hover{color:var(--color-ink);}
.lang-switch button.active{background:var(--color-accent-bright);color:var(--color-accent-ink);}
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--color-rule);border-radius:50%;background:transparent;color:var(--color-ink);font-size:1.05rem;line-height:1;cursor:pointer;transition:background var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out);}
.theme-toggle:hover{border-color:var(--color-accent);background:var(--color-surface);color:var(--color-accent-bright);}
.compact-nav{display:none;position:relative;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);}
.compact-nav summary{display:flex;align-items:center;min-height:44px;padding-inline:var(--space-xs);cursor:pointer;list-style:none;white-space:nowrap;}
.compact-nav summary::-webkit-details-marker{display:none;}
.compact-nav summary::after{margin-left:var(--space-2xs);color:var(--color-accent-bright);content:"+";}
.compact-nav[open] summary::after{content:"−";}
.compact-links{position:absolute;top:calc(100% + var(--space-2xs));right:0;display:grid;min-width:min(76vw,260px);padding:var(--space-2xs);border:1px solid var(--color-rule);background:var(--color-paper-raised);box-shadow:0 18px 50px var(--color-shadow);}
.compact-links a{display:flex;align-items:center;min-height:44px;padding-inline:var(--space-sm);border-bottom:1px solid var(--color-rule);white-space:nowrap;}
.compact-links a:last-child{border-bottom:0;}

.detail-hero,.detail-section{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(32px,6vw,88px);padding-block:clamp(72px,10vw,144px);border-bottom:1px solid var(--color-rule);}
.detail-hero{padding-top:clamp(128px,16vw,208px);}
.detail-hero[data-outside-hero]{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(520px,68vh,760px);align-content:end;margin-inline:calc(-1 * clamp(20px,5vw,80px));padding-inline:clamp(20px,5vw,80px);border-bottom:0;}
.outside-hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--color-paper-raised);}
.outside-hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:var(--outside-hero-nav-scrim);}
.outside-hero-media::after{content:"";position:absolute;inset:0;background:var(--hero-scrim,var(--outside-hero-scrim));}
.outside-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--hero-position,center);filter:brightness(var(--hero-brightness,var(--effect-outside-brightness))) saturate(var(--hero-saturation,var(--effect-outside-saturation)));}
.detail-hero[data-outside-hero] h1{color:var(--outside-hero-ink);}
.detail-hero[data-outside-hero] .detail-deck{color:var(--outside-hero-soft);}
.detail-hero[data-outside-hero] .detail-eyebrow{color:var(--outside-hero-ink);}
html[data-page="music"] .detail-hero[data-outside-hero]{--hero-position:center 46%;--hero-brightness:var(--effect-music-hero-brightness);--hero-saturation:var(--effect-music-hero-saturation);--hero-scrim:var(--music-hero-scrim);}
html[data-page="photography"] .detail-hero[data-outside-hero]{--hero-position:center 59%;}
html[data-page="travel"] .detail-hero[data-outside-hero]{--hero-position:center 52%;--hero-brightness:var(--effect-travel-hero-brightness);--hero-saturation:var(--effect-travel-hero-saturation);--hero-scrim:var(--travel-hero-scrim);}
html[data-page="campus"] .detail-hero[data-outside-hero]{--hero-position:center 40%;--hero-brightness:var(--effect-outside-brightness);--hero-saturation:var(--effect-outside-saturation);}
html[data-page="hotel"] .detail-hero[data-outside-hero]{--hero-position:center 45%;--hero-brightness:var(--effect-outside-brightness);--hero-saturation:var(--effect-outside-saturation);}
html[data-page="visual"] .detail-hero[data-outside-hero]{--hero-position:center 30%;--hero-brightness:var(--effect-outside-brightness);--hero-saturation:var(--effect-outside-saturation);}
html[data-page="teaching"] .detail-hero[data-outside-hero]{--hero-position:center 40%;--hero-brightness:var(--effect-outside-brightness);--hero-saturation:var(--effect-outside-saturation);}
.detail-hero h1,.detail-section h2{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.05;color:var(--color-ink);text-wrap:balance;}
.detail-hero h1{font-size:clamp(3rem,8vw,7rem);letter-spacing:-.035em;}
html[data-page="photography"] .detail-hero h1{font-size:clamp(3.1rem,7vw,6.6rem);white-space:nowrap;overflow-wrap:normal;}
html[data-page="photography"] .detail-hero[data-outside-hero] h1{grid-column:1/-1;}
html[data-page="photography"] .detail-hero[data-outside-hero] .detail-hero-copy{grid-column:2;}
html[data-page="campus"] .detail-hero h1,html[data-page="hotel"] .detail-hero h1,html[data-page="visual"] .detail-hero h1{font-size:clamp(3rem,5vw,5rem);overflow-wrap:anywhere;word-break:normal;hyphens:none;text-wrap:wrap;}
html[data-page="teaching"] .detail-hero h1{font-size:clamp(3rem,5vw,5rem);overflow-wrap:anywhere;word-break:normal;hyphens:none;text-wrap:wrap;}
.detail-section h2{font-size:clamp(var(--text-xl),4vw,3rem);}
.detail-hero-copy,.detail-section-copy{max-width:68ch;min-width:0;}
.detail-hero-copy > :last-child,.detail-section-copy > :last-child{margin-bottom:0;}
.detail-eyebrow{margin:0 0 var(--space-md);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-bright);}
.detail-deck{font-size:clamp(var(--text-md),2vw,var(--text-lg));line-height:1.65;color:var(--color-ink-soft);}
.detail-meta{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);}

.detail-media{margin:0;min-width:0;}
.detail-media img{display:block;width:100%;height:auto;}
.detail-media figcaption{margin-top:var(--space-xs);font-size:var(--text-xs);color:var(--color-muted);}
/* Tall posters must fit the viewport: cap height, scale width to match, center. */
#visual-gallery .detail-media img{width:auto;max-width:100%;max-height:calc(100vh - 160px);margin-inline:auto;}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px);align-items:start;}
.visual-grid .visual-feature{grid-column:1/-1;}
#visual-gallery{display:block;}
#visual-gallery .visual-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px);}
@media(max-width:40rem){.visual-grid{grid-template-columns:minmax(0,1fr)}.visual-grid .visual-feature{grid-column:auto;}#visual-gallery .visual-grid{grid-template-columns:minmax(0,1fr);}}
.music-copy{max-width:none;}
.music-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:clamp(24px,4vw,56px);align-items:start;}
.music-intro-copy{max-width:52ch;margin-top:0;font-size:var(--text-md);color:var(--color-ink-soft);}
.music-lead{max-width:360px;justify-self:end;}
.music-history,.music-study{margin-top:clamp(48px,7vw,88px);border-top:1px solid var(--color-rule);}
.music-history-label{margin:0;padding-block:var(--space-sm);font-size:var(--text-xs);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-bright);}
.music-entry{display:grid;grid-template-columns:minmax(132px,.34fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--color-rule);}
.music-entry-meta{display:flex;flex-direction:column;gap:var(--space-2xs);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);}
.music-entry-body{min-width:0;}
.music-entry-body h3{margin:0 0 var(--space-xs);font-family:var(--font-display);font-size:clamp(var(--text-md),2vw,var(--text-lg));font-weight:600;line-height:1.25;color:var(--color-ink);}
.music-entry-description{max-width:56ch;margin:0;color:var(--color-ink-soft);}
.music-entry-media{max-width:360px;margin-top:var(--space-md);}
.music-entry-media--landscape{max-width:560px;}
.music-watch{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-xs);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-bright);}
.music-watch:hover{color:var(--color-ink);}
.music-study-row{display:grid;grid-template-columns:minmax(132px,.34fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:var(--space-sm);border-top:1px solid var(--color-rule);}
.music-study-row time{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);}
.music-study-row p{margin:0;color:var(--color-ink-soft);}
.music-page-intro{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(32px,6vw,88px);padding-block:clamp(72px,10vw,144px);border-bottom:1px solid var(--color-rule);}
.music-page-content{display:block;grid-column:1/-1;padding-block:clamp(56px,8vw,104px);border-bottom:1px solid var(--color-rule);}
.music-timeline>h2{margin:0 0 var(--space-md);font-family:var(--font-display);font-size:clamp(var(--text-xl),4vw,3rem);font-weight:600;line-height:1.05;color:var(--color-ink);}
.music-event{display:grid;grid-template-columns:minmax(132px,.34fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--color-rule);}
.music-event--media{grid-template-columns:minmax(132px,.28fr) minmax(0,1fr) minmax(240px,.72fr);}
.music-event:not(.music-event--media) .music-event-copy{grid-column:2/-1;max-width:68ch;}
.music-event-meta{display:flex;flex-direction:column;gap:var(--space-2xs);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted);}
.music-event-copy{min-width:0;}
.music-event-copy h2{margin:0 0 var(--space-xs);font-family:var(--font-display);font-size:clamp(var(--text-md),2vw,var(--text-lg));font-weight:600;line-height:1.25;color:var(--color-ink);}
.music-event-copy p{max-width:56ch;margin:0;color:var(--color-ink-soft);}
.music-event-media{min-width:0;align-self:start;}
.music-event-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs);min-width:0;align-self:start;}
.music-event-gallery .detail-media{margin:0;}
.music-study-row--media{grid-template-columns:minmax(132px,.28fr) minmax(0,1fr) minmax(200px,.58fr);align-items:start;}
.music-study-media{min-width:0;margin:0;}
.photography-intro,.travel-intro{margin-top:0;margin-bottom:clamp(32px,5vw,64px);color:var(--color-ink-soft);}
#photography-gallery{display:block;}
.photography-gallery-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);align-items:center;gap:clamp(24px,4vw,56px);padding-block:var(--space-lg);border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);}
.photography-gallery-head h2{font-size:clamp(2.5rem,4vw,3.75rem);white-space:nowrap;overflow-wrap:normal;}
.photography-gallery-head .photography-intro{justify-self:end;max-width:52ch;margin:0;}
.photography-gallery-body{width:100%;margin-top:clamp(40px,6vw,80px);}
.photography-sequence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);align-items:start;}
.photography-frame--landscape{grid-column:1/-1;max-width:none;}
.photography-frame--portrait .media-button{aspect-ratio:3/4;overflow:hidden;}
.photography-frame--landscape .media-button{aspect-ratio:4/3;overflow:hidden;}
.photography-frame .media-button img{width:100%;height:100%;object-fit:cover;}
.travel-ledger{border-top:1px solid var(--color-rule);}
.travel-region{display:grid;grid-template-columns:minmax(132px,.38fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:clamp(28px,4vw,48px);border-bottom:1px solid var(--color-rule);}
.travel-region h2{font-size:clamp(var(--text-md),2vw,var(--text-lg));line-height:1.25;}
.travel-region-copy{display:grid;gap:var(--space-sm);}
.travel-region-copy p{display:grid;grid-template-columns:minmax(112px,.28fr) minmax(0,1fr);gap:var(--space-sm);margin:0;color:var(--color-ink-soft);}
.travel-region-copy strong{font-weight:500;color:var(--color-ink);}
.travel-note-copy h2{margin:0;font-size:clamp(var(--text-lg),3vw,var(--text-xl));}
.travel-note-copy .detail-meta{margin-top:0;}
.media-button{display:block;min-width:0;color:inherit;}
.media-button img{transition:opacity var(--dur-short) var(--ease-out);}
.media-button:hover img{opacity:.86;}
.media-button:focus-visible,.dialog-close:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;}

[data-reveal]{opacity:1;transform:none;}
html.js.motion-detail [data-reveal]{opacity:0;transform:translate3d(0,var(--space-md),0);transition:opacity var(--dur-medium) var(--ease-out),transform var(--dur-medium) var(--ease-out);}
html.js.motion-detail [data-reveal="media"]{transform:scale(1.015);}
html.js.motion-detail [data-reveal].is-visible{opacity:1;transform:translate3d(0,0,0);}
.image-dialog{max-width:min(94vw,1400px);max-height:94vh;padding:0;border:1px solid var(--color-rule);background:var(--color-paper-raised);color:var(--color-ink);overflow:auto;opacity:0;transform:translateY(14px) scale(.985);transition:opacity var(--dur-medium) var(--ease-out),transform var(--dur-medium) var(--ease-out);}
.image-dialog.is-open{opacity:1;transform:none;}
.image-dialog.is-closing{opacity:0;transform:translateY(10px) scale(.99);}
.image-dialog::backdrop{background:var(--effect-dialog-backdrop);opacity:0;transition:opacity var(--dur-medium) var(--ease-out);}
.image-dialog.is-open::backdrop{opacity:1;}
.image-dialog[open]{display:block;}
.image-dialog img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(94vh - 2px);margin:auto;object-fit:contain;}
.dialog-close{position:absolute;top:var(--space-2xs);right:var(--space-2xs);display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-paper-raised);color:var(--color-ink);cursor:pointer;}
.footer{width:min(100% - 2 * clamp(20px,5vw,80px),1240px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding-block:var(--space-lg);border-top:1px solid var(--color-rule);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);}
.footer a{display:flex;align-items:center;min-height:44px;color:var(--color-ink-soft);transition:color var(--dur-short) var(--ease-out);}
.footer a:hover{color:var(--color-accent-bright);}
html[lang="zh-CN"] .detail-section p{line-height:1.85;}

@media (pointer:fine) and (min-width:40.001rem) and (prefers-reduced-motion:no-preference){.progress{display:block;}}
@media(max-width:60rem){.detail-hero,.detail-section,.music-page-intro{grid-template-columns:minmax(0,1fr);}.music-event--media,.music-study-row--media{grid-template-columns:minmax(132px,.32fr) minmax(0,1fr);}.music-event-media,.music-event-gallery,.music-study-media{grid-column:2;}}
@media(max-width:60rem){.photography-gallery-head{grid-template-columns:minmax(0,1fr);gap:var(--space-sm);}.photography-gallery-head .photography-intro{justify-self:start;}}
@media(max-width:60rem),(pointer:coarse){.compact-nav{display:block;}.detail-nav .links,.detail-nav .back-link{display:none;}}
@media(max-width:40rem){.detail-grid{grid-template-columns:minmax(0,1fr)}.music-intro,.music-entry,.music-study-row,.music-study-row--media{grid-template-columns:minmax(0,1fr)}.music-event,.music-event--media{grid-template-columns:minmax(0,1fr)}.music-event-copy,.music-event:not(.music-event--media) .music-event-copy,.music-event-media,.music-event-gallery,.music-study-media{grid-column:auto;}.music-event-gallery{grid-template-columns:minmax(0,1fr);}.music-lead{max-width:none;justify-self:stretch;}.music-entry,.music-study-row{gap:var(--space-xs);}.music-entry-meta,.music-event-meta{flex-direction:row;flex-wrap:wrap;gap:var(--space-2xs) var(--space-sm);}.music-entry-media,.music-entry-media--landscape{max-width:none;}.photography-gallery-head{grid-template-columns:minmax(0,1fr);gap:var(--space-sm);}.photography-gallery-head h2{white-space:normal;overflow-wrap:anywhere;}.photography-gallery-head .photography-intro{justify-self:start;}.photography-sequence,.travel-region,.travel-region-copy p{grid-template-columns:minmax(0,1fr)}.photography-frame--landscape{grid-column:auto;}a,button,summary{min-height:44px;}.detail-nav .brand{max-width:calc(100vw - 212px);overflow:hidden;text-overflow:ellipsis;}.detail-nav .nav-actions{margin-left:auto;}.detail-hero,.detail-section{padding-block:var(--space-2xl);}.detail-hero{padding-top:clamp(112px,28vw,144px);}.detail-hero[data-outside-hero]{min-height:560px;margin-inline:calc(-1 * clamp(20px,5vw,80px));padding-inline:clamp(20px,5vw,80px);padding-bottom:var(--space-2xl);}html[data-page="photography"] .detail-hero h1{font-size:clamp(2.35rem,12vw,4rem);white-space:nowrap;}html[data-page="photography"] .detail-hero[data-outside-hero] .detail-hero-copy{grid-column:auto;}html[data-page="travel"] .outside-hero-media img{object-position:66% center;}html[data-page="photography"] .outside-hero-media img{object-position:46% center;}}
@media(max-width:30rem){.detail-nav .brand{display:none;}.detail-nav .nav-actions{width:100%;justify-content:flex-end;}}
@media(max-width:40rem){.footer{flex-direction:column;align-items:flex-start;gap:var(--space-2xs);}}
@media(max-width:40rem),(pointer:coarse){[data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}.progress{display:none!important;}.image-dialog,.image-dialog::backdrop{opacity:1!important;transform:none!important;transition:none!important;}}