:root{color-scheme:dark;--bg:#090d19;--text:#f2f1f6;--muted:#b1b6c6;--gold:#edcf8b;--line:#ffffff20;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse 80% 500px at 50% 0,#22254065,transparent)}a{color:inherit;text-decoration:none}a:hover{color:var(--gold)}a:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:3px}img{max-width:100%;display:block}p,h1,h2,h3,figure{margin:0}.wrap{width:min(1040px,calc(100% - 64px));margin-inline:auto}.skip{position:absolute;top:8px;left:8px;padding:12px;background:var(--bg);z-index:10;transform:translateY(-150%)}.skip:focus{transform:none}.header{display:flex;justify-content:space-between;align-items:center;padding-block:26px;border-bottom:1px solid var(--line)}.logo{width:140px;height:auto}.header nav{display:flex;gap:30px;font-size:14px}.header nav a{display:inline-flex;align-items:center;min-height:44px;gap:8px}.announcement{padding-top:54px}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-align:center;margin-bottom:20px}h1{display:flex;justify-content:center;align-items:baseline;gap:.2em;font:clamp(34px,5.3vw,68px)/1.12 Georgia,serif;letter-spacing:-.035em}.cosi{font:500 .78em Arial,sans-serif;letter-spacing:.015em}.cross{font:.5em Arial,sans-serif;color:var(--gold);align-self:center}.rhapsody{white-space:nowrap}.rhapsody em{font-weight:400;color:var(--gold)}.tagline{font:italic 21px/1.45 Georgia,serif;color:#c9ccda;text-align:center;margin-top:17px}.film{margin-top:32px}.player{aspect-ratio:16/9;border:1px solid #ffffff25;border-radius:12px;overflow:hidden;background:#030409;box-shadow:0 22px 60px #0004}.film-cover{height:100%;display:grid;place-items:center;position:relative}.film-cover>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.film-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,#03040965)}.play{z-index:1;width:78px;height:78px;display:grid;place-items:center;padding-left:5px;background:#111629b8;backdrop-filter:blur(12px);border:1px solid #ffffff8c;border-radius:50%;font-size:28px;box-shadow:0 0 30px #0005;transition:background .2s,scale .2s}.film-cover:hover .play{background:#705529dd;scale:1.06}.play-label{position:absolute;bottom:24px;z-index:1;font-size:14px;letter-spacing:.02em}.player iframe{width:100%;height:100%;display:block;border:0}figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;font-size:12px;color:var(--muted)}figcaption a{padding-block:8px;color:#d6d8e3}.duration{color:#9098ac}.intro{max-width:760px;margin:18px auto 0;text-align:center;font-size:14px;line-height:1.8;color:var(--muted)}section[id]{scroll-margin-top:30px}.trilogy-section,.explore-section{padding-top:62px;margin-top:58px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px}h2{font:36px/1.15 Georgia,serif;letter-spacing:-.025em}.section-heading p{font-size:13px;line-height:1.6;color:var(--muted)}.albums{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.albums img{width:100%;height:auto;align-self:start;aspect-ratio:1;object-fit:contain;border-radius:7px;border:1px solid var(--line)}.album-number{font-size:10px!important;letter-spacing:.16em;color:var(--gold)!important;margin:20px 0 9px}h3{font:23px/1.2 Georgia,serif;min-height:2.4em;letter-spacing:-.02em}.albums li>p:last-child{font-size:13px;line-height:1.7;color:var(--muted);margin-top:9px}.creators{font-size:12px;color:var(--muted);margin-top:28px}.explore-links{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.explore-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 18px;border:1px solid var(--line);background:#ffffff03;border-radius:8px;min-height:100px;transition:background .2s}.explore-links a:hover{background:#ffffff08}.explore-links small{display:block;color:var(--muted);font-size:11px;margin-bottom:10px}.explore-links strong{font-size:14px;line-height:1.6;font-weight:400}.explore-links a>span:last-child{color:var(--gold)}.socials{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:26px;font-size:12px}.socials>span{color:var(--muted);margin-right:auto}.socials a{padding-block:12px;min-height:44px;display:flex;align-items:center}.footer{border-top:1px solid var(--line);margin-top:52px;padding-block:25px 32px;display:flex;justify-content:space-between;gap:20px;align-items:center}.footer>span{font:18px Georgia,serif}.footer p{font-size:11px;color:var(--muted)}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.header{padding-block:18px}.logo{width:115px}.header nav{gap:17px;font-size:12px}.announcement{padding-top:36px}h1{font-size:clamp(26px,5.4vw,40px)}.eyebrow{font-size:9px;letter-spacing:.1em;margin-bottom:18px}.tagline{font-size:18px;max-width:28ch;margin:15px auto 0}.film{margin-top:25px}.play{width:56px;height:56px;font-size:21px}.play-label{bottom:14px;font-size:12px}figcaption{font-size:10px;gap:12px;align-items:flex-start;line-height:1.6}figcaption a{padding:0;white-space:nowrap}.duration{display:none}.intro{font-size:13px;margin-top:12px;text-align:left}.trilogy-section,.explore-section{padding-top:34px;margin-top:36px}.section-heading{display:block;margin-bottom:22px}h2{font-size:30px}.section-heading p{margin-top:9px}.albums{grid-template-columns:1fr;gap:24px}.albums li{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:20px;align-content:start}.albums img{grid-row:1/4}.album-number{margin:4px 0 7px}.albums h3{font-size:23px;min-height:0}.albums li>p:last-child{font-size:12px;line-height:1.6;margin-top:9px}.creators{font-size:11px;line-height:1.7}.explore-links{grid-template-columns:1fr;gap:8px}.explore-links a{min-height:84px;padding:17px 18px}.explore-links small{margin-bottom:5px}.socials{gap:20px;margin-top:20px}.socials>span{width:100%;margin:0 0 -8px}.footer{margin-top:32px;align-items:flex-start;flex-direction:column;gap:12px}.footer p{line-height:1.6}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.header nav{gap:12px;font-size:11px}.logo{width:100px}.albums li{grid-template-columns:95px minmax(0,1fr);column-gap:15px}.albums h3{font-size:21px}h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Keep exploring: the complete original link hub. */
.explore-section{--ink:var(--text);--ink-mute:var(--muted);--ink-faint:#8e98ae;--line-soft:#ffffff16;--nasa:#4d8cf5;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--ease:cubic-bezier(.2,.8,.2,1)}
.explore-eyebrow{font:11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
#explore-title{font:clamp(36px,4.8vw,58px)/1.1 Georgia,serif;margin-bottom:30px}#explore-title em{color:var(--gold);font-weight:400}
.links{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,335px),1fr)) }
.links > li:first-child{ grid-column:1/-1 }
.lnk{
  --brand:var(--gold);
  display:flex; align-items:center; gap:1.05rem;
  padding:1.05rem 1.2rem;
  border:1px solid var(--line-soft); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.013));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  text-decoration:none;
  transition:transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);
}
.lnk:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--brand) 46%, transparent);
  box-shadow:0 18px 44px -22px color-mix(in srgb, var(--brand) 70%, transparent);
}
.lnk--youtube,.lnk--hero{ --brand:#ff4a4a }
.lnk--nasa    { --brand:var(--nasa) }
.lnk--spotify { --brand:#1ed760 }
.lnk--instagram{ --brand:#e678b0 }
.lnk--facebook{ --brand:#4a8cf7 }
.lnk--x       { --brand:#cfd6e6 }

.lnk__ico{
  flex:none; width:52px; height:52px; border-radius:13px;
  display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--brand) 24%, transparent);
  background:color-mix(in srgb, var(--brand) 11%, rgba(0,0,0,.34));
  transition:border-color .28s var(--ease), background .28s var(--ease);
}
.lnk:hover .lnk__ico{
  border-color:color-mix(in srgb, var(--brand) 55%, transparent);
  background:color-mix(in srgb, var(--brand) 20%, rgba(0,0,0,.3));
}
.lnk__body{ flex:1; min-width:0 }
.lnk__kicker{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brand); margin-bottom:.28rem;
}
.lnk__body b{ display:block; font-weight:500; font-size:1.03rem; color:var(--ink); letter-spacing:-.005em }
.lnk__body i{
  display:block; font-style:normal; font-size:.85rem; color:var(--ink-mute); margin-top:.15rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lnk__go{
  flex:none; width:11px; height:11px;
  border-top:1.5px solid var(--ink-faint); border-right:1.5px solid var(--ink-faint);
  transform:rotate(45deg); transition:transform .28s var(--ease), border-color .28s var(--ease);
}
.lnk:hover .lnk__go{ border-color:var(--brand); transform:rotate(45deg) translate(2px,-2px) }

/* featured link card carries the film still */
.lnk--hero{ padding:1.1rem; gap:1.4rem; align-items:stretch }
.lnk__thumb{
  flex:none; width:min(210px,34%); aspect-ratio:16/9; object-fit:cover;
  border-radius:10px; border:1px solid var(--line-soft);
}
.lnk--hero .lnk__body{ display:flex; flex-direction:column; justify-content:center }
.lnk--hero .lnk__body b{ font-size:1.22rem; margin-top:.1rem }
.lnk--hero .lnk__body i{ white-space:normal; margin-top:.3rem }

/* brand glyphs, inlined so the page makes no third-party requests */
.ico{ width:24px; height:24px; display:block; background:center/contain no-repeat }
.lnk__ico .ico{ width:26px; height:26px }
.ico--youtube  { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff4a4a'%3E%3Cpath d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.5 15.6V8.4l6.3 3.6z'/%3E%3C/svg%3E") }
.ico--spotify  { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231ed760'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm5.5 17.3a.75.75 0 0 1-1.03.25c-2.82-1.72-6.37-2.11-10.55-1.16a.75.75 0 1 1-.33-1.46c4.57-1.04 8.5-.59 11.66 1.34.35.22.46.68.25 1.03zm1.47-3.27a.94.94 0 0 1-1.29.31c-3.23-1.98-8.15-2.56-11.97-1.4a.94.94 0 1 1-.54-1.8c4.36-1.32 9.78-.68 13.49 1.6.44.27.58.85.31 1.29zm.13-3.4C15.23 8.33 8.9 8.12 5.2 9.24a1.12 1.12 0 1 1-.65-2.15C8.8 5.8 15.79 6.05 20.03 8.57a1.12 1.12 0 1 1-1.14 1.93z'/%3E%3C/svg%3E") }
.ico--instagram{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e678b0' stroke-width='1.8'%3E%3Crect x='2.8' y='2.8' width='18.4' height='18.4' rx='5.2'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.15' fill='%23e678b0' stroke='none'/%3E%3C/svg%3E") }
.ico--facebook { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a8cf7'%3E%3Cpath d='M24 12a12 12 0 1 0-13.88 11.85v-8.38H7.08V12h3.04V9.36c0-3 1.79-4.67 4.53-4.67 1.31 0 2.68.24 2.68.24v2.95h-1.51c-1.49 0-1.95.92-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.38A12 12 0 0 0 24 12z'/%3E%3C/svg%3E") }
.ico--x        { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8ecf5'%3E%3Cpath d='M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.65l-5.22-6.82-5.96 6.82H1.68l7.73-8.84L1.25 2.25h6.82l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z'/%3E%3C/svg%3E") }
/* COSI mission mark: a Compton scatter, drawn for this site */
.ico--cosi     { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%234d8cf5' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='16' cy='16' r='13.2' opacity='.4'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%234d8cf5' stroke='none'/%3E%3Cpath d='M2.4 9.6h9.2M30 22h-9.6'/%3E%3Cpath d='M11.6 9.6 16 16l6.4 1.6' /%3E%3Cpath d='M16 16 20.4 22' opacity='.75'/%3E%3C/svg%3E") }


.links{padding:0;margin:0;list-style:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.links>li{min-width:0}.lnk{height:100%;min-height:110px;padding:20px;gap:17px}.lnk__body b{font-weight:400;line-height:1.4}.lnk__body i{line-height:1.6;margin-top:5px;white-space:normal;overflow-wrap:anywhere}.lnk__kicker{margin-bottom:7px;line-height:1.5}.lnk__thumb{height:auto;align-self:center;width:210px}.lnk--hero{padding:18px;gap:24px}.lnk--hero .lnk__go{align-self:center}.lnk__ico{width:50px;height:50px}.lnk__body i{font-size:13px}
@media(max-width:700px){.links{grid-template-columns:1fr}.lnk{min-height:100px;padding:17px;gap:15px}.lnk__ico{width:44px;height:44px;border-radius:11px}.lnk__body b{font-size:15px}.lnk__body i{font-size:12px}.lnk__kicker{font-size:9px;letter-spacing:.13em}.lnk--hero{flex-wrap:wrap;gap:17px}.lnk__thumb{width:100%;aspect-ratio:16/9}.lnk--hero .lnk__body{flex-basis:calc(100% - 35px)}.lnk--hero .lnk__body b{font-size:18px}.lnk__go{width:9px;height:9px}.explore-eyebrow{font-size:10px;margin-bottom:16px}#explore-title{margin-bottom:24px}}
@media(prefers-reduced-motion:reduce){.lnk,.lnk__ico,.lnk__go{transition:none}.lnk:hover{transform:none}}

/* A quiet space backdrop and a centered cinema opening. */
body{isolation:isolate}.space-atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 20% 15%,#29244530,transparent 55%)}
.quiet-stars{position:absolute;inset:-10%;opacity:.38;background-size:800px 800px;animation:quiet-drift 360s linear infinite}
@keyframes quiet-drift{to{transform:translate3d(30px,100px,0)}}
.quiet-comet{position:absolute;left:15%;top:15%;width:100px;height:1px;opacity:0;rotate:25deg;background:linear-gradient(90deg,transparent,#ccd6ed99);animation:quiet-comet 48s linear infinite 8s}
.quiet-comet--second{left:65%;top:35%;width:70px;animation-duration:67s;animation-delay:28s}
@keyframes quiet-comet{0%,80%,100%{opacity:0;translate:0 0}83%{opacity:.4}93%{opacity:0;translate:200px 94px}94%{opacity:0;translate:0 0}}
.announcement{min-height:calc(100svh - 98px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:30px 35px}.announcement .eyebrow{margin-bottom:14px}.announcement h1{font-size:clamp(30px,4.4vw,56px)}.announcement .tagline{font-size:19px;margin-top:12px}.film{width:min(100%,900px,calc((100svh - 400px)*1.7778));margin:24px auto 0}.film figcaption{display:none}.intro{font-size:12px;max-width:700px;margin-top:20px;line-height:1.75}.cinema{position:relative;width:100%}.player{border-radius:9px}.cinema:fullscreen,.cinema.is-expanded{background:#000;display:grid;place-items:center;width:100%;height:100%;border:0;padding:0}.cinema:fullscreen .player,.cinema.is-expanded .player{width:min(100vw,177.7778vh);height:min(100vh,56.25vw);aspect-ratio:16/9;border:0;border-radius:0;box-shadow:none}.cinema.is-expanded{position:fixed;inset:0;z-index:1000}.exit-cinema{display:none;position:absolute;right:18px;top:18px;z-index:2;border:1px solid #ffffff55;border-radius:50%;width:44px;height:44px;background:#090d19bd;color:white;font-size:19px;cursor:pointer}.cinema:fullscreen .exit-cinema,.cinema.is-expanded .exit-cinema{display:block}.exit-cinema:focus-visible,.space-pause:focus-visible{outline:2px solid var(--gold);outline-offset:4px}body.cinema-open{overflow:hidden}.space-pause{order:3;background:transparent;border:0;padding:8px 0;color:var(--muted);font:11px Arial,sans-serif;cursor:pointer;min-height:36px}.space-paused .space-atmosphere *,.page-hidden .space-atmosphere *{animation-play-state:paused!important}
@media(max-width:700px){.announcement{min-height:calc(100svh - 81px);padding-block:35px}.announcement h1{font-size:clamp(25px,5.4vw,40px)}.announcement .tagline{font-size:18px}.film{width:100%;margin-top:25px}.intro{font-size:12px;margin-top:22px;text-align:center}.trilogy-section{margin-top:10px}.footer{gap:10px}.exit-cinema{top:12px;right:12px}}
@media(max-height:600px) and (min-width:701px){.film{width:min(100%,760px)}.announcement{min-height:0}}
@media(prefers-reduced-motion:reduce){.quiet-stars,.quiet-comet{animation:none}.quiet-comet,.space-pause{display:none}}

.quiet-stars{background-image:radial-gradient(1px 1px at 654px 114px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 281px 250px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(1px 1px at 754px 104px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 432px 32px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(1px 1px at 223px 238px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 203px 733px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 459px 603px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(.8px .8px at 777px 163px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.8px .8px at 284px 159px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.6px .6px at 104px 94px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 367px 352px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(.8px .8px at 747px 470px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(1px 1px at 80px 565px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(1px 1px at 633px 370px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.8px .8px at 71px 46px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.8px .8px at 81px 238px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 284px 464px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(1px 1px at 379px 363px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(1px 1px at 273px 718px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 650px 175px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(1px 1px at 473px 388px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(1px 1px at 704px 570px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.6px .6px at 332px 786px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.8px .8px at 32px 323px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 67px 216px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(1px 1px at 671px 511px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 469px 146px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(1px 1px at 252px 762px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(.8px .8px at 598px 438px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 224px 141px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 773px 48px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(1px 1px at 642px 163px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(1px 1px at 65px 394px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(1px 1px at 479px 541px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(1px 1px at 11px 696px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(1px 1px at 549px 768px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(.8px .8px at 348px 114px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(1px 1px at 161px 464px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(1px 1px at 736px 269px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(1px 1px at 108px 640px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(.6px .6px at 519px 623px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(1px 1px at 382px 780px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(1px 1px at 797px 543px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 331px 500px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 371px 314px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.6px .6px at 246px 580px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(1px 1px at 749px 497px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(1px 1px at 784px 128px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.8px .8px at 486px 562px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.6px .6px at 540px 621px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(1px 1px at 552px 773px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.8px .8px at 319px 408px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(.6px .6px at 529px 462px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 230px 65px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(1px 1px at 602px 567px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(1px 1px at 225px 7px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 646px 60px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(1px 1px at 32px 338px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 243px 285px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 552px 135px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 484px 416px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.8px .8px at 99px 674px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(1px 1px at 433px 420px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 55px 689px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 412px 745px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(1px 1px at 254px 196px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.6px .6px at 459px 143px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 285px 473px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.6px .6px at 453px 563px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 667px 553px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.8px .8px at 771px 242px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.8px .8px at 497px 492px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.6px .6px at 60px 168px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.8px .8px at 399px 271px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 433px 713px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.6px .6px at 194px 303px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(1px 1px at 593px 753px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(1px 1px at 321px 58px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 488px 514px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.6px .6px at 520px 82px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.8px .8px at 609px 69px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(1px 1px at 122px 583px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.8px .8px at 608px 40px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.8px .8px at 673px 597px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(.6px .6px at 209px 685px,rgba(210,220,245,.55) 65%,transparent 100%),radial-gradient(1px 1px at 271px 405px,rgba(210,220,245,.4) 65%,transparent 100%),radial-gradient(.8px .8px at 660px 307px,rgba(210,220,245,.7) 65%,transparent 100%),radial-gradient(.8px .8px at 769px 74px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 636px 576px,rgba(210,220,245,.25) 65%,transparent 100%),radial-gradient(.6px .6px at 550px 218px,rgba(210,220,245,.55) 65%,transparent 100%)}

/* Trilogy: artwork and titles only. */
.albums h3{min-height:0}
@media(max-width:700px){.albums li{grid-template-rows:auto 1fr;align-items:start}.albums img{grid-row:1/3}.albums h3{align-self:start}.albums .album-number{margin-top:4px}}

/* Video leads; the two-line announcement follows. */
.announcement{min-height:0;padding-block:28px 12px;justify-content:flex-start}
.announcement .film{width:100%;margin:0}
.announcement-copy{margin-top:30px;width:100%;text-align:center}
.announcement h1{font-size:clamp(26px,4.2vw,52px)}
.announcement .tagline{margin-top:12px}
.announcement .intro{margin-top:18px}
.cinema.has-video .exit-cinema{display:grid;place-items:center;top:12px;right:12px;width:42px;height:42px;border-radius:9px;font-size:23px}
.cinema.is-expanded .exit-cinema,.cinema:fullscreen .exit-cinema{top:18px;right:18px}
.exit-cinema:hover{background:#28334be6}
.galaxy-haze{position:absolute;inset:-25%;background:radial-gradient(ellipse at 18% 30%,#6348a43d,transparent 48%),radial-gradient(ellipse at 82% 65%,#19667b33,transparent 45%),radial-gradient(ellipse at 65% 12%,#873e6924,transparent 38%);animation:galaxy-flow 55s ease-in-out infinite alternate}
@keyframes galaxy-flow{to{transform:translate3d(4%,3%,0) rotate(7deg) scale(1.08)}}
.quiet-stars{opacity:.85;filter:brightness(1.5);animation:quiet-drift 110s linear infinite alternate}
.quiet-comet{animation-delay:-39s}.quiet-comet--second{animation-delay:-48s}
@media(max-width:700px){.announcement{padding-block:22px 8px}.announcement-copy{margin-top:25px}.announcement h1{font-size:clamp(24px,5.3vw,38px)}.announcement .tagline{font-size:17px}.announcement .intro{font-size:11px;max-width:42ch}.cinema.has-video .exit-cinema{width:36px;height:36px;top:8px;right:8px}}
@media(prefers-reduced-motion:reduce){.galaxy-haze,.quiet-stars{animation:none}}

.announcement .film{aspect-ratio:16/9}

/* One fullscreen owner and one consistently available control. */
.cinema.has-video .exit-cinema{width:auto;min-width:44px;height:44px;padding:0 15px;font:13px/1 Arial,sans-serif;z-index:20;pointer-events:auto;background:#090d19ed;border:1px solid #ffffff70}
.announcement-copy{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:32px}
.announcement-copy h1{font-size:clamp(25px,3.6vw,44px);font-weight:400;line-height:1.25}
.announcement-copy .tagline{margin:0;max-width:none;font:400 17px/1.6 Arial,sans-serif;color:#d1d4df}
.announcement-copy .intro{margin:0;max-width:none;font:400 13px/1.6 Arial,sans-serif;color:var(--muted)}
@media(max-width:700px){.announcement-copy{gap:12px;margin-top:25px}.announcement-copy h1{font-size:clamp(23px,5.2vw,36px)}.announcement-copy .tagline{font-size:14px;max-width:34ch}.announcement-copy .intro{font-size:12px;max-width:36ch}.cinema.has-video .exit-cinema{height:44px;font-size:12px}}

/* Deeper space background. */
:root{--bg:#04060d}
body{background:transparent}
.space-atmosphere{background:#04060d}
.galaxy-haze{opacity:.45}

/* Compact header brand. */
.header .logo{width:108px;height:auto}
@media(max-width:700px){.header .logo{width:88px}}

.announcement-copy{margin-top:20px}
.announcement-copy .intro{max-width:none;font-size:13px;line-height:1.7;text-wrap:balance}
@media(max-width:700px){.announcement-copy{margin-top:16px}.announcement-copy .intro{font-size:12px}}

/* A restrained gold signature beneath the film. */
.announcement-copy .intro{color:var(--gold);font:italic 18px/1.65 Georgia,serif;letter-spacing:.01em}
@media(max-width:700px){.announcement-copy .intro{font-size:16px}}

.lnk__ico .nasa-card-logo{width:44px;height:auto;object-fit:contain}
@media(max-width:700px){.lnk__ico .nasa-card-logo{width:38px}}

/* Understated partnership text and optional portrait details. */
.announcement-copy{margin-top:26px}
.announcement-copy .intro{max-width:850px;font:400 18px/1.85 Georgia,serif;color:#cbb889;letter-spacing:0;text-wrap:pretty}
.person-link{color:#ead19b;text-decoration:underline;text-decoration-color:#d2ba7f55;text-underline-offset:4px;text-decoration-thickness:1px;transition:color .2s,text-decoration-color .2s}
.person-link:hover,.person-link:focus-visible{color:#f2dfb7;text-decoration-color:#ead19b}
.person-portrait{position:fixed;z-index:50;width:184px;padding:10px;background:#10131bf5;border:1px solid #d9c39030;border-radius:10px;box-shadow:0 12px 35px #0008;color:#d4d6df;text-align:left;font:12px/1.5 Arial,sans-serif}
.person-portrait[hidden]{display:none}
.person-portrait img{width:100%;height:180px;object-fit:cover;object-position:center 25%;filter:grayscale(1);border-radius:5px;margin-bottom:10px}
.person-portrait strong,.person-portrait span,.person-portrait small{display:block}
.person-portrait strong{font-weight:500;color:#ead19b;margin-bottom:3px}.person-portrait span{font-size:11px}.person-portrait small{margin-top:8px;font-size:9px;color:#9298a8}.person-portrait small a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:700px){.announcement-copy .intro{font-size:16px;line-height:1.8}.person-portrait{width:168px}.person-portrait img{height:160px}}

/* Compact partnership caption, with quiet portrait transitions. */
.announcement-copy .intro{max-width:100%;font-size:15px;line-height:1.7;text-wrap:balance}
.person-link,.person-link:hover,.person-link:focus-visible{text-decoration:none}
.person-portrait{opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .36s cubic-bezier(.16,1,.3,1)}
.person-portrait.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:700px){.announcement-copy .intro{font-size:14px;line-height:1.65}}
@media(prefers-reduced-motion:reduce){.person-portrait{transition:none;transform:none}}

/* Slow orbital drift and occasional comet trails. */
.quiet-stars{animation:star-orbit 85s ease-in-out infinite alternate}
@keyframes star-orbit{from{transform:translate3d(-12px,-15px,0)}to{transform:translate3d(45px,85px,0)}}
.quiet-comet{width:140px;height:1px;left:8%;top:12%;rotate:24deg;background:linear-gradient(90deg,transparent,#b4cce36b 75%,#e8f1ff);animation:comet-passage 32s linear infinite;animation-delay:-2s}
.quiet-comet::after{content:'';position:absolute;right:-1px;top:-1px;width:3px;height:3px;border-radius:50%;background:#e8f1ff;box-shadow:0 0 8px 2px #b7d7ff50}
.quiet-comet--second{left:62%;top:28%;width:100px;animation-duration:43s;animation-delay:-18s}
.quiet-comet--third{left:20%;top:70%;width:85px;animation-duration:51s;animation-delay:-34s;rotate:18deg}
@keyframes comet-passage{0%{opacity:0;translate:-90px -40px}5%{opacity:.55}25%{opacity:.35}32%{opacity:0;translate:300px 130px}100%{opacity:0;translate:300px 130px}}
@media(max-width:700px){.quiet-comet{width:90px}.quiet-comet--third{width:65px}}
@media(prefers-reduced-motion:reduce){.quiet-stars{animation:none}.quiet-comet{display:none}}

.footer{justify-content:center;align-items:center;padding-block:24px;gap:0}.footer p{font-size:12px;text-align:center;color:var(--muted)}

/* Each star follows its own slow, softly changing course. */
.quiet-stars{animation:none;transform:none;background-image:none;filter:none;opacity:1}
.wandering-star{position:absolute;border-radius:50%;background:#d5e2f5;opacity:var(--star-opacity);animation:star-wander 100s ease-in-out infinite alternate;pointer-events:none}
@keyframes star-wander{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(var(--x1),var(--y1),0)}66%{transform:translate3d(var(--x2),var(--y2),0)}100%{transform:translate3d(var(--x3),var(--y3),0)}}
@media(prefers-reduced-motion:reduce){.wandering-star{animation:none}}

/* Proportional mobile typography and spacing. */
@media(max-width:43.75rem){
  .wrap{width:calc(100% - clamp(2rem,10vw,2.5rem))}
  .header{padding-block:1.125rem}
  .header .logo{width:5.5rem}
  .header nav{font-size:.75rem;gap:clamp(.75rem,4vw,1.0625rem)}
  .announcement{padding-block:1.375rem .5rem}
  .announcement-copy{margin-top:1.125rem}
  .announcement-copy .intro{font-size:clamp(.75rem,.65rem + .45vw,.875rem);line-height:1.65;max-width:100%}
  .trilogy-section,.explore-section{padding-top:1.75rem;margin-top:1.75rem}
  .section-heading{margin-bottom:1.25rem}
  .trilogy-section h2{font-size:clamp(1.5rem,1.2rem + 1.5vw,1.875rem);line-height:1.2}
  .albums{gap:1.375rem}
  .albums li{grid-template-columns:clamp(5.5rem,28vw,7rem) minmax(0,1fr);column-gap:1.125rem}
  .albums .album-number{font-size:.5625rem!important;letter-spacing:.14em;margin:.25rem 0 .5rem}
  .albums h3{font-size:clamp(1.0625rem,.85rem + 1vw,1.375rem);line-height:1.25}
  #explore-title{font-size:clamp(1.875rem,1.5rem + 2vw,2.5rem);margin-bottom:1.25rem}
  .explore-eyebrow{font-size:.5625rem;margin-bottom:1rem}
  .lnk__kicker{font-size:.5625rem}
  .lnk__body b{font-size:.875rem;line-height:1.4}
  .lnk--hero .lnk__body b{font-size:1rem}
  .footer p{font-size:.6875rem}
}

/* ── Mobile: the film owns the first screen ───────────────────────────
   The announcement fills one viewport below the header, so the video
   reads as the hero, nothing of the next section peeks in, and the first
   scroll lands on The LIM Trilogy.

   Note: the unconditional `.announcement{min-height:0}` further up
   cancels the full-height rule declared above it on every viewport,
   since media queries carry no extra specificity. This restores the
   behaviour for phones only and leaves the desktop layout alone. */
@media (max-width: 43.75rem) {
  .announcement {
    /* header measures 81px; subtracting 76px leaves a safety margin so
       the next section stays below the fold even if the header shifts */
    /* one viewport below the header, plus 5px so nothing below peeks */
    min-height: calc(100svh - var(--header-h) + 5px);
    justify-content: center;
    gap: clamp(1.25rem, 4.5vh, 2.25rem);
    /* extra room at the foot optically lifts the film off dead centre */
    padding-block: 0 clamp(1.5rem, 7vh, 3.5rem);
  }
  .announcement-copy { margin-top: 0 }
}

/* ── Mobile: one flick from the film to the trilogy ───────────────────
   The hero fills the screen, which leaves ~290px of empty space under the
   intro. Rather than shrink the hero, the scroll carries you across it in
   one motion and settles on The LIM Trilogy.

   proximity, not mandatory, and only on the two sections that are at or
   under one viewport tall. Measured at 430x932: mandatory traps the foot
   of the page, because it must come to rest on a snap point and there is
   none below the explore section; and a snap area taller than the
   snapport generates an end-aligned position too, which pinned the last
   100px. `main` and `.explore-section` are deliberately excluded for that
   reason. The cost is a dead band around 400-600px where a slow drag can
   stall in the hero, which is the lesser problem. */
@media (max-width: 43.75rem) {
  html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
  }
  .announcement,
  .trilogy-section {
    scroll-snap-align: start;
  }
  .announcement { scroll-margin-top: var(--header-h) }
  #main { scroll-margin-top: var(--header-h) }
  /* `section[id]{scroll-margin-top:30px}` further up is more specific than
     a bare class, so these need the element qualifier to win, otherwise
     the snap lands 30px short and leaves a sliver of the hero on screen. */
  section.trilogy-section,
  section.explore-section { scroll-margin-top: 0 }
  .trilogy-section { margin-top: 0; padding-top: 1.625rem }
}

/* Forced snapping is disorienting for vestibular sensitivity, so drop
   both the snap and the smooth easing when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; scroll-behavior: auto }
}

/* ── SVG icons replacing emoji-presentation glyphs ────────────────────
   ↗ (U+2197), ▶ (U+25B6) and the ⤢/⤡ fullscreen arrows all carry an
   emoji presentation on iOS, where they rendered as colour emoji rather
   than icons. These inherit currentColor so hover and focus states keep
   working exactly as they did with the text glyphs. */
.ico { display: inline-block; vertical-align: middle; flex: none }
.ico--out { width: .7em; height: .7em; margin-left: .3em }
.ico--close { width: 1em; height: 1em }
.ico--fs { width: .85em; height: .85em; margin-left: .45em }
.ico--play { width: 40%; height: 40%; margin-left: 6%; }   /* optical centre inside the round button */
.play { padding-left: 0 }                                   /* the glyph nudge is no longer needed */

/* ── Hero headline ────────────────────────────────────────────────────
   The page had no h1 at all, which is a gap for search and for screen
   reader navigation. It shows on mobile, where there is room for it, and
   stays available to assistive tech on desktop without altering that
   layout, since the header lockup already carries the name there. */
.hero-title {
  font-family: Georgia, serif;
  font-weight: 400;
  line-height: 1.12;
  text-align: center;
  color: #f2f1f6;
  letter-spacing: .01em;
}
.hero-title em { font-style: italic; color: var(--gold, #cbb889) }
.hero-title__x { color: var(--gold, #cbb889); font-style: normal; margin-inline: .1em }

/* desktop: present for search and screen readers, not shown */
@media (min-width: 43.8125rem) {
  .hero-title {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

@media (max-width: 43.75rem) {
  .hero-title {
    /* One line at every phone width. Measured: the lockup is 11.78x the
       font-size wide, so it is sized off the wrap and capped, rather than
       left to wrap into an uneven two-line block. */
    --fit: calc(100vw - clamp(2rem, 10vw, 2.5rem));
    font-size: min(2.25rem, calc(var(--fit) / 12.4));
    white-space: nowrap;
    margin: 0;
  }
}

/* ── Vimeo ────────────────────────────────────────────────────────────
   The collaboration film moved from YouTube to Vimeo, so the featured
   card carries Vimeo's mark and brand blue. The trilogy channel card
   stays on YouTube and keeps its own. */
.ico--vimeo { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231ab7ea'%3E%3Cpath d='M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 11.4C4.603 8.816 3.834 7.522 3.01 7.522c-.179 0-.806.378-1.881 1.132L0 7.197c1.185-1.044 2.351-2.084 3.501-3.128C5.08 2.701 6.266 1.984 7.055 1.91c1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.507.539 2.45 1.131 3.674 1.776 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.868 3.434-5.757 6.762-5.637 2.473.06 3.628 1.664 3.493 4.797z'/%3E%3C/svg%3E") }

/* ── Cinema: easing in and out ────────────────────────────────────────
   The player itself is FLIP-animated from its inline rect by script.js.
   These cover what that cannot: the black ground behind it and the exit
   control, which previously both appeared in a single hard cut. */
.cinema.is-expanded {
  animation: cinema-in .55s cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes cinema-in {
  from { background-color: rgba(0, 0, 0, 0); backdrop-filter: blur(0px) }
  to   { background-color: #000;             backdrop-filter: blur(18px) }
}

.cinema.has-video .exit-cinema {
  animation: fs-control-in .5s .12s cubic-bezier(.16, 1, .3, 1) backwards;
  transition: opacity .35s ease, background-color .25s ease, border-color .25s ease;
}
@keyframes fs-control-in {
  from { opacity: 0; transform: translateY(-.5rem) }
  to   { opacity: 1; transform: none }
}

/* Once the film is running the control recedes rather than sitting over
   the picture at full strength. It never drops to zero: an exit affordance
   you cannot find is worse than one that is slightly dim. Any pointer
   movement, focus or keypress restores it via .controls-awake. */
.cinema.is-expanded.has-video .exit-cinema { opacity: .28 }
.cinema.is-expanded.has-video.controls-awake .exit-cinema,
.cinema.is-expanded.has-video .exit-cinema:hover,
.cinema.is-expanded.has-video .exit-cinema:focus-visible { opacity: 1 }

/* The cover's play control eases under the finger too */
.film-cover .play { transition: transform .35s cubic-bezier(.16,1,.3,1), background-color .25s ease }
.film-cover:active .play { transform: scale(.94) }

@media (prefers-reduced-motion: reduce) {
  .cinema.is-expanded,
  .cinema.has-video .exit-cinema { animation: none }
  .cinema.is-expanded.has-video .exit-cinema { opacity: 1 }
  .film-cover .play { transition: none }
}

/* ── COSI mission site card (UC Berkeley SSL) ─────────────────────────
   Uses the official COSI SMEX mission patch. It is a dense circular
   emblem rather than a flat wordmark, so it is sized to fill the tile
   the way the NASA mark does. Accent is Berkeley's Founder's Rock blue,
   kept distinct from the NASA card's and Facebook's blues. */
.lnk--berkeley { --brand: #3b7ea1 }
.lnk__ico .cosi-card-logo { width: 44px; height: auto; object-fit: contain }
@media (max-width: 43.75rem) {
  .lnk__ico .cosi-card-logo { width: 38px }
}

/* ── TikTok ───────────────────────────────────────────────────────────
   Accent is TikTok's cyan rather than its red, which would have sat too
   close to the film card's #ff4a4a and Instagram's pink. */
.ico--tiktok { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325f4ee'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E") }
.lnk--tiktok { --brand: #25f4ee }

/* ── Film: no white flash on play ─────────────────────────────────────
   The frame sits over the poster rather than replacing it, so there is
   always a picture on screen while the embed loads and while the browser
   repaints for fullscreen. script.js adds .is-ready on the iframe's load
   event, and removes the poster once the video is visible. */
.player { position: relative }
.player .film-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: #000;
  opacity: 0; transition: opacity .45s ease;
}
.player .film-frame.is-ready { opacity: 1 }
@media (prefers-reduced-motion: reduce) {
  .player .film-frame { transition: none }
}

/* --header-h is the measured header height and is the single source for
   the hero's min-height and both snap offsets, so those stay in step if
   the header ever changes. */
@media (max-width: 43.75rem) {
  :root { --header-h: 5.0625rem }        /* 81px */
}

/* ── Nav: tighten the external-link arrow ─────────────────────────────
   The gap between "Explore more" and its arrow measured 12px: the link is
   a flex container with gap:8px, and .ico--out adds a further .3em on top.
   That margin exists for the inline contexts (the film caption), where
   there is no flex gap to do the spacing, so it is dropped here rather
   than removed outright, and the flex gap itself comes down to 5px. */
.header nav a { gap: 5px }
.header nav a .ico--out { margin-left: 0 }

/* ── Trilogy cards link to the channel ────────────────────────────────
   The li is a grid whose columns change per breakpoint, so wrapping the
   whole card in an anchor would break that layout. Instead the title is
   the link and its ::after is stretched over the card, which keeps the
   grid intact and leaves the link with real text for screen readers
   rather than an anonymous clickable region. */
.albums li { position: relative }
.album-link { color: inherit; text-decoration: none; transition: color .2s ease }
.album-link::after { content: ""; position: absolute; inset: 0; border-radius: 10px }
.albums li:hover .album-link,
.album-link:focus-visible { color: var(--gold) }
.albums li:has(.album-link:focus-visible) { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 10px }
.album-link:focus-visible { outline: none }
.albums li img { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s ease }
.albums li:hover img { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 45%, transparent) }
@media (prefers-reduced-motion: reduce) {
  .album-link, .albums li img { transition: none }
  .albums li:hover img { transform: none }
}