:root { color-scheme: light; --paper:#eeeae0; --ink:#20241f; --green:#c3f35b; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; }
body { background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; overflow:hidden; }
body::before { content:""; pointer-events:none; position:fixed; inset:0; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.frame { position:fixed; inset:24px; pointer-events:none; }
.frame i { position:absolute; width:19px; height:19px; border:1px solid #93958a; }
.frame i:nth-child(1) { top:0; left:0; border-right:0; border-bottom:0; }
.frame i:nth-child(2) { top:0; right:0; border-left:0; border-bottom:0; }
.frame i:nth-child(3) { bottom:0; left:0; border-right:0; border-top:0; }
.frame i:nth-child(4) { bottom:0; right:0; border-left:0; border-top:0; }
.shop { height:100vh; height:100dvh; max-width:700px; margin:auto; padding: max(32px,env(safe-area-inset-top)) 42px max(38px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; }
.identity { min-height:0; flex:0 1 auto; display:flex; flex-direction:column; align-items:center; width:100%; }
.art { min-height:0; width:100%; max-width:520px; flex:0 1 auto; display:flex; justify-content:center; }
.art img { display:block; width:100%; height:100%; max-height: min(40vh,340px); object-fit:contain; }
h1 { flex-shrink:0; margin:-15px 0 0; text-align:center; font-size:clamp(33px,7.3vw,63px); line-height:.88; font-weight:950; letter-spacing:-.065em; transform:rotate(-3deg); }
h1>span { display:block; }
.shop-word { margin-top:9px; font-size:.45em; letter-spacing:.23em; padding-left:.23em; }
.title-dot { display:inline-block; width:.21em; height:.21em; background:#e66b3b; margin-left:.12em; border-radius:50%; }
nav { width:100%; max-width:400px; display:grid; gap:10px; flex-shrink:0; }
nav:empty { display:none; }
.shop:has(nav:empty) { gap:0; }
.link { display:flex; min-width:0; min-height:52px; align-items:center; justify-content:space-between; gap:12px; padding:13px 19px; color:var(--ink); background:transparent; border:1.5px solid var(--ink); border-radius:3px; text-decoration:none; font-size:14px; font-weight:700; letter-spacing:.02em; transition:background .15s,transform .15s,box-shadow .15s; }
.link:first-child { background:var(--green); box-shadow:3px 3px 0 var(--ink); }
.link:hover { background:var(--green); transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--ink); }
.link:active { transform:translate(1px,1px); box-shadow:none; }
.link:focus-visible { outline:3px solid #d45122; outline-offset:4px; }
.link-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arrow { flex-shrink:0; width:17px; height:17px; }
nav.many { max-width:540px; grid-template-columns:repeat(2,minmax(0,1fr)); }
body.dense .art img { max-height:24vh; }
body.dense .shop { gap:20px; }
.edge-mark { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); display:flex; gap:3px; }
.edge-mark span { height:5px; width:15px; background:var(--ink); transform:skewX(-25deg); }
.edge-mark span:nth-child(3) { background:#8cb849; }
@media(max-width:540px) { .frame { inset:16px; } .shop { padding-left:30px; padding-right:30px; gap:28px; } .art img { max-height:36vh; } .link { padding:12px 15px; } nav.many { gap:8px; } nav.many .link { font-size:12px; padding:10px; min-height:43px; } .edge-mark { bottom:17px; } }
@media(max-height:650px) { .shop { gap:18px; padding-top:24px; padding-bottom:28px; } .art img { max-height:28vh; } h1 { font-size:clamp(28px,6vw,46px); margin-top:-10px; } .link { min-height:42px; padding-top:9px; padding-bottom:9px; } nav { gap:7px; } body.dense .art img { max-height:15vh; } body.dense .shop { gap:12px; } }
@media(max-height:440px) and (min-width:540px) { .shop { max-width:1000px; flex-direction:row; gap:30px; padding:24px 45px; } .identity { width:45%; flex-shrink:1; } .art img,body.dense .art img { max-height:50vh; } h1 { font-size:30px; } nav,nav.many { width:55%; flex-shrink:1; gap:6px; } .link,nav.many .link { min-height:35px; padding:7px 10px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .link { transition:none; } }