/* Reference typefaces for the local design study; see DESIGN.md. */
.work-tools .filters{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:8px}.filters button{white-space:nowrap;flex-shrink:0}.footer-info a{margin-top:5px;overflow-wrap:anywhere;max-width:100%}.header-note{overflow-wrap:anywhere}.footer-info>div{min-width:0}
@font-face{font-family:TronicaMono;src:url('assets/TronicaMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:DrukWide;src:url('assets/DrukWide-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--black:#111;--white:#f4f4f1;--muted:#a6a6a2;--line:#343434;color-scheme:dark;font-family:TronicaMono,'Courier New',monospace;background:var(--black);color:var(--white);font-size:12px;text-transform:uppercase}
*{box-sizing:border-box}body{margin:0}html{scroll-behavior:smooth}a{color:inherit;text-decoration:none}button{font:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}button:disabled{opacity:.3;cursor:default}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:6px}button:hover,a:hover{color:#bdbdbd}[hidden]{display:none!important}.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{position:fixed;top:-60px;left:20px;z-index:30;background:white;color:black;padding:12px}.skip:focus{top:12px}
.header{position:fixed;inset:0 0 auto;z-index:5;padding:22px 24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;background:transparent;mix-blend-mode:difference}.brand{grid-column:1/5;font-family:DrukWide,Arial,sans-serif;font-weight:700;font-size:28px;letter-spacing:-1.5px;line-height:1.1;text-transform:none;width:max-content}.brand span{display:block;font-family:TronicaMono,monospace;font-size:10px;font-weight:400;letter-spacing:0;text-transform:uppercase;margin-top:5px}.header nav{grid-column:5/8}.header-contact{grid-column:8/11}.header nav,.header-contact{display:flex;align-items:flex-start;flex-direction:column;gap:7px}.header-note{grid-column:11/13;text-align:right;line-height:1.65;font-size:10px}
.hero{height:100svh;background:#000;position:relative;display:grid;grid-template-rows:minmax(0,1fr) 64px;overflow:hidden}#hero-player-host{width:100%;height:100%;background:#000 url('assets/zeront-mark.jpg') center/contain no-repeat}.reel-controls{display:flex;justify-content:center;align-items:center;background:black}.reel-controls button{border:1px solid #818181;padding:12px 23px;background:#111;font-size:12px}.reel-controls button:hover{background:white;color:#111}#playback-status{position:absolute;left:20px;bottom:60px;background:black;padding:12px;max-width:calc(100% - 40px);font-size:10px}
.work{height:100svh;min-height:650px;position:sticky;top:0;isolation:isolate;background:#111;overflow:hidden}.work-tools{position:absolute;left:24px;right:24px;top:111px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px}.filters{display:flex;gap:22px}.filters button{padding:8px 0;color:#aaa}.filters button[aria-pressed=true]{color:white;text-decoration:underline;text-underline-offset:6px}.sample-label{font-size:9px;color:#c2c2bd}.work-index{position:absolute;top:50%;left:24px;right:24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:3;pointer-events:none;text-shadow:0 2px 10px black}.work-index h2{font:inherit;margin:0}#pages{justify-self:end;display:flex;align-items:center;gap:20px;pointer-events:auto}#pages button{width:35px;height:35px;font-size:20px;background:#1118}#projects{position:absolute;inset:0;height:100%;width:100%;overflow:hidden}.project{position:absolute;inset:0;height:100%;width:100%}.project-visual{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;background:#111}.project-visual svg{display:block;width:100%;height:100%;object-fit:cover}.project-visual:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0008,transparent 30%,transparent 62%,#000b),repeating-linear-gradient(0deg,transparent,transparent 2px,#0002 3px);}.project-visual .open-hint{position:absolute;left:50%;top:72%;transform:translate(-50%,-50%);z-index:1;padding:10px 16px;border:1px solid #ffffff66;font-size:10px;opacity:0;transition:opacity .2s;background:#1119}.project-visual:hover .open-hint,.project-visual:focus-visible .open-hint{opacity:1}.project-meta{position:absolute;bottom:27px;left:24px;right:24px;display:grid;grid-template-columns:7fr 2fr 2fr 1fr;gap:22px;align-items:end;pointer-events:none;text-shadow:0 2px 10px #000}.project-title{font-family:DrukWide,Arial,sans-serif;font-size:clamp(20px,2.2vw,40px);font-weight:700;line-height:1.12;letter-spacing:-.045em;margin:0;max-width:95%}.project-meta dl{margin:0;line-height:1.5}.project-meta dt{color:#a6a6a2;margin-bottom:5px}.project-meta dd{margin:0}.project-meta dl:last-child{text-align:right}
.studio{display:grid;grid-template-columns:4fr 8fr;gap:24px;padding:85px 24px 75px;border-top:1px solid #242424}.studio h2{font:inherit;margin:4px 0}.studio>div{max-width:820px}.studio p{font-size:clamp(18px,2vw,30px);line-height:1.4;margin:0 0 24px}.studio p+p{font-size:14px;line-height:1.6;color:#aaa;max-width:600px}.studio span{font-size:11px}
.contact{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;isolation:isolate;overflow:hidden}#footer-mark{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.85;pointer-events:none}.footer-info{display:grid;grid-template-columns:4fr 5fr 3fr;gap:24px;align-items:end;font-size:11px;line-height:1.5;padding-bottom:24px}.footer-info>div{display:flex;flex-direction:column;align-items:flex-start}.footer-info>div:last-child{justify-self:end}.footer-info p{margin:6px 0 0}.footer-info button{margin-top:5px}.footer-info span{display:block}.footer-info p span{display:inline}.back-top{width:100%;text-align:center;background:#282828;padding:10px;font-size:10px}.back-top:hover{background:#444;color:white}
dialog{border:1px solid #444;background:#111;color:var(--white);max-width:calc(100vw - 32px)}dialog::backdrop{background:#000e}body:has(dialog[open]){overflow:hidden}#viewer{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:0;border:0;overflow:hidden}#viewer[open]{display:flex;flex-direction:column}.viewer-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 24px;height:60px;flex-shrink:0;background:#111}.viewer-toolbar h2{font:inherit;margin:0}.viewer-toolbar button{padding:10px}#viewer-content{width:100%;flex:1;min-height:0;background:#000}#viewer-content svg,#viewer-content img,#viewer-content iframe{width:100%;height:100%;display:block;object-fit:contain;border:0}.viewer-bottom{display:flex;justify-content:space-between;align-items:center;padding:0 24px;min-height:46px;background:#111}.viewer-bottom p{font-size:10px;color:#aaa}.viewer-bottom>div{display:flex}.viewer-bottom button{padding:10px;font-size:20px}#notice{width:450px;padding:30px}#notice h2{font-size:20px}#notice p{line-height:1.7;color:#aaa}#notice button{border:1px solid white;padding:10px 20px}.drift{transform-origin:center;animation:drift 9s ease-in-out infinite alternate;animation-play-state:paused}.in-view .drift{animation-play-state:running}body:has(dialog[open]) .drift{animation-play-state:paused}@keyframes drift{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-12px) rotate(2deg)}}
@media(max-width:700px){:root{font-size:10px}.header{padding:18px 16px;grid-template-columns:1fr 1fr 1fr;gap:10px}.brand{grid-column:1;font-size:21px}.brand span{font-size:9px}.header nav{grid-column:2;justify-self:center}.header-contact{grid-column:3;justify-self:end}.header-note{display:none}.hero{grid-template-rows:minmax(0,1fr) 70px}.work{min-height:630px}.work-tools{left:16px;right:16px;top:95px;display:block}.filters{gap:18px}.sample-label{display:block;margin-top:10px;font-size:8px}.work-index{left:16px;right:16px;top:43%;grid-template-columns:1fr auto}.work-index h2{font-size:10px}#project-count{position:absolute;left:50%;transform:translateX(-50%)}#pages{gap:8px}.project-meta{left:16px;right:16px;bottom:24px;grid-template-columns:1fr 1fr 1fr;gap:24px 10px}.project-title{grid-column:1/-1;font-size:26px}.project-meta dl:last-child{text-align:right}.project-visual .open-hint{opacity:1;top:67%}.studio{padding:45px 16px;grid-template-columns:1fr;gap:26px}.studio p{font-size:20px}.studio p+p{font-size:12px}.studio span{font-size:9px}.contact{padding:16px;min-height:650px}.footer-info{grid-template-columns:1fr 1fr;font-size:10px;gap:24px}.footer-info>div:last-child{grid-column:1/-1;justify-self:start;flex-direction:row;gap:16px}.footer-info>div:last-child p{margin:0}.viewer-toolbar{padding:10px 16px;font-size:10px}.viewer-bottom{padding:0 16px}.viewer-bottom p{font-size:9px;max-width:75%}}
#hero-player-host>video{display:block;width:100%;height:100%;object-fit:cover}#viewer-content>video{display:block;width:100%;height:100%;object-fit:contain}.reel-controls{gap:24px}.reel-controls button{background:transparent;border:0;padding:12px 4px;min-height:44px}.reel-controls button:hover{background:transparent;color:white;text-decoration:underline;text-underline-offset:5px}#hero-sound{color:#b0b0ad;min-width:84px}#hero-sound[aria-pressed=true]{color:white}.player-hud{display:flex;align-items:center;gap:24px;padding:8px 24px;background:#000;border-top:1px solid #242424;flex-shrink:0;min-height:62px;font-size:11px}.player-hud button{min-height:44px;white-space:nowrap}.player-hud button:hover{color:white;text-decoration:underline;text-underline-offset:5px}#reel-play{min-width:45px}#reel-time{white-space:nowrap;color:#aaa;font-variant-numeric:tabular-nums}#reel-progress{appearance:none;flex:1;min-width:40px;height:24px;margin:0;background:transparent;cursor:pointer}#reel-progress::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#eee var(--played,0%),#4c4c4c var(--played,0%))}#reel-progress::-webkit-slider-thumb{appearance:none;width:8px;height:8px;border-radius:50%;background:white;margin-top:-3px}#reel-progress::-moz-range-track{height:2px;background:#4c4c4c}#reel-progress::-moz-range-progress{height:2px;background:white}#reel-progress::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:white}#reel-progress:focus-visible{outline:1px solid white;outline-offset:4px}#reel-progress:disabled{opacity:.3;cursor:default}#reel-sound{min-width:72px}
@media(max-width:700px){.player-hud{display:grid;grid-template-columns:auto 1fr auto auto;gap:0 18px;padding:8px 16px;font-size:9px}#reel-progress{grid-column:1/-1;grid-row:1;width:100%;margin-bottom:2px}#reel-time{font-size:9px}#reel-sound{min-width:0}#reel-play{min-width:34px}}
.work-scroll{position:relative;min-height:100svh}.project-visual{touch-action:pan-y}
.work-more{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 24px;border-top:1px solid #343434}.work-more p{color:#aaa;margin:0}.work-more nav{display:flex;gap:24px}.work-more button{border-bottom:1px solid #777;padding:12px 0}.studio p{white-space:pre-line}@media(max-width:700px){.work-more{padding:24px 16px;align-items:flex-start;flex-direction:column}.work-more nav{width:100%;justify-content:space-between;gap:20px}}
.project-preview{display:block;width:100%;height:100%;object-fit:contain;background:#111}.work.dissolving .project-preview,.work.entering .project-preview{visibility:hidden}
#work-dissolve{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.project-meta{z-index:2}.work.dissolving .project-visual>svg,.work.entering .project-visual>svg{visibility:hidden}.work.dissolving .drift{animation-play-state:paused}.work-tools,.work-index{opacity:var(--work-ui-opacity,1)}.work.leaving .open-hint,.work.entering .open-hint{visibility:hidden}.work.entering .project-visual,.work.entering .work-tools,.work.entering #pages{pointer-events:none}
#cursor-follower{position:fixed;inset:0;pointer-events:none;z-index:50;visibility:hidden}#cursor-follower.active{visibility:visible}.cursor-dot,.cursor-ring{position:absolute;left:0;top:0;will-change:transform;mix-blend-mode:difference;pointer-events:none}.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:white}.cursor-ring{width:28px;height:28px;margin:-14px 0 0 -14px}.cursor-ring:before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid #fff;transform:scale(1);transition:transform .18s ease-out}#cursor-follower.hovering .cursor-ring:before{transform:scale(1.5)}body:has(dialog[open]) #cursor-follower{display:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){html.has-cursor body:not(:has(dialog[open])),html.has-cursor body:not(:has(dialog[open])) *{cursor:none!important}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){#cursor-follower{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.drift{animation:none}*{transition:none!important}}