/* ============================================================
   LOCAL SOLAR SYSTEM, homepage
   Loaded by index.html only, after styles.css. Section layout for the
   homepage: the object-first hero, the walk to Neptune, the set of nine,
   provenance, the scale picker, and the order card. The plaque component
   itself lives in styles.css because the order pages share it.
   ============================================================ */

:root {
  /* homepage aliases onto the site tokens */
  --paper: var(--surface-base);
  --paper-raised: var(--surface-raised);
  --paper-sunken: var(--surface-sunken);
  --paper-line: #E2D9C6;
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --ink-faint: var(--text-faint);
  --brass-text: var(--text-brass);
  --brass: var(--accent);
  --brass-deep: var(--accent-hover);
  --brass-bright: #D9B877;
}

/* ---------- helpers ---------- */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-text);
}
.mid { color: var(--brass-text); }
.display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.12; text-wrap: balance; }
.lede { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--ink-soft); text-wrap: balance; }
.mono-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.band { padding: clamp(64px, 9vw, 128px) 0; }
.band-sunken { background: var(--paper-sunken); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.band, #walk, .home-hero { scroll-margin-top: calc(var(--header-h, 73px) + 8px); }
.sec-head { max-width: 680px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.sec-head h2 { font-size: clamp(24px, 3.2vw, 38px); margin: 16px 0 14px; }
.sec-head p { color: var(--ink-soft); line-height: var(--lh-body); }
/* a section that runs without a headline: the eyebrow carries the space */
.sec-head .eyebrow + p,
.prov .eyebrow + p,
.order-card .eyebrow + p { display: block; margin-top: 18px; }
.sec-head .eyebrow + p { font-size: 19px; color: var(--ink); max-width: 34em; margin-left: auto; margin-right: auto; }
.prov .eyebrow + p { font-size: 19px; }

/* ---------- motion ---------- */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { opacity: 0.14; } 50% { opacity: 0.7; } }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-38px, 16px, 0); } }
@keyframes sunbreath { 0%, 100% { box-shadow: 0 0 18px rgba(185,138,46,0.35); } 50% { box-shadow: 0 0 36px rgba(185,138,46,0.68); } }
@keyframes shoot {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(20deg) scaleX(0.3); }
  3% { opacity: 0.9; }
  16% { opacity: 0; transform: translate3d(300px, 110px, 0) rotate(20deg) scaleX(1); }
  100% { opacity: 0; transform: translate3d(300px, 110px, 0) rotate(20deg) scaleX(1); }
}
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- hero ---------- */

.home-hero { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 104px); overflow: hidden; }
.home-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.home-hero h1 {
  font-size: clamp(25px, 3.4vw, 42px);
  letter-spacing: 0.05em;
  line-height: 1.12;
  text-transform: uppercase;
  margin: 18px 0 20px;
}
.home-hero p.sub { max-width: 32em; color: var(--ink-soft); line-height: var(--lh-body); }
.home-hero .edition { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--paper-line); display: flex; gap: 28px; flex-wrap: wrap; }
.home-hero .edition b { display: block; font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.home-hero .edition span { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.home-hero .ctas { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-hint { margin-top: 14px; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-text); }

.hero-obj { position: relative; }
.orbit-field { position: absolute; left: -14%; right: -14%; top: -16%; bottom: -16%; pointer-events: none; z-index: 0; }
.orbit-field svg { width: 100%; height: 100%; overflow: visible; }
.orbit-field .ring { fill: none; stroke: var(--paper-line); stroke-width: 1; }
.orbit-field .rot { transform-box: view-box; transform-origin: 200px 200px; animation: spin linear infinite; }
.orbit-field .r1 { animation-duration: 54s; }
.orbit-field .r2 { animation-duration: 96s; animation-direction: reverse; }
.orbit-field .r3 { animation-duration: 168s; }
.orbit-field .mote { fill: var(--brass); }
.hero-obj .plaque { position: relative; z-index: 1; }
/* the place line is a text field: a dashed underline and a text cursor say so
   before anyone clicks it */
#heroPlaque .p-loc input { cursor: text; border-bottom: 1px dashed var(--line40); padding-bottom: calc(5 * var(--u)); margin-bottom: calc(-5 * var(--u)); border-radius: 0; }
#heroPlaque .p-loc input:hover { border-bottom-color: var(--e700); }
#heroPlaque .p-loc input:focus { border-bottom-color: transparent; }

/* material picker */
.mats { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.mat {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius-sm);
  min-height: 44px; padding: 9px 14px; cursor: pointer;
}
.mat i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(18,17,16,0.25); }
.mat[data-m="bronze"] i { background: radial-gradient(circle at 35% 30%, #3E3831, #0D0B0A); }
.mat[data-m="brass"] i { background: linear-gradient(130deg, #E8CE8A, #A8863E); }
.mat[data-m="acrylic"] i { background: linear-gradient(130deg, #EDF1F4, #C2CCD3); }
.mat[aria-pressed="true"] { border-color: var(--brass); color: var(--brass-text); box-shadow: 0 0 0 1px var(--brass); }
.mat:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.mat .price { color: var(--ink-faint); font-weight: 400; }

/* ---------- the walk ---------- */

#walk-intro { padding-top: clamp(24px, 4vw, 56px); }
#walk-track { position: relative; }
#walk-sticky {
  position: sticky;
  top: var(--header-h, 73px);
  height: calc(100vh - var(--header-h, 73px));
  height: calc(100svh - var(--header-h, 73px));
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--paper);
}
.walk-stage-label { position: absolute; top: clamp(18px, 4vh, 44px); left: 0; right: 0; text-align: center; padding: 0 24px; }
.walk-count { text-align: center; }
.walk-count .ft { font-family: var(--font-mono); font-weight: 700; font-size: clamp(56px, 11vw, 130px); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.walk-count .ft small { font-size: 0.32em; letter-spacing: 0.14em; color: var(--brass-text); font-weight: 600; vertical-align: baseline; margin-left: 0.2em; }
.walk-count .light { margin-top: 10px; font-family: var(--font-mono); font-size: clamp(12px, 1.4vw, 13px); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.walk-count .light b { color: var(--brass-text); font-weight: 600; }
.walk-lane { position: relative; height: 176px; margin-top: clamp(18px, 4vh, 40px); }
.walk-line { position: absolute; left: 0; right: 0; top: 84px; height: 1px; background: var(--paper-line); }
.walk-you { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); text-align: center; z-index: 3; }
.walk-you .pin { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); margin: 0 auto; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--ink); }
/* YOU sits below the planet labels (the lower row ends near 140px), so standing
   on a planet never overprints its name */
.walk-you .tag { margin-top: 74px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: var(--ink-faint); border: 0; padding: 0; }
.wbody { position: absolute; top: 0; transform: translateX(-50%); text-align: center; width: 120px; transition: opacity 0.2s; }
.wbody .orb { height: 44px; display: flex; align-items: flex-end; justify-content: center; }
.wbody .dot-b { border-radius: 50%; background: var(--ink-soft); }
.wbody.sun .dot-b { background: radial-gradient(circle at 35% 30%, #E9CC83, #B98A2E); box-shadow: 0 0 24px rgba(185,138,46,0.5); animation: sunbreath 7s ease-in-out infinite; }
.wbody .stem { width: 1px; height: 26px; background: var(--paper-line); margin: 6px auto 0; }
/* Venus sits 8 ft from Earth and 10 from Mercury: its label drops a row so the
   inner planets never overprint one another */
.wbody.low .stem { height: 54px; }
.wbody .nm { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.2em; margin-top: 8px; color: var(--ink); }
.wbody .d { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-faint); margin-top: 3px; }
.walk-note { position: absolute; left: 0; right: 0; bottom: clamp(68px, 9vh, 96px); text-align: center; padding: 0 24px; }
.walk-note .lede { opacity: 0; transition: opacity 0.45s; font-size: clamp(15px, 2vw, 19px); }
.walk-note .lede.on { opacity: 1; }
.walk-skip {
  position: absolute; right: 18px; bottom: 14px; z-index: 4;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius-sm);
}
.walk-skip:hover { color: var(--brass-text); border-color: var(--brass); }
.walk-skip:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* ---------- set of nine (vitrine band) ---------- */

.band-vitrine {
  position: relative; overflow: hidden;
  background: radial-gradient(85% 70% at 50% 0%, #1F1B18 0%, #0F0E0D 58%, #0A0909 100%);
  border-top: 1px solid #060505; border-bottom: 1px solid #060505;
}
.band-vitrine > .wrap { position: relative; z-index: 1; }
.stars { position: absolute; inset: -6%; pointer-events: none; animation: drift 74s ease-in-out infinite alternate; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #F0E7D2; opacity: 0.16; animation: twinkle ease-in-out infinite; }
.shooter {
  position: absolute; top: 14%; left: 4%; width: 76px; height: 1px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(240,231,210,0.85));
  animation: shoot 17s linear infinite 6s;
}
.band-vitrine .eyebrow { color: #CFB988; }
.band-vitrine .sec-head h2 { color: #EEE6D4; }
.band-vitrine .sec-head p { color: #B5AD9E; }
.band-vitrine .set-cap { color: #8A8272; }
.set-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.set-grid .plaque { max-width: none; filter: drop-shadow(0 22px 30px rgba(0,0,0,0.65)); }
.set-cap { margin-top: 26px; text-align: center; }

/* ---------- provenance ---------- */

.prov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
/* the close-up runs the full height of the record beside it */
.prov > div:last-child { display: flex; flex-direction: column; }
.prov > div:last-child .macro { flex: 1 1 auto; min-height: 300px; }
.prov .rows { margin-top: 26px; border-top: 1px solid var(--paper-line); }
.prov .row { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--paper-line); }
.prov .row .k { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-text); padding-top: 3px; }
.prov .row .v { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.macro {
  position: relative; height: 300px; border-radius: 5px; overflow: hidden;
  background: radial-gradient(120% 150% at 22% 0%, #3E3831 0%, #1A1715 58%, #0D0B0A 100%);
  border: 1px solid #060505;
  box-shadow: inset 0 2px 2px rgba(255,247,216,0.16), inset 0 -3px 7px rgba(0,0,0,0.55), 0 24px 40px -22px rgba(18,17,16,0.55);
}
.macro .grain {
  position: absolute; inset: 0; opacity: 0.30; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.macro .word {
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%); line-height: 1;
  font-family: var(--font-display); font-size: 140px; letter-spacing: 0.07em; color: #EEDFB0; white-space: nowrap;
  text-shadow: -1px -1px 0 rgba(255,248,222,0.32), 1.2px 2px 2px rgba(0,0,0,0.6), 0 4px 6px rgba(0,0,0,0.32);
}
.macro .hole { --u: 1px; width: 32px; height: 32px; top: 26px; left: 28px; }
.macro-cap { margin-top: 12px; text-align: center; }

/* ---------- one number ---------- */

.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.chip {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius-pill);
  min-height: 44px; padding: 10px 18px; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--on-accent); }
.chip:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); }
.fig { background: var(--paper); padding: 24px 20px; }
.fig b { display: block; font-family: var(--font-mono); font-weight: 700; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: 0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fig i { display: block; font-style: normal; font-family: var(--font-serif); font-size: 14.5px; color: var(--brass-text); margin-top: 4px; min-height: 1.4em; }
.fig span { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-top: 9px; }
.faster { margin-top: 30px; text-align: center; }
.faster .lede { font-size: clamp(17px, 2.2vw, 21px); }

/* ---------- order ---------- */

.order-card {
  max-width: 660px; margin: 0 auto; text-align: center;
  background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: 5px;
  padding: clamp(30px, 4.5vw, 52px);
  box-shadow: 0 30px 50px -30px rgba(18,17,16,0.35);
}
.order-card p { color: var(--ink-soft); max-width: 34em; margin: 0 auto; line-height: var(--lh-body); }
.price-lines { margin: 26px auto; max-width: 420px; border-top: 1px solid var(--paper-line); }
.price-lines .pl { display: flex; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid var(--paper-line); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; }
.price-lines .pl .m { text-transform: uppercase; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.12em; font-size: 12px; padding-top: 1px; }
.price-lines .pl b { font-weight: 700; color: var(--ink); }
/* the CTA column shrink-wraps to the button; width:0 + min-width:100% keeps the
   fine print from driving that width, so it wraps to exactly the button's measure */
.order-act { margin-top: 26px; min-width: 236px; display: inline-flex; flex-direction: column; align-items: stretch; gap: 13px; }
.order-act .btn { justify-content: center; }
.order-fine { width: 0; min-width: 100%; margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); line-height: 1.6; }

/* ---------- responsive ---------- */

@media (max-width: 920px) {
  .home-hero .wrap { grid-template-columns: 1fr; }
  .home-hero .hero-copy { order: 2; }
  .home-hero .hero-obj { order: 1; }
}
@media (max-width: 880px) {
  .prov { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .set-grid { grid-template-columns: repeat(2, 1fr); }
}
.set-swipe { display: none; }
@media (max-width: 520px) {
  /* the nine as one swipeable row: the next plaque peeks in from the right */
  .set-grid {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * clamp(20px, 4vw, 48px)); padding: 0 clamp(20px, 4vw, 48px) 44px;
    scrollbar-width: none;
  }
  .set-grid::-webkit-scrollbar { display: none; }
  .set-grid .plaque { flex: 0 0 82%; scroll-snap-align: center; margin: 0; }
  .set-swipe { display: block; text-align: center; margin: -14px 0 0; color: #B5AD9E; }
  .set-cap { margin-top: 18px; }
  .walk-skip { right: 12px; bottom: 10px; }
  .prov .row { grid-template-columns: 1fr; gap: 6px; }
  .macro { height: 220px; }
  .macro .word { font-size: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-field .rot, .stars, .stars i, .shooter, .wbody.sun .dot-b { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .walk-note .lede, .wbody { transition: none; }
}