/* The finale is a listening room: warm metal, a real performance, stillness. */
.noel-page .noel-overture { min-height:820px;height:100svh;max-height:1100px;background:radial-gradient(ellipse at 76% 35%,#55432c37,transparent 48%),#080d14;padding-top:8rem; }
.noel-page .noel-overture-image { z-index:-1;inset:18% 8% 16% 51%;overflow:visible;transform:perspective(1300px) rotateY(var(--noel-lens-turn,-8deg)) translateY(var(--noel-lens-rise,0px)); }
.noel-page .noel-overture-image img { position:relative;inset:auto;display:block;width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 50%;border-radius:50% 50% 4px 4px;border:1px solid #c9a5759c;box-shadow:0 0 0 8px #f1ddbc04,0 0 0 9px #bdae9440,0 30px 65px #0007; }
.noel-page .noel-overture-image::before { content:"";position:absolute;inset:-6% -10%;border:1px solid #cdb28440;border-radius:50%;transform:rotate(22deg); }
.noel-page .noel-overture-image::after { inset:-10% -14%;border:1px solid #cdb28425;border-radius:50%;transform:rotate(-22deg);background:none; }
.noel-page .noel-overture h1 { position:relative;width:57%;max-width:11ch;margin-top:8svh;font-size:clamp(3.5rem,6.3vw,7rem);line-height:1.1;font-weight:600;text-shadow:0 2px 28px #080d14; }
.noel-page .noel-overture h1 span { color:#e6c395; }
.noel-page .noel-overture-bottom { position:relative;z-index:2; }
.noel-page .noel-song-credit strong { font-size:2.3rem; }
.noel-page .noel-entry { width:38%;max-width:440px; }
.noel-page .noel-enter { background:#eee0c9;border:1px solid #ead5b6;box-shadow:0 8px 35px #07090d80; }
.noel-page .noel-enter:hover { background:#fff2df; }
.noel-page .noel-meaning { --star-progress:1;position:relative;isolation:isolate;grid-template-columns:1fr 1fr;align-items:start;gap:10vw;padding-block:8rem 7rem;background:radial-gradient(ellipse at 18% 52%,#71512b30,transparent 47%),#080d14;color:#f0e7d9;border-top:1px solid #d0b98c24; }
.noel-page .noel-meaning-title { position:sticky;top:130px; }
.noel-page .noel-meaning .section-label { color:#bca889; }
.noel-page .noel-meaning h2 { margin-top:1.6rem;font-size:clamp(2.5rem,4vw,4.5rem);line-height:1.15; }
.noel-page .noel-meaning h2 span { color:#c9aa7c; }
.noel-page .noel-meaning-rule { display:none; }
.noel-star-scene { position:relative;width:75%;max-width:370px;height:clamp(220px,24vw,340px);margin:2.5rem 0 0;display:grid;place-items:center; }
.noel-star-scene::before { content:"";position:absolute;inset:12% 14%;border:1px solid #ceb88e25;border-radius:50%;transform:rotateY(35deg); }
.noel-star-scene::after { content:"";position:absolute;inset:0 23%;border:1px solid #b4c7d026;border-radius:50%;transform:rotate(36deg); }
.noel-star { height:100%;width:100%;overflow:visible;filter:drop-shadow(0 0 9px #e3c38b59);transform:perspective(900px) rotateY(var(--noel-star-turn,0deg)); }
.noel-star-outline { stroke:#f0c58c;stroke-width:1.25;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--star-progress,1)); }
.noel-star-fill { fill:url(#noel-brass);opacity:var(--star-fill,.8); }
.noel-star-spine { stroke:#f1dcb5;stroke-width:.7;opacity:.8; }
.noel-page .noel-meaning-copy { padding-top:8rem;max-width:35rem; }
.noel-page .noel-meaning-copy p { color:#bac5cd;font-size:clamp(1rem,1.3vw,1.3rem);line-height:1.85;margin-bottom:4.5rem; }
.noel-page .noel-meaning-copy .noel-meaning-lede { color:#f0e5d3;font-size:clamp(1.35rem,1.8vw,1.85rem); }
.noel-page .noel-meaning-copy .noel-welcome { color:#e7c798;border-color:#cfb9924a;margin-top:0;margin-bottom:0;padding-top:2rem; }
.noel-page .noel-screening { padding-block:6rem 7rem;background:#101c29;position:relative;isolation:isolate;overflow:hidden; }
.noel-page .noel-screening::before { content:"";z-index:-1;position:absolute;width:85vw;height:85vw;border:1px solid #cdb08021;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%); }
.noel-page .noel-screening::after { content:"";position:absolute;z-index:-1;inset:3rem;border:1px solid #aec7d426;pointer-events:none; }
.noel-page .noel-film video { box-shadow:0 30px 65px #0005;border:1px solid #d8c6a757; }
.noel-page .noel-next-night { background:#e9e3d7;color:#142d3e;border:0;padding-block:6rem; }
.noel-page .noel-next-night .section-label { color:#735c3d; }
.noel-page .noel-next-title { color:#182f40;font-size:clamp(3.4rem,7.5vw,8rem); }
.noel-page .noel-next-link { border-color:#3552674f; }
.noel-page .noel-next-night::after { content:"";position:absolute;right:12%;top:50%;inline-size:clamp(8rem,23vw,24rem);block-size:clamp(8rem,23vw,24rem);transform:translateY(-50%) rotate(var(--noel-last-turn,0deg));background:currentColor;color:#a17a4160;-webkit-mask:url("assets/icons/noel-star.svg") center/contain no-repeat;mask:url("assets/icons/noel-star.svg") center/contain no-repeat;transition:color .3s; }
.noel-page .noel-next-night:hover::after { color:#ac8349; }
@media(max-width:900px) and (min-width:761px) {
 .noel-page .noel-overture { min-height:830px; }
 .noel-page .noel-overture-image { inset:24% 8% 22% 48%; }
 .noel-page .noel-overture h1 { font-size:6.5vw; }
 .noel-page .noel-entry { width:46%; }
 .noel-page .noel-meaning { gap:5vw; }
 .noel-page .noel-meaning-title { top:115px; }
}
@media(max-width:760px) {
 .noel-page .noel-overture { height:auto;min-height:0;max-height:none;padding-top:7rem;padding-bottom:3rem;overflow:hidden; }
 .noel-page .noel-overture-top { display:block; }
 .noel-page .noel-running-time { display:none; }
 .noel-page .noel-overture h1 { width:100%;font-size:12vw;max-width:none;margin-top:2rem; }
 .noel-page .noel-overture-image { position:relative;inset:auto;width:78%;height:82vw;max-height:450px;order:3;margin:2.8rem auto;transform:perspective(900px) rotateY(-5deg); }
 .noel-page .noel-overture-top { order:1; }
 .noel-page .noel-overture h1 { order:2; }
 .noel-page .noel-overture-bottom { order:4;margin-top:0;padding:0;display:block; }
 .noel-page .noel-song-credit { display:none; }
 .noel-page .noel-entry { width:100%;max-width:none; }
 .noel-page .noel-meaning { grid-template-columns:1fr;padding-block:4rem;gap:1rem; }
 .noel-page .noel-meaning-title { position:relative;top:auto;max-width:100%; }
 .noel-page .noel-meaning h2 { font-size:10.5vw; }
 .noel-star-scene { width:70%;height:230px;margin:2rem auto; }
 .noel-page .noel-meaning-copy { padding:0; }
 .noel-page .noel-meaning-copy p { font-size:1rem;margin-bottom:2rem; }
 .noel-page .noel-meaning-copy .noel-meaning-lede { font-size:1.35rem; }
 .noel-page .noel-screening { padding-block:4rem; }
 .noel-page .noel-screening::after { inset:1rem; }
 .noel-page .noel-next-night { padding-block:4rem; }
 .noel-page .noel-next-title { font-size:12vw; }
 .noel-page .noel-next-night::after { inline-size:6rem;block-size:6rem;top:2.6rem;right:7%;transform:none; }
}
html.motion-paused .noel-star { transform:none; }
html.motion-paused .noel-star-outline { stroke-dashoffset:0; }
@media(prefers-reduced-motion:reduce) { .noel-star { transform:none; } .noel-star-outline { stroke-dashoffset:0; } }

/* Keep the decorative star in its own visual chapter on narrow screens. */
@media (max-width:760px) {
 .noel-page .noel-meaning { gap:clamp(1.5rem,6vw,2.25rem); }
 .noel-page .noel-meaning-title { position:relative;z-index:0;overflow:hidden; }
 .noel-star-scene {
  contain:layout paint;
  overflow:hidden;
  width:clamp(9.5rem,48vw,12rem);
  height:clamp(9.5rem,48vw,12rem);
  margin:clamp(1.5rem,6vw,2.25rem) auto 0;
 }
 .noel-star { display:block;width:100%;height:100%;overflow:hidden; }
 .noel-page .noel-meaning-copy { position:relative;z-index:1; }
}

/* Short landscape phones should read as two compact columns, without a sticky ornament. */
@media (max-width:1000px) and (max-height:600px) and (orientation:landscape) {
 .noel-page .noel-meaning { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,4rem);padding-block:3rem; }
 .noel-page .noel-meaning-title { position:relative;top:auto;overflow:hidden; }
 .noel-page .noel-meaning h2 { font-size:clamp(2rem,5.5vw,3.25rem); }
 .noel-star-scene { contain:layout paint;overflow:hidden;width:8.5rem;height:8.5rem;margin:1.25rem 0 0; }
 .noel-star { display:block;width:100%;height:100%;overflow:hidden; }
 .noel-page .noel-meaning-copy { padding-top:.5rem; }
 .noel-page .noel-meaning-copy p { margin-bottom:1.5rem; }
}