:root{
  --paper:#FFF6E9; --paper2:#FFEFD3; --ink:#221915; --muted:#6b5d4f;
  --red:#FF4365; --teal:#2EC4B6; --yellow:#FFD166; --purple:#7353BA; --blue:#2B44FF;
  --card:#FFFDF7; --accent:var(--red); --accent-ink:#fff;
  --border:3px solid var(--ink);
  --shadow:7px 7px 0 var(--ink);
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Verdana,Geneva,"DejaVu Sans",sans-serif; font-size:17px; line-height:1.62;
  background-image:radial-gradient(#22191522 1.2px, transparent 1.2px);
  background-size:22px 22px;
}
h1,h2,h3,.display{font-family:"Arial Black","Avenir Next Condensed","Helvetica Neue",Arial,sans-serif; letter-spacing:-.02em; line-height:.98;}
h1{font-size:clamp(3rem,9vw,7.5rem); margin:.1em 0 .2em; text-transform:uppercase;}
h1 em{font-style:normal; background:var(--yellow); border:var(--border); border-radius:14px; padding:0 .18em; display:inline-block; transform:rotate(-2deg); box-shadow:5px 5px 0 var(--ink);}
h2{font-size:clamp(1.8rem,4.5vw,3rem); text-transform:uppercase; margin:0 0 .4em;}
h3{font-size:1.25rem; margin:.2em 0;}
p{max-width:62ch}
a{color:inherit}
:focus{outline:3px solid var(--blue); outline-offset:2px; border-radius:6px;}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px;}
.skip{position:absolute; left:12px; top:-60px; background:var(--ink); color:#fff; padding:12px 18px; border-radius:10px; z-index:99; transition:top .2s;}
.skip:focus{top:12px; color:#fff;}
.mono,.kicker,.hole-name,.step-num,.count{font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;}

/* top bar */
.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:16px; padding:10px 20px; background:var(--ink); color:var(--paper); border-bottom:4px solid var(--ink);}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--paper); min-height:44px;}
.brand-cube{display:grid; place-items:center; width:46px; height:46px; background:var(--yellow); color:var(--ink); border:3px solid var(--paper); border-radius:12px; font-family:"Arial Black",sans-serif; font-size:1.3rem; transform:rotate(-6deg);}
.brand-word{font-family:"Arial Black",sans-serif; font-size:1.15rem; letter-spacing:.04em; line-height:1;}
.brand-word small{display:block; font-family:ui-monospace,monospace; font-size:.62rem; letter-spacing:.14em; font-weight:400; opacity:.85;}
.topnav{display:flex; gap:4px; margin-left:auto; overflow-x:auto; scrollbar-width:thin; padding-inline-end:24px;}
.topnav a{color:var(--paper); text-decoration:none; padding:12px 14px; white-space:nowrap; font-weight:700; font-size:.95rem; border-radius:10px; min-height:44px; display:inline-flex; align-items:center;}
.top-actions{display:flex; align-items:center; gap:10px;}
.shelf-pill{background:var(--paper); color:var(--ink); border:3px solid var(--paper); border-radius:999px; padding:10px 16px; font-weight:800; cursor:pointer; min-height:44px; transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
.cta{background:#D61F4A; color:#fff; border:var(--border); border-color:var(--paper); border-radius:999px; padding:12px 22px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; box-shadow:4px 4px 0 rgba(255,255,255,.25); transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;}
.cta.big{font-size:1.05rem; padding:14px 26px;}
.ghost{background:var(--card); color:var(--ink); border:var(--border); border-radius:999px; padding:12px 22px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; box-shadow:4px 4px 0 var(--ink); transition:transform .18s cubic-bezier(.34,1.56,.64,1); cursor:pointer; font-size:1rem;}

/* hero */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; padding:64px clamp(20px,5vw,72px) 48px; align-items:start; overflow-x:clip;}
.kicker{display:inline-block; background:var(--ink); color:var(--paper); padding:8px 14px; border-radius:999px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;}
.lede{font-size:1.12rem;}
.hero-cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:20px 0;}
.hero .cta{border-color:var(--ink); box-shadow:var(--shadow);}
.hero-stats{display:flex; gap:0; margin-top:26px; border:var(--border); border-radius:var(--r); overflow:hidden; background:var(--card); box-shadow:var(--shadow); max-width:520px;}
.hero-stats div{flex:1; padding:14px 10px; text-align:center;}
.hero-stats div+div{border-left:var(--border);}
.hero-stats dt{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.75;}
.hero-stats dd{margin:0; font-family:"Arial Black",sans-serif; font-size:1.6rem;}

.lid-wrap{background:var(--teal); border:var(--border); border-radius:26px; box-shadow:10px 10px 0 var(--ink); padding:26px 22px 20px; position:relative; transform:rotate(1deg);}
.lid-wrap::before{content:"SORTER LID · No. 04"; position:absolute; top:-18px; left:24px; background:var(--ink); color:var(--paper); font-family:ui-monospace,monospace; font-size:.72rem; letter-spacing:.14em; padding:8px 14px; border-radius:999px;}
.lid-label{font-weight:800; margin:6px 0 14px;}
.lid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.hole{background:var(--card); border:var(--border); border-radius:16px; padding:14px 10px 12px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; min-height:44px; box-shadow:5px 5px 0 var(--ink); transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .15s; font:inherit; color:inherit; width:100%;}
.hole .well{width:74px; height:74px; background:var(--ink); display:grid; place-items:center;}
.hole-circle .well{border-radius:50%;}
.hole-blob .well{border-radius:58% 42% 55% 45%/48% 55% 45% 52%;}
.hole-burst .well{clip-path:polygon(50% 0,61% 18%,80% 8%,78% 28%,98% 30%,85% 45%,100% 58%,80% 60%,86% 80%,66% 72%,56% 92%,46% 72%,26% 80%,32% 60%,12% 56%,26% 43%,12% 30%,32% 28%,30% 8%,49% 18%);}
.hole-arch .well{border-radius:50% 50% 12px 12px/60% 60% 12px 12px;}
.hole .well::after{content:""; width:34px; height:34px; background:var(--paper); border-radius:inherit;}
.hole-name{font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem;}
.hole-count{font-size:.75rem; background:var(--yellow); border:2px solid var(--ink); border-radius:999px; padding:1px 10px; font-weight:700;}
.hole[aria-pressed="true"]{background:var(--yellow); transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink);}
.lid-hint{font-size:.85rem; margin:12px 2px 0;}
.hero-photo{margin:18px 0 0; background:var(--card); border:var(--border); border-radius:14px; overflow:hidden; box-shadow:5px 5px 0 var(--ink); transform:rotate(-1.2deg);}
.hero-photo img{width:100%; height:auto; display:block; border-bottom:var(--border);}
.hero-photo figcaption{padding:10px 14px; font-size:.85rem;}
.hero-photo figcaption span{opacity:.7;}

/* ticker */
.ticker{background:var(--ink); color:var(--yellow); border-block:var(--border); overflow:hidden; white-space:nowrap; font-family:"Arial Black",sans-serif; font-size:1.05rem; padding:10px 0;}
.ticker-track{display:inline-block; animation:tick 22s linear infinite;}
@keyframes tick{to{transform:translateX(-50%);}}

/* how */
.how{padding:72px clamp(20px,5vw,72px) 40px;}
.steps{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.step{background:var(--card); border:var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:22px 20px; position:relative;}
.step:nth-child(1){transform:rotate(-1deg);}
.step:nth-child(2){transform:translateY(16px) rotate(.6deg); background:var(--yellow);}
.step:nth-child(3){transform:rotate(1deg); background:#E9E4FF;}
.step-num{font-size:2.6rem; font-weight:900; display:block; line-height:1;}
.step h3{text-transform:uppercase; font-size:1.4rem;}

/* blocks */
.blocks{padding:48px clamp(20px,5vw,72px) 80px;}
.blocks-head h2 .blocks-sub{display:block; font-family:ui-monospace,monospace; font-size:.85rem; letter-spacing:.12em; font-weight:400; margin-top:6px;}
.controls{display:flex; flex-wrap:wrap; gap:14px; align-items:end; background:var(--card); border:var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:20px; margin:18px 0 26px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field-search{flex:2 1 240px;}
.field-filter{flex:1 1 180px;}
.field label,.like-label{font-family:ui-monospace,monospace; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;}
.field input,.field select{font-size:16px; font-family:inherit; padding:13px 14px; border:var(--border); border-radius:12px; background:#fff; color:var(--ink); min-height:44px; width:100%;}
#savedFilter{display:inline-flex; align-items:center; gap:10px; border:var(--border); background:#fff; border-radius:999px; padding:10px 18px 10px 12px; font-weight:800; cursor:pointer; min-height:44px; box-shadow:4px 4px 0 var(--ink); transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .15s; font-size:.95rem;}
#savedFilter .toggle-dot{width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid var(--ink); display:inline-block;}
#savedFilter[aria-pressed="true"]{background:var(--purple); color:#fff;}
#savedFilter[aria-pressed="true"] .toggle-dot{background:var(--yellow);}
.count{flex-basis:100%; margin:2px 0 0; font-family:ui-monospace,monospace; font-size:.85rem;}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card{background:var(--card); border:var(--border); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform .2s cubic-bezier(.34,1.56,.64,1);}
.card:nth-child(odd){transform:rotate(-.8deg);}
.card:nth-child(even){transform:rotate(.8deg);}
.card-top{position:relative; border-bottom:var(--border); background:var(--paper2);}
.card-top img{width:100%; height:210px; object-fit:cover; display:block;}
.shape-chip{position:absolute; top:12px; left:12px; width:52px; height:52px; background:var(--chip,#2EC4B6); border:3px solid var(--ink); display:grid; place-items:center; font-weight:900; font-size:.7rem; color:var(--ink);}
.shape-circle{border-radius:50%;}
.shape-blob{border-radius:58% 42% 55% 45%/48% 55% 45% 52%;}
.shape-burst{clip-path:polygon(50% 0,61% 18%,80% 8%,78% 28%,98% 30%,85% 45%,100% 58%,80% 60%,86% 80%,66% 72%,56% 92%,46% 72%,26% 80%,32% 60%,12% 56%,26% 43%,12% 30%,32% 28%,30% 8%,49% 18%); width:58px; height:58px;}
.shape-arch{border-radius:50% 50% 10px 10px/55% 55% 10px 10px;}
.price-tag{position:absolute; top:12px; right:12px; background:var(--ink); color:#fff; font-family:"Arial Black",sans-serif; padding:8px 14px; border-radius:999px; transform:rotate(3deg);}
.saved-ribbon{position:absolute; bottom:12px; right:12px; background:var(--yellow); border:3px solid var(--ink); border-radius:999px; padding:6px 14px; font-weight:800; font-size:.8rem; transform:rotate(-2deg);}
.card-body{padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card-cat{font-family:ui-monospace,monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;}
.card-body h3{font-size:1.5rem; text-transform:uppercase; margin:0;}
.card-desc{margin:0; font-size:.98rem;}
.card-facts{margin:4px 0 0; font-size:.88rem;}
.card-facts strong{font-family:ui-monospace,monospace; font-size:.78rem; letter-spacing:.06em;}
.open-btn{margin-top:12px; border:var(--border); background:var(--ink); color:#fff; border-radius:12px; padding:13px 16px; font-weight:800; font-size:1rem; cursor:pointer; min-height:44px; box-shadow:4px 4px 0 #00000033; transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .15s;}
.open-btn small{display:block; font-weight:400; font-size:.75rem; opacity:.8;}

.empty{background:var(--card); border:4px dashed var(--ink); border-radius:var(--r); text-align:center; padding:48px 24px; margin-top:10px;}
.empty[hidden]{display:none;}
.empty-big{font-family:"Arial Black",sans-serif; font-size:2rem; text-transform:uppercase; margin:0;}
.empty .cta{border-color:var(--ink); margin-top:14px; cursor:pointer; font-size:1rem;}

/* visit — full-bleed flipped band */
.visit{background:var(--purple); color:#fff; border-block:4px solid var(--ink); display:grid; grid-template-columns:1fr 1fr; gap:36px; padding:96px clamp(20px,5vw,72px); align-items:center; margin-top:24px;}
.visit h2{color:var(--yellow);}
.visit-facts{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px;}
.visit-facts li{background:#ffffff18; border:3px solid #fff; border-radius:14px; padding:14px 16px;}
.taped{background:var(--card); color:var(--ink); border:var(--border); padding:14px 14px 12px; transform:rotate(2deg); box-shadow:8px 8px 0 var(--ink); position:relative; max-width:520px;}
.taped::before,.taped::after{content:""; position:absolute; top:-16px; width:110px; height:30px; background:#ffd166cc; border:2px solid var(--ink); transform:rotate(-6deg);}
.taped::before{left:24px;} .taped::after{right:24px; transform:rotate(6deg);}
.taped img{width:100%; height:auto; display:block; border:var(--border);}
.taped figcaption{font-size:.85rem; padding:10px 4px 2px;}

.footer{background:var(--ink); color:var(--paper); padding:36px clamp(20px,5vw,72px); display:flex; flex-wrap:wrap; gap:10px 30px; align-items:baseline; justify-content:space-between;}
.footer a{color:var(--yellow); padding:10px 4px; min-height:44px; display:inline-block;}
.foot-nav{margin:0;}

/* detail tray dialog */
.tray{border:none; padding:0; background:transparent; max-width:min(860px,94vw); width:860px; max-height:92vh;}
.tray::backdrop{background:rgba(34,25,21,.6);}
.tray-inner{background:var(--card); border:4px solid var(--ink); border-radius:24px; box-shadow:12px 12px 0 var(--ink); padding:0 0 28px; overflow:hidden; position:relative; max-height:92vh; overflow:auto;}
.tray-inner::before{content:"INSPECTION TRAY · hold it up to the light"; display:block; background:var(--ink); color:var(--paper); font-family:ui-monospace,monospace; font-size:.72rem; letter-spacing:.14em; padding:12px 22px;}
.tray-x{position:absolute; top:44px; right:14px; background:var(--yellow); border:var(--border); border-radius:999px; padding:10px 18px; font-weight:800; cursor:pointer; min-height:44px; box-shadow:3px 3px 0 var(--ink);}
.tray-photo img{width:100%; height:min(340px,40vw); object-fit:cover; display:block; border-bottom:4px solid var(--ink);}
.tray-kicker{font-family:ui-monospace,monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:18px 28px 0; margin:0;}
.tray-inner h2{font-size:clamp(2rem,6vw,3.4rem); text-transform:uppercase; padding:6px 28px 0; margin:0;}
.tray-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:18px 28px 0; margin:0;}
.tray-meta div{border:var(--border); border-radius:12px; padding:10px 12px; background:#fff;}
.tray-meta dt{font-family:ui-monospace,monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; opacity:.7;}
.tray-meta dd{margin:2px 0 0; font-weight:800;}
.tray-body{padding:14px 28px 0; font-size:1.05rem;}
.tray-actions{display:flex; gap:12px; flex-wrap:wrap; padding:20px 28px 0;}
.tray-actions .cta{border-color:var(--ink);}
#saveItem[aria-pressed="true"]{background:var(--teal);}

/* hovers / press / focus per-context */
@media (hover:hover) and (pointer:fine){
  .topnav a:hover{background:#ffffff22; text-decoration:underline;}
  .cta:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(0,0,0,.35);}
  .ghost:hover,.hole:hover,.card:hover{transform:translateY(-3px) rotate(0deg);}
  .card:hover{box-shadow:10px 10px 0 var(--ink);}
  .open-btn:hover{background:#D61F4A;}
  .hole:hover .well::after{background:var(--yellow);}
  .shelf-pill:hover{transform:scale(1.04);}
  .tray-x:hover{background:#D61F4A; color:#fff;}
  .footer a:hover{color:#fff;}
}
.cta:active,.ghost:active,.hole:active,.open-btn:active,.shelf-pill:active,.tray-x:active,#savedFilter:active{transform:scale(.97);}
.topnav a:focus-visible{outline-color:var(--yellow);}
.card:focus-within{box-shadow:10px 10px 0 var(--blue);}
.tray-x:focus-visible,.open-btn:focus-visible{outline-offset:4px;}

/* entrance: hero settles in, CSS-only */
@keyframes drop{from{opacity:0; transform:translateY(26px) rotate(1.5deg);} to{opacity:1; transform:none;}}
.hero-copy{animation:drop .5s cubic-bezier(.22,1,.36,1) both;}
.lid-wrap{animation:drop .5s .12s cubic-bezier(.22,1,.36,1) both;}
@keyframes wiggle{0%,100%{transform:rotate(-2deg);} 50%{transform:rotate(2deg);}}
.brand-cube{animation:wiggle 5s ease-in-out infinite;}

@media (max-width:960px){
  .hero{grid-template-columns:1fr; padding-top:48px;}
  .steps{grid-template-columns:1fr;}
  .step:nth-child(2){transform:rotate(.6deg);}
  .grid{grid-template-columns:1fr 1fr;}
  .visit{grid-template-columns:1fr; padding-block:64px;}
  .tray-meta{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .topbar{flex-wrap:wrap;}
  .topnav{order:3; flex-basis:100%; margin-left:0;}
  .grid{grid-template-columns:1fr;}
  .tray-meta{grid-template-columns:1fr;}
  h1{font-size:clamp(2.6rem,15vw,3.4rem);}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
  .ticker-track{animation:none;}
}