:root { --ink:#090908; --cream:#f3eadb; --gold:#d8b36a; --muted:#b9ad98; --line:rgba(216,179,106,.27); --serif:Georgia,'Times New Roman',serif; --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --max:78rem; --gutter:clamp(1rem,4.4vw,3.5rem); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }
body { margin:0; min-width:320px; overflow-x:hidden; background:var(--ink); color:var(--cream); font:16px/1.6 var(--sans); }
img,video { display:block; max-width:100%; height:auto; }
a { color:inherit; } h1,h2,p { margin:0; } h1,h2 { font-family:var(--serif); font-weight:400; line-height:.98; letter-spacing:-.045em; } em { color:var(--gold); }
.sr { position:absolute; width:1px; height:1px; clip:rect(0 0 0 0); overflow:hidden; }.skip { position:absolute; z-index:20; top:-4rem; left:1rem; padding:.6rem 1rem; background:var(--gold); color:var(--ink); }.skip:focus { top:1rem; }
.header { position:sticky; top:0; z-index:10; height:4.5rem; display:flex; align-items:center; gap:1.3rem; padding:0 var(--gutter); background:rgba(9,9,8,.86); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.brand { margin-right:auto; font:1.2rem var(--serif); text-decoration:none; white-space:nowrap; }.brand-orb { display:inline-block; width:.75rem; height:.75rem; margin-right:.5rem; border:1px solid var(--gold); border-radius:50%; background:linear-gradient(90deg,transparent 50%,var(--gold) 50%); }
nav { display:flex; gap:1.25rem; } nav a,.portrait-link { font-size:.79rem; color:var(--muted); text-decoration:none; } nav a:hover,.portrait-link:hover { color:var(--cream); }
.portrait-link { display:flex; align-items:center; gap:.45rem; overflow:hidden; padding:.22rem .75rem .22rem .22rem; border:1px solid var(--line); border-radius:99px; }.portrait-link img { width:1.65rem; height:1.65rem; object-fit:cover; object-position:50% 20%; border-radius:50%; transform:scale(1.8); }
.hero { position:relative; max-width:var(--max); min-height:calc(100vh - 4.5rem); margin:auto; padding:clamp(1.5rem,4vh,3.1rem) var(--gutter) 2rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(20rem,.82fr); gap:clamp(2rem,7vw,8rem); align-items:center; overflow:hidden; }
.hero:before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 76% 28%,rgba(216,179,106,.17),transparent 27%),linear-gradient(115deg,transparent 20%,rgba(255,255,255,.025),transparent 58%); }.hero-copy,.hero-stage { position:relative; z-index:1; }
.eyebrow,.number,.label { color:var(--gold); font-size:.68rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; } h1 { max-width:9ch; margin:.8rem 0 1.3rem; font-size:clamp(3.35rem,6.2vw,6.3rem); }.lede { max-width:35rem; color:var(--muted); font-size:1.05rem; }
.actions,.project-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.5rem; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:3rem; gap:.65rem; padding:.78rem 1.1rem; border:1px solid transparent; font-size:.74rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; cursor:pointer; }.gold { background:var(--gold); color:#17120b; }.dark { background:#1c554f; color:#fff; }.periwinkle { background:#a8adff; color:#131634; }.chapter { padding:.4rem 0; border:0; border-bottom:1px solid var(--gold); background:transparent; color:var(--cream); font:700 .74rem var(--sans); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }.text-link { color:var(--muted); text-underline-offset:.3rem; }.quiet { margin-top:.9rem; color:#928675; font-size:.75rem; }
.hero-stage { display:grid; grid-template-columns:minmax(0,17rem) minmax(8rem,1fr); gap:1.3rem; align-items:end; }.film-card { padding:.55rem; background:#14110d; border:1px solid var(--line); box-shadow:0 2rem 4rem rgba(0,0,0,.45); }.film-card video { width:100%; aspect-ratio:9/16; object-fit:cover; background:#000; }.film-meta,.film-credit { display:flex; justify-content:space-between; padding:.45rem .2rem; color:var(--muted); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }.film-credit span { color:var(--gold); }.screen-list { display:grid; gap:.55rem; padding-bottom:1rem; }.screen-list a { display:grid; gap:.16rem; padding:.4rem .7rem; border-left:1px solid var(--gold); background:rgba(216,179,106,.06); font:1.1rem var(--serif); text-decoration:none; }.screen-list b { color:var(--gold); font:700 .6rem var(--sans); letter-spacing:.16em; }
.transcript { position:absolute; z-index:2; bottom:.45rem; left:var(--gutter); color:var(--muted); font-size:.78rem; }.transcript summary { cursor:pointer; }.transcript div { max-width:45rem; margin-top:.5rem; padding:1rem; background:#171511; border:1px solid var(--line); }.transcript p+p { margin-top:.7rem; }
.gateway,.work,.about,.contact { padding:clamp(4.5rem,10vw,9rem) var(--gutter); }.gateway { background:#13110e; }.section-intro { max-width:45rem; margin:0 auto 2rem; }.section-intro h2 { margin-top:.7rem; font-size:clamp(2.6rem,5vw,4.6rem); }.gateway-grid { display:grid; grid-template-columns:repeat(3,1fr); max-width:var(--max); margin:auto; gap:1px; background:var(--line); }.gateway-card { position:relative; isolation:isolate; min-height:15rem; display:flex; flex-direction:column; overflow:hidden; padding:1.4rem; background:#171511; text-decoration:none; transition:background .25s,color .25s; }.gateway-card:before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,rgba(8,8,7,.98),rgba(8,8,7,.12)); }.gateway-card img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; opacity:.8; }.gateway-card:hover { background:var(--gold); color:#111; }.gateway-card span { color:var(--gold); font-size:.73rem; letter-spacing:.15em; }.gateway-card strong { margin:auto 0 .2rem; font:2rem var(--serif); }.gateway-card small { color:var(--muted); }.gateway-card:hover span,.gateway-card:hover small { color:inherit; }
.work { padding-top:0; }.project { display:grid; grid-template-columns:minmax(15rem,.72fr) minmax(0,1.28fr); align-items:center; gap:clamp(2rem,7vw,7rem); max-width:var(--max); margin:auto; padding:clamp(4.5rem,10vw,9rem) 0; border-bottom:1px solid var(--line); }.project h2 { margin:.6rem 0; font-size:clamp(3rem,5.7vw,5.4rem); }.number span { margin-left:.6rem; color:var(--muted); }.project-lede { margin-bottom:1rem; color:var(--gold); font:1.3rem var(--serif); }.project-copy>p:not(.number):not(.project-lede) { color:var(--muted); }
.screen-frame,.story-card,.heart-card,.concept-card { margin:0; background:#16130f; border:1px solid var(--line); }.frame-bar { display:flex; justify-content:space-between; padding:.55rem .75rem; border-bottom:1px solid var(--line); color:var(--gold); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; }.screen-frame img { width:100%; object-fit:contain; background:#0d0c0a; }.screen-frame figcaption,.heart-card figcaption,.story-card p,.concept-card figcaption { padding:.7rem .8rem; color:var(--muted); font-size:.77rem; }
.triptych { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:start; }.triptych .screen-frame img,.story-card img { width:100%; object-fit:contain; background:#0d0c0a; }.story-card { display:flex; flex-direction:column; }.story-card .label { padding:.7rem .8rem .1rem; }.almanac-visuals { display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; align-items:center; }.heart-card { overflow:hidden; }.heart-card img { width:100%; object-fit:contain; background:#0d0c0a; }.heart-card figcaption span,.concept-card figcaption span { margin-right:.5rem; color:var(--gold); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }.concept-card { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }.concept-card img { width:100%; aspect-ratio:16/8; object-fit:cover; }.concept-card figcaption { grid-column:1/-1; background:#16130f; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:4rem; background:var(--cream); color:#1b1813; }.about h2,.contact h2 { margin-top:.7rem; font-size:clamp(2.8rem,5vw,5rem); }.about-copy { max-width:34rem; font:1.26rem/1.5 var(--serif); }.about-copy p+p { margin-top:1rem; }.contact { text-align:center; background:radial-gradient(circle at 50% 0,rgba(216,179,106,.18),transparent 42%),#12100d; }.contact>* { max-width:45rem; margin-right:auto; margin-left:auto; }.contact>p:not(.eyebrow) { margin-top:1rem; color:var(--muted); }.contact .button { margin-top:1.7rem; } footer { display:flex; justify-content:space-between; gap:1rem; padding:1.3rem var(--gutter); border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; }
@media (max-width:760px) { .header nav { display:none; }.hero { min-height:auto; grid-template-columns:1fr; padding-top:3rem; }.hero-stage { grid-template-columns:minmax(0,17rem) 1fr; justify-content:center; }.hero .film-card { justify-self:center; }.transcript { position:static; margin-top:1rem; }.gateway-grid,.project,.about { grid-template-columns:1fr; }.project { gap:2rem; }.about { gap:2rem; } footer { flex-direction:column; } }
@media (max-width:440px) { .portrait-link { padding:.2rem; font-size:0; }.portrait-link img { width:1.8rem; height:1.8rem; }.hero-stage { grid-template-columns:1fr; }.screen-list { grid-template-columns:repeat(3,1fr); padding:0; }.screen-list a { padding:.55rem; font-size:.75rem; }.triptych,.almanac-visuals { grid-template-columns:1fr; }.concept-card { grid-template-columns:1fr; }.concept-card img { aspect-ratio:16/10; }.gateway,.work,.about,.contact { padding-top:4rem; padding-bottom:4rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.gateway-card { transition:none; } }

/* One enlarged view reuses the existing native player. */
.cinema { width:min(96vw,70rem); max-width:96vw; margin:auto; padding:0; color:var(--cream); background:#090908; border:1px solid var(--line); box-shadow:0 2rem 8rem rgba(0,0,0,.8); }
.cinema::backdrop { background:rgba(0,0,0,.86); backdrop-filter:blur(9px); }.cinema-shell { padding:clamp(.5rem,1.5vw,.85rem); }.cinema-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.35rem; color:var(--gold); font-size:.73rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }.cinema-close { min-height:44px; padding:.55rem .7rem; border:1px solid var(--line); background:transparent; color:var(--cream); font:700 .72rem var(--sans); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }.cinema-close:hover { border-color:var(--gold); }.cinema-video-slot { display:grid; place-items:center; min-height:12rem; }.cinema .film-card { width:min(100%,calc((100svh - 12rem) * .5625)); padding:0; border:0; box-shadow:none; background:#000; }.cinema .film-meta,.cinema .film-credit { display:none; }.cinema .film-card video { width:100%; height:auto; max-height:calc(100svh - 12rem); aspect-ratio:9/16; object-fit:contain; }.cinema-note { margin-top:.35rem; color:var(--muted); font-size:.72rem; text-align:center; }


.almanac-real-details { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.chapter-deep { color:var(--muted); border-color:var(--line); font-size:.66rem; }.chapter-deep:hover { color:var(--gold); border-color:var(--gold); }
@media (max-width:640px) { .almanac-real-details { grid-template-columns:1fr; } }

/* Final desktop composition: the whole entrance fits in the first view. */
.portrait-link { width:6.6rem; height:2.15rem; }
.portrait-link img { flex:none; object-position:50% 50%; transform:scale(5.6); }
@media (min-width:761px) and (max-height:680px) {
  .hero { min-height:calc(100svh - 4.5rem); padding-top:.65rem; padding-bottom:.65rem; }
  h1 { margin:.35rem 0 .75rem; font-size:clamp(3rem,5vw,5.15rem); }
  .lede { font-size:.96rem; }.actions { margin-top:.8rem; }.quiet { margin-top:.4rem; }
  .hero-stage { grid-template-columns:minmax(0,13rem) minmax(7rem,1fr); gap:.8rem; }
  .film-card { padding:.35rem; }.film-meta,.film-credit { padding:.2rem; font-size:.59rem; }
  .film-card video { width:auto; max-width:100%; height:calc(100svh - 11.5rem); max-height:22.2rem; margin:auto; }
  .screen-list { gap:.35rem; padding-bottom:.2rem; }.screen-list a { padding:.24rem .5rem; font-size:.91rem; }
  .transcript { display:none; }
}
.concept-card img { height:auto; aspect-ratio:941 / 1672; object-fit:contain; background:#0d0c0a; }

/* Final integration refinements. */
:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.portrait-link { width:auto; height:auto; overflow:visible; }
.avatar { width:1.7rem; height:1.7rem; flex:none; border-radius:50%; overflow:hidden; }
.portrait-link .avatar img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:scale(5.6); }
.transcript { position:static; grid-column:1/-1; margin-top:.5rem; }
.transcript[open] { align-self:start; }
.transcript div { max-width:52rem; }
.project-sunavero { grid-template-columns:1fr; gap:2.5rem; }
.project-sunavero .project-copy { max-width:44rem; }
.project-sunavero .triptych { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:58rem; }
.gateway-card:hover { color:var(--cream); }
.gateway-card:hover span,.gateway-card:hover small { color:var(--gold); }
@media(min-width:761px) and (max-height:680px) {
 .hero { column-gap:clamp(2rem,5vw,5rem); row-gap:.35rem; padding-top:.65rem; padding-bottom:.7rem; }
 .hero-stage { grid-template-columns:minmax(0,15.25rem) minmax(7rem,1fr); }
 .film-card video { width:100%; height:auto; max-height:none; aspect-ratio:9/16; object-fit:contain; }
 .transcript { display:block; }
}
@media(max-width:1000px) { .project-sunavero .triptych { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:440px) {
 .portrait-link { padding:.2rem; }
 .portrait-label { display:none; }
 .avatar { width:1.8rem; height:1.8rem; }
 .project-sunavero .triptych { grid-template-columns:1fr; }
 .frame-bar { flex-wrap:wrap; gap:.25rem; }
}

.project { align-items:start; }
.about .eyebrow,.about em { color:#80602e; }
.preview-unavailable { padding:2rem 1rem; min-height:8rem; color:var(--muted); font-size:.9rem; border-bottom:1px solid var(--line); }

.math-visuals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; min-width:0; }
.math-visuals .screen-frame { min-width:0; }
#almanac > .concept-card { grid-column:1 / -1; width:100%; margin-top:1.25rem; }
body.cinema-open { overflow:hidden; }
.cinema-status:empty { display:none; }
.cinema-status { margin:.35rem 0 0; color:var(--gold); font-size:.78rem; text-align:center; }
@media(max-width:760px) { .math-visuals { grid-template-columns:1fr; } }

@media(min-width:761px) {
 .project-sunavero .triptych { max-width:none; width:100%; align-items:stretch; }
 .project-sunavero .triptych figure { display:flex; flex-direction:column; min-width:0; }
 .project-sunavero .triptych img { height:clamp(22rem,36vw,30rem); object-fit:contain; }
 .project-sunavero .triptych figcaption,.project-sunavero .story-card>p:last-child { margin-top:auto; }
}
@media(min-width:1001px) {
 .cinema-shell { position:relative; padding:.75rem; }
 .cinema-top { position:absolute; z-index:1; top:.75rem; left:.75rem; right:.75rem; margin:0; pointer-events:none; }
 .cinema-top p,.cinema-close { pointer-events:auto; }
 .cinema .film-card { width:min(100%,calc((100svh - 6rem) * .5625)); }
 .cinema .film-card video { max-height:calc(100svh - 6rem); }
}

.moon-interface-window { aspect-ratio:1.6; overflow:hidden; }
.moon-interface-window img { width:100%; height:100%; object-fit:cover; object-position:center bottom; }

.selection-note { margin-top:1.1rem; max-width:42rem; color:var(--muted); font-size:1rem; }

/* Two visible films with distinct roles. */
.two-film-hero { display:block; min-height:0; overflow:visible; padding-top:1.1rem; padding-bottom:2rem; }
.hero-heading { text-align:center; margin:0 auto 1rem; }
.hero-heading h1 { max-width:none; margin:.3rem 0 .4rem; font-size:clamp(2rem,3.2vw,3.2rem); line-height:1.06; }
.hero-lede { color:var(--muted); font-size:.92rem; }
.film-jump { display:none; }
.film-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.2rem,4vw,3.5rem); width:min(100%,49rem); margin:auto; align-items:start; }
.welcome-film { min-width:0; text-align:center; }
.video-heading { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:.2rem; }
.video-heading>div { display:flex; align-items:center; gap:.5rem; }
.video-heading h2 { font-family:var(--sans); font-weight:650; font-size:1.04rem; letter-spacing:0; line-height:1.4; }
.video-number { color:var(--gold); font-size:.65rem; letter-spacing:.14em; }
.runtime { color:var(--muted); padding:.15rem .4rem; border:1px solid var(--line); font-size:.65rem; line-height:1.3; }
.video-purpose { color:var(--muted); font-size:.75rem; margin-bottom:.65rem; }
.intro-media,.showcase-media { position:relative; width:clamp(9.5625rem,calc((100svh - 19rem) * .5625),18rem); max-width:100%; height:auto; aspect-ratio:9/16; margin:0 auto; border:1px solid var(--line); background:#000; overflow:hidden; box-shadow:0 1rem 3rem rgba(0,0,0,.4); }

.intro-media video,.intro-final-poster,.showcase-media video { width:100%; height:100%; object-fit:contain; }
.intro-final-poster { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.intro-complete .intro-final-poster { opacity:1; }
.intro-controls,.showcase-controls { min-height:2.8rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem; margin-top:.65rem; }
.intro-controls button { min-height:2.5rem; padding:.45rem .6rem; border:1px solid var(--line); background:transparent; color:var(--cream); font:650 .68rem var(--sans); cursor:pointer; }
.intro-controls button:hover { border-color:var(--gold); color:var(--gold); }
.showcase-controls .button { min-height:2.5rem; padding:.55rem .85rem; font-size:.65rem; letter-spacing:.08em; }
.video-note { color:var(--muted); font-size:.7rem; min-height:1.3em; margin-top:.2rem; }
.showcase-next .showcase-media { border-color:var(--gold); box-shadow:0 0 0 1px rgba(216,179,106,.3),0 1rem 3rem rgba(0,0,0,.4); }
.hero-followup { display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:1rem; color:var(--muted); font-size:.74rem; }
.hero-followup .text-link { white-space:nowrap; }
.film-transcripts { display:flex; justify-content:center; flex-wrap:wrap; gap:.3rem 1.5rem; margin-top:.6rem; }
.film-transcripts .transcript { position:static; margin:0; font-size:.7rem; }
.film-transcripts .transcript[open] { flex-basis:100%; max-width:50rem; }
.film-transcripts .transcript div { margin-bottom:.5rem; }
@media (min-width:641px) and (max-height:680px) {
 .two-film-hero { padding-top:.65rem; }
 .hero-heading .eyebrow { display:none; }
 .hero-heading h1 { font-size:2rem; }
 .hero-heading { margin-bottom:.75rem; }
}
@media (min-width:641px) and (min-height:681px) {
 .intro-media,.showcase-media { width:clamp(9.5625rem,calc((100svh - 21rem) * .5625),18rem); }
}
@media (max-width:640px) {
 .two-film-hero { padding-top:1.6rem; }
 .hero-heading { text-align:left; margin-bottom:1.6rem; }
 .hero-heading h1 { max-width:15ch; font-size:2.65rem; line-height:1.02; margin:.6rem 0 .8rem; }
 .hero-lede { max-width:29rem; }
 .film-jump { display:flex; gap:.5rem; margin-top:1.1rem; }
 .film-jump a { flex:1; min-height:44px; display:flex; flex-direction:column; justify-content:center; padding:.45rem .65rem; border:1px solid var(--line); color:var(--cream); font-size:.75rem; text-decoration:none; }
 .film-jump a span { color:var(--gold); font-size:.65rem; }
 .film-pair { grid-template-columns:1fr; width:100%; gap:2.4rem; }
 .video-heading h2 { font-size:1.1rem; }
 .video-purpose { font-size:.8rem; }
 .intro-media,.showcase-media { width:min(100%,20rem); height:auto; aspect-ratio:9/16; }
 .intro-controls button { min-height:44px; }
 .showcase-controls .button { min-height:44px; }
 .hero-followup { flex-direction:column; gap:.5rem; margin-top:1.8rem; }
 .film-transcripts { flex-direction:column; gap:.5rem; margin-top:1.2rem; }
 .film-transcripts .transcript { font-size:.76rem; }
}
@media (prefers-reduced-motion:reduce) { .intro-final-poster { transition:none; } }

/* Equal frames, shared baselines and balanced copy. */
.video-heading { min-height:1.8rem; }
.video-purpose { min-height:2.6em; display:flex; align-items:center; justify-content:center; }
.intro-controls,.showcase-controls { min-height:44px; align-content:center; }
.intro-controls button,.showcase-controls .button { min-height:44px; }
.welcome-film .video-note { min-height:2.8em; }
.skills-section { max-width:var(--max); margin:auto; padding:clamp(4.5rem,9vw,8rem) var(--gutter); border-top:1px solid var(--line); }
.skills-heading { max-width:43rem; }
.skills-heading h2 { margin:.7rem 0 1.2rem; font-size:clamp(2.6rem,5vw,4.6rem); }
.skills-heading>p:last-child { color:var(--muted); max-width:36rem; }
.skills-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.2rem 2rem; margin-top:2.8rem; }
.skills-grid article { padding-top:1rem; border-top:1px solid var(--line); }
.skill-number { color:var(--gold); font-size:.67rem; letter-spacing:.14em; }
.skills-grid h3 { margin:.5rem 0 .7rem; color:var(--cream); font:1.45rem/1.15 var(--serif); }
.skills-grid p { color:var(--muted); font-size:.93rem; }
.wider-work { max-width:48rem; margin-top:2.7rem; padding-top:1.3rem; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; }
@media(max-width:900px) { .skills-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { .skills-grid { grid-template-columns:1fr; gap:1.6rem; }.skills-section { padding-top:4rem; padding-bottom:4rem; } }

.mobile-navigation { display:none; }
.media-fallback { margin:1rem auto; max-width:46rem; padding:1rem; border:1px solid var(--line); color:var(--muted); }
.media-fallback a { color:var(--cream); }
@media(max-width:760px) {
 .header { gap:.6rem; }
 .mobile-navigation { display:block; position:relative; }
 .mobile-navigation summary { display:flex; gap:.35rem; align-items:center; justify-content:center; min-width:3.2rem; min-height:44px; padding:.45rem .6rem; border:1px solid var(--line); color:var(--cream); font-size:.76rem; cursor:pointer; list-style:none; }
 .mobile-navigation summary::-webkit-details-marker { display:none; }
 .header .mobile-navigation nav { position:absolute; right:0; top:calc(100% + .5rem); width:12rem; padding:.4rem; display:flex; flex-direction:column; gap:0; background:#14110d; border:1px solid var(--line); box-shadow:0 1rem 2rem #000; }
 .mobile-navigation nav a { min-height:44px; padding:.65rem .8rem; color:var(--cream); }
}

/* Keep control baselines balanced even when button text wraps. */
.intro-controls { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); width:min(100%,23rem); margin:.65rem auto 0; }
.intro-controls button { min-width:0; }
.skills-section { max-width:calc(var(--max) + var(--gutter) + var(--gutter)); }

/* Creator credit follows the name without crowding navigation. */
.brand { display:flex; align-items:center; gap:.5rem; }
.brand-orb { flex:none; margin-right:0; }
.brand-copy { display:grid; gap:.18rem; line-height:1.1; }
.creator-credit { color:var(--muted); font:600 .58rem/1.2 var(--sans); letter-spacing:.06em; }
.footer-credit { color:var(--gold); }
@media(max-width:440px) { .brand { font-size:1.08rem; gap:.4rem; }.creator-credit { font-size:.55rem; } }

/* Explicit film choices open one large native player. */
body.film-viewer-open { overflow:hidden; }
.film-viewer { position:fixed; inset:0; width:min(calc(100vw - 1rem),72rem); height:calc(100svh - 1rem); max-width:calc(100vw - 1rem); max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid var(--line); background:#090908; color:var(--cream); box-shadow:0 2rem 6rem #000; }
.film-viewer::backdrop { background:rgba(0,0,0,.92); }
.viewer-shell { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.viewer-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem .8rem; border-bottom:1px solid var(--line); }
.viewer-header h2 { font:600 1rem/1.3 var(--sans); }
.viewer-header button { flex:none; min-height:44px; padding:.5rem .8rem; border:1px solid var(--line); background:transparent; color:var(--cream); font:650 .8rem var(--sans); cursor:pointer; }
.viewer-header button:hover { color:var(--gold); border-color:var(--gold); }
.viewer-stage { display:grid; place-items:center; min-height:0; padding:.4rem; overflow:hidden; }
.viewer-stage video { display:block; width:auto; height:100%; min-height:0; max-width:100%; aspect-ratio:9/16; object-fit:contain; background:#000; }
.viewer-footer { display:block; padding:.45rem .8rem; border-top:1px solid var(--line); color:var(--muted); text-align:center; font-size:.72rem; }
#film-viewer-status:empty { display:none; }
#film-viewer-status { margin-top:.2rem; color:var(--gold); }
.video-expanded-inline { width:min(100%,32rem); }
@media(max-width:540px) { .film-viewer { width:calc(100vw - .5rem); max-width:calc(100vw - .5rem); height:calc(100svh - .5rem); }.viewer-header { gap:.5rem; padding:.4rem .5rem; }.viewer-header h2 { font-size:.88rem; }.viewer-header button { padding:.4rem .6rem; }.viewer-stage { padding:.2rem; }.viewer-footer { padding:.4rem .5rem; } }

/* Project motion features. */
.project-motion-section { grid-template-columns:minmax(16rem,.72fr) minmax(0,1.28fr); align-items:start; gap:clamp(2rem,5vw,5rem); padding-top:clamp(2rem,4.5vw,4rem); }
.project-feature { min-width:0; }
.motion-feature { overflow:hidden; border-radius:.65rem; }
.project-motion-home { background:#eaf0e7; aspect-ratio:16/9; }
.project-motion-home video { width:100%; height:100%; object-fit:contain; aspect-ratio:16/9; }
.motion-feature figcaption { padding:1rem 1.1rem; }
.motion-caption { display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--cream); font:1.15rem/1.25 var(--serif); }
.motion-play { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; flex:none; min-height:44px; padding:.6rem .85rem; border:1px solid var(--gold); background:var(--gold); color:#17120b; font:700 .75rem var(--sans); cursor:pointer; }
.motion-equation { margin-top:.7rem; color:var(--gold); font-size:.85rem; }
.motion-description { margin-top:.25rem; }
.project-feature [role="status"]:empty { display:none; }
.project-feature [role="status"] { margin-top:.5rem; color:var(--gold); }
.project-interface-details { margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line); }
.project-interface-details summary { min-height:44px; cursor:pointer; color:var(--muted); font-size:.82rem; }
.project-interface-details .math-visuals { margin-top:.6rem; }
.film-viewer.landscape .viewer-stage video { width:100%; height:100%; aspect-ratio:16/9; object-fit:contain; }
@media(max-width:900px) { .project-motion-section { grid-template-columns:1fr; }.project-motion-section .project-copy { max-width:44rem; } }
@media(max-width:440px) { .motion-caption { align-items:flex-start; flex-direction:column; gap:.65rem; }.motion-play { width:100%; }.motion-feature figcaption { padding:.85rem; } }