@font-face { font-family:"Pixelify Sans"; src:url("assets/fonts/pixelify-sans-700.ttf") format("truetype"); font-display:swap; font-weight:700; }
@font-face { font-family:"VT323"; src:url("assets/fonts/vt323-400.ttf") format("truetype"); font-display:swap; font-weight:400; }
:root { --void:#09090b; --paper:#cab89a; --ink:#17130e; --gold:#d5a149; --line:#947a50; font-family:"VT323", "Courier New", ui-monospace, monospace; color:var(--ink); background:var(--void); }
* { box-sizing:border-box; } html, body { min-width:320px; min-height:100%; margin:0; background:var(--void); } button, a { font:inherit; } button, a { -webkit-tap-highlight-color:transparent; } button:focus-visible, a:focus-visible { outline:3px solid #ffe0a2; outline-offset:4px; }
.os { min-height:100vh; } .screen { position:relative; display:grid; min-height:100vh; place-items:center; overflow:hidden; } .screen[hidden], .dialog-layer[hidden] { display:none !important; }
.boot-screen { background:#030303; } #intro-video { width:100%; height:100vh; object-fit:cover; transition:opacity 700ms ease; } .boot-screen.is-fading #intro-video { opacity:0; } .skip-intro { position:absolute; right:22px; bottom:18px; z-index:1; border:1px solid #8b7147; padding:9px 13px; color:#d4b680; background:rgba(0,0,0,.78); cursor:pointer; }
.home-screen { background:#050609; } .home-stage { position:relative; width:min(100vw, 1402px); line-height:0; } .home-scene { display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; } .home-copy { position:absolute; width:55%; left:18.2%; top:27.4%; pointer-events:none; } .home-copy h1 { margin:0; color:#0a0908; font-family:"Pixelify Sans", monospace; font-size:clamp(42px,5.2vw,73px); font-weight:700; line-height:1.37; letter-spacing:.03em; } .hit { position:absolute; border:0; cursor:pointer; background:transparent; } .hit-enter { left:18.1%; top:57.2%; width:24.4%; height:7%; }
.page-screen, .dialog-layer { background:#060807; } .page-background, .dialog-background { position:absolute; inset:0; z-index:0; background:center / cover no-repeat url("assets/source/page-01/background.png"); } .live-panel { position:relative; z-index:1; border:1px solid rgba(199,166,111,.75); color:var(--ink); background:rgba(205,188,157,.88); box-shadow:0 12px 34px rgba(0,0,0,.46); }
.intro-content { position:absolute; width:42%; left:20%; top:20%; min-height:0; margin:0; border:0; padding:0; background:transparent; box-shadow:none; } .intro-content h2 { max-width:700px; margin:0; font-family:"Pixelify Sans", monospace; font-size:clamp(43px,5vw,77px); line-height:1.13; letter-spacing:.025em; font-weight:700; } .intro-content h2 span { border-bottom:4px solid #9c2416; } .intro-content p { margin:clamp(28px,4vw,52px) 0; font-size:clamp(23px,2vw,31px); line-height:1.12; } .command-button { border:2px solid #7e6540; min-width:265px; padding:12px 29px; color:var(--gold); font-size:clamp(21px,1.9vw,29px); text-align:left; background:#070706; box-shadow:inset 0 0 0 2px #17120c; cursor:pointer; transition:transform 120ms ease, background 120ms ease; } .command-button:hover { transform:translateX(4px); background:#15100a; }
.menu-window { width:min(74vw,1064px); margin:0 4vw 0 0; overflow:hidden; background:rgba(208,193,164,.94); } .window-titlebar { display:flex; align-items:center; justify-content:space-between; min-height:67px; border-bottom:2px solid #806641; padding:0 19px; color:#e2c38e; font-size:clamp(21px,2vw,31px); background:#060606; } .window-controls { display:flex; gap:9px; } .window-controls i { display:grid; width:38px; height:38px; place-items:center; border:2px solid #c49d62; color:#d4b27a; font-style:normal; font-size:31px; line-height:1; } .menu-grid { display:grid; grid-template-columns:1.75fr 1fr; } .program-list { border-right:1px solid #7d6140; } .program-row { position:relative; display:grid; grid-template-columns:142px 1fr auto; align-items:center; min-height:212px; border-bottom:1px solid #7d6140; padding:22px 37px; color:inherit; text-decoration:none; } .program-row:last-child { border-bottom:0; } .program-row img { width:104px; height:104px; object-fit:contain; } .program-row h2 { margin:0 0 7px; font-size:clamp(34px,4vw,55px); letter-spacing:-.07em; } .program-row p { margin:0; font-size:clamp(19px,2vw,29px); line-height:1.27; } .program-row b { color:#0e0b08; font-size:58px; font-weight:400; } .program-row.is-soon { opacity:.82; } .program-row.is-soon span { align-self:end; margin-bottom:3px; color:#6e3d18; font-size:12px; font-weight:700; letter-spacing:.07em; text-align:right; } .link-row:hover { color:#542d13; background:rgba(159,124,61,.1); }
.extra-menu { padding:25px 28px; } .extra-menu h2 { margin:2px 0 25px; font-size:28px; text-align:center; } .extra-menu button { display:grid; grid-template-columns:44px 1fr 22px; align-items:center; width:100%; min-height:81px; margin:18px 0; border:1px solid #7e623e; padding:15px 20px; color:#17130e; font-weight:700; font-size:clamp(17px,1.7vw,25px); text-align:left; background:transparent; cursor:pointer; } .extra-menu button:hover { background:rgba(159,124,61,.14); } .extra-menu button span { font-size:33px; } .extra-menu button b { font-size:34px; font-weight:400; } .social-links { display:flex; justify-content:space-around; margin-top:38px; border-top:1px solid #7e623e; padding-top:28px; } .social-links a { display:grid; width:47px; height:47px; place-items:center; border:2px solid #17130e; border-radius:50%; color:#17130e; font-size:32px; font-weight:900; text-decoration:none; } .social-links a:first-child { border-radius:3px; }
.dialog-layer { position:fixed; z-index:10000; inset:0; display:grid; place-items:center; padding:28px; } .dialog-background { filter:brightness(.45); } .dialog-window { width:min(720px,100%); min-height:360px; padding:34px clamp(28px,6vw,74px) 52px; background-color:rgba(205,189,159,.96); background-image:linear-gradient(rgba(109,86,56,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(109,86,56,.1) 1px,transparent 1px); background-size:22px 22px; } .window-file { margin:0 0 21px; color:#6b4d2b; font-size:17px; font-weight:700; } .dialog-window h2 { margin:0 0 24px; font-size:clamp(38px,6vw,62px); letter-spacing:-.07em; } .dialog-window p, .dialog-window li { font-size:18px; line-height:1.45; } .dialog-window ul { padding-left:22px; } .dialog-close { position:absolute; top:14px; right:15px; display:grid; width:38px; height:38px; place-items:center; border:1px solid #7a5e3c; color:#25170b; font-size:31px; line-height:1; background:transparent; cursor:pointer; } .dialog-close:hover { color:#a12e18; background:rgba(161,46,24,.1); } .dialog-action { display:inline-block; margin-top:12px; border-bottom:2px solid #9c2416; padding-bottom:3px; color:#3d240f; font-weight:700; text-decoration:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }
/* Source-led controls: visual assets stay untouched; semantic controls sit above them. */
.home-enter { position:absolute; left:18.1%; top:57.2%; width:24.75%; border:0; padding:0; line-height:0; background:transparent; cursor:pointer; }
.home-enter img { display:block; width:100%; height:auto; }
.menu-stage { position:relative; z-index:1; width:min(96vw,1070px); line-height:0; }
.menu-stage > img { display:block; width:100%; height:auto; }
.menu-hit { position:absolute; z-index:3; display:block; border:0; padding:0; background:transparent; cursor:pointer; }
.menu-yep-hit { left:1%; top:70.7%; width:63%; height:27.5%; }
.menu-work-hit { left:66.7%; top:19.3%; width:29.6%; height:11.8%; }
.menu-about-hit { left:66.7%; top:33.4%; width:29.6%; height:12.7%; }
.menu-pickles-hit { left:66.7%; top:48.5%; width:29.6%; height:12.7%; }
.menu-facebook-hit { left:68.7%; top:75.1%; width:6.2%; height:8.5%; }
.menu-instagram-hit { left:77.3%; top:75.1%; width:6.3%; height:8.5%; }
.menu-threads-hit { left:87.0%; top:75.1%; width:6.3%; height:8.5%; }
/* Entire-site CRT treatment: scanlines, subtle phosphor colour, and edge falloff — never blocks input. */
body::before, body::after { position:fixed; z-index:9999; inset:0; pointer-events:none; content:""; }
body::before { background:repeating-linear-gradient(to bottom, rgba(255,241,202,.055) 0, rgba(255,241,202,.055) 1px, rgba(0,0,0,.13) 2px, rgba(0,0,0,.13) 4px); mix-blend-mode:overlay; opacity:.46; }
body::after { background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.18) 77%, rgba(0,0,0,.55) 100%), repeating-linear-gradient(90deg, rgba(255,0,0,.025) 0 1px, rgba(0,255,200,.018) 1px 2px, rgba(0,0,255,.025) 2px 3px); opacity:.55; }
@media (prefers-reduced-motion:no-preference) { body::before { animation:crt-flicker 4.5s steps(1,end) infinite; } @keyframes crt-flicker { 0%, 96%, 100% { opacity:.70; } 97% { opacity:.59; } 98% { opacity:.78; } } }
.menu-stage > picture, .menu-stage > picture > img { display:block; width:100%; height:auto; }
/* Stronger CRT: denser scanlines, luminance breathing, phosphor mask, and screen curvature. */
body::before { background:repeating-linear-gradient(to bottom, rgba(255,241,202,.08) 0, rgba(255,241,202,.08) 1px, rgba(0,0,0,.22) 2px, rgba(0,0,0,.22) 3px); opacity:.70; }
body::after { background:radial-gradient(ellipse at center, transparent 36%, rgba(0,0,0,.25) 72%, rgba(0,0,0,.68) 100%), repeating-linear-gradient(90deg, rgba(255,0,0,.045) 0 1px, rgba(0,255,190,.032) 1px 2px, rgba(0,0,255,.045) 2px 3px); opacity:.72; }
.os { transform:perspective(1300px) rotateX(.12deg); transform-origin:center; }
.dialog-has-art .dialog-window { width:min(1100px, 96vw); min-height:0; padding:0; border:0; background:transparent; box-shadow:none; }
.dialog-has-art .dialog-close { display:none; }
.popup-close { position:absolute; left:86%; top:4.5%; width:8%; height:8%; border:0; padding:0; background:transparent; cursor:pointer; }
.work-email-hit { left:25.8%; top:77.3%; width:18.8%; height:8.2%; }
.work-build-hit { left:46.2%; top:77.3%; width:20.0%; height:8.2%; }
.about-email-hit { left:15.5%; top:77.4%; width:21.5%; height:8.3%; }
.about-connect-hit { left:37.2%; top:77.4%; width:22.2%; height:8.3%; }
.popup-art { position:relative; display:block; width:fit-content; max-width:100%; margin:auto; line-height:0; }
.popup-art > img { display:block; width:auto; max-width:100%; max-height:calc(100vh - 34px); margin:0; }
.dialog-has-art .dialog-close { z-index:2; top:6%; right:5.5%; width:4.5%; height:7%; border:0; opacity:0; }
.popup-hit, .popup-social-hits a { position:absolute; display:block; border:0; background:transparent; cursor:pointer; }
.work-build-hit { left:49.3%; top:73.5%; width:20.1%; height:7.6%; }
.popup-social-hits { position:absolute; left:65.5%; top:72%; display:flex; width:18%; height:7%; gap:5%; }
.popup-social-hits a { position:relative; flex:1; }
.popup-close { left:92.0%; top:1.5%; width:6.8%; height:7.5%; }
.work-email-hit { left:22.4%; top:81.4%; width:25.4%; height:10.5%; }
.work-back-hit { left:50.2%; top:81.4%; width:25.5%; height:10.5%; }
.about-email-hit { left:8.3%; top:84.3%; width:25.6%; height:10.5%; }
.about-back-hit { left:35.8%; top:84.3%; width:26.5%; height:10.5%; }
.popup-social-hits { left:68.1%; top:79.5%; width:18.9%; height:7.5%; gap:8%; }
.pickles-ok-hit { left:33.6%; top:81.3%; width:32.2%; height:12%; }
/* The locked menu owns its paper field; transparent edges cannot reveal the Page 01 wireframe. */
.menu-stage { overflow:hidden; background:#c5b28f; isolation:isolate; }
.coming-soon { position:absolute; z-index:2; display:block; min-width:150px; border:1px solid #795229; padding:5px 7px 4px; color:#e0af59; font-family:"VT323", monospace; font-size:clamp(15px,1.55vw,22px); line-height:1; letter-spacing:.05em; text-align:center; background:rgba(8,7,5,.94); box-shadow:0 0 0 2px rgba(202,176,124,.2); pointer-events:none; }
.coming-soon-redglass { left:44%; top:34.2%; }
.coming-soon-primal { left:44%; top:65.3%; }
@media (max-height:800px) and (min-width:761px) { .menu-window { max-height:96vh; } .window-titlebar { min-height:54px; } .program-row { grid-template-columns:110px 1fr auto; min-height:174px; padding:14px 28px; } .program-row img { width:82px; height:82px; } .program-row h2 { margin-bottom:3px; font-size:clamp(30px,3.5vw,46px); } .program-row p { font-size:clamp(17px,1.7vw,24px); } .extra-menu { padding:16px 22px; } .extra-menu h2 { margin:0 0 12px; } .extra-menu button { min-height:61px; margin:9px 0; padding:10px 15px; } .social-links { margin-top:17px; padding-top:16px; } .social-links a { width:38px; height:38px; font-size:25px; } }
@media (max-width:760px) { .boot-screen { align-items:stretch; } #intro-video { height:100svh; } .home-stage { width:min(100vw, calc(100svh * 0.56220)); height:auto; } .home-scene { width:100%; height:auto; max-width:none; margin:0; transform:none; } .home-copy { width:56%; left:18.2%; top:27.4%; } .home-copy h1 { font-size:clamp(34px,10.2vw,58px); } .hit-enter { left:18.1%; top:57.2%; width:24.4%; height:7%; } .intro-content { width:55%; left:20%; top:20%; min-height:0; margin:0; padding:0; } .intro-content h2 { font-size:clamp(39px,9vw,58px); } .intro-content p { font-size:clamp(20px,5.2vw,28px); } .command-button { min-width:208px; padding:10px 18px; font-size:clamp(19px,5vw,25px); } .menu-window { width:92vw; margin:0; } .window-titlebar { min-height:52px; font-size:19px; } .window-controls i { width:27px; height:27px; font-size:23px; } .menu-grid { grid-template-columns:1fr; } .program-list { border-right:0; border-bottom:1px solid #7d6140; } .program-row { grid-template-columns:80px 1fr auto; min-height:135px; padding:17px; } .program-row img { width:63px; height:72px; } .program-row h2 { font-size:34px; } .program-row p { font-size:17px; } .program-row.is-soon span { grid-column:2 / 4; font-size:10px; text-align:left; } .extra-menu { padding:20px; } .extra-menu h2 { font-size:24px; } .extra-menu button { min-height:63px; margin:10px 0; font-size:18px; } .dialog-layer { padding:17px; } .dialog-window { min-height:0; padding:30px 28px 42px; } .dialog-has-art .dialog-window { padding:0; } }
@media (max-width:760px) { .page-background { background-image:url("assets/source/page-01/background-mobile.png"); background-position:center top; background-size:cover; } .home-copy { width:74%; left:13%; top:23%; } .home-copy h1 { font-size:clamp(36px,10.6vw,59px); line-height:1.34; } .home-enter { left:16%; top:55%; width:56%; } .intro-content { width:70%; left:13%; top:19%; } .intro-content h2 { font-size:clamp(36px,9.3vw,57px); line-height:1.12; } .intro-content p { margin:clamp(22px,5vw,38px) 0; font-size:clamp(21px,5.6vw,29px); } .command-button { min-width:0; width:94%; } .menu-stage { width:min(96vw,815px); margin:0 auto; } .menu-yep-hit { left:1.5%; top:40%; width:96%; height:15.2%; } .menu-work-hit { left:5.8%; top:62.1%; width:88%; height:7.2%; } .menu-about-hit { left:5.8%; top:70.8%; width:88%; height:7.2%; } .menu-pickles-hit { left:5.8%; top:79.5%; width:88%; height:7.5%; } .menu-facebook-hit { left:26.3%; top:91.7%; width:9.5%; height:6%; } .menu-instagram-hit { left:45.3%; top:91.7%; width:10%; height:6%; } .menu-threads-hit { left:64.5%; top:91.7%; width:10%; height:6%; } .page-screen#menu:not([hidden]) { display:grid; overflow:hidden; padding:0; } }
@media (max-width:760px) { .coming-soon { display:block; min-width:112px; padding:3px 5px; font-size:13px; } .coming-soon-redglass { left:32%; top:21.5%; } .coming-soon-primal { left:32%; top:37.6%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }