/* Cejiroh base: tokens from DESIGN.md (hub theme). Pages override via [data-page] in themes.css */
:root{
  --bg:#F4F4F2;--surface:#fff;--border:#D9D9D6;--text:#262626;--muted:#5C5C5C;
  --accent:#262626;--on-accent:#fff;--radius:8px;
  --display:'Michroma',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --w:1200px;color-scheme:light dark
}
@media(prefers-color-scheme:dark){:root{--bg:#161616;--surface:#222;--border:#3A3A3A;--text:#EEEEEC;--muted:#A6A6A6;--accent:#EEEEEC;--on-accent:#161616}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 var(--body);-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--text);color:var(--bg);padding:var(--s2) var(--s4);border-radius:var(--radius);z-index:20}
.skip:focus{left:8px}
.ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;flex:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--s4)}
@media(min-width:760px){.wrap{padding:0 var(--s6)}}
h1,h2,h3{line-height:1.15;margin:0}
h1,h2{font-family:var(--display);font-weight:400}
h1{font-size:clamp(2.25rem,7vw,4rem)}
h2{font-size:clamp(1.25rem,3.4vw,1.75rem)}
.lead{font-size:1.25rem;color:var(--muted);max-width:34em}
section{padding:var(--s8) 0}
@media(min-width:760px){section{padding:var(--s9) 0}}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;gap:var(--s5);height:60px}
.logo img{height:28px;width:auto}
.logo .l{display:none}
@media(prefers-color-scheme:dark){.logo .d{display:none}.logo .l{display:block}}
.links{display:none;gap:var(--s5);margin:0 auto 0 var(--s4);padding:0;list-style:none;font-size:.9rem}
.links a{text-decoration:none;color:var(--muted);padding:var(--s2) 0;border-bottom:2px solid transparent}
.links a:hover,.links a[aria-current]{color:var(--text);border-color:var(--text)}
.nav .btn{margin-left:auto}
.burger{background:none;border:0;color:var(--text);width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.burger .ico{width:26px;height:26px}
.links.open{display:flex;flex-direction:column;position:absolute;top:60px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);padding:var(--s4);gap:var(--s2);margin:0}
.links.open a{padding:var(--s3) 0;font-size:1rem}
@media(min-width:860px){.links{display:flex}.burger{display:none}.nav .btn{margin-left:0}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);border-radius:var(--radius);font:600 .95rem var(--body);text-decoration:none;cursor:pointer;border:1.5px solid var(--accent);background:var(--accent);color:var(--on-accent);transition:transform .15s,opacity .15s}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn.ghost:hover{background:var(--surface);opacity:1}

/* hub is dark only: a gallery wall for the work */
[data-page="hub"]{--bg:#0F0F10;--surface:#1B1B1C;--border:#2E2E30;--text:#EEEEEC;--muted:#A6A6A6;--accent:#EEEEEC;--on-accent:#0F0F10;color-scheme:dark}
[data-page="hub"] .logo .d{display:none}[data-page="hub"] .logo .l{display:block}
body[data-page="hub"]::after{content:"";position:fixed;inset:-20%;z-index:25;pointer-events:none;opacity:.055;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.4s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}80%{transform:translate(5%,1%)}}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* hero: 3D voxel cube behind giant type */
.hero{position:relative;overflow:hidden;min-height:calc(100svh - 60px);display:flex;align-items:center;padding:var(--s8) 0}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(30deg,rgba(255,255,255,.05) 0 1px,transparent 1px 56px),repeating-linear-gradient(150deg,rgba(255,255,255,.05) 0 1px,transparent 1px 56px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 64px);-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 5%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 50%,#000 5%,transparent 70%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;z-index:1;width:100%;pointer-events:none}
.hero .wrap a{pointer-events:auto}
.eyebrow{margin:0 0 var(--s5);font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(2.1rem,8.2vw,6.5rem);line-height:1;margin-bottom:var(--s6);overflow-wrap:anywhere}
@media(max-width:859px){.hero{align-items:flex-start;padding-bottom:380px}}
.cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* giant outline ticker, speeds up as you scroll */
.marq{overflow:hidden;border-block:1px solid var(--border);padding:var(--s5) 0;white-space:nowrap;font:400 clamp(2.5rem,8vw,6.5rem)/1 var(--display);text-transform:uppercase}
.track{display:inline-flex;will-change:transform}
.track span{padding:0 var(--s6);color:transparent;-webkit-text-stroke:1.5px var(--text)}
.track span:nth-child(even){color:var(--text);-webkit-text-stroke:0}

/* statement: words light up while you scroll */
.stmt{font:600 clamp(1.6rem,4.6vw,3.6rem)/1.2 var(--body);max-width:22em;margin:0}
.stmt span{opacity:.18;transition:opacity .3s}.stmt span.on{opacity:1}

/* services: giant numbered list, row floods with the page's color, preview follows the cursor */
.head{display:flex;justify-content:space-between;align-items:end;gap:var(--s5);margin-bottom:var(--s7);flex-wrap:wrap}
.head p{margin:0;color:var(--muted);max-width:26em}
.idx{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--border)}
.idx a{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:var(--s2) var(--s4);align-items:center;padding:var(--s5) 0;border-top:1px solid var(--border);text-decoration:none;color:var(--text);overflow:hidden;isolation:isolate;transition:color .35s,padding .35s}
.idx a::before{content:"";position:absolute;inset:0;background:var(--p);transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.7,0,.2,1);z-index:-1}
.idx a:hover::before,.idx a:focus-visible::before{transform:scaleY(1)}
.idx a:hover,.idx a:focus-visible{color:var(--pt);padding-inline:var(--s5)}
.idx .n{font:400 .85rem var(--display);opacity:.6}
.idx .t{font:400 clamp(1.5rem,5vw,3.75rem)/1.05 var(--display);overflow-wrap:anywhere}
.idx .d{grid-column:2;margin:0;color:var(--muted);transition:color .35s;max-width:30em}
.idx a:hover .d,.idx a:focus-visible .d{color:inherit}
.idx .ar{grid-row:1;grid-column:3;transition:transform .3s}
.idx a:hover .ar{transform:rotate(45deg)}
.idx .ar .ico{width:32px;height:32px}
.idx .pic{grid-column:1/-1;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--border);margin-top:var(--s3)}
.pic img{width:100%;height:100%;object-fit:cover}
@media(min-width:860px){.idx a{grid-template-columns:72px 1.3fr 1fr 56px;padding:var(--s6) 0}.idx .d{grid-column:3;grid-row:1}.idx .ar{grid-column:4}}
@media(hover:hover) and (min-width:860px){.idx .pic{position:fixed;left:0;top:0;width:min(320px,26vw);margin:0;z-index:30;pointer-events:none;opacity:0;transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));transition:opacity .25s;box-shadow:0 24px 60px rgba(0,0,0,.55)}.idx a:hover .pic{opacity:1}}
.ph{width:100%;height:100%;min-height:120px;display:grid;place-items:center;text-align:center;border:2px dashed var(--muted);color:var(--muted);font:600 .8rem/1.4 var(--body);padding:var(--s2)}

/* personal */
.me{display:grid;gap:var(--s5)}
@media(min-width:760px){.me{grid-template-columns:1fr 1fr}}
.me a{display:flex;gap:var(--s4);align-items:center;text-decoration:none;padding:var(--s4);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.me a:hover{border-color:var(--text)}
.me img{width:96px;height:96px;object-fit:cover;border-radius:6px;background:var(--border)}
.me h3{font-size:1.1rem;display:flex;gap:var(--s2);align-items:center}
.me p{margin:var(--s1) 0 0;color:var(--muted);font-size:.95rem}

/* contact */
.contact{background:var(--surface);border-top:1px solid var(--border)}
.contact input,.contact textarea{background:var(--bg)}
.contact .wrap{display:grid;gap:var(--s7)}
@media(min-width:860px){.contact .wrap{grid-template-columns:1fr 1.1fr}}
.contact h2{font-size:clamp(2.25rem,7vw,4.5rem);line-height:1;margin-bottom:var(--s5)}
.contact .mail{display:inline-flex;gap:var(--s2);align-items:center;margin-top:var(--s4)}
.contact .status.err{color:#FF8A80}
form{display:grid;gap:var(--s4)}
label{display:grid;gap:var(--s2);font-size:.9rem;font-weight:600}
input,textarea{font:inherit;font-weight:400;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-height:44px;padding:var(--s3) var(--s4);width:100%}
textarea{min-height:140px;resize:vertical}
input:focus-visible,textarea:focus-visible{outline-offset:0}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.status{margin:0;min-height:1.5em;font-size:.95rem}
.status.ok{font-weight:600}
.status.err{color:#B3261E}
@media(prefers-color-scheme:dark){.status.err{color:#FF8A80}}

/* footer */
footer{border-top:1px solid var(--border);padding:var(--s7) 0;font-size:.9rem;color:var(--muted)}
footer .wrap{display:grid;gap:var(--s5);align-items:center}
@media(min-width:760px){footer .wrap{grid-template-columns:auto 1fr}footer .fr{justify-self:end;text-align:right}footer .fr ul{justify-content:flex-end}}
footer .fr p{margin:var(--s4) 0 0}
.fr{display:grid;gap:var(--s4)}.fr p{margin:0}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
footer a{text-decoration:none}footer a:hover{color:var(--text);text-decoration:underline}
footer .logo img{height:clamp(44px,6vw,68px);width:auto}
@media(prefers-reduced-motion:reduce){body[data-page="hub"]::after{animation:none}.js .rv{opacity:1;transform:none}.stmt span{opacity:1}*{transition:none!important;scroll-behavior:auto!important}}

[data-page="hub"] .nav{background:rgba(15,15,16,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* footer: slow diagonal lines + grain */
footer{position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,transparent 48%,rgba(255,255,255,.07) 50%,transparent 52%) 0 0/40px 40px;animation:lines 28s linear infinite;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 70%);mask-image:linear-gradient(to bottom,transparent,#000 70%)}
footer .wrap{position:relative;z-index:1}
@keyframes lines{to{background-position:40px 40px}}
@media(prefers-reduced-motion:reduce){footer::before{animation:none!important}}
/* contact sheet: slides down from the top, themed by the page it opens on */
.sheet{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none;transition:visibility 0s .5s}
.sheet.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.sheet .back{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .4s}
.sheet.open .back{opacity:1}
.sheet .sp{position:relative;max-height:100svh;overflow:auto;background:var(--surface);color:var(--text);border-bottom:1px solid var(--border);box-shadow:0 24px 60px rgba(0,0,0,.45);padding:var(--s8) 0 var(--s7);padding-top:max(var(--s8),env(safe-area-inset-top));transform:translateY(-105%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.sheet.open .sp{transform:none}
.sheet h2{font-size:clamp(2rem,5vw,3.5rem);line-height:1;margin-bottom:var(--s4)}
.sheet .mail{display:inline-flex;gap:var(--s2);align-items:center;margin-top:var(--s4)}
.sheet input,.sheet textarea{background:var(--bg)}
.sg{display:grid;gap:var(--s6)}@media(min-width:860px){.sg{grid-template-columns:1fr 1.1fr}}
.x{position:absolute;top:max(var(--s4),env(safe-area-inset-top));right:var(--s4);width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--text);cursor:pointer}
.x .ico{width:30px;height:30px}
.btn.big{min-height:56px;padding:0 var(--s7);font-size:1.05rem}
.contact .cta-r{display:flex;align-items:center}

.idx a:hover,.idx a:focus-visible{z-index:5}

/* form: select, service + budget row */
select{font:inherit;font-weight:400;color:var(--text);background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-height:44px;padding:0 var(--s3);width:100%}
.sheet select,.contact select{background-color:var(--bg)}
.row2{display:grid;gap:var(--s4)}@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.bud{display:grid;grid-template-columns:104px 1fr;gap:var(--s2)}
/* content protection */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
img,video,a{-webkit-user-drag:none}

select{-webkit-appearance:none;appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8f99' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px}
.bud select{padding-right:34px;background-position:right 13px center}

/* hexagon loader shown on an image until it has loaded */
.hexload{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:var(--surface);pointer-events:none;transition:opacity .3s}
.hexload.out{opacity:0}
.hexload b{position:relative;display:block;width:64px;height:64px}
.hexload i{position:absolute;left:21px;top:22px;width:22px;height:19px;background:var(--accent);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);opacity:.15;scale:.8;animation:hexp 1.3s ease-in-out infinite}
.hexload i:nth-child(2){transform:translate(0,-20.5px);animation-delay:.1s}.hexload i:nth-child(3){transform:translate(17.8px,-10.3px);animation-delay:.2s}
.hexload i:nth-child(4){transform:translate(17.8px,10.3px);animation-delay:.3s}.hexload i:nth-child(5){transform:translate(0,20.5px);animation-delay:.4s}
.hexload i:nth-child(6){transform:translate(-17.8px,10.3px);animation-delay:.5s}.hexload i:nth-child(7){transform:translate(-17.8px,-10.3px);animation-delay:.6s}
@keyframes hexp{0%,100%{opacity:.15;scale:.8}35%{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){.hexload i{animation:none;opacity:.6;scale:1}}
.paper .hexload{background:#E9E2D1}
.lightbox .hexload{display:none;background:transparent}.lightbox.loading .hexload{display:grid}.lightbox.loading>img{opacity:0}