@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{--ink:#191917;--paper:#d8d5c9;--pink:#b78f92;--line:#3d3d37;--mono:'IBM Plex Mono',monospace;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--ink);color:var(--paper);font:12px var(--mono)}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:5px}button{color:inherit}::selection{background:var(--pink);color:var(--ink)}.topbar{height:84px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#191917}.brand{font:900 32px var(--display);display:flex;align-items:center;gap:10px;letter-spacing:-1px}.tape-icon{font:26px var(--mono);border:2px solid var(--paper);line-height:18px;padding:1px 4px}.brand-sub{font:9px var(--mono);letter-spacing:2px;max-width:48px;margin-left:5px}.topbar nav{display:flex;align-items:center;gap:34px;font-size:10px;letter-spacing:1px}.topbar nav a:hover{color:var(--pink)}.small-button{background:none;border:1px solid #706e64;padding:11px 15px;font-size:10px}.small-button:hover{background:var(--paper);color:var(--ink)}.header-format{font:800 italic 25px var(--display)}.header-format b{font:12px var(--mono);border:1px solid;padding:2px}.hero{height:min(830px,calc(100svh - 84px));min-height:650px;position:relative;overflow:hidden;background:#3c3c32}.hero video,.hero-shade,.scanlines{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-shade{background:linear-gradient(90deg,rgba(9,12,10,.83),rgba(9,12,10,.35) 63%,rgba(9,12,10,.15)),linear-gradient(0deg,rgba(9,12,10,.7),transparent 30%)}.scanlines{pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#0002 4px);opacity:.35}.osd{position:absolute;top:28px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:13px;text-shadow:2px 1px #777;letter-spacing:2px}.hero-content{position:relative;padding:115px 5% 90px;max-width:1100px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:500;margin:0 0 22px;line-height:1.6}.hero h1{font:900 clamp(75px,8.6vw,134px)/.88 var(--display);letter-spacing:-2px;margin:0 0 27px}.hero h1 span{color:#c4a0a2}.hero-description{font-size:12px;line-height:1.85;color:#c7c5bc}.menu{display:flex;gap:10px;margin-top:33px}.menu-button{display:flex;text-align:left;align-items:center;justify-content:space-between;gap:18px;border:1px solid #bdb9a9;background:#161916ad;padding:17px 20px;min-width:232px;box-shadow:inset 0 -3px #0005;transition:transform .15s,background .15s;font-weight:600;font-size:12px}.menu-button:hover{transform:translateY(-2px);background:#3e4238}.menu-button:active{transform:translateY(1px)}.menu-button small{display:block;font-size:8px;font-weight:400;letter-spacing:.7px;margin-top:6px;opacity:.7}.menu-button.primary{background:var(--paper);color:#20221c}.menu-button.primary:hover{background:#eeebdf}.symbol{font-size:24px;font-weight:400}.end-arrow{margin-left:12px}.hero-bottom{position:absolute;bottom:26px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.2px}.playback{background:#17191766;border:1px solid #a09c8a;padding:9px 13px;font-size:9px}.muted{opacity:.4;padding:0 8px}.tape-strip{display:flex;align-items:center;gap:20px;padding:14px 5%;background:var(--paper);color:var(--ink);font-size:10px;font-weight:600;letter-spacing:1px}.strip-rule{height:1px;background:#99978c;flex:1}.stripe{width:36px;height:20px;transform:skew(-20deg);margin-left:-15px}.s1{background:#ad7b80}.s2{background:#8b9380}.s3{background:#4e625f}.section{padding:85px 5%}.section-top{display:flex;justify-content:space-between;align-items:start}.index-label{font-size:9px;color:#8f9085}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:0 0 37px}.section-heading h2{font:800 78px/.9 var(--display);letter-spacing:-1px;margin:0}.section-heading p{color:#aaa99e;font-size:11px;line-height:1.7;margin:0}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}.frame{background:transparent;border:0;padding:0;text-align:left;min-width:0}.frame-image{aspect-ratio:16/9;overflow:hidden;position:relative;background:#292b25}.frame img{width:100%;height:100%;object-fit:cover;transition:transform .4s,filter .4s}.frame:hover img{transform:scale(1.035);filter:brightness(1.1)}.frame .view{position:absolute;right:12px;bottom:12px;background:#191917d9;padding:7px 10px;font-size:9px;opacity:0;transition:opacity .2s}.frame:hover .view,.frame:focus-visible .view{opacity:1}.frame-label{display:flex;gap:12px;align-items:center;border-bottom:1px solid #404039;padding:15px 0}.frame-number{color:var(--pink);font-size:10px}.frame-title{font-size:11px;flex:1}.frame-type{font-size:8px;color:#8f9085}.archive-foot{display:flex;justify-content:space-between;color:#83857a;font-size:9px;letter-spacing:1px;margin-top:30px}.position{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;padding-top:90px;padding-bottom:95px}.position h2{font:800 clamp(54px,5.3vw,82px)/.95 var(--display);letter-spacing:-1px;margin:0 0 27px}.position h2 em{font-style:normal;color:#876568}.explanation{font:15px/1.8 var(--mono);max-width:490px}.secondary-copy{font-size:11px;line-height:1.8;color:#67685f}.dark-button{background:var(--ink);color:var(--paper);margin-top:28px;max-width:315px}.cassette{background:#292927;border:2px solid #444440;border-radius:12px;padding:15px 22px;color:#d4d1c4;box-shadow:8px 12px 0 #a7a497;transform:rotate(-4deg);max-width:530px}.cassette-screws{display:flex;justify-content:space-between;color:#919084;font-size:16px}.cassette-screws i{font-style:normal;line-height:10px}.cassette-label{margin:10px 13px 16px;padding:20px;background:#c8c5b8;color:#24251f;border-top:8px solid #a97f84;box-shadow:inset 0 0 0 1px #aba899}.handwritten{font:italic 700 36px var(--display);letter-spacing:1px}.label-rule{height:1px;background:#9c9b90;margin:10px 0}.cassette-label>span:last-child{font-size:8px;letter-spacing:1px}.cassette-window{margin:0 13px;display:flex;align-items:center;justify-content:space-around;gap:12px;background:#171815;border:3px solid #4d4e44;padding:12px 6px;border-radius:6px}.reel{height:74px;width:74px;display:grid;place-items:center;border:15px solid #a7a79a;border-radius:50%;outline:2px solid #5a5c52;background:repeating-conic-gradient(#b8b8ab 0deg 25deg,#31332c 25deg 60deg)}.reel b{width:21px;height:21px;border-radius:50%;background:#161813}.cassette-window>span{font:bold italic 24px var(--display);text-align:center}.cassette-window small{font:7px var(--mono)}.cassette-bottom{display:flex;justify-content:space-between;font-size:9px;padding:21px 15px 13px;letter-spacing:1px}.end-menu{padding:52px 5%;border-bottom:1px solid var(--line);text-align:center}.end-menu>div{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.end-menu button,.end-menu a{background:#23241f;border:1px solid #5a5a50;padding:16px 24px;font-size:10px;box-shadow:inset 0 -3px #111}.end-menu button:hover,.end-menu a:hover{background:var(--paper);color:var(--ink)}footer{padding:28px 5%;display:flex;justify-content:space-between;gap:25px;font-size:8px;color:#8b8c80;align-items:center}footer p{margin:0;max-width:440px;line-height:1.8}dialog{max-width:min(1100px,94vw);width:100%;padding:18px;background:#191917;border:1px solid #6f7064;color:var(--paper)}dialog::backdrop{background:#090b09ed}#close-viewer{display:block;margin:0 0 15px auto;background:none;border:1px solid #6f7064;padding:8px 13px}#viewer-image{display:block;width:100%;max-height:75vh;object-fit:contain}.viewer-controls{display:flex;align-items:center;justify-content:space-between;padding-top:16px;gap:15px;font-size:11px}.viewer-controls button{background:none;border:1px solid #6f7064;padding:9px}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);z-index:20;max-width:90vw;width:max-content;background:var(--paper);color:var(--ink);padding:17px 23px;border:1px solid #777;box-shadow:4px 4px #0008;opacity:0;pointer-events:none;transition:.2s;font-size:12px}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1700px){.hero-content{padding-top:150px}}@media(max-width:850px){.topbar{height:72px}.topbar nav{gap:18px}.header-format{display:none}.hero{height:760px;min-height:0}.hero-content{padding-top:125px}.hero h1{font-size:100px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.position{gap:40px}.cassette{padding:10px}.handwritten{font-size:27px}.reel{width:55px;height:55px;border-width:10px}.position h2{font-size:57px}.explanation{font-size:12px}}
@media(max-width:580px){.topbar{padding:0 6%;height:68px}.brand{font-size:27px}.brand-sub{display:none}.topbar nav a{display:none}.hero{height:740px}.hero-content{padding:130px 6% 80px}.hero h1{font-size:clamp(66px,17vw,96px);letter-spacing:-1px}.hero-description{font-size:11px}.eyebrow{font-size:8px;letter-spacing:1.6px}.osd{left:6%;right:6%;font-size:11px}.menu{flex-direction:column;max-width:310px;margin-top:25px}.menu-button{padding:14px 17px;min-height:61px;min-width:0}.hero-bottom{left:6%;right:6%;font-size:8px;flex-wrap:wrap;gap:20px}.hero-bottom>a{display:none}.tape-strip{font-size:8px;gap:10px;padding:12px 6%}.stripe{width:23px;margin-left:-7px}.section{padding:55px 6%}.section-top{gap:20px}.index-label{font-size:7px;text-align:right}.section-heading h2{font-size:60px}.section-heading p{font-size:9px}.gallery{gap:23px;grid-template-columns:1fr}.frame-label{padding:12px 0}.frame-title{font-size:12px}.archive-foot{font-size:7px}.position{grid-template-columns:1fr;gap:42px;padding-bottom:65px}.position h2{font-size:68px}.explanation{font-size:13px}.cassette{margin:8px 9px;max-width:100%;padding:14px}.handwritten{font-size:36px}.reel{height:68px;width:68px;border-width:13px}.end-menu{padding:40px 6%}.end-menu>div{display:grid;grid-template-columns:1fr 1fr}.end-menu button,.end-menu a{padding:14px 7px;font-size:9px}footer{flex-wrap:wrap;padding:25px 6%;gap:16px}footer p{order:3;max-width:100%;width:100%}footer>span:last-child{margin-left:auto}.viewer-controls{font-size:9px}#toast{font-size:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* The tape follows the film's playback state. */
.cassette{animation:cassette-drift 9s ease-in-out infinite;position:relative;overflow:hidden}
.reel{animation:tape-spool 7s linear infinite}
.reel:last-child{animation-duration:9s}
.cassette-window{position:relative;overflow:hidden}
.cassette-window::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#e5e3cc12 45%,#e5e3cc25 50%,transparent 75%);transform:translateX(-140%);animation:tape-reflection 12s ease-in-out infinite}
.cassette-bottom>span:last-child::before{content:"";display:inline-block;width:5px;height:5px;background:#b8c499;border-radius:50%;margin-right:8px;box-shadow:0 0 6px #b8c466;animation:tape-led 3s ease-in-out infinite}
.tape-paused,.tape-paused .reel,.tape-paused .cassette-window::after,.tape-paused .cassette-bottom>span:last-child::before{animation-play-state:paused}
.video-controls{display:flex;align-items:center;gap:9px}.needs-sound{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@keyframes tape-spool{to{transform:rotate(360deg)}}
@keyframes cassette-drift{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(-2.8deg)}}
@keyframes tape-reflection{0%,65%{transform:translateX(-140%)}95%,100%{transform:translateX(140%)}}
@keyframes tape-led{0%,100%{opacity:.55}50%{opacity:1}}
@media(max-width:850px){.topbar nav{gap:12px}.topbar nav a{font-size:8px}.brand-sub{display:none}}
@media(max-width:580px){.topbar nav{gap:6px}.topbar .small-button{padding:9px 8px;font-size:8px}.brand{font-size:25px;gap:7px}.tape-icon{font-size:20px;padding:0 3px}.hero-bottom{gap:12px}.video-controls{gap:6px}.video-controls .playback{padding:9px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.cassette,.reel,.cassette-window::after,.cassette-bottom>span:last-child::before{animation:none!important}}
@media(max-width:370px){.topbar .tape-icon{display:none}.topbar .brand{font-size:22px}}

.header-emblem{display:grid;place-items:center;width:46px;height:46px;opacity:.85;flex-shrink:0}.header-emblem:hover{opacity:1}.header-emblem img{width:43px;height:43px;object-fit:contain}
#site-content{transition:filter .45s ease,transform .45s ease}.entry-locked{overflow:hidden}.entry-locked #site-content{filter:blur(10px);transform:scale(1.012);pointer-events:none;user-select:none}
.entry-gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:rgba(14,16,12,.63);overflow-y:auto;transition:opacity .4s ease;backdrop-filter:blur(2px)}
.entry-gate.entered{opacity:0;pointer-events:none}.entry-gate[hidden]{display:none}.entry-card{width:min(430px,100%);text-align:center;padding:35px 28px;background:#1b1c17eb;border:1px solid #77766a;box-shadow:8px 8px 0 #0005;position:relative}.entry-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#ad7b80 0 33%,#8b9380 33% 66%,#4e625f 66%)}
.entry-emblem{display:block;margin:0 auto 21px;object-fit:contain;opacity:.9}.entry-card .eyebrow{margin-bottom:15px}.entry-card h2{font:800 clamp(54px,10vw,70px)/.95 var(--display);margin:0 0 20px;letter-spacing:-1px}.entry-card>p:not(.eyebrow){font-size:11px;line-height:1.8;color:#aaa99e}.entry-card .menu-button{margin:25px auto 0;width:100%;min-width:0}.entry-card .menu-button:disabled{cursor:wait;opacity:.6}#entry-status{min-height:20px;margin:14px 0}.entry-format{font-size:8px;letter-spacing:2px;color:#8f9085}
@media(max-width:850px){.header-emblem{width:34px;height:34px}.header-emblem img{width:32px;height:32px}}
@media(max-width:580px){.topbar{padding:0 4%;gap:9px}.brand{font-size:23px}.topbar .tape-icon{display:none}.topbar nav{gap:5px;margin-left:auto}.header-emblem{width:27px;height:27px}.header-emblem img{width:27px;height:27px}.entry-card{padding:30px 23px}}
@media(max-width:350px){.topbar .brand{font-size:20px}.topbar .small-button{font-size:7px;padding:9px 6px}.topbar{gap:6px}}