/* ============================================================
   FRAGMENTS - core stylesheet
   Palette: deep space ground, iron-nickel metal, entry heat
   ============================================================ */

:root {
  /* Obsidian. True neutral black: the brief's first rule bans purple and
     blue lighting, and the previous indigo ground was that rule's most
     direct violation. Greys lean warm on purpose - the supplier photographs
     were shot in daylight and a cold surround leaves them stranded. */
  --void:        #060606;
  --void-2:      #0d0d0e;

  --panel:       rgba(26, 26, 27, .74);
  --panel-solid: #1a1a1b;
  --panel-2:     rgba(34, 34, 35, .82);

  --line:        #2b2a27;
  --line-2:      #4a4845;
  --line-warm:   #46331f;

  --ink:         #f2f0ed;
  --ink-dim:     #8b8781;
  --ink-faint:   #6f6c66;

  /* Unchanged. Already matches the reference hero's ember. */
  --heat:        #ff7a2f;
  --heat-hot:    #ffc46b;
  --heat-deep:   #c2410c;

  --iron:        #c8ccd4;
  --ok:          #3ddc97;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow: 0 24px 60px -20px rgba(0,0,0,.9);
  --glow: 0 0 40px -8px rgba(255,122,47,.4);
  --blur: blur(14px);

  --wrap: 1180px;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- sky ------------------------------------------------------ */
/* The galaxy is drawn on a canvas by assets/js/cosmos.js. It sits behind
   everything and never takes pointer events. If the script fails, the
   gradient below is still a legible night sky. */
#cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: linear-gradient(160deg, #060606, #0a0a0b 55%, #050505);
}

/* A soft vignette keeps long copy readable over the brightest part of the
   band without dimming the sky at the edges of the page. */
.sky-scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,6,6,.62) 0%, transparent 26%, transparent 68%, rgba(6,6,6,.5) 100%),
    radial-gradient(120% 70% at 50% 45%, transparent 26%, rgba(6,6,6,.6) 100%);
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
main, header, footer { position: relative; z-index: 1; }

/* --- typography ----------------------------------------------- */
h1, h2, h3 { line-height: 1.1; letter-spacing: -.025em; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.9rem, 7.5vw, 5.2rem); font-weight: 800; letter-spacing: -.04em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1rem; color: var(--ink-dim); }
a  { color: inherit; }

.eyebrow {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--heat);
  margin-bottom: 18px;
  display: block;
}
.lede { font-size: 1.12rem; color: var(--ink-dim); max-width: 62ch; }

/* --- nav ------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(6,6,6,.72);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 66px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; letter-spacing: -.03em; font-size: 1.08rem;
  text-decoration: none; margin-right: auto;
}
/* The mark is an SVG file rather than a drawn blob, so the nav, the
   favicon and a printed card are all the same artwork. */
/* The mark is the artwork itself, toned for a dark ground: the original
   render measures under 2:1 against #060606 and vanishes at this size, so
   assets/img/logo-mark.png is the gamma-lifted copy. logo-mark-light.png
   keeps the original tone for white grounds and print. */
.brand .rock {
  width: auto; height: 26px; flex: none;
  display: block;
  filter: drop-shadow(0 0 12px rgba(255,122,47,.28));
}
.nav-links { display: flex; gap: 26px; }
.nav-links a {
  text-decoration: none; color: var(--ink-dim);
  font-size: .92rem; font-weight: 500; transition: color .18s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }

/* --- buttons -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s, box-shadow .2s, background .2s, border-color .2s;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--heat-hot), var(--heat) 55%, var(--heat-deep));
  color: #1a0d04; box-shadow: var(--glow);
}
.btn-primary:hover { box-shadow: 0 0 52px -6px rgba(255,122,47,.65); }
.btn-ghost {
  background: rgba(255,255,255,.03); color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--line-2); background: rgba(255,255,255,.07); }
.btn-sm { padding: 9px 16px; font-size: .86rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- hero ----------------------------------------------------- */
.hero { padding: 96px 0 84px; position: relative; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 56px; align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero h1 .burn {
  background: linear-gradient(96deg, var(--heat-hot), var(--heat) 45%, var(--heat-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

.contract-chip {
  margin-top: 28px; display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px 14px; max-width: 480px;
}
.contract-chip .lab {
  font: 500 .66rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); flex: none;
}
.contract-chip code {
  font-family: var(--mono); font-size: .82rem; color: var(--iron);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}

/* hero art */
/* The drawn .meteor sphere that used to live here is gone. The hero
   renders .meteor-photo - a photograph of an actual specimen - and the
   CSS sphere stopped being referenced by any markup when it did, so
   what was left was nineteen lines painting a blue-grey rock nothing
   ever showed. That is also why its literals outlived the redesign:
   dead code is not repainted, because nobody sees it to repaint. */
.hero-art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.trail {
  position: absolute; inset: 0; border-radius: inherit;
  background: conic-gradient(from 210deg, transparent 0deg, rgba(255,122,47,.5) 26deg, transparent 62deg);
  filter: blur(26px); z-index: -1; transform: scale(1.5);
  animation: pulse 4s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(-10px) rotate(-2deg); } 50% { transform: translateY(12px) rotate(2deg); } }
@keyframes pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* --- stat strip ----------------------------------------------- */
.strip {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 26px 20px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .n {
  font: 800 1.7rem/1 var(--font); letter-spacing: -.03em;
  color: var(--ink); display: block; margin-bottom: 6px;
}
.stat .l {
  font: 500 .68rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* --- sections ------------------------------------------------- */
section { padding: 96px 0; }
.sec-head { max-width: 64ch; margin-bottom: 52px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: linear-gradient(180deg, var(--panel), rgba(13,13,14,.7));
  backdrop-filter: var(--blur);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 26px; position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card .step {
  font: 500 .7rem/1 var(--mono); letter-spacing: .14em;
  color: var(--heat); margin-bottom: 16px; display: block;
}
.card p { margin: 0; font-size: .95rem; }
.card h3 { color: var(--ink); }

/* --- allocation ----------------------------------------------- */
.alloc { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.alloc-list { list-style: none; padding: 0; margin: 0; }
.alloc-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.alloc-row:last-child { border-bottom: 0; }
.alloc-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.alloc-top strong { font-weight: 700; font-size: .98rem; }
.alloc-top .pct { margin-left: auto; font: 500 1rem var(--mono); color: var(--heat); }
.alloc-note { font-size: .84rem; color: var(--ink-faint); }
.bar { height: 5px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.bar span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--heat-deep), var(--heat) 60%, var(--heat-hot));
}

/* --- shop ----------------------------------------------------- */
.shop-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.shop-head .sec-head { margin-bottom: 0; flex: 1 1 460px; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.chip {
  padding: 8px 15px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-dim);
  cursor: pointer; transition: .18s; font-family: inherit;
}
.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip.on { background: rgba(255,122,47,.14); border-color: var(--heat); color: var(--heat-hot); }

/* --- archive -------------------------------------------------------- */
/* Air between entries, not a tighter grid. Only the gutter changes: the
   column counts at 900px and 620px are shared with `.cards`, a different
   component, so touching them would silently restyle that too. */
.grid-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 30px; }

/* Not cards. Each specimen is an entry with room around it, which is the
   difference between a shop grid and a collection. */
.item {
  background: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 26px 14px 40px;
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.item:hover { transform: translateY(-6px); }
/* The gradient and the bottom border both go: the aperture supplies its
   own edge, and there is no card left for a border to sit on. */
.item-fig {
  aspect-ratio: 1; width: 100%; position: relative;
  background: none;
  display: grid; place-items: center; border-bottom: 0;
}
.item-fig .specimen {
  width: 52%; aspect-ratio: 1;
  border-radius: 54% 46% 48% 52% / 50% 52% 48% 50%;
  box-shadow: inset -8px -10px 20px rgba(0,0,0,.8), inset 6px 7px 16px rgba(255,255,255,.09);
}
/* The badges align to the aperture, not to the figure. The figure is now
   a full-width square and the circle is 68% of it, so a corner inset in
   pixels leaves them stranded in empty space - badly at 390px, where the
   gap is widest. 16% is the circle's own edge at every column width. */
.tag-class {
  position: absolute; top: 12px; left: 16%;
  font: 500 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(6,6,6,.78); border: 1px solid var(--line); color: var(--iron);
  backdrop-filter: blur(6px);
}
.tag-stock {
  position: absolute; top: 12px; right: 16%;
  font: 500 .64rem/1 var(--mono); letter-spacing: .1em;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(6,6,6,.78); border: 1px solid var(--line); color: var(--ok);
  backdrop-filter: blur(6px);
}
.tag-stock.out { color: var(--ink-faint); }

/* The padding moved out to `.item`, but the column and `flex: 1` stay:
   `.price-block` hangs off `margin-top: auto`, which is what keeps the
   buy buttons on a row level with each other however long the copy runs.
   Dropping them would break that silently. */
.item-body { width: 100%; display: flex; flex-direction: column; flex: 1; }
.item-body h3 {
  font-family: var(--font-display);
  font-weight: 400; font-size: 1.45rem;
  /* the indent puts back the trailing letter-space, so centred text
     actually reads as centred */
  letter-spacing: .16em; text-indent: .16em;
  color: var(--ink);
  margin: 22px 0 10px;
  /* Size ranges orphan their unit onto a line of its own otherwise:
     "Campo del Cielo · 15-30" / "mm". */
  text-wrap: balance;
}
.item-link { color: inherit; text-decoration: none; }
.item-link:hover { color: var(--heat-hot); }
.item-loc {
  font-family: var(--mono);
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* Airier layout, same weight of honesty copy. The sourcing note and the
   variation notice are the point of the page, not footnotes to it. */
.item-desc {
  max-width: 34ch; margin: 14px auto 0;
  color: var(--ink-dim); font-size: .88rem; line-height: 1.7;
}
.item-sourcing, .item-variation {
  max-width: 34ch; margin: 12px auto 0;
  font-size: .76rem; line-height: 1.65;
  color: var(--ink-faint);
}
/* A left rail cannot mark centred text, so the divider goes above it. */
.item-variation { border-top: 1px solid var(--line); padding-top: 11px; }
.item-variation.is-exact { border-top-color: var(--ok); color: var(--ink-dim); }

/* Key and value on one line: at this size a stacked pair reads as two
   separate facts rather than one label. Wraps rather than clipping on a
   narrow phone. */
.specs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 22px;
  margin: 16px 0 0;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-dim);
}
.spec .k { color: var(--ink-faint); margin-right: 7px; }
.spec .v { color: var(--ink-dim); }

/* The price block is a flex row, so centring it takes more than
   `text-align`. */
.item .price-line, .item .price-block { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .item { transition: none; }
  .item:hover { transform: none; }
}



/* --- cart ----------------------------------------------------- */
.cart-btn { position: relative; }
.cart-count {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px;
  border-radius: 999px; background: var(--heat); color: #1a0d04;
  font: 500 .68rem/19px var(--mono); text-align: center; padding: 0 5px;
}
.cart-count[hidden] { display: none !important; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: rgba(13,13,14,.92); backdrop-filter: blur(20px); border-left: 1px solid var(--line);
  z-index: 100; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow: -30px 0 70px rgba(0,0,0,.7);
}
.drawer.open { transform: none; }
.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 99;
  opacity: 0; pointer-events: none; transition: opacity .28s;
  backdrop-filter: blur(3px);
}
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer-head {
  display: flex; align-items: center; padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.drawer-head h3 { margin: 0; margin-right: auto; }
.x {
  background: none; border: 0; color: var(--ink-dim); font-size: 1.6rem;
  cursor: pointer; line-height: 1; padding: 0 4px;
}
.x:hover { color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.drawer-foot { padding: 22px; border-top: 1px solid var(--line); }

.line { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line-thumb {
  width: 56px; height: 56px; border-radius: var(--r-sm); flex: none;
  background: radial-gradient(circle at 45% 40%, var(--line), var(--void-2));
  display: grid; place-items: center;
}
.line-thumb i {
  width: 60%; aspect-ratio: 1; border-radius: 50% 46% 52% 48%;
  box-shadow: inset -3px -4px 7px rgba(0,0,0,.8);
}
.line-info { flex: 1; min-width: 0; }
.line-info strong { display: block; font-size: .92rem; font-weight: 600; }
.line-info .m { font: 500 .76rem var(--mono); color: var(--ink-faint); }
.qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.qty button {
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  font-size: .95rem; line-height: 1; font-family: inherit;
}
.qty button:hover { border-color: var(--heat); color: var(--heat); }
.qty span { font: 500 .85rem var(--mono); min-width: 18px; text-align: center; }
.line-price { text-align: right; font-weight: 700; font-size: .95rem; }

.totals { margin-bottom: 18px; }
.t-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: .92rem; color: var(--ink-dim); }
.t-row.big { font-size: 1.15rem; font-weight: 800; color: var(--ink); padding-top: 14px; border-top: 1px solid var(--line); margin-top: 7px; letter-spacing: -.02em; }
.t-row .save { color: var(--ok); }

.pay-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.pay-opt {
  padding: 12px; border-radius: var(--r-md); cursor: pointer; text-align: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-dim);
  font-family: inherit; font-size: .88rem; font-weight: 600; transition: .18s;
}
.pay-opt.on { border-color: var(--heat); background: rgba(255,122,47,.12); color: var(--heat-hot); }
.pay-opt small { display: block; font-weight: 500; font-size: .72rem; color: var(--ink-faint); margin-top: 3px; }
.pay-opt.on small { color: var(--heat); }

.empty { text-align: center; padding: 64px 20px; color: var(--ink-faint); }

/* --- faq ------------------------------------------------------ */
.faq { max-width: 780px; }
details { border-bottom: 1px solid var(--line); padding: 20px 0; }
summary {
  cursor: pointer; font-weight: 600; font-size: 1.02rem;
  list-style: none; display: flex; align-items: center; gap: 14px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; margin-left: auto; color: var(--heat);
  font: 400 1.4rem/1 var(--mono); transition: transform .2s;
}
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 14px 0 0; font-size: .95rem; }

/* --- disclaimer / footer -------------------------------------- */
.warn {
  border: 1px solid var(--line-warm); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,122,47,.05), transparent);
  padding: 28px 30px;
}
.warn h3 { color: var(--heat-hot); margin-bottom: 12px; }
.warn p { font-size: .89rem; margin-bottom: .7rem; }
.warn p:last-child { margin-bottom: 0; }

footer { border-top: 1px solid var(--line); padding: 48px 0 60px; background: var(--void-2); }
.foot-in { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; }
.foot-in .brand { margin-right: auto; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { color: var(--ink-faint); font-size: .88rem; text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.copy { width: 100%; color: var(--ink-faint); font-size: .8rem; margin-top: 8px; }

/* --- responsive ----------------------------------------------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 340px; margin: 0 auto; order: -1; }
  .alloc { grid-template-columns: 1fr; gap: 34px; }
  .cards, .grid-shop { grid-template-columns: repeat(2, 1fr); }
  .strip-in { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .nav-links { display: none; }
}
@media (max-width: 620px) {
  section { padding: 68px 0; }
  .hero { padding: 60px 0 56px; }
  .cards, .grid-shop { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1 1 100%; }
}

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

/* --- checkout panel -------------------------------------------- */
.co-status {
  font-size: .85rem; line-height: 1.5; margin-bottom: 12px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-dim);
}
.co-status[hidden] { display: none !important; }
.co-status.bad { border-color: var(--heat-deep); color: var(--heat-hot); background: rgba(194,65,12,.1); }

.pay-panel { padding: 20px 0; }
.pay-panel h4 {
  margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em;
}
.pay-hint { font-size: .85rem; color: var(--ink-faint); margin-bottom: 16px; }

.addr {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 12px;
}
.addr code {
  font-family: var(--mono); font-size: .76rem; color: var(--iron);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}

.pay-label {
  display: block; font: 500 .66rem/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px;
}
.pay-input {
  width: 100%; padding: 12px 13px; border-radius: var(--r-md);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--mono); font-size: .82rem;
}
.pay-input:focus { outline: none; border-color: var(--heat); }

/* --- order receipt --------------------------------------------- */
.receipt {
  max-width: 620px; margin: 0 auto;
  background: linear-gradient(180deg, var(--panel), var(--void-2));
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 38px 34px;
}
.receipt .mark {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  margin-bottom: 22px; font-size: 1.6rem;
  background: rgba(61,220,151,.12); border: 1px solid var(--ok); color: var(--ok);
}
.receipt .mark.wait { background: rgba(255,122,47,.12); border-color: var(--heat); color: var(--heat); }
.receipt .mark.bad  { background: rgba(194,65,12,.12); border-color: var(--heat-deep); color: var(--heat-hot); }
.receipt-lines { list-style: none; padding: 0; margin: 24px 0; }
.receipt-lines li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .93rem;
}
.receipt-meta {
  font: 500 .78rem/1.7 var(--mono); color: var(--ink-faint);
  word-break: break-all; margin-top: 20px;
}

/* select styled to match .pay-input */
select.pay-input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
                    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
  font-family: var(--font); font-size: .9rem;
}
select.pay-input option { background: var(--panel); color: var(--ink); }

/* --- aperture ------------------------------------------------------- */
/* A circular window onto the photograph. The vignette is drawn OVER the
   image with an inset shadow in the ground colour, so the picture itself
   is untouched - see PHOTOGRAPHY.md. */
.aperture {
  position: relative;
  width: 68%; aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 18px 44px -16px rgba(0,0,0,.9);
}
.aperture-img {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.aperture::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 46px 20px var(--void);
  pointer-events: none;
}
/* Present for alt text and for the load-error fallback only. */
.aperture-alt {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Hover lifts the specimen and pushes the photograph very slightly
   forward. Slow easing on purpose: the reference brief asks for delayed
   and physical, never snapping. */
.item:hover .aperture-img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .aperture-img { transition: none; }
  .item:hover .aperture-img { transform: none; }
}

.zoom-btn {
  position: absolute; right: 16%; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(6,6,6,.78); border: 1px solid var(--line);
  color: var(--iron); cursor: pointer; font-size: 1rem; line-height: 1;
  backdrop-filter: blur(6px); opacity: 0;
  transition: opacity .18s, border-color .18s, color .18s;
}
.item:hover .zoom-btn, .zoom-btn:focus-visible { opacity: 1; }
.zoom-btn:hover { border-color: var(--heat); color: var(--heat); }

.line-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }

/* --- lightbox ---------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,6,6,.94); backdrop-filter: blur(8px);
  display: none; place-items: center; padding: 32px 20px;
  overflow-y: auto;
}
.lightbox.on { display: grid; }
.lightbox-fig { margin: 0; max-width: 900px; width: 100%; }
.lightbox-fig img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  margin-bottom: 14px; background: var(--void-2);
}
.lightbox-fig figcaption { text-align: center; padding-top: 6px; }
.lightbox-fig figcaption strong { display: block; font-size: 1.15rem; margin-bottom: 6px; }
.lightbox-fig figcaption span { font: 500 .84rem var(--mono); color: var(--ink-faint); }
.lightbox-x {
  position: fixed; top: 20px; right: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox-x:hover { border-color: var(--heat); color: var(--heat); }

/* --- focus visibility ------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--heat);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--heat); color: #1a0d04; padding: 12px 20px;
  border-radius: 0 0 var(--r-md) 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --- transparency ------------------------------------------------ */
.t-head {
  font-size: 1.3rem; margin-bottom: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.t-intro { font-size: .93rem; max-width: 68ch; margin-bottom: 24px; }

.t-panel {
  background: var(--panel); backdrop-filter: var(--blur);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 30px; margin-bottom: 8px;
}
.t-panel-quiet { border-style: dashed; }
.t-panel p { font-size: .92rem; margin-bottom: 0; }
.t-panel p + p, .t-panel .t-addr { margin-top: 14px; }

.t-big {
  display: block; font: 800 2rem/1 var(--font);
  letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.t-cap {
  font: 500 .66rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.t-figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.t-figures-4 { grid-template-columns: repeat(4, 1fr); }

.t-addr {
  display: flex; align-items: center; gap: 12px;
  background: rgba(6,6,6,.5); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 11px 13px;
}
.t-addr .k {
  font: 500 .64rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-faint); flex: none;
}
.t-addr code {
  font-family: var(--mono); font-size: .78rem; color: var(--iron);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.t-note { font-size: .82rem; color: var(--ink-faint); margin: 14px 0 0; }

/* funds */
.fund {
  background: var(--panel); backdrop-filter: var(--blur);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; margin-bottom: 14px;
}
.fund-top { display: flex; align-items: baseline; gap: 14px; margin-bottom: 11px; }
.fund-top strong { font-size: 1rem; font-weight: 700; }
.fund-num {
  margin-left: auto; font: 500 .9rem var(--mono);
  color: var(--heat); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fund-buys { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 10px; }
.buy {
  font: 500 .76rem var(--mono); padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--ink-dim);
}
.fund-note { font-size: .85rem; color: var(--ink-faint); margin: 0; }

/* tables */
.t-scroll { overflow-x: auto; }
.t-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.t-table th {
  text-align: left; padding: 10px 12px; font: 500 .63rem/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.t-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.t-table tr:hover td { background: rgba(255,255,255,.02); }
.t-table .mono { font-family: var(--mono); font-size: .8rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* sourcing states */
.pill {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  font: 500 .66rem/1.4 var(--mono); letter-spacing: .06em;
  border: 1px solid var(--line); color: var(--ink-dim); white-space: nowrap;
}
.pill-ok   { border-color: var(--ok);      color: var(--ok); }
.pill-warn { border-color: var(--heat);    color: var(--heat); }
.pill-wait { border-color: var(--iron);    color: var(--iron); }
.pill-off  { border-color: var(--line-2);  color: var(--ink-faint); }


/* Sourcing badge, centred under the aperture. It used to hug the bottom
   left corner of a card; the archive entry has no card and is centred, so
   pinned to a corner it reads as having come loose from something. */
.tag-source {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
  font: 500 .62rem/1 var(--mono); letter-spacing: .08em;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(6,6,6,.82); backdrop-filter: blur(6px);
  border: 1px solid var(--line); color: var(--ink-dim);
}
.tag-source.stock  { border-color: rgba(61,220,151,.5);  color: var(--ok); }
.tag-source.order  { border-color: rgba(255,122,47,.5);  color: var(--heat); }
.tag-source.funded { border-color: rgba(255,196,107,.5); color: var(--heat-hot); }

@media (max-width: 900px) {
    .t-figures-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .t-figures, .t-figures-4 { grid-template-columns: 1fr; }
}

/* --- illustrated specimens ---------------------------------------- */
.specimen-art { width: 100%; height: 100%; display: block; }
.art-note {
  position: absolute; right: 12px; bottom: 12px;
  font: 500 .6rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(6,6,6,.72); border: 1px solid var(--line);
  color: var(--ink-faint); backdrop-filter: blur(6px);
}

.thumb-art { width: 100%; height: 100%; display: block; border-radius: var(--r-sm); }

/* --- waitlist ----------------------------------------------------- */
.wait-form {
  margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.wait-form[hidden] { display: none !important; }
.wait-form .pay-label { margin-bottom: 0; }
.wait-msg {
  margin: 2px 0 0; font-size: .81rem; line-height: 1.5;
}
.wait-msg[hidden] { display: none !important; }
.wait-msg.ok  { color: var(--ok); }
.wait-msg.bad { color: var(--heat-hot); }
.tag-stock.soon { color: var(--heat); }

.t-hint { font-size: .68rem; color: var(--ink-faint); letter-spacing: .04em; }

.fund-spec {
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
}
.fund-spec dt {
  font: 500 .62rem/1.6 var(--mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.fund-spec dd { margin: 0; font-size: .84rem; color: var(--ink-dim); line-height: 1.55; }
.buy-buffer { border-style: dashed; color: var(--heat); }
.t-sub {
  margin: 0 0 6px; font-size: .92rem; font-weight: 700; color: var(--ink);
}
.t-panel .t-sub + p { margin-bottom: 16px; }
.t-panel .t-sub + p:last-child { margin-bottom: 0; }
@media (max-width: 620px) { .fund-spec { grid-template-columns: 1fr; gap: 2px 0; } }

/* three payment routes: card, native currency, token */
.pay-toggle { grid-template-columns: repeat(3, 1fr); }
.pay-opt { padding: 11px 8px; font-size: .84rem; }
.pay-opt small { font-size: .68rem; }
@media (max-width: 380px) { .pay-toggle { grid-template-columns: 1fr; } }

/* prices are quoted in what you actually pay */
.price-sym { font-size: .62em; font-weight: 700; color: var(--ink-dim); letter-spacing: .02em; }
.line-price small {
  display: block; font: 500 .66rem var(--mono);
  color: var(--ink-faint); margin-top: 2px; letter-spacing: .04em;
}
.pay-toggle { grid-template-columns: repeat(2, 1fr); }

/* --- price: two routes, one or the other --------------------------- */
/* Side by side these read as a single combined price. Stacked, with an
   "or" rule between them, they read as the alternatives they are. */
.price-block { margin-top: auto; margin-bottom: 16px; }

.price-line {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.price-main {
  font: 800 1.34rem/1.2 var(--font); letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.price-main-tok { color: var(--heat); }
.price-sym {
  font-size: .58em; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-faint);
}
.price-main-tok .price-sym { color: var(--heat-deep); }

/* the rule that carries the word */
.price-or {
  display: flex; align-items: center; gap: 10px;
  margin: 7px 0; color: var(--ink-faint);
  font: 500 .64rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
}
.price-or::before, .price-or::after {
  content: ""; height: 1px; background: var(--line); flex: 1;
}
.price-or span { flex: none; }

.price-save {
  font: 500 .64rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ok); border: 1px solid var(--ok); border-radius: 999px;
  padding: 4px 8px; white-space: nowrap;
}

/* One payment route is not a choice — do not present it as a toggle. */
.pay-toggle.single { display: none; }
.pay-opt[hidden] { display: none !important; }

/* --- payment network -------------------------------------------- */
/* An address looks identical on every EVM chain, so the network is the
   one thing a payer must get right and the one thing nothing on screen
   used to state plainly. It sits directly above the address. */
.pay-net {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--heat); border-radius: var(--r-md);
  background: rgba(255,122,47,.09);
}
.pay-net-k {
  font: 500 .64rem/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--heat); flex: none;
}
.pay-net-v { font-weight: 700; font-size: .93rem; color: var(--ink); }
.pay-net-id {
  font: 500 .74rem var(--mono); color: var(--ink-faint); margin-left: 4px;
}
.pay-warn {
  font-size: .79rem; line-height: 1.5; color: var(--ink-dim);
  margin: 0 0 14px;
}
.pay-net-or {
  margin: 0 8px; font: 500 .7rem var(--mono); color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .1em;
}

/* A quiet way back to the manual flow, without it competing with the
   primary action the way a second button would. */
.linkish {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 0; cursor: pointer;
  font: 500 .82rem var(--font); color: var(--ink-faint);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--ink-dim); }

/* --- choose the payment network ---------------------------------- */
.pay-net-pick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.pay-net-opt {
  padding: 11px 10px; border-radius: var(--r-md); cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-dim);
  font: 700 .88rem/1.25 var(--font); text-align: center; transition: .18s;
}
.pay-net-opt:hover { border-color: var(--line-2); color: var(--ink); }
.pay-net-opt.on {
  border-color: var(--heat); background: rgba(255,122,47,.12); color: var(--heat-hot);
}
.pay-net-opt small {
  display: block; margin-top: 3px;
  font: 500 .66rem var(--mono); color: var(--ink-faint); letter-spacing: .04em;
}
.pay-net-opt.on small { color: var(--heat); }

/* --- which account pays ------------------------------------------- */
/* Selecting an account in MetaMask does not hand it to the site, so the
   page has to name the one it will actually spend from, and offer the
   wallet's own picker to change it. */
.pay-acct {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
}
.pay-acct-k {
  font: 500 .62rem/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); flex: none;
}
.pay-acct-v {
  font: 500 .82rem var(--mono); color: var(--iron);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pay-acct-change {
  flex: none; background: none; border: 0; cursor: pointer;
  font: 600 .76rem var(--font); color: var(--heat);
  text-decoration: underline; text-underline-offset: 3px; padding: 0;
}
.pay-acct-change:hover { color: var(--heat-hot); }

/* The tagline sits with the footer lockup, not in the nav - up there it
   would compete with the links for the same glance. */
.foot-tag {
  font: 400 .62rem/1 var(--mono);
  letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
  color: var(--ink-faint); align-self: center;
}

/* --- hero specimen ------------------------------------------------ */
/* A photograph of an actual rock rather than a drawn sphere. It keeps the
   float and the entry glow the drawn one had, so it sits in the sky
   rather than being pasted on top of it. The glow matters more here than
   it did for the ball: the rock is genuinely dark, and the warm halo is
   what separates it from a near-black page. */
.meteor-photo {
  width: 74%; height: auto; display: block;
  filter: drop-shadow(0 0 70px rgba(255,122,47,.42))
          drop-shadow(0 18px 40px rgba(0,0,0,.7));
  animation: float 9s ease-in-out infinite;
}

/* --- the wordmark ------------------------------------------------- */
/* Live text rather than the supplied PNG. The artwork is 402x63, which
   softens on a retina screen and is white-only, so it disappears on an
   invoice or a provenance card. Cormorant Garamond reads as cut stone
   rather than screen UI - a serif with sharp, engraved strokes - and
   being text it stays crisp at any size, recolours for any ground, and
   can be selected and searched.
   The PNG lockup still earns its place on the social card, where the size
   is fixed and the ground is always dark. */
.brand {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .2em;
}
.foot-tag {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  font-size: .66rem;
  color: var(--ink-faint);
  align-self: center;
}

/* The home page's slice of the shop. */
.home-more { margin: 34px 0 0; text-align: center; }

/* --- nav lockup ---------------------------------------------------- */
/* Name over tagline, set beside the mark. The tagline is deliberately
   much smaller and dimmer: at nav size two lines of equal weight read as
   clutter, and the second line is there to be noticed once, not read
   every visit. */
.brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 500; font-size: 1.1rem; letter-spacing: .22em;
  color: var(--ink);
}
.brand-tag {
  font-family: var(--mono);
  font-weight: 400; font-size: .5rem; letter-spacing: .3em;
  color: var(--ink-faint); text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 520px) { .brand-tag { display: none; } }

/* --- no sideways scrolling, ever -------------------------------- */
/* A flex or grid child defaults to min-width:auto, which means it will
   not shrink below its own content. A nowrap line of text inside one -
   a contract address, a transaction hash - therefore sets a floor on the
   whole layout, and on a phone the entire page slid sideways because of
   it. The min-width:0 above releases each of those; this is the backstop
   for anything added later. */
.hero-grid > *, .alloc > *, .foot-in > *, .nav-in > * { min-width: 0; }

/* The hero's entry glow is transform: scale(1.5), and a transformed box
   still counts toward the page's scrollable width even though it is only
   a blur. On a phone that alone made the document 433px wide inside a
   375px screen.

   `clip` rather than `hidden`: hidden turns the element into a scroll
   container, which breaks the sticky nav. clip just clips. */
html, body { overflow-x: clip; }

/* The shop's pointer to the full terms, now that they live in the FAQ. */
.shop-note {
  font-size: .88rem; color: var(--ink-dim); max-width: 70ch;
  padding: 16px 18px; border-left: 2px solid var(--line-2);
  background: rgba(255,255,255,.02); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.shop-note a { color: var(--heat); }

/* --- anchored links land below the sticky nav -------------------- */
/* Without this an anchor scrolls the section's top edge to the top of
   the viewport, where the 66px sticky bar is already sitting - so the
   heading you clicked for is hidden behind it and the section looks like
   it starts mid-sentence. scroll-margin-top reserves that space. */
:target { scroll-margin-top: 82px; }
section[id], [id^="fund-"], .t-head { scroll-margin-top: 82px; }

/* --- specimen record ------------------------------------------------ */
.spec-back {
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none;
}
.spec-back:hover { color: var(--ink-dim); }

.spec-layout {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 56px; align-items: start; margin-top: 36px;
}
.spec-aperture { width: 100%; }

/* Wraps just the aperture, nothing else - .spec-fig also carries the
   variation-notice paragraph below it, and positioning the button
   against THAT box would anchor it to the bottom of the caption text
   instead of the photograph. Same reasoning as .item-fig on the grid
   card, which stays this tight for the same reason. */
.spec-photo { position: relative; }

/* The grid card's .zoom-btn is tuned for its 68%-wide aperture and only
   shows on .item:hover - neither applies here: spec-aperture is 100%
   wide, and there is no card to hover on a single-specimen page, so the
   control needs its own position and needs to stay visible unprompted. */
.spec-photo .zoom-btn { right: 16px; bottom: 16px; opacity: 1; }

.spec-name {
  font-family: var(--font-display);
  font-weight: 400; font-size: 2.6rem; line-height: 1.1;
  letter-spacing: .1em; color: var(--ink);
  margin: 0 0 28px;
}
.spec-table { border-top: 1px solid var(--line); }
.spec-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .13em; text-transform: uppercase;
}
.spec-k { color: var(--ink-faint); }
.spec-v { color: var(--ink); text-align: right; }
.spec-desc {
  margin: 24px 0 28px; color: var(--ink-dim);
  font-size: .95rem; line-height: 1.8;
}

@media (max-width: 820px) {
  .spec-layout { grid-template-columns: 1fr; gap: 34px; }
  .spec-name { font-size: 2rem; }
}