/* Community deals pages. Tokens match site/index.html so both pages read as one site. */
:root{
  --bg:#fbf5e8;--surface:#fff;--surface-2:#f7efdd;--text-1:#1a1612;--text-2:#4f4539;--text-3:#6b5f50;
  --rule:#e2d8c4;--rule-strong:#cdbfa6;--edge:#1a1612;--accent:#b8202f;--accent-text:#9a1726;--accent-tint:#fbe3e3;
  --good:#1d6b3e;--good-tint:#e2f2e7;--sticker:#ffd66b;--on-accent:#fff;
  --display:"Bricolage Grotesque","Inter",system-ui,-apple-system,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#110e0b;--surface:#17130f;--surface-2:#221d18;--text-1:#f4eee5;--text-2:#cbbfaf;--text-3:#a69885;
  --rule:#2e2822;--rule-strong:#3d352d;--edge:#f4eee5;--accent:#ff6a6a;--accent-text:#ff8f8f;--accent-tint:#3a1517;
  --good:#6fd39a;--good-tint:#12261a;--on-accent:#1a1612}}
:root[data-theme="dark"]{
  --bg:#110e0b;--surface:#17130f;--surface-2:#221d18;--text-1:#f4eee5;--text-2:#cbbfaf;--text-3:#a69885;
  --rule:#2e2822;--rule-strong:#3d352d;--edge:#f4eee5;--accent:#ff6a6a;--accent-text:#ff8f8f;--accent-tint:#3a1517;
  --good:#6fd39a;--good-tint:#12261a;--on-accent:#1a1612}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text-1);font:16px/1.5 var(--body)}
a{color:var(--accent-text)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-header{border-bottom:2px solid var(--edge);background:var(--surface)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.wordmark{font:800 1.5rem/1 var(--display);color:var(--text-1);text-decoration:none;letter-spacing:-.02em}
.wordmark b{color:var(--accent)}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{color:var(--text-2);text-decoration:none;font-weight:600;padding:6px 0}
.nav a[aria-current="page"]{color:var(--text-1);box-shadow:inset 0 -3px 0 var(--accent)}
.nav a:hover{color:var(--text-1)}
h1{font:800 clamp(1.8rem,5vw,2.6rem)/1.05 var(--display);letter-spacing:-.02em;margin:28px 0 8px}
h2{font:800 1.35rem/1.15 var(--display);margin:0 0 12px}
.lede{color:var(--text-2);max-width:62ch;margin:0 0 20px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.seg{display:inline-flex;border:2px solid var(--edge);border-radius:999px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;color:var(--text-2);font:600 .95rem var(--body);padding:8px 16px;cursor:pointer;min-height:40px}
.seg button[aria-pressed="true"]{background:var(--edge);color:var(--bg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--edge);border-radius:10px;background:var(--accent);color:var(--on-accent);
  font:700 1rem var(--body);padding:10px 18px;min-height:44px;cursor:pointer;text-decoration:none;box-shadow:3px 3px 0 var(--edge)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--edge)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.btn.quiet{background:var(--surface);color:var(--text-1)}
.btn.small{padding:6px 12px;min-height:36px;font-size:.9rem;box-shadow:2px 2px 0 var(--edge)}
.btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:3px 3px 0 var(--edge)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.deals{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:12px}
.deal{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;background:var(--surface);border:2px solid var(--edge);border-radius:14px;padding:14px;box-shadow:4px 4px 0 var(--rule-strong)}
.vote{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:2px solid var(--edge);border-radius:12px;background:var(--surface-2);
  color:var(--text-1);font:800 1.15rem/1 var(--display);padding:8px 4px;cursor:pointer;min-height:64px;align-self:start}
.vote svg{width:22px;height:22px}
.vote small{font:600 .68rem var(--body);color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.vote[aria-pressed="true"]{background:var(--good-tint);border-color:var(--good);color:var(--good)}
.deal-main{min-width:0}
.deal-title{font:700 1.08rem/1.3 var(--body);margin:0 0 6px;overflow-wrap:anywhere}
.price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.price{font:800 1.5rem/1 var(--display);font-variant-numeric:tabular-nums}
.was{color:var(--text-3);text-decoration:line-through;font-variant-numeric:tabular-nums}
.pct{background:var(--good-tint);color:var(--good);font-weight:700;border-radius:999px;padding:2px 10px;font-size:.9rem}
.meta{color:var(--text-3);font-size:.88rem;margin:0 0 8px;display:flex;gap:6px 12px;flex-wrap:wrap}
.tag{background:var(--surface-2);border:1px solid var(--rule-strong);border-radius:999px;padding:0 9px;color:var(--text-2)}
.staff{background:var(--sticker);color:#1a1612;border-radius:6px;padding:0 6px;font-weight:700;font-size:.78rem}
.note{color:var(--text-2);margin:0 0 10px;white-space:pre-line;overflow-wrap:anywhere}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.thread{margin:14px 0 0;padding:14px 0 0;border-top:1px dashed var(--rule-strong)}
.comment{margin:0 0 12px}
.comment p{margin:2px 0 0;white-space:pre-line;overflow-wrap:anywhere}
.comment .who{font-weight:700}
.comment time,.meta time{color:var(--text-3)}
.empty{background:var(--surface);border:2px dashed var(--rule-strong);border-radius:14px;padding:28px 18px;text-align:center;color:var(--text-2)}
.card{background:var(--surface);border:2px solid var(--edge);border-radius:14px;padding:18px;box-shadow:4px 4px 0 var(--rule-strong);margin:0 0 32px}
form .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
form .full{grid-column:1/-1}
label{display:block;font-weight:600;font-size:.92rem;margin:0 0 4px}
label .opt{font-weight:400;color:var(--text-3)}
input,select,textarea{width:100%;font:16px var(--body);color:var(--text-1);background:var(--bg);border:2px solid var(--rule-strong);border-radius:10px;padding:10px 12px;min-height:44px}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--edge);outline:3px solid var(--accent-tint)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hint{color:var(--text-3);font-size:.85rem;margin:6px 0 0}
.msg{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-weight:600}
.msg.ok{background:var(--good-tint);color:var(--good)}
.msg.err{background:var(--accent-tint);color:var(--accent-text)}
.msg:empty{display:none}
.site-footer{border-top:2px solid var(--edge);background:var(--surface);color:var(--text-2);font-size:.88rem;padding:18px 0 28px;margin-top:24px}
.site-footer p{margin:0 0 6px;max-width:80ch}
@media (max-width:560px){
  form .grid{grid-template-columns:1fr}
  .deal{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:12px}
  .price{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){.btn,.btn:hover,.btn:active{transform:none;transition:none}}

.prose{max-width:70ch;margin:0 0 40px}
.prose h2{margin:28px 0 8px}
.prose p,.prose li{color:var(--text-2)}
.prose ul{padding-left:22px}
.prose li{margin:0 0 6px}
.deal.has-photo{grid-template-columns:64px 120px minmax(0,1fr)}
.deal-photo{display:block;box-sizing:border-box;width:120px;height:120px;padding:6px;background:#fbf9f5;border:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(60,45,20,.05);overflow:hidden;align-self:start}
.deal-photo img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;border-radius:7px}
@media(max-width:640px){
  .deal.has-photo{grid-template-columns:64px minmax(0,1fr)}
  .deal.has-photo .deal-photo{grid-column:1/-1;grid-row:1;width:100%;height:auto;aspect-ratio:4/3}
}

/* A deal still in the members-only head start. */
.deals li.is-early{outline:3px solid var(--sticker,#ffd66b);outline-offset:-3px}
.deals li.is-early::before{content:"Early access";display:inline-block;font:700 .72rem var(--body);background:var(--sticker,#ffd66b);color:#1a1612;border-radius:999px;padding:2px 9px;margin:0 0 6px}