@charset "UTF-8";

@font-face{font-family:"D-DIN Condensed Web";src:url("../fonts/D-DINCondensed.otf") format("opentype");font-style:normal;font-weight:100 500;font-display:swap}
@font-face{font-family:"D-DIN Condensed Web";src:url("../fonts/D-DINCondensed-Bold.otf") format("opentype");font-style:normal;font-weight:600 900;font-display:swap}

:root{--paper:#fff;--ink:#111;--muted:#777;--pad:clamp(18px,3.4vw,58px);--ease:cubic-bezier(.22,.82,.18,1);--jp:"Yu Gothic","YuGothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
body{font-family:"D-DIN Condensed Web",var(--jp);letter-spacing:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;z-index:120;top:10px;left:10px;padding:12px 16px;background:#111;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;transform:translateY(calc(-100% - 20px));transition:transform .18s}
.skip-link:focus{transform:none}
:where(a,button,input,select,textarea,[tabindex="0"]):focus-visible{outline:3px solid #111;outline-offset:3px}

/* Shared header */
.topbar{position:fixed;z-index:30;inset:0 0 auto;padding:38px var(--pad) 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;pointer-events:none;background:transparent}
.topbar>p{margin:10px 0;font-size:11px;font-weight:700;letter-spacing:.28em}
.brand{width:390px;text-align:center;pointer-events:auto;color:#111;mix-blend-mode:difference}
.brand:focus-visible{outline-color:currentColor}
.brand b{display:block;font-family:var(--jp);font-size:42px;font-weight:900;line-height:1.1;letter-spacing:.12em}
.brand small{display:block;margin-top:7px;padding-left:4px;font-size:10px;font-weight:700;letter-spacing:.48em}
.topbar nav{justify-self:end;display:flex;gap:12px;pointer-events:auto}
.topbar nav a{display:grid;place-items:center;min-width:86px;min-height:48px;padding:16px 14px 12px;font-size:11px;font-weight:700;letter-spacing:.28em}
.topbar nav .active{border-bottom:1px solid}

/* Works */
.works-page{height:100svh;overflow:hidden;cursor:none}
.works-page a,.works-page .work-tile{cursor:none}
.vault{position:fixed;inset:0;perspective:1600px;display:grid;place-items:center;overflow:hidden;--face-w:min(580px,45vw,calc((100dvh - 70px)*1.35));--bolt-head-half:calc(var(--face-w)*.39)}
.cylinder{position:relative;z-index:3;width:var(--face-w);transform-style:preserve-3d;will-change:transform;transform:translateY(115vh) rotateX(-8deg) rotateY(var(--rotation,0deg));transition:transform 1.45s var(--ease)}
.is-ready .cylinder{transform:translateY(0) rotateX(0) rotateY(var(--rotation,0deg))}
.vault-face{position:absolute;inset:0;padding:26px;background:#111;border:1px solid #111;backface-visibility:hidden;overflow:hidden;transform:rotateY(calc(var(--face)*60deg)) translateZ(calc(var(--face-w)*.866))}
.vault-face:before{content:"";position:absolute;z-index:0;inset:4px;background:#fff;border-radius:clamp(22px,5%,38px);pointer-events:none}
.face-0{--face:0}.face-1{--face:1}.face-2{--face:2}.face-3{--face:3}.face-4{--face:4}.face-5{--face:5}
.face-grid{position:relative;z-index:1;display:block;width:100%;min-height:1px;padding:0}

.work-tile{position:absolute;display:block;min-width:0;max-width:none;margin:0;perspective:900px;outline:0;container-type:size}
.tile-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .72s var(--ease)}
.work-tile:focus-within .tile-inner,.work-tile.is-tapped .tile-inner{transform:rotateY(180deg)}
.work-tile.is-proxy-hover .tile-inner{transform:rotateY(180deg)}
@media(hover:hover) and (pointer:fine){.work-tile:hover .tile-inner{transform:rotateY(180deg)}}
.work-tile:focus-within{z-index:8;outline:3px solid #111;outline-offset:3px}
.tile-front,.tile-back{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tile-front{background:#111}
.tile-front img,.tile-front video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}.tile-front video{z-index:2;visibility:hidden;pointer-events:none}.work-tile.is-previewing:not(.is-tapped) .tile-front video{visibility:visible}
.tile-back{padding:clamp(5px,6cqw,16px);gap:3px;background:#111;color:#fff;transform:rotateY(180deg);-webkit-transform:rotateY(180deg);display:flex;flex-direction:column}
.tile-back small{display:block;font-size:clamp(5px,3.2cqw,8px);line-height:1.15;letter-spacing:.15em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-back h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;font-size:clamp(9px,12cqw,30px);line-height:1.05;margin:auto 0;max-width:100%}
.tile-back a{display:flex;justify-content:space-between;border-top:1px solid #fff;padding-top:clamp(3px,2cqh,9px);font-size:clamp(5px,3.1cqw,9px);line-height:1.1;letter-spacing:.15em;white-space:nowrap}
.tile-back a span{flex:0 0 auto}
.tile-back a:focus-visible{outline-color:#fff;outline-offset:-2px}

.gap-code.generated{position:absolute;z-index:4;display:flex;align-items:flex-end;justify-content:center;min-width:60px;min-height:32px;color:#111;background:transparent;border:0;overflow:hidden;pointer-events:none}
.gap-code.generated i{position:absolute;inset:0 0 13px;background-repeat:no-repeat;background-size:100% 100%}
.gap-code.generated span{position:relative;padding:0 3px;background:#fff;font-size:6px;line-height:11px;letter-spacing:.12em}
.gap-code.is-signal{animation:signal-hit .32s steps(2,end) 3}
.gap-code.is-signal i{animation:barcode-jolt .12s steps(2,end) 5}
.gap-motion.generated{position:absolute;z-index:4;min-width:60px;min-height:32px;background:#fff;color:#111;overflow:hidden;pointer-events:none;isolation:isolate}
.gap-motion.generated i,.gap-motion.generated:before,.gap-motion.generated:after{content:"";position:absolute;display:block}
.motion-signal{background:#fff}
.motion-signal i{inset:8% 5%;display:flex!important;align-items:center;justify-content:space-between;gap:1px;background:none;clip-path:none}
.motion-signal i b{display:block;flex:0 0 2px;width:2px;height:100%;background:#111;transform:scaleY(var(--a));transform-origin:center;will-change:transform;animation:signal-wave var(--speed) cubic-bezier(.45,0,.55,1) var(--delay) infinite}
.motion-orbit{background:radial-gradient(circle at center,transparent 0 20%,rgba(17,17,17,.13) 20.5% 21%,transparent 21.5% 34%,rgba(17,17,17,.13) 34.5% 35%,transparent 35.5%),repeating-linear-gradient(0deg,transparent 0 13px,rgba(17,17,17,.1) 13px 14px),repeating-linear-gradient(90deg,transparent 0 13px,rgba(17,17,17,.1) 13px 14px),#fff}
.motion-orbit i{z-index:2;left:50%;top:50%;height:48%;aspect-ratio:1;border:1px solid #111;border-top-width:3px;border-bottom-style:dashed;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 14%,#111 14.5% 15%,transparent 15.5% 48%,#111 48.5% 49%,transparent 49.5% 82%,#111 82.5% 83%,transparent 83.5%);box-shadow:0 0 0 8px #fff,0 0 0 9px rgba(17,17,17,.7),0 0 0 17px #fff,0 0 0 18px rgba(17,17,17,.35);transform:translate(-50%,-50%);animation:orbit-spin 8.5s linear infinite}
.motion-orbit:before{z-index:1;left:50%;top:50%;width:82%;height:1px;background:#111;box-shadow:0 -6px rgba(17,17,17,.25),0 6px rgba(17,17,17,.25);transform:translate(-50%,-50%);transform-origin:center;animation:orbit-arm 6.5s linear infinite reverse}
.motion-orbit:after{content:"ORBIT / 06";z-index:3;right:7px;bottom:5px;font-size:6px;font-weight:700;line-height:1;letter-spacing:.2em;animation:orbit-label 3s ease-in-out infinite alternate}
.face-decoration{position:absolute;display:block;object-fit:cover;aspect-ratio:1;border:0;pointer-events:none}

.bolt-axis{position:absolute;z-index:1;left:50%;top:calc(50% + var(--bolt-head-half));width:var(--face-w);height:min(40vh,320px);transform:translateX(-50%);pointer-events:none}
.bolt-axis span{position:absolute;z-index:2;left:16%;right:16%;top:0;height:42px;border:1px solid #111;background:#fff;clip-path:polygon(4% 0,96% 0,96% 12%,100% 28%,100% 72%,96% 88%,96% 100%,4% 100%,4% 88%,0 72%,0 28%,4% 12%)}
.bolt-axis span:after{content:"";position:absolute;left:5%;right:5%;top:7px;bottom:7px;border-top:1px solid #111;border-bottom:1px solid #111}
.bolt-axis i{position:absolute;left:14%;top:41px;width:72%;height:auto;aspect-ratio:529/184;border:0;background:url("../../public/bolt-axis.webp") center top/contain no-repeat;filter:none;clip-path:none}
.bolt-axis b{display:none}

.hud{position:fixed;z-index:8;left:var(--pad);right:var(--pad);bottom:34px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}
.hud>span{font-size:8px;letter-spacing:.24em}.hud>b{font-size:12px;letter-spacing:.26em}.hud b i{font-style:normal}
.works-copyright{position:fixed;z-index:8;left:50%;bottom:16px;transform:translateX(-50%);margin:0;opacity:.58;font-size:8px;letter-spacing:.24em;white-space:nowrap;pointer-events:none}
.custom-cursor{position:fixed;z-index:2147483647;width:44px;height:44px;object-fit:contain;pointer-events:none;mix-blend-mode:multiply;transform:translate(-10px,-8px) rotate(-18deg);transition:width .2s,height .2s,opacity .12s}
.cursor-over .custom-cursor,.cursor-text-over .custom-cursor{width:60px;height:60px;filter:brightness(0) invert(1);mix-blend-mode:difference}
.cursor-form-over .custom-cursor{opacity:0}
.is-keyboard-input .custom-cursor{opacity:0}
.contact-bolt-page:has(input:hover,select:hover,textarea:hover) .custom-cursor{opacity:0}
.boot{position:fixed;z-index:90;inset:0;background:#111;color:#fff;display:grid;place-content:center;gap:18px;clip-path:inset(0);transition:clip-path 1s var(--ease) .45s}
.boot span{font-size:10px;letter-spacing:.35em}.boot i{position:relative;width:180px;height:1px;background:#444}.boot i:after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:load 1s var(--ease) forwards}.is-ready .boot{clip-path:inset(0 0 100%)}

/* Contact, privacy and about */
body:not(.works-page){min-height:100vh}
.scroll-stage main{min-height:75vh}
.page-hero{padding:210px var(--pad) 70px;border-bottom:1px solid}
.page-hero>p,.policy>p{font-size:9px;letter-spacing:.2em}
.page-hero h1{margin:30px 0 0;font-size:clamp(70px,13vw,180px);line-height:.78}
.page-hero em{font-style:normal;color:var(--muted)}
.policy p{font-family:var(--jp);line-height:2}
.policy{max-width:1050px;margin:auto;padding:100px var(--pad) 140px}.policy article{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid;padding:26px 0}.policy h2{font-size:14px}.policy p{font-size:13px;margin:0}
footer{padding:50px var(--pad);background:#111;color:#fff}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr}.footer-grid>div{display:grid;font-size:9px}.footer-grid p{font-size:8px}.jp-logo{display:flex;flex-direction:column}footer a:focus-visible{outline-color:#fff}

/* CMS */
.admin-body{background:#f4f4f4}.admin-page{padding:60px var(--pad)}.admin-header{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid}.admin-header h1{font-size:clamp(50px,8vw,100px);margin:0}.admin-nav{display:flex;align-items:center;gap:18px}.admin-nav form{margin:0}.admin-nav button{border:1px solid #111;background:#fff;padding:9px 12px}.admin-layout{display:grid;grid-template-columns:320px 1fr;gap:5vw;padding-top:50px}.admin-form{display:grid;gap:14px;align-content:start}.admin-form label{display:grid;gap:5px;font-size:8px;letter-spacing:.12em}.admin-form input,.admin-form select{padding:10px;border:1px solid;background:#fff}.admin-form button,.actions a,.actions button{border:0;background:#111;color:#fff;padding:11px}.admin-list article{display:grid;grid-template-columns:90px 1fr auto;gap:18px;align-items:center;border-top:1px solid;padding:14px 0}.admin-list img{width:90px;height:60px;object-fit:cover}.admin-thumb{position:relative;width:90px;height:60px}.admin-thumb b{position:absolute;right:3px;bottom:3px;padding:3px 4px;background:#111;color:#fff;font-size:7px;letter-spacing:.1em}.admin-check{display:flex!important;grid-template-columns:16px 1fr;align-items:center}.admin-check input{width:14px;height:14px}.admin-list h2{margin:0}.actions{display:flex}.actions form{margin:0}.inquiries{margin-top:80px}.inquiries article{display:grid;grid-template-columns:1fr 2fr;border-top:1px solid;padding:20px 0}.notice{font-size:11px}.error{color:#b00020}.admin-login{min-height:100vh;display:grid;place-items:center;padding:24px}.admin-login form{width:min(420px,100%);display:grid;gap:18px;padding:32px;background:#fff;border:1px solid #111}.admin-login h1{margin:0 0 16px;font-size:clamp(42px,8vw,74px);line-height:.85}.admin-login p{margin:0;font-size:9px;letter-spacing:.16em}.admin-login label{display:grid;gap:7px;font-size:9px;letter-spacing:.14em}.admin-login input{width:100%;padding:12px;border:1px solid #111;border-radius:0}.admin-login button{display:flex;justify-content:space-between;border:0;background:#111;color:#fff;padding:15px}

/* Contact bolt face */
.contact-bolt-page .vault{--face-w:min(580px,45vw,calc((100dvh - 130px)*1.4315789));--bolt-head-half:calc(var(--face-w)*.388)}
.contact-bolt-page .contact-cylinder{height:calc(var(--face-w)*.776);aspect-ratio:auto;transform:translateY(115vh) rotateX(-8deg) rotateY(0)}
.contact-bolt-page.is-ready .contact-cylinder{transform:translateY(30px) rotateX(0) rotateY(0)}
.contact-bolt-page .bolt-axis{top:calc(50% + var(--bolt-head-half) + 18px)}
.contact-bolt-page .vault-face{transform:rotateY(calc(var(--face)*60deg)) translateZ(calc(var(--face-w)*.866))}
.contact-blank-face{background:#111}
.bolt-contact-form{position:relative;z-index:1;width:100%;height:100%;padding:clamp(16px,4%,28px);display:grid;grid-template-columns:1fr;grid-template-rows:auto repeat(3,auto) minmax(64px,1fr) auto auto;gap:clamp(12px,2vh,18px);background:#fff;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.bolt-contact-form h1{margin:0;text-align:center;font-size:clamp(28px,3vw,42px);line-height:1}
.bolt-contact-form label{display:grid;gap:7px;font-size:8px;font-weight:700;letter-spacing:.18em}
.bolt-contact-form input,.bolt-contact-form select,.bolt-contact-form textarea{width:100%;min-width:0;border:0;border-bottom:1px solid #111;border-radius:0;padding:7px 0;background:#fff;font-size:10px;font-weight:400;outline-offset:3px}
.bolt-contact-form input:focus-visible,.bolt-contact-form select:focus-visible,.bolt-contact-form textarea:focus-visible{outline:2px solid #111;outline-offset:3px}
.bolt-contact-form input::placeholder,.bolt-contact-form textarea::placeholder{font-weight:400;opacity:.6}
.bolt-contact-form .message-field{grid-template-rows:auto minmax(0,1fr);align-content:stretch}.bolt-contact-form textarea{height:100%;min-height:56px;resize:none;align-self:stretch}
.bolt-contact-form button{border:0;background:#111;color:#fff;min-height:44px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;font-weight:700;cursor:none}
.bolt-contact-form button span{font-family:Arial,sans-serif;font-variant-emoji:text;font-size:20px;font-weight:400;line-height:1}
.bolt-contact-form .notice{margin:0}.bolt-contact-form .privacy-consent{display:flex;align-items:center;gap:8px;font-family:var(--jp);font-size:10px;font-weight:400;letter-spacing:0}.bolt-contact-form .privacy-consent input{flex:0 0 14px;width:14px;height:14px;margin:0;padding:0;accent-color:#111}.bolt-contact-form .privacy-consent a{text-decoration:underline;text-underline-offset:3px}
.bolt-error-panel{position:relative;z-index:1;width:100%;height:100%;padding:clamp(24px,6%,52px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff}.bolt-error-panel>p:first-child{margin:0;font-size:8px;font-weight:700;letter-spacing:.22em}.bolt-error-panel h1{margin:12px 0 0;font-size:clamp(110px,18vw,210px);line-height:.72}.bolt-error-panel h2{margin:20px 0 10px;font-size:clamp(20px,3vw,36px);letter-spacing:.08em}.bolt-error-panel>p:not(:first-child){margin:0;font-family:var(--jp);font-size:11px}.bolt-error-panel nav{width:min(440px,100%);display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}.bolt-error-panel nav a{min-height:50px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;background:#111;color:#fff;font-size:9px;letter-spacing:.12em}.bolt-error-panel nav span{font-family:Arial,sans-serif;font-size:17px}
.bolt-error-panel nav a:focus-visible,.bolt-contact-form button:focus-visible,.admin-login button:focus-visible,.admin-form>button:focus-visible,.actions a:focus-visible,.actions button:focus-visible{outline-color:#111;box-shadow:0 0 0 2px #fff;outline-offset:3px}

@container (max-height:100px){.tile-back{padding:5px}.tile-back small{font-size:5px}.tile-back h2{font-size:clamp(8px,11cqw,15px);line-height:1}.tile-back a{padding-top:3px;font-size:5px}}
@container (max-width:120px){.tile-back{padding:5px}.tile-back h2{font-size:clamp(8px,13cqw,14px)}.tile-back small,.tile-back a{font-size:5px}}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes signal-hit{50%{filter:invert(1);transform:translateX(2px)}}
@keyframes barcode-jolt{0%{background-position:0 0}50%{background-position:7px 0;transform:skewX(-4deg)}100%{background-position:-4px 0}}
@keyframes signal-wave{0%,100%{transform:scaleY(var(--a))}24%{transform:scaleY(var(--b))}51%{transform:scaleY(var(--c))}76%{transform:scaleY(var(--d))}}
@keyframes orbit-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes orbit-arm{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes orbit-label{from{opacity:.4}to{opacity:1}}

@media(max-width:760px){
  .works-page{cursor:auto}.custom-cursor{display:none}
  .topbar{padding-top:20px;grid-template-columns:1fr auto}.topbar>p{display:none}
  .brand{width:230px;text-align:left}.brand b{font-size:24px}.brand small{margin-top:5px;font-size:7px;letter-spacing:.38em}
  .topbar nav{gap:0}.topbar nav a{min-width:58px;min-height:44px;padding:14px 7px;font-size:8px}
  .topbar nav .active{position:relative;border-bottom:0}.topbar nav .active:after{content:"";position:absolute;left:7px;right:7px;bottom:8px;height:1px;background:#111}
  .vault{--face-w:min(88vw,calc((100dvh - 70px)*1.2));perspective:950px}.vault-face{padding:18px}.vault-face:before{inset:3px;border-radius:24px}.bolt-axis{width:var(--face-w);height:40vh}.bolt-axis span{height:34px}.bolt-axis span:after{top:5px;bottom:5px}.bolt-axis i{top:55px;height:auto}
  .hud{bottom:20px}.works-copyright{bottom:8px}
  .contact-bolt-page .topbar{padding-left:12px;padding-right:12px}.contact-bolt-page .brand{width:180px}.contact-bolt-page .brand b{font-size:20px}.contact-bolt-page .topbar nav a{min-width:50px;padding-left:4px;padding-right:4px}
  .contact-bolt-page .vault{--face-w:calc(100vw - 24px);--contact-face-h:min(620px,calc(100dvh - 160px));--contact-face-half:min(310px,calc((100dvh - 160px)*.5));perspective:none}.contact-bolt-page .contact-cylinder{width:var(--face-w);height:var(--contact-face-h);aspect-ratio:auto}.contact-bolt-page.is-ready .contact-cylinder{transform:translateY(34px)}.contact-bolt-page .contact-blank-face{display:none}.contact-bolt-page .contact-face{display:block;padding:12px;transform:none;backface-visibility:visible}.contact-bolt-page .bolt-axis{width:74vw;height:32vh;top:calc(50% + var(--contact-face-half) - 31px)}.bolt-contact-form{padding:22px 16px 16px;gap:16px}.bolt-contact-form h1{font-size:32px}.bolt-contact-form button{min-height:48px}
  .bolt-error-panel{padding:22px 16px}.bolt-error-panel h1{font-size:128px}.bolt-error-panel nav{grid-template-columns:1fr}.bolt-error-panel nav a{min-height:48px}
  .page-hero{padding-top:160px}.policy article,.admin-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.admin-list article{grid-template-columns:70px 1fr}.actions{grid-column:2}.inquiries article{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.boot{display:none}.cylinder{transform:translateY(0) rotateY(var(--rotation,0deg))}}