/* ═══════════════════════════════════════════════════════════
   YOUR CHOICES

   Written by the picture library tool, under the "Design" tab.
   It loads after seraphim.css, so anything set here wins.
   Change it with the tool rather than by hand - the tool will
   write over this file (keeping a backup first).
   ═══════════════════════════════════════════════════════════ */


:root {
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --warm-ivory: #f2ecdd;
  --gold:       #c89a5e;
  --burgundy:   #4e1620;
  --warm-black: #1a130f;

  --section:    clamp(2.60rem, 4.60vw, 4.75rem);
  --section-sm: clamp(1.60rem, 2.80vw, 2.90rem);
  --gutter:     clamp(1.25rem, 3.20vw, 3.00rem);
  --wide:       1680px;
}

html { font-size: clamp(17.0px, 0.42vw + 15.4px, 20.0px); }

.on-ivory { background: #f2ecdd; }

.prose p + p,
.body + .body,
.lede + .body,
.body + .lede { margin-top: 0.70rem; }

/* ── Brief features (Oct 2026): stone of the day, adornment, gifting, community, currency ── */
.sod { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.sod-gem { width: clamp(120px, 16vw, 200px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.55), transparent 22%), radial-gradient(circle at 50% 55%, var(--gem), color-mix(in srgb, var(--gem) 45%, #000) 78%);
  box-shadow: 0 0 0 1px var(--hairline), 0 0 0 10px transparent, 0 0 0 11px var(--hairline), 0 30px 70px rgba(0,0,0,.45); }
.ages { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.panel p.meta { font-family: var(--sans); font-size: 0.62rem; line-height: 1.6; letter-spacing: 0.22em; text-transform: uppercase; color: #a39886; /* 4.5:1+ on panel bg */ margin-top: .9rem; }
.ages .panel p.meta { color: var(--gold); margin: 0 0 .9rem; }
.tier-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--hairline); padding-top: 1.6rem; margin: 4.5rem 0 2.2rem; }
/* currency: a compact select in the header, styled as a nav link */
.cur-select { flex: none; appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.15em; color: var(--warm-ivory); opacity: .82;
  padding: .5rem 1rem .5rem .2rem; min-height: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 6px) 52%, calc(100% - 2px) 52%; background-size: 4px 4px; background-repeat: no-repeat; }
.cur-select:hover, .cur-select:focus-visible { opacity: 1; color: var(--gold); }
.cur-select option { background: var(--warm-black); color: var(--warm-ivory); }
@media (min-width: 1300px) { .cur-select { position: absolute; right: calc(var(--gutter) - .2rem); top: 50%; transform: translateY(-50%); }
  .nav-links:first-of-type { margin-left: 3.4rem; } .nav-links:last-of-type { margin-right: 3.4rem; } }
@media (min-width: 1300px) and (max-width: 1480px) { .cur-select { right: 1.8rem; } }
@media (max-width: 1299px) { .cur-select { margin-left: auto; margin-right: -.4rem; } }
@media (max-width: 900px) { .ages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sod { grid-template-columns: 1fr; justify-items: center; text-align: center; } .sod .lede { margin-inline: auto; } .ages { grid-template-columns: 1fr; } }