/* Strummr brand layer, loaded after /base.css. A warm guitar shop: ivory walls, tobacco-brown type, a
   sunburst amber accent and deep burgundy for Buy now. Zilla Slab for headings and the wordmark, Instrument
   Sans for text, both self-hosted (SIL Open Font License, see /fonts). Prices and serials use tabular numbers.
   Light first; dark is deep rosewood brown (never black), a remembered choice.
   Contrast (WCAG AA, checked with test/run.js): ink on ivory 15.6:1, muted on ivory 6.4:1, amber text on
   ivory 4.9:1, link on ivory 7.5:1, ivory on burgundy 8.2:1, ivory on tobacco button 12.6:1.
   Dark: cream on rosewood 14.6:1, muted 8.6:1, amber 7.8:1, cream on burgundy 6.6:1. */
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/zilla-slab-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/zilla-slab-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/instrument-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/instrument-sans-latin-700-normal.woff2) format("woff2")}
:root{
  --bg:#f7f2ea;--surface:#fffcf6;--surface-2:#efe6d8;--ink:#2b1d14;--muted:#6b5443;--line:#e6dacb;--line-strong:#cdbba5;
  --primary:#3e2a1c;--primary-ink:#fbf6ee;--primary-hover:#2b1d14;--primary-soft:#f3dcc0;--link:#7a3a14;
  --amber:#d9822b;--amber-text:#9a5512;--amber-soft:#f6e2c8;--buy:#8e2b2b;--buy-hover:#76201f;--buy-ink:#fbf6ee;
  --wall:#efe2cf;--rail:#8a6a4c;
  --ok:#2f6a35;--ok-bg:#e6f0df;--warn:#7a4a00;--warn-bg:#fbedd2;--bad:#9b2622;--bad-bg:#f9e3df;
  --font-head:"Zilla Slab",Rockwell,"Roboto Slab",Georgia,serif;--font-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:12px;--radius-sm:8px;
  --shadow:0 1px 2px rgba(43,29,20,.06),0 6px 18px rgba(43,29,20,.07);--shadow-lift:0 2px 4px rgba(43,29,20,.08),0 14px 30px rgba(43,29,20,.14);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#1e1410;--surface:#2a1c16;--surface-2:#35241c;--ink:#f3e9da;--muted:#cdb9a4;--line:#3f2c22;--line-strong:#5a4133;
  --primary:#f0c58f;--primary-ink:#1e1410;--primary-hover:#f6d5aa;--primary-soft:#4a3020;--link:#f2b673;
  --amber:#e89b4a;--amber-text:#f0a95c;--amber-soft:#3e2a1a;--buy:#a63a36;--buy-hover:#b8463f;--buy-ink:#fbf1e4;
  --wall:#2f2019;--rail:#6e5240;
  --ok:#a6d89b;--ok-bg:#1f2e1c;--warn:#f2c26c;--warn-bg:#3a2a12;--bad:#ff9e92;--bad-bg:#3d1a16;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);--shadow-lift:0 2px 4px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}
body{-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
main{flex:1;width:100%;max-width:1000px}
main.wide{max-width:var(--wrap)}
h1,h2,h3{font-weight:700;letter-spacing:-.005em}
h1{font-size:clamp(30px,4.2vw,44px);line-height:1.08}
h2{font-size:var(--t-2xl)}
::selection{background:var(--amber);color:#2b1d14}
.num,.price,dl.split dd,.proof-code strong,.stat strong,td.num,.serial{font-variant-numeric:tabular-nums lining-nums}

/* header and footer */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:inset 0 -3px 0 var(--amber)}
.site-header .bar{min-height:66px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand .word,.foot-brand .word{font:700 30px/1 var(--font-head);letter-spacing:-.01em}
.mark{width:32px;height:32px;flex:none}
.mark.small{width:22px;height:22px}
.mark .pk{fill:var(--amber)}.mark .st{stroke:var(--ink)}
.site-nav a{color:var(--muted);padding:8px 4px}
.site-nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:6px}
.site-nav a.signin{color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--pill);padding:7px 16px;margin-left:4px;text-decoration:none}
.site-nav a.signin:hover{background:var(--ink);color:var(--bg)}
.site-footer{margin-top:var(--s7)}
.foot-brand{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}.foot-brand .word{font-size:20px}

/* buttons */
button,.button{font-weight:700;border-radius:var(--pill);padding:10px 22px}
button:active,.button:active{transform:translateY(1px)}
button.plain,.button.plain{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
button.plain:hover,.button.plain:hover{background:var(--surface-2);border-color:var(--ink)}
button.small{min-height:34px;padding:4px 12px;font-size:var(--t-sm)}
.buy-now,button.buy-now{background:var(--buy);color:var(--buy-ink);width:100%}
.buy-now:hover,button.buy-now:hover{background:var(--buy-hover)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--amber-soft);border-color:var(--amber-text)}
:focus-visible{outline-color:var(--amber)}

/* front page */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:center;padding:var(--s4) 0 var(--s6)}
.hero h1{font-size:clamp(38px,5.6vw,62px);line-height:1.02;margin-bottom:var(--s4)}
.hero .lead{font-size:var(--t-lg);color:var(--muted);max-width:34em}
.hero-search{display:flex;gap:var(--s2);align-items:flex-end;max-width:520px;margin:var(--s4) 0}
.hero-search label{flex:1;margin:0}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.hero-art{width:100%;height:auto;display:block}
.ha-wall{fill:var(--wall)}.ha-rail{fill:var(--rail)}.ha-hook{fill:var(--rail)}
.ha-head{fill:#2b1d14}.ha-neck{fill:#b98146}
.ha-body0{fill:#c8323a}.ha-body1{fill:#d9822b}.ha-body2{fill:#e9cf9c;stroke:#8a5a2c;stroke-width:3}
.ha-pu{fill:#efe6d0}.ha-hole{fill:#2b1d14}
.ha-tag rect{fill:#fffcf6;stroke:#cdbba5}.ha-tagtext{font:700 13px "Instrument Sans",sans-serif;fill:#2b1d14}
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin:0 0 var(--s6)}
.reason{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--amber);border-radius:var(--radius);padding:var(--s5)}
.reason:nth-child(2){border-top-color:var(--buy)}.reason:nth-child(3){border-top-color:var(--primary)}
.reason h2{font-size:var(--t-xl);margin:0 0 var(--s2)}.reason p{color:var(--muted);margin:0}
.shelf-head{font-size:var(--t-2xl);margin:var(--s6) 0 var(--s4);padding-bottom:var(--s2);border-bottom:2px solid var(--line-strong)}
.more{text-align:center;margin-top:var(--s6)}
.empty{text-align:center;padding:var(--s6);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius)}

/* browse */
.browse{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s5);align-items:start}
form.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--shadow)}
form.filters button{width:100%}

/* tiles */
.grid.shelf{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:var(--s5) var(--s4)}
.tile{display:flex;flex-direction:column;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
a.tile.listing{text-decoration:none;color:var(--ink)}
a.tile.listing:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--amber)}
.thumb-wrap{display:block;aspect-ratio:3/4;background:var(--surface-2);overflow:hidden}
.thumb{width:100%;height:100%;object-fit:cover;display:block}
.tile-body{display:flex;flex-direction:column;gap:3px;padding:var(--s3) var(--s3) var(--s4)}
.tile-cat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-text)}
.tile h3{font-size:19px;margin:0;line-height:1.2}
.tile-set{color:var(--muted);font-size:var(--t-sm)}
.price{font:700 22px/1.2 var(--font-head);color:var(--ink);margin-top:4px}
.tile-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tag{text-transform:none;letter-spacing:0;font-weight:600;background:var(--surface-2);color:var(--muted)}

/* listing */
.item{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s6);align-items:start}
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.photos figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.photos figure.lead-photo{grid-column:1/-1}
.photos img{display:block;width:100%;height:auto}
.photos figcaption{font-size:12px;color:var(--muted);padding:6px 8px}
.set-line{color:var(--muted);font-size:var(--t-lg)}
.seller-card{display:flex;gap:var(--s3);align-items:center;margin:var(--s4) 0}
.seller-card div{display:flex;flex-direction:column}
.seller-name{font-weight:700;color:var(--ink)}
.avatar{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--amber-soft);color:var(--amber-text);font:700 20px var(--font-head);flex:none}
.avatar.big{width:72px;height:72px;font-size:32px}
.seller-head{display:flex;gap:var(--s4);align-items:center;margin-bottom:var(--s5)}
.buy-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);box-shadow:var(--shadow)}
.buy-panel h3{margin-top:var(--s5);font-size:var(--t-lg)}
dl.split{display:grid;grid-template-columns:1fr auto;gap:6px var(--s3);margin:0 0 var(--s4)}
dl.split dt{color:var(--muted)}dl.split dd{margin:0;text-align:right;font-weight:600}
dl.split .total{font-weight:700;color:var(--ink);border-top:1px solid var(--line);padding-top:6px;font-size:var(--t-lg)}
.pay-methods{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--t-sm);margin:var(--s3) 0 0}
.pay-method{border:1px solid var(--line-strong);border-radius:6px;padding:1px 8px;font-weight:600}
ul.info,ol.info{padding-left:1.2em}ul.info li,ol.info li{margin-bottom:6px}
ul.compact li{margin-bottom:4px;font-size:15px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s5)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5)}
.serial{font:700 28px/1.2 var(--font-head);letter-spacing:.06em;margin:0 0 var(--s2)}
.cert-status{font-weight:700;padding:8px 12px;border-radius:var(--radius-sm);background:var(--warn-bg);color:var(--warn)}
.cert-status.ok{background:var(--ok-bg);color:var(--ok)}.cert-status.bad{background:var(--bad-bg);color:var(--bad)}
dl.facts{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:6px var(--s4);margin:var(--s3) 0}
dl.facts dt{color:var(--muted);font-weight:600}dl.facts dd{margin:0}
dl.orig dd.changed{color:var(--amber-text);font-weight:700}dl.orig dd.unknown{color:var(--muted)}
.wrap{white-space:pre-wrap}
details.report{margin-top:var(--s5)}details.report summary{cursor:pointer;color:var(--muted);font-weight:600}
.aff{margin-top:var(--s5)}.aff ul.links{margin:0 0 var(--s2);padding-left:1.2em}
.strip{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0}.strip img{width:120px;height:auto;border-radius:6px;border:1px solid var(--line)}
.strip figure{margin:0;width:140px}.strip figcaption{font-size:12px;color:var(--muted)}

/* sell */
.proof-code{display:inline-flex;gap:var(--s3);align-items:center;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:var(--radius-sm);padding:10px 16px;margin-bottom:var(--s3)}
.proof-code strong{font:700 24px var(--font-head);letter-spacing:.06em}
form.sell fieldset{border-top:1px solid var(--line);padding-top:var(--s4)}
form.sell legend{font:700 var(--t-xl) var(--font-head)}
.orig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:0 var(--s3)}
.scan{background:var(--surface-2);border-radius:var(--radius);padding:var(--s4);margin-bottom:var(--s3)}
.scan-view{position:relative;border-radius:var(--radius-sm);overflow:hidden;background:#000;touch-action:none;margin-bottom:var(--s2);cursor:crosshair}
.scan-view video{display:block;width:100%;height:auto}
.scan-box{position:absolute;border:3px solid var(--amber);box-shadow:0 0 0 2000px rgba(0,0,0,.35);border-radius:4px;pointer-events:none}
.scan-status{font-weight:600;min-height:1.4em}.scan-status.ok{color:var(--ok)}.scan-status.warn{color:var(--warn)}
.scan-choices{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:var(--s2)}
.file-button{position:relative;overflow:hidden}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer}
em.src{font-style:normal;font-size:12px;font-weight:700;margin-left:8px;color:var(--amber-text);background:var(--amber-soft);border-radius:var(--pill);padding:1px 8px}
p.ok{color:var(--ok)}p.bad{color:var(--bad)}

/* checkout and orders */
.checkout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s5);align-items:start}
label.method{background:var(--surface-2);border-radius:var(--radius-sm);padding:10px 12px}
.summary-item{display:flex;gap:var(--s3);margin-bottom:var(--s3)}.summary-thumb{width:84px;height:auto;border-radius:6px;border:1px solid var(--line)}
.card-container{min-height:90px;margin-bottom:var(--s3)}
.status{display:inline-block;font-weight:700;background:var(--amber-soft);color:var(--amber-text);border-radius:var(--pill);padding:3px 12px}
.box.confirm{border-left:5px solid var(--ok)}
.got-it{border-left:5px solid var(--buy)}
.msg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--s3);margin-bottom:var(--s2)}.msg.mine{background:var(--amber-soft)}
.msg p{margin:4px 0 0;white-space:pre-wrap}
.address{background:var(--surface-2);padding:var(--s3);border-radius:var(--radius-sm)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3);margin:var(--s4) 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);display:flex;flex-direction:column}
.stat strong{font:700 28px var(--font-head)}
.acting-bar{background:var(--amber-soft);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:var(--s3)}
article.help{max-width:760px}

@media (max-width:860px){
  .hero,.item,.checkout,.browse,.two{grid-template-columns:minmax(0,1fr)}
  .reasons{grid-template-columns:minmax(0,1fr)}
  .hero-art{max-width:420px;margin:0 auto}
}
@media (max-width:480px){
  .brand .word{font-size:26px}
  .photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-search{flex-direction:column;align-items:stretch}
  .buy-panel,.panel{padding:var(--s4)}
}
.first{margin-top:0}
.desc{white-space:pre-wrap}
.photos figure:not(.lead-photo) img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:480px){.grid.shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}.tile h3{font-size:16px}.price{font-size:18px}.tile-body{padding:var(--s2)}}