/* octo_sales — sales.octo.science
   A quiet gallery: warm paper, hairline rules, one terracotta accent. */

@font-face{
  font-family:'Nohemi';src:url('/static/fonts/nohemi.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Host Grotesk';src:url('/static/fonts/host-grotesk-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Host Grotesk';src:url('/static/fonts/host-grotesk-latin-ext.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF;
}
@font-face{
  font-family:'JetBrains Mono';src:url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --paper:#f4f1ea;
  --card:#fffdf8;
  --ink:#1d1a17;
  --muted:#6f6862;
  --faint:#9b938a;
  --line:#e3ddd3;
  --line-soft:#ece7df;
  --accent:#9c4a2f;
  --accent-ink:#7d3a24;
  --accent-soft:#f6e7e0;
  --gold:#9a7c35;
  --gold-soft:#f5ecd6;
  --radius:6px;
  --wrap:1180px;
  --pad:24px;
  --shadow:0 1px 2px rgba(29,26,23,.05), 0 10px 30px -18px rgba(29,26,23,.35);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  color:var(--ink);
  font-family:'Host Grotesk',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-color:var(--paper);
  /* faint flowery tile — present but not loud */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'><g fill='none' stroke='%239c4a2f' stroke-width='2' opacity='0.13'><path d='M60 84c-14-18-8-40 10-48 18-8 36 4 40 24'/><path d='M70 108c-6-24 8-44 32-48'/><circle cx='56' cy='58' r='4' fill='%239c4a2f'/><circle cx='90' cy='36' r='3' fill='%239c4a2f'/><circle cx='110' cy='50' r='2.4' fill='%239c4a2f'/><path d='M210 200c10-18 32-24 48-14'/><path d='M222 226c4-16 20-24 36-22'/><circle cx='222' cy='184' r='3.4' fill='%239c4a2f'/><circle cx='244' cy='172' r='3.8' fill='%239c4a2f'/><circle cx='128' cy='142' r='14'/><circle cx='128' cy='142' r='5'/><path d='M142 130c10-8 24-10 34-4'/><path d='M114 156c-6 12-18 18-30 16'/><path d='M148 156c4 10 14 16 26 14'/><circle cx='156' cy='120' r='3' fill='%239c4a2f'/><circle cx='100' cy='162' r='3' fill='%239c4a2f'/><path d='M30 218c16 4 26 14 30 30'/><path d='M22 240c10 0 20 6 24 16'/><circle cx='22' cy='264' r='3.4' fill='%239c4a2f'/><path d='M254 84c-10 8-22 10-34 6'/><circle cx='248' cy='74' r='3' fill='%239c4a2f'/><path d='M110 256c-6 10-18 12-28 8'/><circle cx='114' cy='270' r='2.4' fill='%239c4a2f'/></g></svg>");
  background-size:280px 280px;
  background-repeat:repeat;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.02em}
a{color:inherit}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none !important}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------------------------------------------------------------- header */

#top{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 88%,#fff);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:18px;min-height:68px}
.mark{display:flex;align-items:baseline;gap:12px;min-width:0}
.word{
  font-family:'Nohemi',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.tag{
  font-size:13px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.right{margin-left:auto;display:flex;align-items:center;gap:14px}

.codebox{position:relative;margin:0;display:flex;align-items:center}
.codein{
  width:104px;height:40px;padding:0 10px;
  font-family:'JetBrains Mono',monospace;font-size:15px;letter-spacing:.42em;
  text-align:center;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  outline:none;text-indent:.42em;
}
.codein::placeholder{letter-spacing:.08em;text-indent:0;font-size:12px;color:var(--faint)}
.codein:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.codein.bad{border-color:var(--accent);animation:shake .3s}
@keyframes shake{
  0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}
}
.codemsg{
  position:absolute;top:calc(100% + 6px);right:0;margin:0;white-space:nowrap;
  font-size:12px;color:var(--accent-ink);
}
.owner{display:flex;align-items:center;gap:9px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.owner .mono{color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.linkbtn{
  background:none;border:0;padding:2px 0;cursor:pointer;
  font-size:13px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;
}

/* ---------------------------------------------------------------- filters */

main{padding:26px 0 80px}
.filters{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{
  border:1px solid var(--line);background:transparent;border-radius:6px;
  padding:8px 15px;min-height:38px;cursor:pointer;white-space:nowrap;
  font-size:14px;color:var(--muted);transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{border-color:var(--faint);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .n{font-family:'JetBrains Mono',monospace;font-size:12px;opacity:.6;margin-left:6px}
.primary{
  margin-left:auto;flex:none;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  border-radius:6px;padding:10px 18px;min-height:42px;cursor:pointer;font-size:14px;
  transition:transform .12s,background .15s;
}
.primary:hover{background:var(--accent);border-color:var(--accent)}

.empty{
  margin:60px 0;text-align:center;color:var(--faint);font-size:16px;
}
.err{
  margin:24px 0;padding:12px 16px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent-ink);font-size:14px;
}

/* ---------------------------------------------------------------- gallery */

.grid{
  display:grid;gap:26px 20px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-soft)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ph{
  position:relative;background:#eee9e1;overflow:hidden;
  aspect-ratio:4/3;
}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.03)}
.ph .noph{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--faint);font-family:'JetBrains Mono',monospace;font-size:12px;
}
.badge{
  position:absolute;top:12px;left:12px;border-radius:4px;padding:4px 9px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);
}
.badge.reserved{background:var(--gold)}.badge.sold{background:var(--accent)}.badge.gone{background:#8c857d}
.nphotos{
  position:absolute;top:12px;right:12px;border-radius:4px;padding:4px 8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  background:rgba(29,26,23,.62);color:#fff;
}
.card .body{padding:15px 16px 17px}
.ttl{
  margin:0;font-family:'Nohemi',sans-serif;font-weight:500;font-size:18px;line-height:1.3;
  letter-spacing:.005em;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.price{
  margin-top:8px;font-family:'Nohemi',sans-serif;font-weight:500;font-size:20px;
  color:var(--accent-ink);letter-spacing:.01em;
}
.price .cur{font-size:13px;letter-spacing:.1em;margin-right:3px;color:var(--muted)}
.price.none{color:var(--faint);font-size:15px}
.mini{margin-top:7px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--faint)}
.mini .hot{color:var(--accent-ink)}

/* ---------------------------------------------------------------- sheet */

.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(29,26,23,.42);backdrop-filter:blur(2px)}
.sheet-card{
  position:relative;background:var(--card);width:100%;max-width:820px;
  border-radius:6px 6px 0 0;max-height:92vh;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 -10px 60px -20px rgba(29,26,23,.5);
  animation:rise .22s ease;
}
@keyframes rise{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.sheet-card .x{
  position:sticky;top:10px;margin-left:auto;margin-right:12px;z-index:5;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);cursor:pointer;font-size:19px;line-height:1;display:block;
}
.sheet-card .x:hover{background:var(--paper)}
.sheet-body{padding:0 26px 30px}

.hero{position:relative;background:#eee9e1;border-radius:6px;overflow:hidden;aspect-ratio:4/3}
.hero img{width:100%;height:100%;object-fit:cover}
.strips{display:flex;gap:9px;overflow-x:auto;padding:11px 0 2px;scrollbar-width:thin}
.strips img{
  width:78px;height:60px;object-fit:cover;border-radius:4px;cursor:pointer;
  border:2px solid transparent;flex:none;
}
.strips img[aria-current="true"]{border-color:var(--accent)}

.dhead{margin-top:20px}
.dtitle{margin:0;font-family:'Nohemi',sans-serif;font-weight:500;font-size:27px;line-height:1.22}
.dprice{
  margin-top:9px;font-family:'Nohemi',sans-serif;font-weight:500;font-size:25px;color:var(--accent-ink);
}
.dprice .cur{font-size:14px;letter-spacing:.1em;margin-right:4px;color:var(--muted)}
.dtags{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.dtag{
  border:1px solid var(--line);border-radius:6px;padding:5px 12px;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);
}
.dtag.st{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dtag.st.reserved{background:var(--gold);border-color:var(--gold)}
.dtag.st.sold{background:var(--accent);border-color:var(--accent)}
.desc{margin-top:16px;font-size:17px;white-space:pre-wrap;overflow-wrap:break-word}

.sec{margin-top:28px;border-top:1px solid var(--line-soft);padding-top:20px}
.sech{
  margin:0 0 14px;font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}

/* offers: a clean name | price row */
.olist{display:flex;flex-direction:column;gap:8px}
.claim{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--line);border-radius:6px;padding:11px 14px;background:var(--card);
}
.claim .who{flex:1;min-width:0}
.claim .nm{font-weight:500;font-family:'Nohemi',sans-serif;font-size:16px}
.claim .ms{font-size:14px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.claim .when{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--faint);margin-top:4px}
.claimof{
  flex:none;font-family:'JetBrains Mono',monospace;font-size:14px;
  color:var(--accent-ink);white-space:nowrap;align-self:center;
}
.claim .rm{
  flex:none;border:0;background:none;cursor:pointer;font-size:17px;color:var(--faint);
  padding:2px 4px;border-radius:4px;align-self:center;
}
.claim .rm:hover{color:var(--accent-ink)}
.claim .rm.arm{color:#fff;background:var(--accent);border-radius:4px;font-size:12px;padding:5px 9px}
.none{color:var(--faint);font-size:15px;margin:0}

/* bid form: three fields on one line */
.bidform{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.bidform .f{display:flex;flex-direction:column;gap:0}
.bidform .f.wide{flex:1 1 100%}
.bidform .inp{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:10px 12px;min-height:44px;font:inherit;font-size:16px;color:var(--ink);outline:none;
}
.bidform .inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bidform .go{
  align-self:flex-end;background:var(--accent);border:1px solid var(--accent);color:#fff;
  border-radius:6px;padding:10px 20px;min-height:44px;cursor:pointer;font-size:15px;
}
.bidform .go:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.bidform .go[disabled]{opacity:.5;cursor:default}

/* drag-drop add-photos box on the new-item form */
.pwrap{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.photobox{
  border:1.5px dashed var(--line);border-radius:6px;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:18px 22px;min-height:120px;max-width:220px;width:100%;flex:none;
  transition:border-color .12s,background .12s;
}
.photobox:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.photobox:hover{border-color:var(--faint)}
.photobox.dropping{border-color:var(--accent);background:var(--accent-soft)}
.ph-inner{display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.ph-plus{font-size:28px;line-height:1;color:var(--faint)}
.ph-hint{font-size:12.5px;color:var(--faint);text-align:center;line-height:1.35}
#newPhotoStrip{margin:0}
.pcell.cover{border:2px solid var(--accent)}

/* forms */
.frm{display:flex;flex-wrap:wrap;gap:10px}
.frm .f{display:flex;flex-direction:column;gap:5px}
.frm .f.wide{flex:1 1 100%}
.flabel{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.inp,.sel,.ta{
  width:100%;background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:10px 12px;min-height:44px;font:inherit;font-size:16px;color:var(--ink);outline:none;
}
.ta{min-height:88px;resize:vertical}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.frm .go{
  align-self:flex-end;background:var(--accent);border:1px solid var(--accent);color:#fff;
  border-radius:6px;padding:11px 20px;min-height:44px;cursor:pointer;font-size:15px;
}
.frm .go:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.frm .go[disabled]{opacity:.5;cursor:default}
.hint{font-size:13px;color:var(--faint);margin:10px 0 0}
.savestate{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--faint);margin-left:10px}

/* owner panel */
.opanel{border:1px solid var(--line);border-radius:6px;padding:16px;background:var(--paper)}
.orow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.mt10{margin-top:10px}
.oactions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.oactions button{
  border:1px solid var(--line);background:var(--card);border-radius:6px;
  padding:9px 15px;min-height:40px;cursor:pointer;font-size:14px;
}
.oactions button:hover{border-color:var(--faint)}
.oactions button.warn{color:var(--accent-ink)}
.oactions button.warn.arm{background:var(--accent);border-color:var(--accent);color:#fff}
.pstrip{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pcell{
  position:relative;width:104px;height:80px;border-radius:4px;overflow:hidden;
  background:#eee9e1;cursor:grab;touch-action:none;user-select:none;
  transition:transform .12s ease,box-shadow .12s ease;
}
.pcell .pheic{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.04em;text-align:center;padding:6px;line-height:1.3;
}
.pcell img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.pcell.dragging{cursor:grabbing;transform:scale(1.08);box-shadow:var(--shadow);z-index:5}
.pcell .cover{
  position:absolute;left:5px;bottom:5px;border-radius:4px;padding:2px 6px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(29,26,23,.7);color:#fff;
}
.pcell button{
  position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:6px;
  border:0;background:rgba(29,26,23,.68);color:#fff;cursor:pointer;font-size:14px;line-height:1;
  touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;
}
.pcell button.arm{background:var(--accent);width:auto;min-width:26px;padding:0 8px;border-radius:6px;
  font-size:11px;font-weight:600;letter-spacing:.02em}

@media (min-width:760px){
  .sheet{align-items:center}
  .sheet-card{border-radius:6px;max-height:88vh}
}
@media (max-width:720px){
  :root{--pad:16px}
  body{font-size:16px}
  .bar{min-height:60px;gap:10px}
  .tag{display:none}
  .word{font-size:15px;letter-spacing:.12em}
  .grid{grid-template-columns:repeat(auto-fill,minmax(46%,1fr));gap:16px 12px}
  .ttl{font-size:16px}
  .price{font-size:17px}
  .dtitle{font-size:22px}
  .sheet-body{padding:0 16px 26px}
  .chip{padding:9px 13px}
  .primary{padding:11px 15px;font-size:13px}
}
@media (pointer:coarse){
  .chip,.primary,.oactions button,.frm .go{min-height:44px}
  .codein{height:44px}
  .claim .rm{padding:8px}
}