cinematic.css

/* Cinematic portfolio: layout skin shared by the homepage and project stories. */
:root{--bg:#080d13;--surface:#101923;--panel:#172330;--line:#304251;--ink:#f3f7fa;--muted:#b4c3cf;--mint:#a8ddf4;--teal:#80c9eb;--gold:#f2ae85}
:root[data-theme="light"]{--bg:#edf2f6;--surface:#fff;--panel:#dfeaf1;--line:#b8c9d4;--ink:#132330;--muted:#425968;--mint:#175c7c;--teal:#206887;--gold:#854723}
body{font-family:"Segoe UI",Arial,sans-serif;background:var(--bg)}
.wrap{width:min(1320px,calc(100% - 96px))}.section{padding-block:120px}h2{font-size:clamp(32px,4.4vw,62px);font-weight:500;letter-spacing:-.055em}h3{letter-spacing:-.025em}.eyebrow,.micro{letter-spacing:.12em}.eyebrow{color:var(--mint)}
.site-header{position:fixed;inset:0 0 auto;background:rgb(8 13 19 / 90%);border-bottom:1px solid #ffffff1c;backdrop-filter:blur(14px);z-index:50}.nav{min-height:78px}.brand{font-size:30px}.brand-name{font-size:12px;letter-spacing:.18em}.nav-links{gap:20px}.nav-links a{font-size:12px}.nav-tools{gap:6px}.utility-button{background:transparent;border-radius:30px}.nav-github{border-radius:30px}.button{border-radius:50px;padding:14px 23px;min-height:50px;font-size:13px}.button.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:none}.button.primary:hover{background:var(--mint);color:var(--bg)}
.cinema-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none;background:#050c10}.cinema-backdrop img,.cinema-backdrop canvas{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}.cinema-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#02080de8 0%,#02080d40 47%,#02080d66 70%,#02080dc9 100%),linear-gradient(0deg,#050b10d9,transparent 70%);opacity:var(--backdrop-shade,1)}
.cinema-hero{height:210svh;position:relative;color:#f3f7fa}.cinema-stage{isolation:isolate;background:#050c10;height:100svh;min-height:620px;position:sticky;top:0;display:flex;flex-direction:column;justify-content:space-between;padding-top:112px;padding-bottom:30px;overflow:hidden}.cinema-top,.cinema-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;font:10px/1.7 Consolas,monospace;letter-spacing:.1em}.cinema-top p{font:inherit;color:#c2d5df}.cinema-top span{color:#90d7f6;margin-left:20px}.cinema-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;transform:translateY(calc(var(--intro-exit,0) * -45px));opacity:calc(1 - var(--intro-exit,0));visibility:var(--intro-visibility,visible)}.cinema-intro .eyebrow{color:#addcf0;margin-bottom:24px}.cinema-intro h1{font-size:clamp(70px,8.6vw,140px);font-weight:550;line-height:.98;letter-spacing:-.065em}.cinema-intro h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.06em;color:#b9e6f7}.cinema-name{font-size:20px;margin-top:28px;color:#f3f7fa}.cinema-summary{max-width:310px;padding-bottom:5px}.cinema-summary p{font-size:14px;color:#d0dce4;line-height:1.8}.cinema-summary .hero-role{color:#fff;font-size:15px;margin:0 0 18px}.cinema-summary .button{margin-top:26px;background:#f3f7fa;color:#0a1720}.cinema-bottom{color:#bfd3df}.cinema-bottom a{min-height:44px;display:flex;align-items:center;gap:20px}.cinema-bottom button{color:#dcecf4;background:#0a1720a6;border:1px solid #718795;padding:8px 14px;border-radius:30px;min-height:40px;font-size:11px}.cinema-second{position:absolute;top:45%;left:0;right:0;opacity:var(--second-opacity,0);visibility:var(--second-visibility,hidden);transform:translateY(calc((1 - var(--second-opacity,0)) * 35px));pointer-events:var(--second-events,none)}.cinema-second h2{font-size:clamp(36px,5vw,76px);max-width:760px;margin:20px 0}.cinema-second p{color:#d0dce4}.cinema-second .text-link{color:#b9e6f7;display:inline-block;margin-top:20px}.cinema-second .eyebrow{color:#b9e6f7}
.discipline-strip{background:var(--surface);border-block:1px solid var(--line);position:relative}.discipline-strip .wrap{padding-block:22px}.discipline-strip i{color:var(--gold)}
.cinematic main>.section,.cinematic .about-section,.cinematic .journey-section,.cinematic .github-section,.cinematic .footer{position:relative}.cinematic main>.section:before{content:"";position:absolute;inset:0 calc((min(1320px,100vw - 96px) - 100vw)/2);background:rgb(8 13 19 / 94%);z-index:-1}.about-section,.journey-section{background:rgb(16 25 35 / 96%);border-block:1px solid var(--line)}.section-heading{align-items:end;margin-bottom:48px}.section-heading>p{max-width:340px;font-size:14px}.project-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.project-catalog .featured,.project-catalog.is-filtered .compact{grid-column:span 1}.project-card{border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:none;overflow:hidden}.project-card:hover{border-color:var(--teal);box-shadow:0 15px 40px #0002}.project-visual{height:300px;background:#0c1d26}.project-visual img{width:100%;height:210px;object-fit:contain}.routes-visual img{object-fit:cover;object-position:top}.visual-top,.visual-bottom{font-size:9px;color:#bed5df}.project-body{padding:30px}.project-body h3,.compact h3{font-size:29px}.project-kicker{color:var(--gold)}.compact{padding:30px;min-height:340px}.card-preview{width:calc(100% + 60px);max-width:none;margin:-30px -30px 28px;height:270px;object-fit:cover;object-position:top}.small-card-top{margin-bottom:20px}.tags li{background:var(--panel);border-radius:30px;font-size:11px}.filter-buttons button{border-radius:30px;padding-inline:18px}.about-grid{grid-template-columns:.8fr 1.2fr;gap:100px}.about-photo{max-width:400px;transform:rotate(-2deg)}.about-photo img{border-radius:8px}.about-copy h2{margin-bottom:30px}.skills-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}.skill-card,.toolkit-note{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:36px 26px}.skill-card h3{font-size:23px}.skill-number{color:var(--mint)}.milestones{gap:16px}.milestones article{border-radius:10px;background:var(--surface);padding:26px}.milestone-icon{color:var(--gold)}.journey-grid{gap:90px}.timeline li{padding-bottom:48px}.timeline h3{font-size:24px}.github-section{background:var(--surface);border-radius:14px}.contact-section h2{font-size:clamp(42px,6.7vw,94px)}.contact-section h2 em{font-family:Georgia,serif;color:var(--mint)}.footer{background:var(--bg);padding-top:30px;padding-bottom:30px}.demo-shell{border-radius:14px}.reading-progress{background:var(--teal)}
body[data-case]{padding-top:78px;background:radial-gradient(ellipse at top right,#21445955,transparent 55%),var(--bg)}.case-hero{padding-block:70px}.case-hero h1{font-size:clamp(55px,8vw,110px)}.case-figure img{aspect-ratio:16/9;border-radius:16px}.case-feature,.case-note{border-radius:10px}.case-next{padding-bottom:50px}
:root[data-theme="light"] .site-header{background:#edf2f6f2}:root[data-theme="light"] .cinematic main>.section:before{background:#edf2f6f5}:root[data-theme="light"] .about-section,:root[data-theme="light"] .journey-section{background:#e0eaf1fa}:root[data-theme="light"] .cinema-summary .button{background:#f3f7fa;color:#0a1720}
@media(min-width:1101px){.nav-links{gap:15px}.nav{gap:16px}.nav-links a{font-size:11px}}
@media(max-width:1100px){.wrap{width:calc(100% - 48px)}.cinematic main>.section:before{inset-inline:-24px}.nav-links{background:var(--surface)}.cinema-intro h1{font-size:90px}.cinema-summary{max-width:260px}.about-grid{gap:45px}.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cinema-bottom>span{display:none}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.section{padding-block:76px}.cinematic main>.section:before{inset-inline:-20px}.nav{min-height:70px;gap:8px}.brand-name{display:none}.utility-button{padding:7px 9px}.cinema-stage{min-height:680px;padding-top:94px;padding-bottom:20px}.cinema-hero{height:190svh}.cinema-top{font-size:9px}.cinema-top .eyebrow{font-size:9px}.cinema-top>p:last-child{display:none}.cinema-intro{display:block;margin-top:auto;padding-bottom:16px}.cinema-intro h1{font-size:clamp(57px,14vw,88px);max-width:90%}.cinema-intro .eyebrow{font-size:9px;margin-bottom:14px}.cinema-name{font-size:16px;margin-top:15px}.cinema-summary{max-width:100%;margin-top:18px}.cinema-summary .hero-role{font-size:12px;margin-bottom:8px}.cinema-summary>p:not(.hero-role){font-size:12px;max-width:300px}.cinema-summary .button{margin-top:16px;padding:10px 20px;min-height:44px}.cinema-bottom{font-size:8px;gap:10px}.cinema-bottom button{font-size:10px}.cinema-backdrop:after{background:linear-gradient(0deg,#02080df5 0%,#02080dd9 30%,#02080d33 75%,#02080d66)}.cinema-second{top:auto;bottom:100px}.cinema-second h2{font-size:42px}.cinema-second p{font-size:14px}.discipline-strip .wrap{flex-wrap:wrap;justify-content:center;gap:10px 20px;font-size:10px}.discipline-strip i{display:none}.project-catalog{grid-template-columns:1fr;gap:24px}.project-visual{height:260px}.project-visual img{height:175px}.card-preview{height:210px}.project-body,.compact{padding:24px}.card-preview{width:calc(100% + 48px);margin:-24px -24px 24px}.about-grid{grid-template-columns:1fr;gap:40px}.about-photo{width:75%;margin-inline:auto}.skills-grid{grid-template-columns:1fr}.skill-card{padding:28px 0}.toolkit-note{padding:28px 0}.journey-grid{gap:38px}.section-heading{margin-bottom:30px}.project-toolbar{align-items:start}.result-count{display:none}.filter-buttons{gap:6px}.filter-buttons button{font-size:11px;padding:8px 13px}.milestones article{padding:22px}.github-section{width:calc(100% - 40px)}.contact-email{font-size:13px}.case-hero{padding-block:40px}.case-figure img{aspect-ratio:16/10}.cinema-second .eyebrow{max-width:280px}}
@media(prefers-reduced-motion:reduce){.cinema-hero{height:auto}.cinema-stage{position:relative;height:auto;min-height:calc(100svh - 1px);gap:60px}.cinema-intro{opacity:1!important;transform:none!important;visibility:visible!important}.cinema-second{display:none}.cinema-backdrop canvas{display:none}}
@media(scripting:none){.cinema-hero{height:auto}.cinema-stage{position:relative}.cinema-second{display:none}}

.interest-tags li{background:var(--surface);border-color:var(--line);color:var(--ink)}