/* Wax Read — shared styles for the landing page and pressing reports.
   Same world as the app: a dark listening room, amber readouts, silver deck. */
:root{
  color-scheme: dark;
  --room:#1A1814; --room-2:#232019; --room-3:#2C281F; --line:#3A362D; --edge:#3E3A31;
  --text:#D9D4C7; --bright:#F1ECDF; --soft:#A39D8E; --faint:#7C766A;
  --deck:#B9B6AE; --deck-hi:#E7E4DB; --deck-lo:#8B887F; --engrave:#34322D; --engrave-soft:#4A473E;
  --amber:#E6A63A; --amber-hi:#FFD98A; --good:#8FBF6A; --bad:#E07A5F;
  --display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
*{ box-sizing:border-box; }
html{ background:var(--room); }
body{
  margin:0;
  background:radial-gradient(120% 50% at 50% -10%, #2A261E 0%, var(--room) 60%) no-repeat, var(--room);
  color:var(--text);
  font:16px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
[hidden]{ display:none !important; }
a{ color:var(--amber); }
a:hover{ color:var(--amber-hi); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }
img{ max-width:100%; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* ---------- nav ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:1120px; margin:0 auto;
  padding:18px max(20px, env(safe-area-inset-left)) 0;
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.brand-disc{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle, #0C0C0B 0 7%, var(--amber) 8% 34%, #0C0C0B 35% 100%);
  box-shadow:0 0 0 1px #000, inset 0 0 0 5px #121210;
}
.brand-word{ font:900 24px/1 var(--display); text-transform:uppercase; letter-spacing:.02em; }
.brand-word .w{ color:var(--deck-hi); } .brand-word .r{ color:var(--amber); }
.nav nav{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.nav nav a{ font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); text-decoration:none; }
.nav nav a:hover{ color:var(--amber-hi); }
.nav .nav-cta{
  color:#1A1308 !important; background:linear-gradient(180deg, var(--amber-hi), var(--amber));
  border:1px solid #B8812A; border-radius:7px; padding:10px 14px;
}
.nav .nav-cta:hover{ filter:brightness(1.06); }

/* ---------- page frame + type ---------- */
.wrap{ max-width:1120px; margin:0 auto; padding:56px max(20px, env(safe-area-inset-left)) 40px; }
.report{ max-width:920px; }
.eyebrow{ margin:0 0 14px; font:500 11px/1.4 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--amber); }
h1{
  margin:0 0 18px; font:900 clamp(42px, 8vw, 76px)/.9 var(--display); text-transform:uppercase;
  color:var(--bright); letter-spacing:.005em; text-wrap:balance;
}
h1 em{ font-style:normal; color:var(--amber); }
h2{
  margin:0 0 12px; font:800 clamp(26px, 4.4vw, 34px)/1 var(--display); text-transform:uppercase;
  color:var(--bright); letter-spacing:.015em; text-wrap:balance;
}
p{ margin:0 0 12px; max-width:68ch; }
.lede{ font-size:clamp(17px, 2.2vw, 19px); color:var(--text); line-height:1.55; }
.lede b{ color:var(--bright); }
.stamp{ font:12px/1.4 var(--mono); color:var(--faint); letter-spacing:.04em; }
.sub{ color:var(--soft); font-size:15px; }
.sub b{ color:var(--text); }
section{ margin-top:52px; }

/* ---------- report: short answer ---------- */
.answer{
  background:linear-gradient(180deg, #1A1811 0%, #100E0A 100%);
  border:1px solid #2E2B24; border-radius:10px; padding:22px 24px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.6);
  margin-top:34px;
}
.answer h2{ font:500 11px/1 var(--mono); letter-spacing:.22em; color:var(--amber); margin-bottom:14px; }
.answer ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.answer li{ font:14.5px/1.6 var(--mono); color:var(--amber-hi); padding-left:18px; position:relative; }
.answer li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 6px rgba(230,166,58,.6); }
.answer b{ color:#FFF1CF; font-weight:500; }

/* ---------- report: pick cards (silver deck plates) ---------- */
.picks{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-top:18px; }
.pick{
  display:flex; flex-direction:column; gap:12px;
  background:linear-gradient(180deg, var(--deck-hi) 0%, var(--deck) 12%, var(--deck) 88%, var(--deck-lo) 100%);
  border:1px solid #6E6B63; border-radius:12px; padding:18px 18px 16px; color:var(--engrave);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 6px rgba(0,0,0,.22), 0 24px 50px -30px #000;
}
.pick-kind{ margin:0; font:500 10px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:#6B4A12; }
.pick-body{ display:flex; gap:12px; align-items:flex-start; }
.pick-thumb{ width:64px; height:64px; border-radius:4px; object-fit:cover; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.25); background:#8E8B82; }
.pick-title{ margin:0; font:700 17px/1.2 var(--body); color:#1E1C18; }
.pick-detail{ margin:4px 0 0; font:11px/1.45 var(--mono); color:var(--engrave-soft); }
.pick-why{ margin:0; font-size:14px; line-height:1.5; color:var(--engrave); flex:1; }
.pick-foot{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:10px; border-top:1px solid rgba(0,0,0,.14); }
.pick-price{ font-size:14px; color:var(--engrave-soft); }
.pick-price b{ font:800 24px/1 var(--display); color:var(--engrave); }
.pick-open{ font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#6B4A12; text-decoration:none; border-bottom:1px solid rgba(107,74,18,.45); padding-bottom:2px; }
.pick-open:hover{ color:var(--engrave); }

/* ---------- report: traps ---------- */
.traps{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.traps li{ border:1px solid rgba(224,122,95,.45); background:rgba(224,122,95,.07); border-radius:8px; padding:12px 14px; font-size:14.5px; color:var(--soft); }
.traps b{ color:var(--bright); }
.traps span{ font:11px var(--mono); color:var(--faint); }

/* ---------- report: table ---------- */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--room-2); margin-top:10px; }
table{ border-collapse:collapse; width:100%; min-width:720px; font-size:14px; }
th, td{ text-align:left; vertical-align:top; padding:12px 14px; border-top:1px solid var(--line); }
thead th{ border-top:0; font:500 10px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
tbody th{ font-weight:600; color:var(--bright); min-width:220px; }
td small, th small{ display:block; font:11px/1.4 var(--mono); color:var(--faint); font-weight:400; margin-top:2px; }
.t-press{ display:block; }
.num{ font-variant-numeric:tabular-nums; color:var(--text); white-space:nowrap; }
.num.hot{ color:var(--good); }
.lamps{ display:inline-flex; gap:3px; margin-right:8px; vertical-align:1px; }
.lamps i{ width:7px; height:7px; border-radius:50%; background:#4A463C; }
.lamps i.on{ background:var(--amber); box-shadow:0 0 5px rgba(230,166,58,.6); }
.ped-text{ display:inline-block; vertical-align:top; color:var(--text); }
.ped-text small{ max-width:26ch; }
.ped-text small.warn{ color:var(--bad); }
.t-open{ font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border:1px solid var(--edge); border-radius:6px; padding:7px 10px; color:var(--text); white-space:nowrap; display:inline-block; }
.t-open:hover{ border-color:var(--amber); color:var(--amber-hi); }

/* ---------- report: method, related ---------- */
.method{ margin:0; padding-left:18px; color:var(--soft); display:grid; gap:8px; }
.method b{ color:var(--text); }
.rels{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; }
.rel{ display:block; text-decoration:none; background:var(--room-2); border:1px solid var(--line); border-radius:8px; padding:14px 16px; font:800 22px/1.05 var(--display); text-transform:uppercase; color:var(--bright); }
.rel span{ display:block; font:500 10px/1.4 var(--mono); letter-spacing:.16em; color:var(--faint); margin-bottom:4px; }
.rel{ transition:border-color .2s, color .2s, transform .16s cubic-bezier(.16,1,.3,1), box-shadow .22s; }
/* a record coming up out of the crate, not a card lifting off a page */
.rel:hover{
  border-color:var(--amber); color:var(--amber-hi);
  transform:translateY(-3px);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.9), 0 0 0 1px rgba(230,166,58,.18);
}
.rel:active{ transform:translateY(0); box-shadow:0 4px 10px -8px rgba(0,0,0,.9); }

/* ---------- CTA + buttons ---------- */
.cta{ background:var(--room-2); border:1px solid var(--line); border-radius:12px; padding:26px 24px; }
.btn{
  display:inline-block; margin-top:6px; text-decoration:none;
  font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:#1A1308 !important; background:linear-gradient(180deg, var(--amber-hi), var(--amber));
  border:1px solid #B8812A; border-radius:8px; padding:15px 20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px -10px rgba(230,166,58,.6);
}
.btn{ transition:filter .2s, border-color .2s, color .2s, transform .1s; }
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ color:var(--text) !important; background:transparent; border-color:var(--edge); box-shadow:none; }
.btn.ghost:hover{ border-color:var(--amber); color:var(--amber-hi) !important; }

/* ---------- quick search (landing + reports → /app?q=) ---------- */
.qsearch{ display:flex; gap:8px; max-width:520px; margin-top:26px; }
.qsearch input{
  flex:1 1 auto; min-width:0; font:16px/1.2 var(--body); color:var(--bright);
  background:var(--room-2); border:1px solid var(--edge); border-radius:8px; padding:14px 16px;
}
.qsearch input::placeholder{ color:var(--faint); }
.qsearch input:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(230,166,58,.18); }
.qsearch .btn{ margin-top:0; flex:0 0 auto; cursor:pointer; }
.qpicks{ margin-top:12px; font:12px/1.8 var(--mono); color:var(--faint); letter-spacing:.03em; }
.qpicks a{ color:var(--soft); text-decoration:none; border-bottom:1px solid var(--line); margin-right:12px; white-space:nowrap; }
.qpicks a:hover{ color:var(--amber-hi); border-color:var(--amber); }
@media (max-width:520px){
  .qsearch{ flex-direction:column; }
  .qsearch .btn{ text-align:center; }
  /* nowrap keeps a link phrase intact on desktop, but the longest one
     cannot fit a narrow line and pushed the page sideways */
  .qpicks a{ white-space:normal; }
}

/* ---------- reports index ---------- */
.rgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; margin-top:34px; }
.rcard{ display:flex; gap:14px; align-items:center; text-decoration:none; background:var(--room-2); border:1px solid var(--line); border-radius:10px; padding:14px; transition:border-color .2s, transform .12s; }
.rcard:hover{ border-color:var(--amber); }
.rcard:active{ transform:translateY(1px); }
.rcard img{ width:88px; height:88px; object-fit:cover; border-radius:4px; flex:0 0 auto; background:var(--room-3); }
.rcard-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.rcard-artist{ font:500 10px/1.3 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.rcard-title{ font:800 26px/1 var(--display); text-transform:uppercase; color:var(--bright); }
.rcard-line{ font-size:13px; color:var(--soft); }

/* ---------- footer ---------- */
.site-foot{
  max-width:1120px; margin:40px auto 0; padding:24px max(20px, env(safe-area-inset-left)) 48px;
  border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font:12px/1.6 var(--mono); color:var(--faint);
}
.site-foot div{ max-width:60ch; }
.site-foot nav{ display:flex; gap:16px; flex-wrap:wrap; }
.site-foot a{ color:var(--soft); text-decoration:none; }
.site-foot a:hover{ color:var(--amber-hi); }

/* ---------- motion ----------
   The curves and durations here are lifted verbatim from the app (app.html) so
   the site and the product move the same way. Do not invent new ones.

   SAFETY: the reduce killswitch below strips every animation with !important.
   That is only safe because no element is left at opacity:0 by it — the hidden
   state lives INSIDE these keyframes, and any element that needs to start
   hidden before scrolling into view is gated on BOTH
   `prefers-reduced-motion: no-preference` AND `html.js-motion` (see index.html).
   Never add a bare `opacity:0` to a resting element, or reduce-motion and
   no-JS visitors get permanently blank content. */
@keyframes cardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes primerIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@keyframes itemIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* the room light coming up, as in the app */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  mix-blend-mode:screen;
  background:radial-gradient(120% 70% at 50% -12%, var(--ambient, transparent) 0%, transparent 60%);
  transition:background 1s ease;
}
.nav, .wrap, .site-foot{ position:relative; z-index:1; }

.nav nav a{ transition:color .2s; }
.nav .nav-cta{ transition:filter .2s, transform .1s; }
.nav .nav-cta:active{ transform:translateY(1px); }

/* The parts of the page the browser draws. Left at their defaults these are
   the one place a built page still looks assembled: blue selection, a white
   caret and a grey scrollbar belong to no design system. */
::selection{ background:rgba(230,166,58,.28); color:var(--bright); text-shadow:none; }
html{
  caret-color:var(--amber);
  scrollbar-color:var(--edge) var(--room);   /* thumb, track */
}
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--room); }
::-webkit-scrollbar-thumb{
  background:var(--edge); border-radius:7px;
  border:3px solid var(--room);   /* inset, so the thumb reads as a slider not a bar */
}
::-webkit-scrollbar-thumb:hover{ background:#564F42; }

/* Jumping to a section is a navigation change, so explain it rather than
   teleporting. scroll-margin keeps the heading off the very top edge. */
[id]{ scroll-margin-top:28px; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* print matches no-preference, so without this a printed page would be blank */
@media print{ [data-reveal]{ opacity:1 !important; } }

/* ---------- report: what owners say ---------- */
.pick-quote{ margin:10px 0 0; padding:2px 0 2px 12px; border-left:2px solid rgba(107,74,18,.45); }
.pick-quote q{ display:block; font-size:13px; line-height:1.5; color:var(--engrave); font-style:italic; }
.pick-quote cite{ display:block; margin-top:3px; font:normal 10.5px/1.3 var(--mono); color:var(--engrave-soft); }
.traps q{ display:block; margin-top:6px; font-style:italic; color:var(--text); }
td.own{ color:var(--text); min-width:170px; }
.own-none{ color:var(--faint); }
.own-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.own-chip{ font:10.5px/1.4 var(--mono); border-radius:999px; padding:1px 7px; border:1px solid var(--edge); color:var(--soft); white-space:nowrap; }
.own-chip.good{ border-color:rgba(143,191,106,.45); color:var(--good); }
.own-chip.bad{ border-color:rgba(224,122,95,.5); color:var(--bad); }
th small.stars{ color:#5E594F; }
.traps cite.t-cite{ display:block; font:normal 10.5px/1.3 var(--mono); color:var(--faint); margin-top:3px; }