:root{--ink:#100d05;--paper:#f8f7f4;--violet:#592581;--magenta:#a30098;--gold:#d69a10;--muted:#615b63;--line:rgba(16,13,5,.2);--display:'Archivo Black',Impact,sans-serif;--body:'Space Grotesk',Arial,sans-serif;--mono:'DM Mono',monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;min-width:280px;isolation:isolate;background:radial-gradient(ellipse at 93% 5%,rgba(89,37,129,.09),transparent 42%),radial-gradient(ellipse at 0 95%,rgba(214,154,16,.06),transparent 40%),var(--paper);color:var(--ink);font-family:var(--body)}
body::before,body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none}
body::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.28'/%3E%3C/svg%3E");background-size:180px 180px;opacity:.19;mix-blend-mode:multiply}
body::after{background-image:radial-gradient(circle,rgba(89,37,129,.33) 1.2px,transparent 1.6px);background-size:8px 8px;opacity:.38;mask-image:radial-gradient(ellipse 40% 42% at 100% 0%,#000,transparent)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,video:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:10px;z-index:20;padding:10px 14px;transform:translateY(-160%);background:var(--gold);color:var(--ink);font:12px var(--mono)}
.skip-link:focus-visible{transform:none}
.site-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding:12px clamp(20px,4.2vw,80px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:15px var(--display);letter-spacing:-.04em}
.brand img{object-fit:contain}
.brand b{font-family:var(--body);font-weight:300}
.brand sup{margin-left:2px;color:var(--gold);font:9px var(--mono)}
.back-link,.project-end a{display:inline-block;padding:0 0 8px;border-bottom:1px solid var(--gold);font:600 12px var(--body)}
.back-link:hover,.project-end a:hover{text-decoration:underline;text-underline-offset:5px}
main{position:relative;z-index:1;width:min(100%,1440px);margin:auto;padding:0 clamp(20px,4.2vw,80px)}
article,.project-end{width:min(100%,1120px);margin-inline:auto}
.project-header{padding:clamp(46px,7vh,86px) 0 clamp(30px,4vw,48px)}
h1{max-width:1120px;margin:0;color:var(--ink);font:clamp(48px,6.5vw,94px)/.9 var(--display);letter-spacing:-.085em;text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:none}
h1::after{content:"";display:inline-block;width:.105em;height:.105em;margin-left:.06em;background:var(--magenta)}
.tag-list{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:clamp(22px,2.5vw,30px) 0 0;padding:0}
.tag-list li{color:var(--violet);font:600 12px var(--body)}
.project-media{display:grid;gap:clamp(24px,3vw,42px)}
.media-item{min-width:0;margin:0}
.media-frame{position:relative;width:100%;min-height:0;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.media-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink)}
.media-frame video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:var(--ink)}
.youtube-launch{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:var(--ink);color:#fff;cursor:pointer}
.youtube-launch .media-poster{display:block}
.youtube-play{position:relative;display:grid;place-items:center;width:clamp(52px,6vw,72px);aspect-ratio:1;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(16,13,5,.72);box-shadow:0 8px 28px rgba(0,0,0,.36);transition:transform .2s,border-color .2s,background-color .2s}
.youtube-play svg{display:block;width:22px;height:22px;margin-left:3px}
.youtube-launch:hover .youtube-play,.youtube-launch:focus-visible .youtube-play{transform:scale(1.08);border-color:var(--gold);background:rgba(16,13,5,.9)}
.youtube-player{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:var(--ink)}
.media-square .media-frame{width:min(100%,660px);aspect-ratio:1;margin-inline:auto}
.media-portrait .media-frame{width:min(100%,440px);aspect-ratio:9/16;margin-inline:auto}
.media-image-item .media-frame,.media-image-item.media-square .media-frame,.media-image-item.media-portrait .media-frame{aspect-ratio:auto;min-height:0;background:transparent;overflow:visible}
.media-image-item .media-image{position:static;display:block;width:100%;height:auto;max-height:90vh;object-fit:contain;background:transparent}
figcaption{margin-top:12px;color:var(--muted);font:11px var(--mono);letter-spacing:.02em}
.youtube-caption{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 16px}
.youtube-caption a{color:var(--violet);border-bottom:1px solid var(--gold);padding-bottom:3px}
.youtube-caption a:hover{text-decoration:underline;text-underline-offset:4px}
.project-details{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(26px,4vw,54px) clamp(28px,5vw,72px);margin:clamp(36px,4vw,56px) 0 clamp(48px,6vw,72px)}
.detail-block{min-width:0;border-top:1px solid var(--line);padding-top:16px}
.detail-block h2{margin:0 0 14px;color:var(--violet);font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.detail-block p{max-width:62ch;margin:0;color:#413a44;font-size:clamp(16px,1.2vw,19px);line-height:1.6;white-space:pre-line}
.detail-description p{max-width:56ch;font-size:clamp(19px,1.55vw,23px);line-height:1.46}
.detail-description:only-child{grid-column:1/-1}
.project-details.no-contribution .detail-description,.project-details.solo-secondary .detail-software,.project-details.solo-secondary .detail-equipment{grid-column:1/-1}
.software-list{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.software-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:88px;min-height:102px;padding:12px 10px 10px;border:1px solid rgba(89,37,129,.12);background:rgba(89,37,129,.035);color:#413a44;font-size:12px;line-height:1.3;text-align:center}
.software-chip img{display:block;width:56px;height:56px;object-fit:contain}
.project-end{margin-bottom:clamp(58px,8vh,96px);padding-top:20px;border-top:1px solid var(--line)}
.project-no-details{margin-bottom:clamp(42px,6vw,72px)}
@media(max-width:700px){.site-header{min-height:68px}.project-header{padding:clamp(38px,6vh,62px) 0 34px}h1{font-size:clamp(46px,10vw,74px)}.project-details{grid-template-columns:1fr;gap:28px;margin:42px 0 54px}.detail-description:only-child{grid-column:auto}.detail-description p{max-width:65ch}.project-end{margin-bottom:64px}}
@media(max-width:480px){.site-header{padding-inline:18px}.back-link{font-size:11px}main{padding-inline:18px}.project-header{padding:42px 0 30px}h1{font-size:clamp(34px,10vw,62px)}.tag-list{margin-top:20px;gap:8px 16px}.tag-list li{font-size:11px}.media-frame{min-height:200px}.media-square .media-frame,.media-portrait .media-frame{min-height:0}.youtube-caption{font-size:10px}.detail-block p{font-size:16px}.detail-description p{font-size:19px}}
@media(max-width:370px){.brand{font-size:12px}.brand img{width:24px;height:24px}.back-link{font-size:10px}}
@media(max-width:480px){h1::after{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.youtube-play{transition:none}}