/* home (v18) */
.home .arch{position:absolute;left:50%;top:56px;width:380px;height:514px;margin-left:-190px;border-radius:190px 190px 26px 26px;overflow:hidden;z-index:1;background:#ffd9e6}
.home .hero .word{padding:0 .09em .15em;font:italic 400 300px/.86 ISI;letter-spacing:-.035em;color:var(--hot)}
@media (min-width:761px){
 .home .hero{--u:min(calc(100vw / 1000),calc(100vh / 540));height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:calc(32 * var(--u)) 0 0;overflow:visible;overflow-x:clip}
 @supports (height:100svh){.home .hero{--u:min(calc(100vw / 1000),calc(100svh / 540))}}
 .home .hero .arch{position:relative;left:auto;top:auto;margin:0;flex:none;z-index:1;width:calc(230 * var(--u));height:calc(311 * var(--u));border-radius:calc(115 * var(--u)) calc(115 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u))}
 .home .hero .word{position:relative;z-index:3;left:auto;right:auto;bottom:auto;margin-top:calc(var(--wt,-180) * var(--u));font-size:min(calc(92vw / 1.9525),calc(471 * var(--u)));letter-spacing:-.035em;color:var(--hot)}
}
.arch canvas{width:100%;height:100%;display:block}
.soc{padding:120px var(--pad) 0;display:flex;justify-content:center;gap:28px}
.soc a{width:250px;height:250px;border-radius:48px;border:1px solid rgba(28,9,18,.17);background:rgba(255,240,245,.22);display:grid;place-items:center;color:var(--ink);transition:background-color .5s cubic-bezier(.16,1,.3,1),border-color .5s cubic-bezier(.16,1,.3,1),color .5s cubic-bezier(.16,1,.3,1)}
.soc a:hover,.soc a:focus-visible{background:var(--hot);border-color:var(--hot);color:var(--cream);outline:none}
.soc .lg{display:block;line-height:0}
.soc svg{width:92px;height:92px;fill:currentColor}
.soc svg.gl{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wall .post,.wall-list .post{grid-template-columns:220px 1fr;padding:34px 0 44px;align-items:start}
.post>.mono{padding-top:26px}
.post .t{font-size:76px}
.post p{font:400 24px/1.4 IT;letter-spacing:-.01em;margin-top:22px;max-width:900px}
.post p a,.lead a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.more{border-top:1px solid var(--line)}
.more a.biglink{font-size:56px;padding:30px 0}
.more .circ{width:72px;height:72px}.more .circ svg{width:24px;height:24px}
.big{margin-bottom:140px}
/* inner pages */
.bar{position:absolute;top:30px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:baseline;z-index:5}
.bar .logo{font:italic 400 52px/1 ISI;letter-spacing:-.02em;color:var(--hot)}
.bar .nav{display:flex;gap:34px}
.bar .nav a{position:relative;padding-bottom:4px}
.bar .nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.bar .nav a:hover:after,.bar .nav a.on:after{transform:scaleX(1);transform-origin:left}
.bar .nav a.on{color:var(--hot)}
.pg{padding:170px var(--pad) 0;min-height:70vh}
.pg .h{margin-bottom:56px}
.lead{font:400 44px/1.22 IT;letter-spacing:-.025em;max-width:1180px;margin-bottom:48px}
.sm-lead{font-size:28px;line-height:1.35;max-width:1000px;margin-bottom:28px}
.pimg{max-width:min(640px,100%);height:auto;border-radius:22px;margin-top:28px}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.gi{display:block}.gi img{width:100%;height:auto;border-radius:22px}.gi .mono{display:block;margin-top:12px}.gd{display:block;font-size:15px;margin-top:4px}
.msg{margin:0 0 24px;padding:14px 20px;border-radius:14px;display:inline-block}
.msg.ok{background:var(--ink);color:var(--cream)}.msg.err{background:var(--hot);color:var(--cream)}
.pixel{display:grid;grid-template-columns:260px 960px;gap:48px;align-items:start;margin-top:12px}
.pal{display:grid;grid-template-columns:1fr;gap:6px}
.sw{display:flex;align-items:center;gap:16px;padding:8px 10px;border-radius:14px;border:1px solid transparent;transition:border-color .3s,background .3s}
.sw input{position:absolute;opacity:0;pointer-events:none}
.sw i{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(28,9,18,.25);flex:none;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.sw:hover{border-color:var(--line)}
.sw:has(input:checked){background:rgba(255,240,245,.5);border-color:var(--ink)}
.sw:has(input:checked) i{transform:scale(1.15);box-shadow:0 0 0 3px var(--cream),0 0 0 4px var(--ink)}
.boardwrap{border-radius:22px;overflow:hidden;line-height:0;border:1px solid var(--line);width:962px}
.board{display:block;width:960px;height:720px;image-rendering:pixelated;image-rendering:crisp-edges}
.inner .big{margin-top:140px}
.inner section.big{padding-top:0}
.shot body{position:relative}

/* reactions */
.rx{display:flex;gap:10px;margin-top:22px}
.rxb{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:background-color .4s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1),color .4s cubic-bezier(.16,1,.3,1)}
.rxb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.rxb .mono{font-size:13px;letter-spacing:.04em;min-width:1ch}
.rxb:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.rxb.up.on{background:var(--hot);border-color:var(--hot);color:var(--cream)}
.rxb.dn.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.rxb.on svg{fill:currentColor}
.rxb.pop svg{transform:scale(1.25)}
.rxb.dn.pop svg{transform:scale(1.25) scaleY(-1)}
.rxb[disabled]{opacity:.6}
@media (hover:hover){.rxb:not(.on):hover{border-color:var(--ink)}}
/* ---------- touch ---------- */
@media (hover:none),(pointer:coarse){
 .cur{display:none}
 html:not(.shot) body,html:not(.shot) a,html:not(.shot) button,html:not(.shot) input{cursor:auto}
 .soc a:hover{background:rgba(255,240,245,.22);border-color:rgba(28,9,18,.17);color:var(--ink)}
 .soc a:active{background:var(--hot);border-color:var(--hot);color:var(--cream)}
 .lab .ch{text-shadow:none}
 a,label,input{-webkit-tap-highlight-color:rgba(255,42,122,.18)}
}
/* ---------- mobile ---------- */
@media (max-width:760px){
 :root{--pad:20px;--padl:max(20px,env(safe-area-inset-left));--padr:max(20px,env(safe-area-inset-right))}
 body{font-size:16px}
 .intro b{font-size:58px}
 section{padding:88px var(--padr) 0 var(--padl)}
 .h{font-size:min(17vw,96px);line-height:.95;margin-bottom:28px;overflow-wrap:break-word}
 /* home hero */
 .home .hero{height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 28px) var(--padr) 0 var(--padl);overflow:hidden}
 .home .arch{position:relative;left:auto;top:auto;margin:0;width:min(64vw,300px);height:auto;aspect-ratio:380/514;border-radius:999px 999px 22px 22px}
 .home .hero .word{position:relative;bottom:auto;left:auto;right:auto;margin-top:6px;padding:0 .09em .15em;font-size:calc((100vw - 40px) / 2.15)}
 /* socials: 3 squares in a row */
 .soc{padding:28px var(--padr) 0 var(--padl);gap:12px}
 .soc a{flex:1 1 0;min-width:0;max-width:200px;width:auto;height:auto;aspect-ratio:1;border-radius:28px}
 .soc svg{width:38%;height:auto;aspect-ratio:1}
 .soc .lg{width:100%;display:grid;place-items:center}
 /* blog rows */
 .row,.wall .post,.wall-list .post{grid-template-columns:1fr;gap:10px;padding:22px 0 28px}
 .post>.mono{padding-top:0}
 .post .t,.row .t{font-size:clamp(34px,10vw,46px);line-height:1.02}
 .post p{font-size:17px;line-height:1.5;margin-top:12px}
 .fill{inset:0 calc(var(--pad)*-1)}
 .more a.biglink{font-size:26px;padding:22px 0;letter-spacing:-.04em}
 .more .circ{width:48px;height:48px}.more .circ svg{width:18px;height:18px}
 /* bottom big links */
 .big{margin-bottom:calc(56px + env(safe-area-inset-bottom))}
 .big a,.biglink{font-size:clamp(28px,8.6vw,40px);letter-spacing:-.045em;padding:20px 0 22px;gap:16px;min-height:64px}
 .lab{line-height:1.1;overflow:visible}
 .circ{width:52px;height:52px}.circ svg{width:20px;height:20px}
 /* inner pages bar */
 .bar{position:relative;top:auto;left:auto;right:auto;padding:calc(env(safe-area-inset-top) + 20px) var(--padr) 0 var(--padl)}
 .bar .logo{font-size:44px}
 .bar .nav{display:flex;flex-wrap:wrap;gap:8px;width:100%}
 .bar .nav a{padding:11px 14px;border:1px solid var(--line);border-radius:999px;line-height:1;background:rgba(255,240,245,.22)}
 .bar .nav a:after{display:none}
 .bar .nav a.on{background:var(--hot);border-color:var(--hot);color:var(--cream)}
 .pg{padding:44px var(--padr) 0 var(--padl);min-height:0}
 .rx{margin-top:16px}
 .pg .h{margin-bottom:28px}
 .lead{font-size:22px;line-height:1.35;letter-spacing:-.015em;margin-bottom:24px;overflow-wrap:anywhere}
 .sm-lead{font-size:17px;line-height:1.5;margin-bottom:18px}
 .pimg{border-radius:16px;margin-top:16px;width:100%}
 .gal{grid-template-columns:repeat(2,1fr);gap:14px}
 .gi img{border-radius:16px}
 .inner .big{margin-top:72px}
 /* pixel battle */
 .pixel{grid-template-columns:1fr;gap:18px}
 .pal{grid-template-columns:repeat(5,1fr);gap:6px}
 .sw{flex-direction:column;gap:6px;padding:8px 2px;justify-content:center}
 .sw .mono{font-size:10px;letter-spacing:.02em}
 .sw i{width:34px;height:34px}
 .boardwrap{width:100%;border-radius:14px}
 .board{width:100%;height:auto;aspect-ratio:4/3}
 .msg{display:block}
}
@media (max-width:370px){
 .soc{gap:10px}.soc a{border-radius:24px}
 .bar .nav a{padding:10px 12px}
}