:root{
  --bg:#0f1114; --panel:#171a1f; --text:#eeece8; --muted:#9a9fa8; --line:#2a2e35; --line-hi:#454b55;
  --panel-hi:#1d2026; --accent:#b8252f; --accent-hi:#d9414c; --radius:12px;
  --space-s:1.25rem; --space-m:2rem; --space-l:clamp(2rem,5vw,4rem); --content-w:80%; --header-h:6.5rem; --footer-h:6.5rem;
  --head:"Inter",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --display:"Fraunces",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --pad:clamp(1.25rem,4vw,3.5rem); --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:radial-gradient(1100px 560px at 90% -8%,rgba(255,255,255,.045),transparent 65%) no-repeat,var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.wrap{padding-inline:var(--pad);max-width:1600px;margin-inline:auto}
.wrap.wide{max-width:1800px}

/* Header */
#site-header{position:fixed;inset:0 0 auto;z-index:10;background:linear-gradient(rgba(15,17,20,.82),rgba(15,17,20,0))}
.bar{display:flex;justify-content:space-between;align-items:center;padding:1.1rem var(--pad)}
.brand{display:flex;flex-direction:column;align-items:flex-start;min-width:0;font-family:var(--head);--brand-size:clamp(1.05rem,1.9vw,1.5rem)}
.brand-line{display:flex;align-items:baseline;min-width:0}
.brand-name{font-weight:600;font-size:var(--brand-size);line-height:1.2;white-space:nowrap}
.brand-tail{display:inline-flex;align-items:baseline;white-space:nowrap;overflow:hidden;max-width:30em;padding-left:.7em}
.brand-sep{color:var(--line-hi);margin-right:.7em;font-size:var(--brand-size);font-weight:400}
.brand-role{font-weight:400;font-size:calc(var(--brand-size)*.85);line-height:1.2;color:var(--muted)}
.home-btn{display:inline-grid;place-items:center;width:2.7rem;height:2.7rem;margin-top:.5rem;border:1px solid var(--line-hi);border-radius:50%;color:var(--muted);transition:color .3s,border-color .3s}
.home-btn:hover,.home-btn[aria-current]{color:var(--text);border-color:var(--muted)}
/* Scrolled: the name shrinks slightly and the role (with its divider) fades out and collapses (class selectors outrank the site-wide "minimal motion" rule) */
.brand-name,.brand-tail{transition:font-size .35s var(--ease),opacity .3s ease,max-width .35s var(--ease),padding .35s var(--ease)!important}
.scrolled .brand{--brand-size:clamp(.95rem,1.55vw,1.2rem)}
.scrolled .brand-tail{opacity:0;max-width:0;padding-left:0}
@media(max-width:760px){.brand-line{flex-direction:column}.brand-tail{padding-left:0}.brand-sep{display:none}}
nav{display:flex;gap:2rem}
nav a{color:var(--muted);transition:color .3s}
nav a:hover{color:var(--text)}
nav a[aria-current]{color:#fff;font-weight:500;text-decoration:underline;text-decoration-color:#fff;text-decoration-thickness:2px;text-underline-offset:.45em}
.menu-btn{display:none;background:none;border:0;color:var(--text);font:inherit;cursor:pointer;padding:.5rem}
@media(max-width:760px){
  .menu-btn{display:block;flex:none}
  .bar{gap:1rem}
  .brand{font-size:1rem}
  nav{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;padding:var(--pad);gap:1rem;
      opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;z-index:-1}
  nav a{font:600 2.5rem/1.2 var(--head);letter-spacing:-.02em;color:var(--muted)}
  nav a[aria-current]{font-weight:600}
  #site-header.open nav{opacity:1;visibility:visible}
}

/* Type */
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.4vw,3.25rem)}
h2{font-size:clamp(1.5rem,2.8vw,2.25rem)}
h3{font-size:1.35rem;margin-top:.9rem}
.lede{font-size:clamp(1.15rem,2vw,1.5rem);color:var(--muted);max-width:34em;margin:1.25rem auto 0;text-align:center}
.hero.center{text-align:center}
.lede.desc.contact-lede{font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.35;max-width:none;margin-top:0;color:var(--text)}
/* Descriptions: same font and colour as the footer, slightly larger */
.desc,.card p.desc,.lede.desc{font-family:var(--body);font-size:1.125rem;line-height:1.7;color:var(--muted);font-weight:400;max-width:44em}
.lede.desc{margin:1.25rem auto 0;text-align:center}
p{max-width:38em}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
main{padding-top:var(--header-h);flex:1;width:100%}
main.fill{display:flex;flex-direction:column;justify-content:center}
main.fill>section{padding-block:clamp(.5rem,2vw,1.5rem);width:100%}
section{padding-block:var(--space-l)}

/* Hero: the one orchestrated moment */
section.hero{padding-block:var(--space-m) var(--space-s)}
.hero h1{line-height:1.05}
section.hero.home-hero{text-align:center;max-width:none;padding-block:.75rem .25rem}
#greeting{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:500;line-height:1.25;color:var(--text)}
.reel-wrap{margin-top:var(--space-s)}
.reel-wrap h2{text-align:left;margin-bottom:.75rem}
.reel-wrap #reel{width:100%}
section.reel-desc{padding-block:var(--space-m) 0}

/* Video */
.video{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat;overflow:hidden;border-radius:var(--radius)}
/* Videos: 80% wide, but capped so the whole frame fits on screen (--chrome = space above the video, measured in JS) */
@media(min-width:761px){
  .wrap.wide>.video,.reel-wrap{width:var(--content-w);width:min(var(--content-w),calc((100vh - var(--chrome,15rem) - var(--below,0px) - 1.5rem)*16/9));width:min(var(--content-w),calc((100svh - var(--chrome,15rem) - var(--below,0px) - 1.5rem)*16/9));min-width:min(360px,100%);margin-inline:auto}
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video video.loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Only the button starts playback (not the whole frame). The frame just gets a light dim behind it. */
.video[data-vimeo]::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22);pointer-events:none}
.video iframe{z-index:1}
.video .play{z-index:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;background:none;color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.9rem;padding:.5rem}
.video .play-label{font:500 .85rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
/* Liquid-glass button: very clear, heavy blur + saturation behind, bright rim and inner highlights */
/* Liquid glass: a clear disc with a bright soft rim and a faint inner shadow. In Chrome/Edge, js/video.js adds a real lens distortion
   (SVG displacement of the video behind it, with red/green/blue split at the rim); other browsers get the blur only. */
.video .play svg{box-sizing:border-box;width:84px;height:84px;padding:26px;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:50%;-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 2px 5px rgba(255,255,255,.55),inset 0 -2px 5px rgba(255,255,255,.28),inset 0 0 22px rgba(0,0,0,.22),0 10px 34px rgba(0,0,0,.3);transition:transform .5s var(--ease),background .3s}
.video .play:hover svg{transform:scale(1.06);background:rgba(255,255,255,.12)}
.video.empty{display:grid;place-items:center;background:var(--panel);color:var(--muted)}

/* Work grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-m) var(--pad)}
.card{display:block}
.thumb{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--panel)}
.thumb img,.thumb .ph{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.thumb .ph{background:linear-gradient(135deg,#242830,#0f1114)}
.card:hover .thumb>*{transform:scale(1.05)}
/* Work page: a rounded red border appears around a thumbnail on hover (and keyboard focus) */
.thumb{position:relative}
.thumb::after{content:"";position:absolute;inset:0;border:3px solid var(--accent-hi);border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .25s ease!important}
.card:hover .thumb::after,.card:focus-visible .thumb::after{opacity:1}
.card p{color:var(--muted);font-size:.95rem}
.card{text-align:center}
.card p.desc{margin-inline:auto}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:var(--space-m)}
.section-head a{color:var(--muted);border-bottom:1px solid var(--line);transition:color .3s}
.section-head a:hover{color:var(--text);border-color:var(--muted)}
@media(min-width:761px){.grid>.card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--pad)/2)}}
@media(max-width:760px){.grid{grid-template-columns:1fr}}

/* Project page */
#project header{padding-block:1rem 1.5rem}
.desc-block{text-align:center;padding-block:var(--space-l) var(--space-m)}
.desc-title{margin-bottom:.75rem}
.desc-block .desc{margin-inline:auto}
.desc-block .desc+.desc{margin-top:1em}
.desc a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-hi);text-underline-offset:.2em;word-break:break-word;transition:text-decoration-color .3s}
.desc a:hover{text-decoration-color:var(--text)}
.specs{max-width:44em;margin:0 auto;padding:0 var(--pad) 3rem}

/* About / Contact */
/* Balanced layout: portrait and text are two equal-weight blocks of similar height, centred as a pair under the title; the software strip runs full width underneath. */
.split{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,31rem);gap:clamp(2.5rem,6vw,5rem);align-items:center;justify-content:center;max-width:1100px;margin-inline:auto}
.about-hero{text-align:center}
.split-left{display:flex;flex-direction:column;gap:1rem;min-width:0}
.portrait{flex:none;width:100%;aspect-ratio:1197/1600;background:url(../assets/headshot.jpg) center/100% 100% no-repeat,#171a1f;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overflow:hidden;border-radius:var(--radius)}
.split .prose p{font-size:1.25rem;line-height:1.7}
.prose p+p{margin-top:1.4em}
/* Trim the empty line-height space above the first line and below the last, so the photo's top and bottom edges line up with the text itself */
@supports (text-box:trim-both cap alphabetic){.prose{text-box:trim-both cap alphabetic}}
/* Info page: the contact block sits below the about section */
.info-contact{padding-top:var(--space-s)!important}
.contact-lede br{display:none}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1rem}
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:.85rem 1.4rem;border:1px solid var(--line-hi);border-radius:99px;background:var(--panel);color:var(--text);font-size:1rem;line-height:1.2;word-break:break-word;transition:border-color .3s,background .3s,transform .4s var(--ease)}
.btn svg{color:var(--accent-hi);flex:none}
.btn:hover{border-color:var(--muted);background:var(--panel-hi);transform:translateY(-2px)}
@media(max-width:980px){.split{grid-template-columns:1fr;justify-items:center;text-align:center}.split-left{width:100%;max-width:440px;align-items:center}.portrait{width:min(320px,75%)}}

.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding-block:2.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.foot>*{max-width:none}
.foot>:first-child{justify-self:start;text-align:left}
.foot>:last-child{justify-self:end;text-align:right}
.foot>.sound-btn{justify-self:center}
@media(max-width:760px){
  .foot{grid-template-columns:1fr;justify-items:center;gap:.75rem;text-align:center}
  .foot>:first-child,.foot>:last-child{justify-self:center;text-align:center}
}

.sound-btn{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;transition:color .3s}
.sound-btn svg{color:var(--accent-hi)}
.sound-btn:hover{color:var(--text)}

/* Page transition: a simple fade out, then fade in on the next page */
html{background:var(--bg)}
body{animation:fade-in .5s ease-out}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
body.leaving{opacity:0;transition:opacity .4s ease-in-out}

/* Motion is kept minimal by default (same as a "reduce motion" setting); the page fade is the only transition left */
*:not(body){animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}

/* Interactive breakdown: scroll to build the shot layer by layer.
   While it is in view the box grows to fill the screen and the rest of the page fades to black (.bd-dim).
   js/projects.js drives --bd-w (box width), the heading collapse and the dim; the wipe itself is eased there too. */
.bd{padding-block:0;margin-top:var(--space-m)}
.bd-head{text-align:center}
.bd-head-in{padding:.25rem var(--pad) .75rem}
.bd-head .desc-title{margin:0 0 .15rem}
.bd-head .desc{margin-inline:auto;font-size:1rem;line-height:1.5;min-height:1.5em}
.bd-track{height:calc(100vh - var(--header-h) + (var(--n) - 1) * 60vh + 20vh);height:calc(100svh - var(--header-h) + (var(--n) - 1) * 60svh + 20svh)}
.bd-sticky{position:sticky;top:var(--header-h);z-index:12;height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:center}
.bd-sticky>*{flex:none}
body.bd-on #site-header:hover{opacity:1!important}
.bd-end #site-footer{display:none}
.bd-dim{position:fixed;inset:0;z-index:11;background:#000;opacity:0;pointer-events:none}
.bd-stage,.bd-steps{width:var(--bd-w,80%);width:var(--bd-w,min(80%,calc((100vh - 15rem)*16/9)));width:var(--bd-w,min(80%,calc((100svh - 15rem)*16/9)));min-width:min(360px,100%);max-width:100%;margin-inline:auto}
.bd-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--panel)}
.bd-layer{position:absolute;inset:0;overflow:hidden}
.bd-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.bd-line{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.65);opacity:0;pointer-events:none}
.bd-tag{position:absolute;left:1rem;bottom:1rem;display:flex;gap:.6rem;align-items:center;padding:.45rem .95rem;border-radius:99px;background:rgba(15,17,20,.74);color:#fff;font-size:.9rem;pointer-events:none}
.bd-tag .bd-num{font-family:var(--mono);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.bd-steps{list-style:none;padding:0;margin-top:.75rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem .5rem}
.bd-steps button{font:inherit;font-size:.9rem;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;padding:.35rem .6rem;cursor:pointer;transition:color .3s}
.bd-steps button span{font-family:var(--mono);font-size:.75rem;margin-right:.45rem;opacity:.7}
.bd-steps button:hover{color:var(--text)}
.bd-steps button.on{color:#fff;border-bottom-color:#fff}
@media(max-width:760px){.bd-stage,.bd-steps{width:var(--bd-w,100%)}.bd-steps button{font-size:.8rem;padding:.3rem .4rem}}

/* Particle canvas (sits behind all content) */
#bg-particles{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}

/* Own stacking context so the particle canvas (z-index:-1) paints above the body background instead of behind it */
body{isolation:isolate}

/* ---------- Project pages with no breakdown fit on one screen (desktop). Pure CSS: the footer has a fixed height, #project fills the rest,
   and the video takes whatever space is left, so nothing moves after load. The page stays hidden (.proj-wait) until the breakdown check finishes. ---------- */
.proj-wait main,.proj-wait #site-footer{visibility:hidden}
@media(min-width:761px){
  .foot{height:var(--footer-h);padding-block:0}
  .proj-fit #project{display:flex;flex-direction:column;height:calc(100vh - var(--header-h) - var(--footer-h));height:calc(100svh - var(--header-h) - var(--footer-h))}
  .proj-fit #project>*{flex:none}
  .proj-fit #project header{padding-block:.25rem .75rem}
  .proj-fit #project>.wrap.wide{width:100%;flex:1 1 0;min-height:0;container-type:size;display:grid;place-items:center}
  .proj-fit .wrap.wide>.video{width:min(80cqw,calc(100cqh*16/9));min-width:0;margin:0}
  .proj-fit .desc-block{padding-block:var(--space-s) 0}
  .proj-fit .specs{padding-bottom:var(--space-s)}
}

/* ---------- Software strip (About): one line, sliding right like a conveyor belt ---------- */
.marquee{overflow:hidden;width:100%;padding-block:var(--space-m);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 70s linear infinite}
.marquee ul{display:flex;flex:none;list-style:none;padding:0}
.marquee li{display:flex;align-items:center;white-space:nowrap;padding-left:1.75rem;font:italic 500 clamp(1.2rem,2.25vw,1.8rem)/1.3 var(--display);color:rgba(238,236,232,.88);text-shadow:0 0 14px rgba(238,236,232,.3),0 0 36px rgba(217,65,76,.28)}
.marquee li::after{content:"";width:5px;height:5px;margin-left:1.75rem;border-radius:50%;background:var(--line-hi);box-shadow:0 0 10px rgba(217,65,76,.5)}
@keyframes marquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* the site-wide "minimal motion" rule above would freeze this; a class selector outranks it */
.marquee-track{animation-duration:70s!important}

/* ---------- Scrollbar: slim, transparent track, soft rounded thumb ---------- */
html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
@supports selector(::-webkit-scrollbar){
  html{scrollbar-width:auto;scrollbar-color:auto}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
  ::-webkit-scrollbar-button{display:none}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);background-clip:content-box;border:3px solid transparent;border-radius:99px}
  ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.4);background-clip:content-box}
}

/* ---------- Home: the showreel fills the whole first screen (header and greeting sit on top of it) ---------- */
.home main{padding-top:0}
.home-stage{position:relative;height:100vh;height:100svh;padding:0;overflow:hidden}
.home-stage #reel.video{position:absolute;inset:0;aspect-ratio:auto;width:100%;height:100%;border-radius:0}
.home-stage #reel .play svg{width:96px;height:96px;padding:30px}
/* After play: the video shrinks to a centred 16:9 frame that fits below the header, so Vimeo's corner controls and settings are on screen */
.home-stage.playing{display:flex;align-items:center;justify-content:center;padding-top:var(--header-h);background:var(--bg)}
.home-stage.playing #reel.video{position:relative;inset:auto;flex:none;aspect-ratio:16/9;height:auto;width:min(94vw,calc((100vh - var(--header-h) - 3rem)*16/9));width:min(94vw,calc((100svh - var(--header-h) - 3rem)*16/9));border-radius:var(--radius)}
.home-stage.playing .stage-text{display:none}
.stage-text{position:absolute;inset:auto 0 0;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding:5rem var(--pad) var(--space-m);background:linear-gradient(transparent,rgba(15,17,20,.8));pointer-events:none}
.stage-text #greeting{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:500;line-height:1.25;color:var(--text)}
.stage-link{pointer-events:auto;flex:none;color:var(--muted);border-bottom:1px solid var(--line-hi);transition:color .3s,border-color .3s}
.stage-link:hover{color:var(--text);border-color:var(--muted)}
@media(max-width:760px){.stage-text{flex-direction:column;align-items:flex-start}}

/* ---------- Typography: Inter for headings, body and UI; JetBrains Mono for metadata (tags, years, step numbers) ---------- */
.desc.meta,.card p.desc.meta,.lede.desc.meta{font-family:var(--mono);font-size:.85rem;line-height:1.5;letter-spacing:0}

/* ---------- About me: everything (text, portrait, software strip, contact) fits on one screen on desktop ---------- */
.split-right{min-width:0}
.split-right h1{margin-bottom:3.5rem}
@media(max-width:980px){.split-right{display:contents}.split-right h1{order:-1;text-align:center}}
@media(min-width:981px) and (min-height:640px){
  main.fill{flex:none;height:100vh;height:100svh;justify-content:center;padding-bottom:1.25rem;min-height:0}
  main.fill>section{padding-block:.35rem}
  main.fill>.split{flex:none;height:54vh;height:54svh;min-height:300px;width:100%;container-type:size;grid-template-columns:auto minmax(0,38rem);grid-template-rows:auto;align-items:start;align-content:center;padding-block:.5rem}
  .split-left{height:auto;min-height:0}
  .split-left .portrait{height:76.5cqh;width:auto;aspect-ratio:1197/1600;background-size:cover}
  .split-right h1{text-box:trim-both cap alphabetic}
  .split .prose p{font-size:clamp(.95rem,1.05vw + .3rem,1.1rem);line-height:1.6}
  .prose p+p{margin-top:1em}
  .marquee{padding-block:1.25rem}
  .marquee li{font-size:clamp(1rem,1.6vw,1.4rem)}
  .contact-lede{font-size:clamp(1.15rem,1.8vw,1.5rem)!important}
  .actions{margin-top:0}
}
@media(min-width:981px) and (min-height:640px) and (max-height:800px){.split .prose p{font-size:.98rem;line-height:1.55}.split-right h1{margin-bottom:3rem}}

.work-cue{display:table;margin:.9rem auto 0}
#work-grid{scroll-margin-top:calc(var(--header-h) - 1rem)}

/* ---------- Dark colour scheme: even before styles apply, text is light and the canvas dark (no black-text flash) ---------- */
html{color-scheme:dark;color:var(--text)}

/* ---------- About me: no fade-from-black on the text. The page fade made the white text look black for a moment while it brightened,
   so the text appears at full colour straight away and only the photo and software strip fade in. ---------- */
.info-page{animation:none}
.info-page .portrait,.info-page .marquee{animation:fade-in .5s ease-out both;animation-duration:.5s!important}
.info-page .marquee-track{animation-duration:70s!important}

/* ---------- About me: more room between "Like what you see?..." and the contact buttons ---------- */
.actions{margin-top:1.75rem}
@media(min-width:981px) and (min-height:640px){.actions{margin-top:clamp(1rem,3.4svh,2.25rem)}}

/* ---------- Project pages without a breakdown: a small gap between the video and the footer line ---------- */
@media(min-width:761px){.proj-fit .wrap.wide>.video{width:min(80cqw,calc((100cqh - 2rem)*16/9))}}
@media(max-width:760px){.proj-fit #project{padding-bottom:1.25rem}}

/* ---------- Breakdown: Zoom button on the image ---------- */
.bd-img{position:absolute;inset:0;background:center/cover no-repeat;-webkit-user-select:none;user-select:none}
.bd-zoom{position:absolute;top:1rem;right:1rem;z-index:3;display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem .55rem .8rem;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(15,17,20,.74);color:#fff;font:500 .9rem/1 var(--body);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s ease,border-color .25s ease!important}
.bd-zoom svg{width:18px;height:18px;flex:none}
.bd-zoom:hover,.bd-zoom:focus-visible{background:rgba(15,17,20,.94);border-color:#fff}

/* ---------- Breakdown: full-screen examine viewer (js/viewer.js) ---------- */
.bd-viewer{position:fixed;inset:0;z-index:1000;background:#050608;color:#fff;opacity:0;transition:opacity .22s ease!important;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bd-viewer.on{opacity:1}
.bdv-canvas{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:zoom-in}
.bdv-canvas.zoomed{cursor:grab}.bdv-canvas.drag{cursor:grabbing}
.bdv-img{position:absolute;left:0;top:0;transform-origin:0 0;background:center/100% 100% no-repeat;will-change:transform;pointer-events:none;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.bdv-top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem var(--pad);background:linear-gradient(rgba(5,6,8,.85),transparent);pointer-events:none}
.bdv-title{display:flex;gap:.7rem;align-items:baseline;min-width:0;font-size:1rem}
.bdv-num{font:400 .8rem/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.bdv-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdv-exit{pointer-events:auto;display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.6rem 1.1rem .6rem .9rem;border-radius:99px;border:1px solid rgba(255,255,255,.35);background:rgba(23,26,31,.9);color:#fff;font:500 .95rem/1 var(--body);cursor:pointer;transition:background .25s ease,border-color .25s ease!important}
.bdv-exit:hover,.bdv-exit:focus-visible{background:var(--accent);border-color:var(--accent-hi)}
.bdv-bar{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.2rem;padding:.35rem;border-radius:99px;border:1px solid var(--line-hi);background:rgba(23,26,31,.92);max-width:calc(100vw - 1rem)}
.bdv-btn{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;transition:background .2s ease!important}
.bdv-btn:hover,.bdv-btn:focus-visible{background:rgba(255,255,255,.14)}
.bdv-btn:disabled{opacity:.3;cursor:default;background:none}
.bdv-pct{min-width:4.2rem;text-align:center;font:400 .85rem/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.bdv-hint{position:absolute;bottom:5rem;left:0;right:0;max-width:none;text-align:center;font-size:.85rem;color:var(--muted);pointer-events:none;transition:opacity .6s ease!important}
.bdv-hint.gone{opacity:0}

/* ---------- Image protection: images cannot be picked up, dragged or long-pressed ---------- */
img,.bd-img,.bd-viewer,.portrait{-webkit-user-drag:none;-webkit-touch-callout:none}
.thumb img,.portrait img{pointer-events:none}

/* ---------- PHONES ONLY (screens up to 760px wide). Nothing in this block affects tablets or desktop. ---------- */
@media(max-width:760px){
  /* all text a little smaller (everything is sized in rem, so this scales it together) */
  html{font-size:87.5%}
  .lede.desc,.reel-desc .lede.desc{font-size:.95rem;line-height:1.55}

  /* Home: banner starts at the very top of the page (the header sits over it), 40% taller than before */
  .home-stage{height:auto;padding-top:0;background:var(--bg);overflow:visible}
  .home-stage #reel.video{position:relative;inset:auto;width:100%;aspect-ratio:auto;height:calc(var(--header-h) + 78.75vw);border-radius:0;background:var(--bg)}
  .home-stage #reel video.loop{bottom:-1px;height:calc(100% + 1px)}   /* no hairline seam under the video */
  .home-stage .stage-text{position:static;padding:1.75rem var(--pad) 0;background:none}
  .home-stage.playing{display:block;padding-top:var(--header-h)}
  .home-stage.playing #reel.video{aspect-ratio:16/9;height:auto}
  .home .reel-desc{padding-block:1rem 1.75rem}
  /* Home: only the top 2 projects */
  #work-grid[data-limit] .card:nth-child(n+3){display:none}

  /* Footer: no sound on/off option */
  .sound-btn{display:none}
  .work-page .foot{padding-bottom:1.5rem}

  /* About me: photo gets its own space, text sits beneath it */
  .split{grid-template-columns:1fr;gap:1rem;justify-items:stretch;align-items:start;text-align:left}
  .split-right h1{text-align:center;margin-bottom:.25rem}
  .split-left{max-width:none;width:100%;align-items:center}
  .portrait{width:min(195px,52.5%)}
  .split .prose p{font-size:.968rem;line-height:1.5}   /* about text 10% bigger */
  .prose p+p{margin-top:.8em}

  /* Menu: stars drawn over the menu's dark background too */
  body.menu-open #bg-particles{z-index:11}

  /* Header: "Menu" lines up with the name on the top row */
  .bar{align-items:flex-start}
  .menu-btn{padding:.5rem;margin:-.5rem -.5rem 0 0;line-height:1.2;font-size:1.05rem}
  .scrolled .menu-btn{font-size:.95rem}

  /* Work page: a little space between the title and the "Selected work" button */
  .work-cue{margin-top:1.6rem}

  /* Header sits a little lower */
  :root{--header-h:7rem}
  .bar{padding-top:1.6rem}

  /* About me: smaller contact buttons / icons */
  .btn{padding:.55rem .95rem;gap:.5rem;font-size:.88rem}
  .btn svg{width:16px;height:16px}
  .actions{gap:.6rem}

  /* Home: greeting and "Selected work" centred, with more space between them */
  .home-stage .stage-text{align-items:center;text-align:center;gap:1.6rem}
}