/* ==========================================================================
   BuyBack — base layer
   Art direction: a printed ledger. Paper, ink, one vermilion stamp.
   Grotesque display, mono for anything numeric or labelled. No gradients,
   no pills, no glow. Rules do the work that shadows were doing.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=Inter+Tight:wght@400;500;600&display=swap');

:root{
  --paper:#FFFFFF;
  --paper-2:#F4F5F2;
  --paper-3:#FFFFFF;
  --ink:#12110F;
  --ink-2:#1D1C19;
  --ink-3:#2B2925;
  --muted:#6B665C;
  --dim:#928C80;
  --rule:#D6D0C2;
  --rule-ink:#2E2C27;
  --red:#C0392B;
  --red-dark:#9A2C21;

  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --text:'Inter Tight','Inter',-apple-system,'Segoe UI',Roboto,sans-serif;

  --gut:34px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1,"liga" 1;
}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.94}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}

/* numeric + label type */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.lab{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
.lab-ink{color:var(--ink)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.02em}

/* buttons: square, mono, arrows. never pills */
.btn{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 22px;border-radius:2px;border:1px solid var(--ink);
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);transition:background .18s var(--ease),color .18s var(--ease);
}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-out{background:transparent;color:var(--ink)}
.btn-out:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-sm{padding:10px 14px;font-size:10.5px}
.btn:disabled{opacity:.4;cursor:not-allowed;background:transparent;color:var(--muted);border-color:var(--rule)}
.btn:disabled:hover{background:transparent;color:var(--muted)}

/* form controls: underlined, not boxed */
input,select,textarea{
  font-family:var(--text);font-size:15px;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:10px 0;width:100%;outline:none;
  transition:border-color .18s var(--ease);
}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--dim)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 11px) 17px,calc(100% - 6px) 17px;background-size:5px 5px;background-repeat:no-repeat;padding-right:22px}
label.field{display:block;margin-bottom:18px}
label.field > span{display:block;margin-bottom:2px}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.hidden{display:none!important}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.rule-ink{height:1px;background:var(--rule-ink);border:0;margin:0}
.red{color:var(--red)}
.muted{color:var(--muted)}

/* inline tags */
.tag{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:3px 7px;border:1px solid var(--rule);
  border-radius:2px;color:var(--muted);
}
.tag-on{border-color:var(--ink);color:var(--ink)}
.tag-red{border-color:var(--red);color:var(--red)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:999;
  background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  padding:12px 18px;border-radius:2px;box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.toast.err{background:var(--red);color:#fff}
.err{font-family:var(--mono);font-size:12px;color:var(--red);margin-top:10px;letter-spacing:.02em}