/* Forma — The Long Table. One accent (persimmon) + ink on paper/wood. */
:root{
  --paper:#f6efe0;
  --card:#fbf6e9;
  --kraft:#e6d2a4;
  --wood1:#8a6242;
  --wood2:#755134;
  --ink:#262019;
  --ink-soft:#5c5345;
  --accent:#bc3d12;
  --accent-deep:#93300d;
  --line:rgba(38,32,25,.16);
  --radius:4px;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); font-family:var(--body); line-height:1.55; font-size:16px;
  background:
    repeating-linear-gradient(93deg, rgba(0,0,0,.10) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(88deg, rgba(255,255,255,.05) 0 3px, transparent 3px 140px),
    linear-gradient(160deg, var(--wood1), var(--wood2) 70%);
  background-attachment:fixed;
}
img{max-width:100%; display:block}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.6rem 1rem; z-index:99}
.skip:focus{left:.5rem; top:.5rem}

/* ticker tape */
.tape-strip{background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.45rem 0}
.tape-strip span{display:inline-block; padding-left:1rem; animation:tick 28s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}

/* shop header */
.shop{max-width:1180px; margin:0 auto; padding:2.2rem 1.2rem 1.4rem; display:grid; gap:1.4rem; grid-template-columns:1fr}
@media(min-width:900px){.shop{grid-template-columns:1.05fr .95fr; align-items:center; padding-top:3rem}}
.shop-sign{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem 1.6rem 1.4rem; box-shadow:8px 10px 0 rgba(20,12,4,.35); transform:rotate(-.6deg)}
.kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 .6rem}
.shop h1{font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,6vw,4.4rem); line-height:.95; letter-spacing:-.01em; margin:0 0 .8rem}
.sub{margin:0 0 1.2rem; max-width:36ch; color:var(--ink-soft)}
.shop-cta{display:flex; flex-wrap:wrap; gap:.7rem}
.btn-pill{display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font-weight:650;
  padding:.7rem 1.3rem; border-radius:999px; border:2px solid var(--accent-deep); box-shadow:2px 3px 0 var(--accent-deep)}
.btn-pill:active{transform:translateY(1px)}
.btn-ghost{display:inline-block; color:var(--ink); text-decoration:none; font-weight:650; padding:.7rem 1.2rem;
  border-radius:999px; border:2px dashed var(--ink-soft)}
.rules{display:flex; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); margin:1.1rem 0 0; padding:0}
.shop-photo{margin:0; transform:rotate(.8deg)}
.shop-photo img{border:10px solid #fdfaf2; box-shadow:8px 10px 0 rgba(20,12,4,.35); border-radius:2px; aspect-ratio:16/10; object-fit:cover; width:100%}
.shop-photo figcaption{color:#f3e9d4; font-size:.8rem; margin-top:.5rem}
.shop-photo figcaption em, .prac-photo figcaption em{opacity:.75}

/* sorting tray */
.tray{position:sticky; top:0; z-index:20; padding:.7rem 1rem; background:rgba(38,28,16,.55); backdrop-filter:blur(6px)}
.tray-inner{max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:end;
  background:#3a2c1c; border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:.8rem .9rem; color:#f3e9d4}
.tray-field{display:flex; flex-direction:column; gap:.3rem}
.tray-field label, .tray-label{font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85}
.tray input[type=search], .tray select{font:inherit; color:var(--ink); background:var(--card); border:2px solid var(--ink);
  border-radius:6px; padding:.55rem .7rem; min-width:min(220px,60vw)}
.tray input[type=search]{width:min(260px,70vw)}
#savedFilter{font:inherit; font-weight:650; display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  background:var(--card); color:var(--ink); border:2px solid var(--ink); border-radius:999px; padding:.55rem .9rem}
#savedFilter[aria-pressed=true]{background:var(--accent); border-color:var(--accent-deep); color:#fff}
.tote-dot{width:.8rem; height:.8rem; border-radius:50%; background:currentColor; opacity:.5; flex:none}
#savedFilter[aria-pressed=true] .tote-dot{opacity:1}
.tote-count{font-family:var(--mono); font-size:.75rem; background:rgba(0,0,0,.18); border-radius:999px; padding:.05rem .55rem}
#savedFilter[aria-pressed=true] .tote-count{background:rgba(255,255,255,.25)}
.tray-status{flex-basis:100%; margin:0; font-family:var(--mono); font-size:.75rem; opacity:.9}

/* table + runner */
.table-wrap{max-width:1180px; margin:0 auto; padding:0 1rem 2rem}
.paper-runner{background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(38,32,25,.05) 30px 31px),
    linear-gradient(var(--paper), #efe2c4);
  border-radius:6px; margin-top:1.4rem; padding:1.8rem clamp(.9rem,3vw,2.2rem) 2.4rem;
  box-shadow:0 18px 40px rgba(20,12,4,.45); border:1px solid var(--line)}
.table-head h2{font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.5rem); margin:0}
.table-head p{margin:.3rem 0 1.4rem; color:var(--ink-soft); max-width:60ch}
.grid{display:grid; gap:1.4rem; grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid{grid-template-columns:1fr 1fr 1fr}}

/* pinned index cards */
.card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:.9rem .9rem 1rem; box-shadow:4px 6px 0 rgba(38,32,25,.22); display:flex; flex-direction:column; gap:.6rem;
  transition:transform .25s ease, box-shadow .25s ease}
.grid .card:nth-child(3n+1){transform:rotate(-1.1deg)}
.grid .card:nth-child(3n+2){transform:rotate(.9deg)}
.grid .card:nth-child(3n){transform:rotate(-.4deg)}
.card:hover,.card:focus-within{transform:rotate(0deg) translateY(-4px); box-shadow:6px 12px 0 rgba(38,32,25,.25)}
.card::before{content:""; position:absolute; top:-12px; left:50%; width:92px; height:24px; transform:translateX(-50%) rotate(-2deg);
  background:rgba(188,61,18,.28); border:1px solid rgba(147,48,13,.4); border-radius:1px}
.card img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px; border:1px solid var(--line); background:#ddd}
.stamp{display:inline-block; align-self:flex-start; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-deep); border:2px solid var(--accent); border-radius:3px; padding:.15rem .5rem; transform:rotate(-3deg)}
.card h3{font-family:var(--display); font-size:1.45rem; line-height:1.05; margin:.1rem 0 0}
.card .meta{font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); margin:0}
.card .blurb{margin:0; color:var(--ink-soft); font-size:.94rem}
.card .row{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; padding-top:.4rem}
.price{font-family:var(--display); font-weight:700; font-size:1.25rem}
.price small{font-family:var(--mono); font-size:.68rem; font-weight:400; color:var(--ink-soft); display:block}
.pick{font:inherit; font-weight:700; cursor:pointer; background:var(--ink); color:var(--paper); border:2px solid var(--ink);
  border-radius:999px; padding:.5rem 1rem}
.pick:active{transform:translateY(1px)}
.saved-ribbon{position:absolute; top:.7rem; right:-.4rem; background:var(--accent); color:#fff; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; padding:.25rem .6rem; transform:rotate(4deg);
  border:1px solid var(--accent-deep)}

.empty{border:2px dashed var(--ink-soft); border-radius:8px; padding:2rem 1.4rem; text-align:center; margin-top:1.4rem}
.empty-stamp{font-family:var(--display); font-size:1.5rem; margin:0 0 .4rem}

/* tote shelf */
.tote-shelf{background:#3a2c1c; color:#f3e9d4; border-radius:10px; margin-top:1.4rem; padding:1.4rem clamp(1rem,3vw,1.8rem);
  border:1px solid rgba(255,255,255,.14)}
.tote-shelf h2{font-family:var(--display); margin:0 0 .3rem}
.tote-shelf p{margin:.2rem 0 .8rem; opacity:.9}
.tote-list{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.tote-list li{display:flex; align-items:center; gap:.8rem; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:8px; padding:.55rem .7rem}
.tote-list img{width:52px; height:52px; object-fit:cover; border-radius:6px; flex:none}
.tote-list .t{flex:1; min-width:0}
.tote-list .t strong{display:block; font-size:.95rem}
.tote-list .t span{font-family:var(--mono); font-size:.72rem; opacity:.8}
.mini{font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; border-radius:999px; padding:.4rem .8rem;
  background:transparent; color:#f3e9d4; border:1.5px solid currentColor}
.mini.go{background:var(--accent); border-color:var(--accent)}

/* practical */
.practical{margin-top:1.4rem; background:var(--paper); border:1px solid var(--line); border-radius:6px;
  padding:1.6rem clamp(1rem,3vw,2rem); transform:rotate(.3deg)}
.practical h2{font-family:var(--display); margin:0 0 .8rem; font-size:clamp(1.6rem,3vw,2.2rem)}
.prac-grid{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:800px){.prac-grid{grid-template-columns:repeat(3,1fr)}}
.prac-grid div{border-top:3px solid var(--accent); padding-top:.6rem}
.prac-grid h3{font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 .3rem}
.prac-grid p{margin:0; color:var(--ink-soft); font-size:.93rem}
.prac-photo{margin:1.2rem 0 0}
.prac-photo img{border-radius:4px; border:1px solid var(--line); aspect-ratio:21/9; object-fit:cover; width:100%}
.prac-photo figcaption{font-size:.8rem; color:var(--ink-soft); margin-top:.4rem}

.foot{max-width:1180px; margin:0 auto; padding:0 1.2rem 3rem; color:#f3e9d4; font-size:.85rem}
.foot a{color:#ffd9a8}

/* detail overlay: the picked-up card */
.overlay{position:fixed; inset:0; z-index:50; background:rgba(24,16,8,.66); display:flex; align-items:flex-start;
  justify-content:center; overflow-y:auto; padding:4vh 1rem}
.overlay[hidden]{display:none}
.card-big{position:relative; background:var(--card); color:var(--ink); border-radius:6px; max-width:620px; width:100%;
  padding:1.6rem clamp(1.1rem,4vw,2.2rem) 1.8rem; box-shadow:0 30px 80px rgba(0,0,0,.5); border:1px solid var(--line)}
.tape{position:absolute; top:-13px; width:110px; height:26px; background:rgba(188,61,18,.30); border:1px solid rgba(147,48,13,.45)}
.tape.t1{left:8%; transform:rotate(-6deg)} .tape.t2{right:8%; transform:rotate(5deg)}
.d-kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-deep); margin:0}
.card-big h2{font-family:var(--display); font-size:clamp(2rem,5vw,2.9rem); line-height:1; margin:.4rem 0 .9rem}
.card-big img{border-radius:4px; border:1px solid var(--line); aspect-ratio:16/9; object-fit:cover; width:100%}
.d-body{font-size:1.02rem; margin:1rem 0}
.d-facts{display:grid; grid-template-columns:1fr 1fr; gap:.5rem .9rem; margin:0 0 1.2rem; background:#f1e5c9;
  border:1px dashed var(--ink-soft); border-radius:6px; padding:.9rem 1rem}
.d-facts div{margin:0}
.d-facts dt{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
.d-facts dd{margin:0; font-weight:650}
.d-actions{display:flex; flex-wrap:wrap; gap:.7rem}
#saveBtn{font:inherit; font-weight:700; cursor:pointer; border-radius:999px; padding:.7rem 1.3rem;
  background:transparent; color:var(--ink); border:2px solid var(--ink)}
#saveBtn[aria-pressed=true]{background:var(--accent); border-color:var(--accent-deep); color:#fff}
.d-hint{font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); margin:.9rem 0 0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .grid .card:nth-child(n){transform:none}
  .shop-sign,.shop-photo,.practical{transform:none}
}