/* GoldieLoxx shared styles for /book/ and /shop/ (EVE/StarNet, 2026-10-07). Served from 'self' under the existing CSP. */
:root {
  --ink: #141213;
  --ink-2: #241d1a;
  --ink-3: #1c1819;
  --bone: #e9e3df;
  --ash: #a39ca2;
  --gold: #d9a520;
  --gold-hi: #f3cf63;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ink); color: var(--bone); }
body {
  font-family: "Helvetica Neue", Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--gold-hi); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.2rem 6vw;
  border-bottom: 1px solid rgba(217,165,32,.25);
}
.brand {
  font-weight: 900; letter-spacing: -.01em; font-size: 1.4rem;
  text-decoration: none;
  padding-right: .15em; /* gradient text: room for the final glyph's ink */
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 70%, #9b6f0e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav ul { display: flex; gap: 1.4rem; list-style: none; }
.nav ul a {
  color: var(--bone); text-decoration: none;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.nav ul a:hover, .nav ul a:focus-visible, .nav ul a[aria-current="page"] { color: var(--gold-hi); }
main { padding: 6vh 6vw 4vh; max-width: 1200px; margin: 0 auto; }
.kicker {
  color: var(--gold); letter-spacing: .32em; text-transform: uppercase;
  font-size: .8rem; font-weight: 600;
}
h1 {
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: .95; font-weight: 900;
  letter-spacing: -.02em; margin: .6rem 0 .85rem;
  padding: 0 .1em .16em 0; /* gradient text: keep descenders and last glyph inside the painted box */
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 70%, #9b6f0e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { color: var(--ash); font-size: 1.1rem; max-width: 40rem; }
.lede strong { color: var(--gold-hi); }
h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: .02em; }
.grid {
  display: grid; gap: 1.2rem; margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.card {
  background: var(--ink-3);
  border: 1px solid rgba(217,165,32,.22);
  border-radius: 4px;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.card p { color: var(--ash); font-size: .95rem; flex: 1; }
.btn {
  display: inline-block; align-self: flex-start;
  padding: .8rem 1.3rem;
  background: var(--gold); color: var(--ink);
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem;
  text-decoration: none; border-radius: 2px; transition: background .2s;
}
.btn:hover, .btn:focus-visible { background: var(--gold-hi); }
.btn.ghost { background: transparent; color: var(--gold-hi); border: 1px solid var(--gold); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: rgba(217,165,32,.12); }
.panel {
  margin-top: 3rem; padding: 1.8rem;
  border-left: 3px solid var(--gold); background: var(--ink-2);
}
.panel ol, .panel ul { margin: .8rem 0 0 1.2rem; color: var(--ash); }
.panel li { margin: .3rem 0; }
.product { padding: 0; overflow: hidden; }
.product picture, .product img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ink-2); }
.product .body { padding: 1.2rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.product .meta { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.price { color: var(--gold-hi); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.badge {
  display: inline-block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ash); border: 1px solid rgba(163,156,162,.4); padding: .2rem .5rem; border-radius: 999px;
}
footer {
  color: #6f686d; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 3rem 6vw 2.5rem; text-align: center;
}
footer a { color: #8f888d; }
@media (max-width: 600px) {
  .nav ul { gap: 1rem; }
  main { padding-top: 4vh; }
}