/* ============================================================
 * House of Sisyphus
 * Stylesheet — single source of truth
 *
 * Sections:
 *   01  Tokens (color, type, spacing, motion)
 *   02  Reset & base
 *   03  Typography
 *   04  Layout primitives (container, rule, corner marks)
 *   05  Buttons & links
 *   06  Forms (shared)
 *   07  Top banner
 *   08  Site header / nav
 *   09  Brand mark
 *   10  Hero
 *   11  Section head
 *   12  Live & drops
 *   13  Specimen card / grid
 *   14  Category tiles
 *   15  Filter bar (shop)
 *   16  Poll
 *   17  Wishlist
 *   18  Newsletter
 *   19  Specimen detail page
 *   20  Static content pages (about / provenance / shows)
 *   21  Footer
 *   22  Utilities
 *   23  Responsive — 720px, 1080px
 * ============================================================ */


/* ---------- 01  Tokens ----------------------------------- */
:root {
  /* OBSIDIAN BASE */
  --bg:           #050505;
  --bg-elevated:  #0d0d0d;
  --bg-banner:    #020202;

  /* GOLD */
  --gold:         #b88a44;
  --gold-bright:  #e7c684;
  --gold-deep:    #7c5720;

  /* SILVER (warm cream) */
  --silver:       #d7d4cf;
  --silver-bright:#f5f1ec;
  --silver-muted: #c4a87a;
  --silver-faint: #5d5853;

  /* RULES */
  --rule:         rgba(184,138,68,0.24);
  --rule-bright:  rgba(231,198,132,0.6);

  /* METALLIC */
  --mercury: linear-gradient(135deg, #696969 0%, #efefef 18%, #8c8c8c 40%, #ffffff 58%, #777777 100%);

  /* type — Cormorant for serif headings, system sans for body, Cinzel only for uppercased UI bits */
  --serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Cinzel", "Cormorant Garamond", serif;

  /* spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* layout */
  --container: 1200px;
  --container-narrow: 880px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 480ms;
}


/* ---------- 02  Reset & base ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--silver);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-color: #050505;
  /* Obsidian slab — texture layer with lighter overlay so stone shows through */
  background-image:
    linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.40)),
    url("../images/obsidian-texture.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* (Mineral-vein body::before removed — replaced by raw texture visibility) */

/* Subtle film grain — anchors the surface, hides banding */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size: 240px 240px;
}

/* Heading depth — keeps titles readable against ambient bg gradients */
.hero-title,
h1, h2,
.brand-name {
  text-shadow:
    0 2px 1px rgba(0,0,0,0.92),
    0 0 14px rgba(255,255,255,0.04);
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--silver-bright);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: #fff; }

button { font-family: inherit; }


/* ---------- 03  Typography ------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--silver-bright);
  margin: 0 0 var(--space-4);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4rem); }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 0.875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver-muted); font-family: var(--sans); }

p { margin: 0 0 var(--space-4); }

em { font-style: italic; }

.eyebrow {
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin: 0 0 var(--space-3);
}

.section-sub {
  color: var(--silver-muted);
  max-width: 56ch;
  margin: 0 auto;
}


/* ---------- 04  Layout primitives ------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container-narrow { max-width: var(--container-narrow); }

.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(231,198,132,0.16) 18%,
    rgba(231,198,132,0.7) 50%,
    rgba(231,198,132,0.16) 82%,
    transparent);
  margin: 0;
  position: relative;
}
/* Tiny silver diamond ornament centered on the rule */
.rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--mercury);
  box-shadow: 0 0 6px rgba(232,232,236,0.35);
}

/* Corner marks — decorative L-shapes echoing the logo treatment */
.corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--silver-muted);
  pointer-events: none;
}
.corner-tl { top: 0;    left: 0;    border-top: 1px solid; border-left: 1px solid; }
.corner-tr { top: 0;    right: 0;   border-top: 1px solid; border-right: 1px solid; }
.corner-bl { bottom: 0; left: 0;    border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { bottom: 0; right: 0;   border-bottom: 1px solid; border-right: 1px solid; }

main { display: block; }

section { padding: var(--space-8) 0; }


/* ---------- 05  Buttons & links -------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.7rem;
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid rgba(231,198,132,0.45);
  background:
    linear-gradient(180deg, rgba(255,215,140,0.08), rgba(255,215,140,0.01));
  color: var(--gold-bright);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,215,140,0.04),
    0 10px 30px rgba(0,0,0,0.55);
  transition: all 240ms ease;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mercury);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: 0;
}

.btn > * { position: relative; z-index: 1; }
.btn { isolation: isolate; }

.btn:hover {
  color: #fff;
  border-color: var(--gold-bright);
  background:
    linear-gradient(180deg, rgba(255,215,140,0.18), rgba(255,215,140,0.05));
  box-shadow:
    0 0 18px rgba(231,198,132,0.16),
    0 18px 40px rgba(0,0,0,0.65);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }

.btn-primary { border-color: var(--silver); }

/* ---------- Emphasis button -----------------------------
   Used for the pre-launch "Take Your Place" CTA across the site.
   Crafted to feel like a museum-frame plaque: bronze-gold gradient
   with a top highlight + bottom cut, a double-edge border (dark
   outer, gold inner stroke) for depth, and a heavier text weight so
   the Cinzel letterforms read cleanly on the warm fill. */
.btn-emphasis {
  border: 1px solid #4a3318;
  padding: 1.05rem 2.25rem;
  /* Switch font away from Cinzel display caps to the site's serif
     (Cormorant Garamond) for readability — the all-caps display font
     felt cramped against the gold fill. Title-case + larger size + a
     soft small-caps treatment via letter-spacing keeps the formality. */
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.01em;
  /* Cormorant 700 is the heaviest weight Google Fonts ships; a thin
     text-stroke matched to the text colour fattens the strokes by a
     fraction of a pixel without giving us the smudgy synthetic-bold
     look. Supported in all evergreen browsers. */
  -webkit-text-stroke: 0.5px #100904;
  background: linear-gradient(180deg,
    #e9cf95 0%,
    #b8924d 48%,
    #7e5a26 100%);
  color: #100904;
  text-shadow:
    0 1px 0 rgba(255,238,205,0.55),
    0 0 2px rgba(255,238,205,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,242,215,0.80),     /* top highlight */
    inset 0 -1px 0 rgba(30,18,4,0.60),        /* bottom cut */
    inset 0 0 0 1px rgba(231,198,132,0.60),   /* gold inner stroke */
    0 1px 0 rgba(0,0,0,0.50),                 /* hard edge below */
    0 12px 28px rgba(0,0,0,0.55);             /* depth */
}
.btn-emphasis::before { display: none; }
.btn-emphasis:hover {
  color: #1a1206;
  border-color: #6e4e22;
  background: linear-gradient(180deg,
    #f3dca8 0%,
    #d8b06b 48%,
    #a87d3e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,245,220,0.85),
    inset 0 -1px 0 rgba(40,24,6,0.45),
    inset 0 0 0 1px rgba(247,221,160,0.70),
    0 1px 0 rgba(0,0,0,0.45),
    0 16px 34px rgba(0,0,0,0.6);
  transform: translateY(-2px);
}
.btn-emphasis:active {
  /* On press: collapse the highlight & shadow so the button sinks. */
  box-shadow:
    inset 0 1px 2px rgba(40,24,6,0.45),
    inset 0 -1px 0 rgba(255,238,205,0.20),
    inset 0 0 0 1px rgba(180,140,80,0.55),
    0 2px 6px rgba(0,0,0,0.5);
  transform: translateY(0);
}

.btn-ghost {
  border: 1px solid var(--gold);
  padding: 0.85rem 1.85rem;
  letter-spacing: 0.16em;
  color: var(--gold-bright);
  background: rgba(184, 138, 68, 0.06);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-ghost::before { display: none; }
.btn-ghost:hover {
  color: var(--obsidian, #050505);
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: none;
  transform: none;
}

.link-arrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-bright);
  border-bottom: 1px solid var(--silver-faint);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease);
}
.link-arrow:hover { border-color: var(--silver-bright); }


/* ---------- 06  Forms (shared) --------------------------- */
.field { margin-bottom: var(--space-5); }

.field label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin-bottom: var(--space-2);
}

input[type="email"],
input[type="text"],
textarea,
select {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  color: var(--silver-bright);
  font-family: var(--sans);
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease);
  border-radius: 0;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--silver);
}

textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.5;
}

.muted { color: var(--silver-muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.75rem; }

.form-status,
.poll-status {
  margin-top: var(--space-4);
  font-size: 0.875rem;
  color: var(--silver-muted);
  min-height: 1.4em;
}
.form-status.is-success,
.poll-status.is-success { color: var(--silver-bright); }

.form-status.is-fading,
.poll-status.is-fading {
  opacity: 0;
  transition: opacity 800ms var(--ease);
}
.form-status.is-error,
.poll-status.is-error { color: #E8B8B8; }


/* ---------- 07  Top banner ------------------------------- */
.top-banner {
  background: var(--bg-banner);
  border-bottom: 1px solid var(--rule);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-muted);
}
.banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0.625rem var(--space-5);
}

/* Marquee — single-line rolling banner */
.marquee {
  overflow: hidden;
  padding: 0.625rem 0;
  position: relative;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, var(--bg-banner), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--bg-banner), transparent); }

.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  white-space: nowrap;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--silver-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.marquee-item:hover { color: var(--silver-bright); }

.marquee-link {
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px solid var(--silver-faint);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.marquee-link:hover {
  color: var(--silver-bright);
  border-color: var(--silver-bright);
}

/* Disable clickability on touch devices — items act as text only */
@media (hover: none) and (pointer: coarse) {
  .marquee-item,
  .marquee-link { pointer-events: none; }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.banner-dot {
  width: 6px; height: 6px;
  background: var(--silver-bright);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--silver);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}


/* ---------- 08  Site header / nav ------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 5, 5, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
}

.primary-nav {
  display: none;
  gap: var(--space-6);
}
.primary-nav a {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright);
  position: relative;
  padding-bottom: 4px;
  opacity: 0.92;
  transition: color var(--dur) var(--ease),
              text-shadow var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.primary-nav a:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(231,198,132,0.28);
  opacity: 1;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--silver-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Cart pill in nav — hidden until Snipcart loads, then revealed.
   Snipcart adds .snipcart-loaded to <html> when the script is ready. */
.nav-cart { display: none !important; }
html.snipcart-loaded .nav-cart {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  color: var(--silver-bright);
}
html.snipcart-loaded .nav-cart::after { display: none; } /* no underline animation on the pill */
html.snipcart-loaded .nav-cart:hover { border-color: var(--silver-bright); }
.nav-cart .snipcart-items-count { font-family: var(--serif); font-size: 0.85rem; }

/* Mobile toggle */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  padding: 0 10px;
}
.nav-toggle span {
  display: block;
  height: 1px;
  background: var(--silver-bright);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile open state */
.primary-nav.is-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-6) var(--space-5);
}


/* ---------- 09  Brand mark ------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--silver-bright);
}
.brand:hover { color: var(--silver-bright); }

.brand-monogram { display: inline-flex; align-items: center; }

/* Real calligraphic logo image — sized by width so aspect-ratio swap doesn't shrink it */
.brand-mark {
  width: 140px;
  height: auto;
  display: block;
  /* Translate compensates for the PNG's transparent padding so the visible
     mark butts against the wordmark and sits level with it. */
  transform: translate(26px, 8px);
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,0.8))
    drop-shadow(0 0 10px rgba(255,255,255,0.08));
  transition: filter var(--dur) var(--ease);
}
.brand:hover .brand-mark {
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,0.6))
    drop-shadow(0 0 18px rgba(232,232,236,0.22));
}

.brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.brand-tag {
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin-top: 2px;
}


/* ---------- 10  Hero ------------------------------------- */
.hero { padding: var(--space-4) 0 var(--space-6); position: relative; overflow: hidden; }

/* (Cabinet-glow .hero::before removed — replaced by texture + gold frame) */

.hero-inner {
  position: relative;
  text-align: center;
  padding: 1.25rem var(--space-5) 2rem;
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid rgba(231,198,132,0.22);
  background: linear-gradient(rgba(0,0,0,0.48), rgba(0,0,0,0.58));
  box-shadow:
    inset 0 0 0 1px rgba(255,215,140,0.03),
    0 30px 80px rgba(0,0,0,0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Hero logo centerpiece */
.hero-logo {
  display: block;
  /* Mobile-first: modest size, no scaling, light margin trim. Desktop
     blows it up via the (min-width: 1080px) override below. */
  width: clamp(360px, 105vw, 580px);
  max-width: none;
  height: auto;
  /* Strong negative top margin lets the logo flood above the gold-framed
     hero-inner border; bottom margin trimmed so prose sits tight.
     Translate is in percent (relative to the logo's own box) so the
     composition stays stable as the viewport — and therefore the logo —
     resizes. Previously these were fixed pixel values which made the
     logo appear to drift as the page scaled. */
  margin: -6.5rem auto -5rem;
  /* Vertical kept at 0 — a percent vertical translate scales with the
     logo's width, so as the viewport grows the logo crept downward and
     covered the hero title. Horizontal still uses percent so the PNG's
     asymmetric whitespace stays compensated at every scale. */
  transform: translate(-18%, 0);
  opacity: 0.98;
  filter:
    drop-shadow(0 4px 14px rgba(0,0,0,0.92))
    drop-shadow(0 0 14px rgba(255,255,255,0.10))
    drop-shadow(0 0 36px rgba(255,255,255,0.04));
}

.hero-title {
  margin: 0 0 1rem;
  line-height: 0.95;
}
.hero-title em {
  display: block;
  margin-top: 0.2rem;
  font-style: italic;
  color: var(--silver);
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  text-shadow:
    0 2px 2px rgba(0,0,0,0.9),
    0 0 12px rgba(255,255,255,0.06);
  opacity: 0.78;
}

.hero-lede {
  font-size: 1.0625rem;
  color: var(--silver);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
  line-height: 1.7;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.hero-meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin-top: -0.25rem;
  margin-bottom: 1.75rem;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  opacity: 0.82;
}
.hero-meta .dot { color: var(--silver-faint); }


/* ---------- 11  Section head ----------------------------- */
.section-head {
  text-align: center;
  margin-bottom: var(--space-7);
}
.section-head h2 { margin-bottom: var(--space-3); }

.section-foot {
  text-align: center;
  margin-top: var(--space-7);
}


/* ---------- 12  Live & drops ----------------------------- */
.live-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.live-card {
  background:
    linear-gradient(180deg, rgba(232,232,236,0.025), transparent 30%),
    var(--bg-elevated);
  border: 1px solid var(--rule);
  padding: var(--space-6);
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(232,232,236,0.06),
    0 12px 30px -16px rgba(0,0,0,0.7);
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.live-card:hover {
  border-color: var(--silver-faint);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(232,232,236,0.10),
    0 20px 40px -18px rgba(0,0,0,0.85),
    0 0 24px -8px rgba(232,232,236,0.10);
}
.live-card .live-when {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin-bottom: var(--space-3);
}
.live-card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}


/* ---------- 13  Specimen card / grid --------------------- */
.grid-specimens {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.specimen {
  background:
    linear-gradient(180deg, rgba(232,232,236,0.025), transparent 30%),
    var(--bg-elevated);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(232,232,236,0.06),
    0 1px 0 rgba(0,0,0,0.4),
    0 12px 30px -16px rgba(0,0,0,0.7);
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.specimen:hover {
  border-color: var(--silver-faint);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(232,232,236,0.10),
    0 1px 0 rgba(0,0,0,0.4),
    0 24px 50px -18px rgba(0,0,0,0.85),
    0 0 28px -8px rgba(232,232,236,0.10);
}
.specimen a.specimen-link {
  color: inherit;
  display: contents;
}

.specimen-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at 30% 15%, rgba(232,232,236,0.10), transparent 55%),
    radial-gradient(ellipse at 70% 90%, rgba(60,60,70,0.45), transparent 60%),
    linear-gradient(180deg, #0d0d0d 0%, #050505 100%);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.specimen-img::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 50%, transparent 60%, rgba(0,0,0,0.45) 100%);
}
.specimen-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.specimen-img[data-label]::after {
  content: attr(data-label);
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-muted);
  background: rgba(15,15,18,0.6);
  padding: 4px 8px;
  border: 1px solid var(--rule);
}

/* Museum-label placeholder ornament when no photo is present */
.img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-placeholder::before {
  /* Outer ring */
  content: "";
  width: 64px; height: 64px;
  border: 1px solid var(--silver-faint);
  border-radius: 50%;
  box-shadow:
    inset 0 0 24px rgba(232,232,236,0.06),
    0 0 12px rgba(0,0,0,0.5);
}
.img-placeholder::after {
  /* Inner mercury dot */
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--mercury);
  box-shadow: 0 0 14px rgba(232,232,236,0.4);
}

/* "Coming Soon" overlay — sits below the mercury ornament when no
   photo is loaded. A successfully-loaded <img> (inset:0, drawn later
   in source order) naturally covers this. */
.coming-soon-label {
  position: absolute;
  left: 50%;
  top: calc(50% + 48px);
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-muted);
  background: rgba(15,15,18,0.55);
  padding: 5px 11px;
  border: 1px solid var(--rule);
  white-space: nowrap;
  pointer-events: none;
}
.coming-soon-label--lg {
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  padding: 7px 16px;
  top: calc(50% + 64px);
}

.specimen-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.specimen-body .locality {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin: 0;
}
.specimen-body h3 {
  font-family: var(--serif);
  font-size: 1.375rem;
  margin: 0;
}
.specimen-meta {
  font-size: 0.875rem;
  color: var(--silver-muted);
  margin: 0;
}
.specimen-price {
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--silver-bright);
  border-top: 1px solid var(--rule);
}
.specimen-price .sold {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-muted);
}

.specimen-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}


/* ---------- 14  Category tiles --------------------------- */
.category-tiles {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
.category-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  overflow: hidden;
  color: var(--silver-bright);
  transition: border-color var(--dur) var(--ease);
}
.category-tile:hover { border-color: var(--silver); }
.category-tile-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5);
  display: flex;
  align-items: end;
  justify-content: space-between;
  background: linear-gradient(to top, rgba(10,10,13,0.85), transparent);
}
.category-tile-label h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0;
}
.category-tile-label span {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-muted);
}


/* ---------- 15  Filter bar (shop) ------------------------ */
.filter-bar {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
}
.filter-bar label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin-bottom: var(--space-2);
}
.filter-bar select {
  background: var(--bg);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--silver-muted) 50%),
                    linear-gradient(135deg, var(--silver-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.filter-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-5);
  font-size: 0.875rem;
  color: var(--silver-muted);
}
.filter-clear {
  background: none;
  border: none;
  color: var(--silver-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  border-bottom: 1px solid transparent;
}
.filter-clear:hover {
  color: var(--silver-bright);
  border-color: var(--silver-faint);
}


/* ---------- 16  Poll ------------------------------------- */
.poll-inner { max-width: 760px; margin: 0 auto; }

.poll-form fieldset { border: none; padding: 0; margin: 0 0 var(--space-5); }

.poll-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.poll-option:hover { border-color: var(--silver-faint); }
.poll-option input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--silver-muted);
  border-radius: 3px;
  background: transparent;
  margin-top: 2px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.poll-option input[type="checkbox"]:checked {
  border-color: var(--silver-bright);
  background: var(--silver-bright);
}
.poll-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--bg);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.poll-option:has(input:checked) {
  border-color: var(--silver-bright);
  background: rgba(192, 192, 192, 0.06);
  box-shadow: inset 3px 0 0 0 var(--silver-bright);
}
.poll-option:has(input:checked) .poll-label {
  color: var(--silver-bright);
}
.poll-label { color: var(--silver); font-size: 0.95rem; line-height: 1.5; transition: color var(--dur) var(--ease); }

.poll-results {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: grid;
  gap: var(--space-3);
}
.poll-result {
  position: relative;
  padding: var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.poll-result.is-leader { border-color: var(--silver); }
.poll-result-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(232,232,236,0.06);
  width: 0;
  transition: width var(--dur-slow) var(--ease);
  z-index: 0;
}
.poll-result-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
}
.poll-result-label { color: var(--silver); font-size: 0.95rem; }
.poll-result-pct {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--silver-bright);
  white-space: nowrap;
}


/* ---------- 17  Wishlist --------------------------------- */
.wishlist-form { max-width: 720px; margin: 0 auto; }


/* ---------- 18  Newsletter ------------------------------- */
.newsletter-inner {
  position: relative;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 1px solid var(--rule);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232,232,236,0.10), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(180,180,200,0.04), transparent 60%),
    linear-gradient(180deg, #0d0d0d 0%, #060606 100%);
  max-width: 760px;
  margin: 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(232,232,236,0.08),
    0 24px 60px -28px rgba(0,0,0,0.8);
}
.newsletter-lede {
  color: var(--silver-muted);
  max-width: 50ch;
  margin: 0 auto var(--space-5);
}
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 480px;
  margin: 0 auto;
}


/* ---------- 19  Specimen detail page --------------------- */
.specimen-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}
.specimen-gallery { display: flex; flex-direction: column; gap: var(--space-3); }
.specimen-gallery .main-img {
  aspect-ratio: 4 / 3;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.specimen-gallery .main-img .img-placeholder { display: flex; }
.specimen-gallery .thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.specimen-gallery .thumb {
  aspect-ratio: 1 / 1;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
}

.specimen-info .eyebrow { margin-bottom: var(--space-2); }
.specimen-info h1 { font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem); margin-bottom: var(--space-3); }
.specimen-info .price-line {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--silver-bright);
  margin: var(--space-5) 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
}
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: var(--space-5) 0;
}
.spec-grid dt {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin-bottom: 4px;
}
.spec-grid dd {
  margin: 0 0 var(--space-3);
  color: var(--silver);
}


/* ---------- 20  Static content pages --------------------- */
.page-head {
  padding: var(--space-9) 0 var(--space-7);
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.page-head .eyebrow {
  /* Promoted to page title — was a small grey 11px label */
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw + 0.6rem, 2.1rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gold-bright);
  margin-bottom: var(--space-4);
  opacity: 0.95;
}
.page-head h1 { margin-bottom: var(--space-3); }
.page-head p { color: var(--silver-muted); max-width: 56ch; margin: 0 auto; }

.prose {
  max-width: 64ch;
  margin: 0 auto;
}
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); font-family: var(--serif); font-size: 1.25rem; color: var(--silver-bright); text-transform: none; letter-spacing: -0.01em; }
.prose ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
}
.prose ul li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 1px;
  background: var(--silver-muted);
}

.shows-list { list-style: none; padding: 0; margin: 0; }
.shows-list li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--rule);
}
.shows-list .show-when {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-muted);
}
.shows-list .show-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--silver-bright);
}
.shows-list .show-where { color: var(--silver); font-size: 0.95rem; }


/* ---------- 21  Footer ----------------------------------- */
.site-footer {
  background: var(--bg-banner);
  border-top: 1px solid var(--rule);
  padding: var(--space-8) 0 var(--space-5);
  margin-top: var(--space-9);
}
.footer-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
.footer-brand .brand-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--silver-bright);
}
.footer-tag {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin: var(--space-2) 0 var(--space-4);
}
.footer-blurb { font-size: 0.875rem; color: var(--silver-muted); max-width: 36ch; }

.footer-nav h4,
.footer-social h4 { margin-bottom: var(--space-3); }
.footer-nav { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-nav a {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--silver);
  letter-spacing: 0.02em;
}
.footer-nav a:hover { color: var(--silver-bright); }
.footer-social {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.875rem;
}
.footer-social a { color: var(--silver); }
.footer-social a:hover { color: var(--silver-bright); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-5);
  margin-top: var(--space-7);
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--silver-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-marks { color: var(--silver-faint); letter-spacing: 0.4em; }


/* ---------- 22  Utilities -------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }


/* ---------- 23  Responsive ------------------------------- */

/* Tablet */
@media (min-width: 720px) {
  section { padding: var(--space-9) 0; }

  .container { padding: 0 var(--space-6); }

  .live-grid       { grid-template-columns: repeat(3, 1fr); }
  .grid-specimens  { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .category-tiles  { grid-template-columns: repeat(3, 1fr); }
  .footer-grid     { grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--space-6); }

  .filter-bar      { grid-template-columns: repeat(4, 1fr); }

  .specimen-detail { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); }

  .shows-list li {
    grid-template-columns: 180px 1fr 1fr;
    align-items: baseline;
    gap: var(--space-5);
  }

  .newsletter-form { flex-direction: row; align-items: center; }
  .newsletter-form input { flex: 1; }
}

/* Desktop */
@media (min-width: 1080px) {
  .nav-toggle { display: none; }
  .primary-nav {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: transparent;
    border: none;
    padding: 0;
  }
  .primary-nav.is-open { /* no-op on desktop */ background: transparent; border: none; padding: 0; position: static; }

  .grid-specimens { grid-template-columns: repeat(3, 1fr); }

  .hero { padding: var(--space-5) 0 var(--space-7); }
}

/* Tablet + desktop (>=768px): restore the original oversized hero logo
   centerpiece. Mobile (<768px) keeps the smaller centered treatment from
   the base .hero-logo rule. Negative margins eat the PNG's transparent
   padding so adjacent content sits tight; the translate compensates for
   the PNG's asymmetric horizontal whitespace. */
@media (min-width: 768px) {
  .hero-logo {
    /* Drop the previous scale(1.8) and bake the size into width
       directly. With scale, the rendered logo extended 40% beyond
       its layout box and crashed into the hero title at certain
       viewport widths — no fixed margin could keep up. Without
       scale the layout and visual boxes match, so margins reserve
       exactly the space the logo occupies. */
    width: clamp(540px, 70vw, 880px);
    max-width: 100%;
    /* Top margin pushes the logo up to spill above the gold-frame
       border; bottom margin pulls the hero title up so it sits
       neatly tucked under the monogram. Both eat into the PNG's
       transparent padding rather than the visible glyph. */
    margin: -11rem auto -13rem;
    transform: translate(-5%, 0);
  }
  /* Shift the entire gold-framed hero box (and everything inside it)
     down so it doesn't crowd the sticky header on desktop/tablet. */
  .hero-inner { margin-top: 24px; }
  /* Allow the logo to visibly break above the gold-frame border on
     desktop (mobile already has this override). Without it, .hero's
     base `overflow: hidden` clips the logo's spill. */
  .hero { overflow: visible; }
}

/* ---------- 24  FAQ accordion ---------------------------- */
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.125rem;
  color: var(--silver-bright);
  transition: color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #fff; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--silver-muted);
  border: 1px solid var(--silver-faint);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.faq-item summary:hover::after {
  border-color: var(--silver);
  color: var(--silver-bright);
}
.faq-item[open] summary::after {
  content: "−";
  background: var(--mercury);
  color: var(--bg);
  border-color: var(--silver-bright);
  transform: rotate(180deg);
}
.faq-item .faq-answer {
  padding: 0 0 var(--space-6);
  color: var(--silver);
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.7;
}
.faq-item .faq-answer p { margin-bottom: var(--space-4); }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }
.faq-item .faq-answer ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}
.faq-item .faq-answer ul li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
}
.faq-item .faq-answer ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--silver-muted);
}
.faq-item .faq-answer strong {
  color: var(--silver-bright);
  font-weight: 400;
  font-family: var(--serif);
}
.faq-section {
  margin-top: var(--space-9);
}
.faq-section:first-of-type { margin-top: var(--space-7); }
.faq-section-title {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-muted);
  margin: 0 0 var(--space-4);
}

/* FAQ bump: scoped larger reading sizes on FAQ pages. Applied via .faq-bump on <main>. */
.faq-bump .page-head h1 { font-size: clamp(2.4rem, 4vw + 1rem, 3.6rem); }
.faq-bump .page-head > .container > p { font-size: 1.25rem; line-height: 1.65; }
.faq-bump .faq-section-title { font-size: 0.85rem; }
.faq-bump .faq-item summary { font-size: 1.35rem; }
.faq-bump .faq-item .faq-answer { font-size: 1.15rem; line-height: 1.75; }
.faq-bump .faq-item .faq-answer p { font-size: 1.15rem; }
.faq-bump .faq-item .faq-answer ul li { font-size: 1.1rem; }
.faq-bump .container-narrow > p { font-size: 1.15rem; }
.faq-bump .link-arrow { font-size: 1.1rem; }
.faq-bump .btn-primary span { font-size: 1.15rem; }


/* ---------- 25  Poll write-in --------------------------- */
.poll-option-writein .poll-writein-field {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--dur-slow) var(--ease),
              opacity var(--dur) var(--ease),
              margin var(--dur) var(--ease);
  margin-top: 0;
}
.poll-option-writein:has(input[type="checkbox"]:checked) .poll-writein-field {
  max-height: 220px;
  opacity: 1;
  margin-top: var(--space-3);
}
.poll-option-writein textarea {
  font-size: 0.95rem;
  background: var(--bg);
}
.poll-writein-hint {
  display: block;
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: var(--silver-muted);
  letter-spacing: 0.04em;
}


/* ---------- 26  Mobile polish (<480px) ------------------ */
@media (max-width: 479px) {
  .brand-tag { display: none; }
  .spec-grid { grid-template-columns: 1fr; }
}

/* Slimmer header on phones — trims nav-inner padding and shrinks the
   calligraphic brand-mark so the sticky bar reads as a thinner strip. */
@media (max-width: 767px) {
  .nav-inner { padding: 0.5rem var(--space-4); }
  .brand-mark {
    width: 86px;
    transform: translate(14px, 4px);
  }
  .brand-name { font-size: 0.95rem; }

  /* Let the hero logo break above the gold-framed hero-inner box, but
     keep enough top room so it doesn't slide behind the sticky header.
     Header (~50px) + top-banner (~30px) ~= 80px reserved at the top. */
  .hero { overflow: visible; padding-top: 1.25rem; }
  .hero-inner { padding-top: 0; }

  /* Mobile: pull the logo less aggressively so its top edge sits clear
     of the sticky site-header instead of vanishing behind it. The flood
     above the gold frame still reads — it just stops short of the bar.
     Bottom margin is strongly negative to eat the PNG's transparent
     padding so the title below sits tucked under the logo. */
  .hero-logo {
    width: clamp(280px, 90vw, 460px);
    margin: -1.5rem auto -5.5rem;
    transform: translate(-12%, 0);
  }

  /* Title sits close beneath the logo on mobile. */
  .hero-title { margin-top: 0; margin-bottom: 2.25rem; }
}

/* Tap targets — ensure 44px min on touch devices */
@media (hover: none) and (pointer: coarse) {
  .footer-nav a,
  .footer-social a,
  .link-arrow {
    padding-top: 10px;
    padding-bottom: 10px;
    display: inline-block;
  }
  .footer-nav { gap: 0; }
  .footer-social { gap: 0; }

  /* iOS Safari handles fixed backgrounds poorly — let it scroll */
  body { background-attachment: scroll; }

  /* Pin the obsidian background to the visual viewport via a fixed
     pseudo-element. Avoids the address-bar-collapse "shift" that occurs
     when background-size: cover is applied to body (viewport height
     changes → image recomputes → visible jump). */
  body {
    background-image: none;
  }
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* 100vh fallback, then 100lvh — large-viewport height is stable
       when the mobile address bar shows/hides, so background-size:
       cover doesn't recompute and the obsidian stops jumping. */
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    background-color: #050505;
    background-image:
      linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.40)),
      url("../images/obsidian-texture.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
 * PRE-LAUNCH OVERRIDES
 * Remove this block once Snipcart + forms are wired.
 * See DECISIONS.md 2026-05-15 and main.js HOS_PRE_LAUNCH flag.
 * ============================================================ */
.nav-cart { display: none !important; }

.pre-launch-card {
  border: 1px solid var(--rule);
  padding: var(--space-6);
  text-align: center;
  border-radius: 4px;
  max-width: 640px;
  margin: 0 auto;
}
.pre-launch-card .eyebrow { margin-bottom: var(--space-3); }
.pre-launch-card h3 {
  font-family: var(--serif);
  color: var(--silver-bright);
  font-size: 1.5rem;
  margin: 0 0 var(--space-3);
  text-transform: none;
  letter-spacing: -0.01em;
}
.pre-launch-card p { margin: var(--space-3) 0; }
.pre-launch-card .btn { margin-top: var(--space-4); }

.show-cta-badge {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--silver-bright);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(255,255,255,0.02);
}
.show-cta-badge:hover { background: rgba(255,255,255,0.05); }
.show-cta-badge small {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-top: 2px;
}

.prelaunch-banner {
  background: rgba(184, 138, 68, 0.18);
  border-bottom: 1px solid rgba(184, 138, 68, 0.45);
  padding: 14px 0;
  text-align: center;
}
.prelaunch-banner .container {
  font-family: var(--serif);
  color: var(--silver-bright);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}
.prelaunch-banner .marquee-link { margin-left: 0.5rem; }

/* ====================================================
   Waiting List form — cohesive layout
   ==================================================== */
.wl-form { display: flex; flex-direction: column; gap: var(--space-6); }

.wl-field { display: block; }
.wl-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.wl-label {
  display: block;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 var(--space-3);
}

.wl-help {
  display: block;
  margin-top: var(--space-2);
  color: var(--silver-muted);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

.wl-counter {
  display: block;
  margin-top: 4px;
  text-align: right;
  font-size: 0.7rem;
  color: var(--silver-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.wl-counter.is-warn { color: var(--gold-bright); }

.wl-fieldset .wl-radio {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  margin-top: 0.4rem;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.015);
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--silver-bright);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wl-fieldset .wl-radio:first-of-type { margin-top: 0; }
.wl-fieldset .wl-radio:hover { border-color: var(--silver-muted); background: rgba(255,255,255,0.04); }
.wl-fieldset .wl-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--silver-muted);
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  background: transparent;
}
.wl-fieldset .wl-radio input[type="radio"]:checked {
  border-color: var(--gold-bright);
}
.wl-fieldset .wl-radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 7px; height: 7px;
  background: var(--gold-bright);
  border-radius: 50%;
}
.wl-fieldset .wl-radio:has(input[type="radio"]:checked) {
  border-color: var(--gold);
  background: rgba(184, 138, 68, 0.06);
}
.wl-radio-other {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.55rem !important;
  font-size: 0.95rem !important;
}

.wl-optional-tag {
  margin-left: 0.55rem;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--silver-muted);
  opacity: 0.85;
}

.wl-error {
  display: block;
  margin-top: var(--space-2);
  color: #e7a87a;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.wl-field.is-invalid input[type="text"],
.wl-field.is-invalid input[type="email"],
.wl-field.is-invalid textarea {
  border-color: #e7a87a;
}
.wl-field.is-invalid .wl-radio {
  border-color: rgba(231, 168, 122, 0.4);
}