@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--paper:#EEEDE8;--ink:#191C22;--ink-deep:#0B0C0F;--signal:#FF4F00;--white:#FFFFFF;--muted:#5E6168;--line:rgba(25,28,34,.14);--u:8px;--m:80px;--g:24px;--max:1440px;--header-h:64px;--measure:68ch}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{background:var(--paper);color:var(--ink)}
body{font:400 16px/1.5 "Hanken Grotesk",system-ui,sans-serif;overflow-x:hidden}
img,video{display:block;width:100%;height:auto}
/* states §4.1 */
a,summary{color:inherit;text-decoration:none;cursor:pointer}
a:hover,summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.body a,.about a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a.card:hover figcaption,.yt-card figcaption a:hover .yt-name{text-decoration:underline}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:0}
.next :focus-visible,.on-ink :focus-visible{outline-color:var(--paper)}
@media (forced-colors:active){:focus-visible{outline-color:Highlight}}
/* type */
.mono{font-family:"DM Mono",monospace;font-weight:400;font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;color:var(--muted)}
.tag{display:inline-block;background:var(--signal);color:var(--white);font:500 14px/1 "DM Mono",monospace;letter-spacing:.04em;text-transform:uppercase;padding:6px 8px;white-space:nowrap}
.tag.out{background:transparent;color:var(--ink);border:1px solid var(--ink)}
/* layout */
.wrap{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--m)}
.g12,.row,.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g)}
.c-label{grid-column:1/4}.c-body{grid-column:4/13}.c-full{grid-column:1/-1}
.mt16{margin-top:16px}.mt40{margin-top:40px}.note{margin-top:16px}
header.top{display:flex;justify-content:space-between;align-items:center;height:var(--header-h);border-bottom:1px solid var(--ink)}
header.top nav{display:flex;gap:48px}
header.top a{font-size:14px}
.brand{font-weight:600}
.brand small{font:400 12px/1 "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;margin-left:24px;color:var(--muted)}
.hero{padding:40px 0 48px}
.eyebrow{grid-column:1/-1}
.hero h1{grid-column:1/11;font-weight:600;font-size:88px;line-height:.98;letter-spacing:-.03em;margin-top:16px}
.hero .side{grid-column:11/13;align-self:end;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.crop{position:relative}
.crop::before,.crop::after{content:"";position:absolute;width:16px;height:16px;border:0 solid var(--ink)}
.crop::before{top:-16px;left:-16px;border-left-width:1px;border-bottom-width:1px}
.crop::after{bottom:-16px;right:-16px;border-right-width:1px;border-top-width:1px}
.crop>img,.crop>video{max-height:70vh;object-fit:cover}
.work .main .crop>img,.work .main .crop>video{max-height:60vh}
figcaption{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:16px}
section{border-top:1px solid var(--ink);padding:40px 0 80px}
section.first{margin-top:56px}
.sec-h{margin-bottom:40px}
.stats{grid-column:1/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.stat{border-left:1px solid var(--ink);padding-left:16px}
.stat b,.dec b{display:block;font-weight:600;font-size:48px;line-height:1.1;letter-spacing:-.02em}
.stat p{font-size:14px;margin:8px 0}
/* YouTube §4.2-A */
.yt{display:grid;grid-template-columns:2fr 1fr 2fr 1fr;gap:var(--g);align-items:start}
.yt2{grid-template-columns:1fr 1fr}
.yt-frame{position:relative;aspect-ratio:16/9;background:var(--ink-deep)}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-cover{position:absolute;inset:0;display:block;z-index:1}
.yt-cover img{width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,-50%);background:var(--ink)}
.yt-play::before{content:"";position:absolute;left:21px;top:18px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent var(--paper)}
.yt-cover:hover .yt-play,.yt-cover:focus-visible .yt-play{outline:2px solid var(--paper);outline-offset:-6px}
.yt-cover:active,.yt-cover:focus:not(:focus-visible),.yt-frame:has(iframe:focus) .yt-cover,.yt-frame:focus-within .yt-cover{opacity:0;pointer-events:none}
.yt-small img{aspect-ratio:16/9;object-fit:cover}
.yt-name{font-weight:500;color:var(--ink)}
/* work */
.work .meta{grid-column:1/4;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.work .meta h3{font-size:40px;font-weight:600;line-height:1.05;letter-spacing:-.02em}
.work .main{grid-column:4/13}
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--g);margin-top:24px}
.strip p{font-size:14px;margin-top:8px}
.strip3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:40px}
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.phone{border:10px solid var(--ink);border-radius:44px;overflow:hidden;max-width:260px;margin:0 auto;background:var(--ink-deep)}
.phone img{border-radius:34px}
.about p.big{grid-column:4/13;font-size:32px;line-height:1.3;letter-spacing:-.01em;max-width:var(--measure)}
.facts{grid-column:4/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:40px}
.facts div{border-top:1px solid var(--ink);padding-top:8px}
/* contact ink band */
.contact-band{background:var(--ink);color:var(--paper)}
.contact{border-top:0;padding:80px 0}
.contact .mono,.contact-band footer{color:var(--paper)}
.contact h2{grid-column:1/-1;font-size:72px;font-weight:600;letter-spacing:-.03em;line-height:1}
.contact .links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.contact .links a{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid currentColor;font:500 18px/1.3 "Hanken Grotesk",sans-serif}
.contact .links a.cta-fill{background:var(--signal);border-color:var(--signal);color:var(--white)}
.contact-band :focus-visible{outline-color:var(--paper)}
footer{border-top:1px solid currentColor;padding:24px 0 40px;display:flex;justify-content:space-between}
/* case */
.case-head{padding:40px 0 56px}
.case h1{font-size:136px;font-weight:600;letter-spacing:-.04em;line-height:1;margin:16px 0 24px}
.case .lede{font-size:24px;line-height:1.35;max-width:min(800px,var(--measure))}
.kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);margin-top:24px}
.kv div{border-top:1px solid var(--ink);padding-top:8px;font-size:14px}
.row>.mono:first-child{grid-column:1/4}
.row>.body{grid-column:4/13}
.body.problem{font-size:28px;line-height:1.3}
.chips{display:flex;flex-wrap:wrap;gap:16px}
.dec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.dec h4{font-weight:600;margin-top:16px}
table{width:100%;border-collapse:collapse}
td,th{text-align:left;border-bottom:1px solid var(--line);padding:16px 8px 16px 0;vertical-align:middle;font-weight:400}
th.mono{font-size:12px}
td.v{font-size:22px;font-weight:600;line-height:1.2}
td.status{text-align:right;padding-right:0}td.status .tag{white-space:normal}
tr.kpi td:first-child{box-shadow:inset 4px 0 0 var(--signal);padding-left:12px}
.next{background:var(--ink);color:var(--paper)}
.next{padding:64px var(--m) 80px}.next>*{max-width:calc(var(--max) - 2*var(--m));margin-left:auto;margin-right:auto}.next .tag{display:table;margin-left:max(0px,calc((100% - var(--max))/2 + var(--m)))}
.next .mono{color:var(--paper)}
.next a{font-size:96px;font-weight:600;letter-spacing:-.03em;line-height:1;display:block;margin:16px 0 24px}
@media (max-width:760px){
:root{--m:20px;--g:16px}
.g12,.row,.work{grid-template-columns:repeat(4,minmax(0,1fr))}
.g12>*,.row>*,.work>*,.c-label,.c-body,.hero h1,.hero .side,.stats,.about p.big,.facts{grid-column:1/-1!important}
header.top nav{gap:16px}.brand small{display:none}
.hero h1{font-size:44px}
.stats{grid-template-columns:1fr 1fr}.stats>:last-child{grid-column:1/-1}
.stat b,.dec b{font-size:40px}
.yt,.yt2{grid-template-columns:1fr 1fr}.yt-small{display:none}
.yt-play{width:44px;height:44px}.yt-play::before{left:15px;top:12px}
.work .meta h3{font-size:32px}
.strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.strip3{grid-template-columns:1fr}
.phones{grid-template-columns:1fr}
.about p.big{font-size:24px}.facts{grid-template-columns:1fr}
.contact h2{font-size:44px}
.case h1{font-size:64px}.case .lede{font-size:20px}.kv,.dec{grid-template-columns:1fr 1fr}
.crop::before{left:-8px}.crop::after{right:-8px}
table,tbody,tr,td{display:block}th{display:none}td{border:0;padding:4px 0}tr{border-bottom:1px solid var(--line);padding:12px 0}
td.status{text-align:left}tr.kpi td:first-child{padding-left:12px}
.next a{font-size:44px}
}
/* case sheets: hashira + voxel. scoped so home and Go Garden keep their rules */
body.sheet{--mat:#E4E3DD;--sec:96px;--chap:160px;--row:24px}
body.sheet section{border-top:0;padding:0}
body.sheet .cover{padding-top:96px}
body.sheet .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);row-gap:var(--row);align-items:start}
body.sheet .idx{grid-column:1/13;display:flex;justify-content:space-between;gap:24px;margin:0 0 48px}
body.sheet h1{grid-column:1/13;margin:0;font-weight:600;font-size:136px;line-height:.92;letter-spacing:-.035em}
body.sheet .sub{grid-column:5/12;margin:32px 0 0;font-size:24px;line-height:1.35;letter-spacing:-.01em}
body.sheet .credits{margin-top:56px}
body.sheet .rule{border-top:1px solid var(--ink);padding-top:40px}
body.sheet .credits .c{grid-column:span 3}
body.sheet .credits .c b{display:block;margin-top:8px;font-weight:500;font-size:16px;line-height:1.4;color:var(--ink);letter-spacing:0;text-transform:none}
body.sheet .ctx{margin-top:var(--sec)}
body.sheet .ctx .k{grid-column:1/5}
body.sheet .ctx .v{grid-column:5/12}
body.sheet .ctx .v p{margin:0 0 16px;max-width:68ch}
body.sheet .ctx .v p:last-child{margin-bottom:0}
body.sheet .ctx .v p.note{margin-top:16px}
body.sheet .ctx ul{margin:0;padding:0;list-style:none}
body.sheet .ctx li{padding:10px 0;border-top:1px solid var(--line)}
body.sheet .chap-block{margin-top:var(--chap)}
body.sheet .chap{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
body.sheet .chap h2{margin:0;font-weight:600;font-size:64px;line-height:1;letter-spacing:-.03em}
body.sheet .shots{display:flex;flex-direction:column;gap:var(--row);margin-top:40px}
body.sheet .lbl{margin:40px 0 0}
body.sheet figure{min-width:0;position:relative}
body.sheet .s4{grid-column:span 4}
body.sheet .s6{grid-column:span 6}
body.sheet .s8{grid-column:1/9}
body.sheet .s8r{grid-column:5/13}
body.sheet .s12{grid-column:1/13}
body.sheet .hero-gap{margin-top:var(--sec)}
body.sheet .fr{position:relative;background:var(--mat)}
body.sheet .fr img{width:100%;height:100%;object-fit:cover}
body.sheet .r21 .fr{aspect-ratio:21/9}
body.sheet .r16 .fr{aspect-ratio:16/9}
body.sheet .r2 .fr{aspect-ratio:2/1}
body.sheet .r32 .fr{aspect-ratio:3/2}
body.sheet .r1 .fr{aspect-ratio:1}
body.sheet .r916 .fr{aspect-ratio:9/16}
body.sheet figure.contain img{object-fit:contain}
body.sheet figure.natural .fr{height:auto;aspect-ratio:auto}
body.sheet figure.natural img{width:100%;height:auto;object-fit:contain}
body.sheet figcaption{margin-top:8px}
body.sheet figure.cm .fr::before,body.sheet figure.cm .fr::after{content:"";position:absolute;width:12px;height:12px;border-color:var(--ink);border-style:solid;pointer-events:none}
body.sheet figure.cm .fr::before{top:-8px;left:-8px;border-width:1px 0 0 1px}
body.sheet figure.cm .fr::after{bottom:-8px;right:-8px;border-width:0 1px 1px 0}
body.sheet figure.cm figcaption{margin-top:16px}
body.sheet .h84{container-type:inline-size}
body.sheet .h84 .fr{aspect-ratio:auto;height:calc((100cqw - 11*var(--g))/12*4 + 3*var(--g))}
body.sheet .proof{background:var(--ink);color:var(--paper);margin-top:var(--sec);padding:64px 0 72px}
body.sheet .proof .mono,body.sheet .proof .st .mono{color:#B8B7B1}
body.sheet .proof .lead{display:block;margin-bottom:40px}
body.sheet .proof .st{grid-column:span 4;border-top:1px solid #4A4D55;padding-top:40px}
body.sheet .proof .st b{display:block;font-weight:600;font-size:48px;line-height:1;letter-spacing:-.02em;color:var(--paper)}
body.sheet .proof .st p{margin-top:12px;font-size:14px;line-height:1.4}
body.sheet .tail{padding-bottom:var(--sec)}
body.sheet .v a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* mouse click must finish before the poster steps aside; keyboard focus reveals the frame */
@keyframes sheet-yt-hide{to{opacity:0;pointer-events:none}}
body.sheet .yt-cover:active,body.sheet .yt-cover:focus:not(:focus-visible),body.sheet .yt-frame:focus-within .yt-cover{opacity:1;pointer-events:auto}
body.sheet .yt-cover:focus:not(:focus-visible){animation:sheet-yt-hide 0s .45s forwards}
body.sheet .yt-frame:focus-within .yt-cover:focus-visible,body.sheet .yt-frame:has(iframe:focus) .yt-cover{opacity:0;pointer-events:none;animation:none}
@media(max-width:760px){
body.sheet{--sec:64px;--chap:112px}
body.sheet .cover{padding-top:56px}
body.sheet .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body.sheet .idx{grid-column:1/5;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:32px}
body.sheet h1{grid-column:1/5;font-size:44px;line-height:1;letter-spacing:-.03em}
body.sheet .sub{grid-column:1/5;font-size:18px;margin-top:20px}
body.sheet .credits{margin-top:40px}
body.sheet .credits .c{grid-column:1/5}
body.sheet .ctx .k,body.sheet .ctx .v,body.sheet .s6,body.sheet .s8,body.sheet .s8r,body.sheet .s12{grid-column:1/5}
body.sheet .ctx .k{margin-bottom:24px}
body.sheet .s4{grid-column:span 2}
body.sheet .trio .s4,body.sheet .h84 .s4{grid-column:1/5}
body.sheet .chap h2{font-size:36px}
body.sheet .proof{padding:48px 0 56px}
body.sheet .proof .st{grid-column:1/5}
body.sheet .proof .st b{font-size:40px}
body.sheet .h84 .fr{height:auto}
body.sheet .h84 .s8 .fr,body.sheet .h84 .s8r .fr{aspect-ratio:16/9}
body.sheet .h84 .s4 .fr{aspect-ratio:4/3}
body.sheet figure.natural .fr{height:auto;aspect-ratio:auto}
}
.case-index{margin-bottom:40px}
.case-index .case-card{grid-column:span 4;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border-top:1px solid var(--ink);padding-top:8px}
.case-index .case-card:hover{text-decoration:none}
.case-index .case-card:hover strong{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.case-index strong{font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.case-index img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:8px}
.case-index img.contain{object-fit:contain;background:#E4E3DD}
@media (max-width:760px){
.case-index strong{font-size:32px}
}
/* hashira game slots. scoped so voxel and the home page keep their rules */
body.hashira h1{font-size:88px;line-height:.95;letter-spacing:-.03em}
body.hashira .cover{margin-bottom:96px}
body.hashira .deck{margin-top:24px;max-width:none}
body.hashira .deck.mono,body.hashira .intro .mono{color:var(--ink);font-size:13px;letter-spacing:.04em}
body.hashira .sig{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
body.hashira section{margin-bottom:120px}
body.hashira .intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);border-top:1px solid var(--ink);padding-top:20px;margin-bottom:24px}
body.hashira .intro h2{grid-column:1/5;margin:0;font-size:40px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
body.hashira .intro ol{grid-column:5/13;margin:0;padding:0;list-style:none}
body.hashira .intro li{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(25,28,34,.2);font-size:18px;line-height:1.35}
body.hashira .board{position:relative;display:flex;flex-direction:column;gap:var(--g)}
body.hashira .board::before,body.hashira .board::after{content:"";position:absolute;width:16px;height:16px;border:0 solid var(--ink);pointer-events:none}
body.hashira .board::before{top:-10px;left:-10px;border-top-width:1px;border-left-width:1px}
body.hashira .board::after{bottom:-10px;right:-10px;border-bottom-width:1px;border-right-width:1px}
body.hashira .board .pair{align-items:stretch}
body.hashira .key .fr{aspect-ratio:1690/950}
body.hashira .lat{height:100%}
body.hashira .lat .fr{height:100%;aspect-ratio:auto}
body.hashira .cell .fr{aspect-ratio:822/462}
@media(max-width:767px){
body.hashira{--m:20px}
body.hashira .cover{padding-top:56px;margin-bottom:48px}
body.hashira h1{font-size:44px;line-height:1;letter-spacing:-.03em}
body.hashira .intro{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
body.hashira .intro h2,body.hashira .intro ol{grid-column:1/5}
body.hashira .intro h2{font-size:28px}
body.hashira .intro li{grid-template-columns:96px minmax(0,1fr);font-size:15px}
body.hashira section{margin-bottom:64px}
body.hashira .board{gap:16px}
body.hashira .board::before,body.hashira .board::after{content:none}
body.hashira .board .grid{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
body.hashira .board figure{width:350px;max-width:100%;height:auto}
body.hashira .board .fr,body.hashira .key .fr,body.hashira .lat .fr,body.hashira .cell .fr{width:350px;max-width:100%;height:auto;aspect-ratio:auto}
body.hashira .board .fr img{width:350px;max-width:100%;height:auto;object-fit:contain}
}