/* Profile page: fixed showreel, intro, skills and projects over the film, video footer,
   and projects open in the shared glass tray (tray.css). */
:root{--paper:#f8f8f6;--ink:#171716;font-family:akzidenz-grotesk-next-pro,"Helvetica Neue",Arial,sans-serif;color:#fff;background:#121211;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#121211}
a{color:inherit;text-decoration:none}

/* Nav */
.project-nav{position:fixed;inset:0 0 auto;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px 3vw;color:#fff;mix-blend-mode:difference;font-size:11px;letter-spacing:.08em}
.project-nav p{margin:0}
.project-nav>a:last-child{text-align:right}
.project-mark{font-size:20px;font-weight:700;letter-spacing:-.08em}
.project-mark span{font-size:7px;vertical-align:top;margin-left:2px}

/* Fixed film */
.hero-film{position:fixed;inset:0;z-index:0;overflow:hidden;background:#121211;transform:scale(1.06);filter:saturate(.68) contrast(1.15);transition:transform 1.4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.hero-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body.is-scrolled .hero-film{transform:scale(1.14) translateY(-2%)}
.hero-grain{position:fixed;inset:0;z-index:0;opacity:.32;mix-blend-mode:soft-light;background-image:radial-gradient(#fff 0 .7px,transparent .8px),linear-gradient(110deg,#0008,#0000 45%,#0009);background-size:5px 5px,100% 100%;pointer-events:none}
.hero-veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:#0b0b0a;opacity:0;transition:opacity .6s ease}
body.lists-in .hero-veil{opacity:.5}
main{position:relative;z-index:1}

/* Intro */
.project-hero{position:relative;min-height:100svh;display:grid;place-items:end start}
.hero-caption{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(300px,2fr);gap:7vw;max-width:1200px;padding:0 6vw 15svh}
.hero-caption p,.hero-caption h1{margin:0}
.hero-caption p{font-size:11px;line-height:1.2;letter-spacing:.08em;padding-top:8px}
.hero-caption h1{max-width:640px;font-size:clamp(24px,3.4vw,56px);font-weight:400;line-height:.94;letter-spacing:-.055em}

/* Skills + projects lists (same style as the homepage index, white on film) */
.profile-list{display:grid;grid-template-columns:minmax(160px,.7fr) minmax(0,2fr);gap:6vw;padding:10svh 6vw 12svh}
.profile-projects{padding-bottom:24svh}
.list-head span{display:block;font-size:10px;letter-spacing:.13em;color:#ffffffb3}
.list-head h2{margin:10px 0 0;font-size:clamp(34px,3.4vw,56px);font-weight:400;letter-spacing:-.06em;line-height:.9}
.profile-list ol{list-style:none;margin:0;padding:0;counter-reset:item}
.profile-list li{counter-increment:item;border-top:1px solid #ffffff40}
.profile-list li:last-child{border-bottom:1px solid #ffffff40}
.profile-list a,.pl-row{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;align-items:baseline;gap:18px;padding:16px 0 15px}
.profile-list a::before,.pl-row::before{content:counter(item,decimal-leading-zero);font-size:10px;letter-spacing:.1em;color:#ffffffb3}
.pl-title{font-size:clamp(22px,2.2vw,36px);letter-spacing:-.05em;line-height:1}
.pl-kind{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#ffffffd9;text-align:right}
.skill-links .pl-row{grid-template-columns:3.2em minmax(0,.85fr) minmax(0,1.45fr) minmax(0,.85fr)}
/* The proof: the one project behind each skill, sitting in the row itself. */
.pl-proof{display:grid;gap:5px;justify-items:end;text-align:right}
.pl-proof-name{font-size:clamp(15px,1.2vw,20px);letter-spacing:-.03em;line-height:1.05}
.pl-proof-kind,.pl-proof--note{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#ffffffb3}
.pl-proof--note{font-style:italic;letter-spacing:.06em;text-transform:none;font-size:12px}
.skill-links a.pl-row{transition:padding .35s cubic-bezier(.2,.8,.2,1),color .2s}
.skill-links a.pl-row:hover,.skill-links a.pl-row:focus-visible{padding-left:12px;color:var(--theo-pink)}
.skill-links a.pl-row:hover .pl-proof-kind,.skill-links a.pl-row:focus-visible .pl-proof-kind{color:inherit}
.list-note{margin:14px 0 0;max-width:28ch;font-size:clamp(13px,1.05vw,16px);line-height:1.4;color:#ffffffb3}
/* Everything that isn't a headline pairing, kept quiet at the end of the list. */
.more-work{grid-column:1/-1;margin-top:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(160px,.7fr) minmax(0,2fr);gap:6vw}
.more-work-head{margin:0;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#ffffffb3}
.more-work-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.more-work-list li{border:0}
.more-work-list a{display:inline;padding:0;font-size:clamp(13px,1.05vw,16px);letter-spacing:-.01em;color:#ffffffd9;transition:color .2s}
.more-work-list a::before{content:none}
.more-work-list a:hover,.more-work-list a:focus-visible{color:var(--theo-pink);padding-left:0}
.pl-desc{font-size:clamp(13px,1.05vw,16px);line-height:1.4;color:#ffffffd9}
.project-links a{transition:padding .35s cubic-bezier(.2,.8,.2,1),color .2s}
.project-links a:hover,.project-links a:focus-visible{padding-left:12px;color:var(--theo-pink)}


@media(max-width:700px){
 .project-nav{padding:16px 20px;font-size:8px}
 .project-mark{font-size:17px}
 .project-hero{min-height:92svh}
 .hero-caption{display:block;padding:0 20px 16svh}
 .hero-caption p{margin-bottom:18px;font-size:8px}
 .hero-caption h1{font-size:clamp(33px,10.8vw,50px)}
 .profile-list{display:block;padding:6svh 20px 10svh}
 .profile-projects{padding-bottom:16svh}
 .list-head{margin-bottom:34px}
 .profile-list a,.pl-row,.skill-links .pl-row{grid-template-columns:2.4em minmax(0,1fr);gap:10px;padding:15px 0}
 .pl-proof{grid-column:2;justify-items:start;text-align:left;grid-auto-flow:column;justify-content:start;gap:10px;align-items:baseline;margin-top:8px}
 .pl-proof-name{font-size:16px}
 .skill-links a.pl-row:hover{padding-left:0}
 .more-work{display:block;margin-top:40px}
 .more-work-head{margin-bottom:14px}
 .pl-kind,.pl-desc{grid-column:2;text-align:left}
 .pl-kind{font-size:9px}
 .pl-desc{font-size:14px;margin-top:4px}
 .list-note{font-size:14px}
 .pl-title{font-size:25px}
 .project-links a:hover{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .hero-film,body.is-scrolled .hero-film{transform:none;transition:none}
 .hero-veil,.project-links a{transition:none}
}



/* Embedded in the homepage's glass tray (?embed): no nav or footer (the tray has Close),
   and the film is slightly see-through so a little glass shows. */
html.is-embed{--embed-alpha:.85;background:transparent}
html.is-embed body{background:transparent}
.is-embed .project-nav,.is-embed .site-footer{display:none}
.is-embed .hero-film{background:transparent;opacity:var(--embed-alpha)}