/* Moonshot — shared foundation for every page.
   Design tokens, reset, and the chrome that repeats across pages.
   Page-specific rules live in site.css (home) and pages.css (the rest). */

:root {
  --bg: #ffffff;
  --surface: #f5f5f7;
  --surface2: #ececee;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #86868b;
  --line: rgba(0, 0, 0, .10);
  --line2: rgba(0, 0, 0, .06);
  --accent: #e8590c;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .05);
  --r: 18px;
  --gut: 96px;

  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0b0b0d;
  --surface: #151518;
  --surface2: #1e1e22;
  --text: #f5f5f7;
  --muted: #9b9ba3;
  --faint: #78787f;
  --line: rgba(255, 255, 255, .12);
  --line2: rgba(255, 255, 255, .07);
  --shadow: 0 30px 70px -24px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

@media (min-width: 1201px) { :root { --gut: 144px; } }
@media (max-width: 1180px) { :root { --gut: 72px; } }
@media (max-width: 700px)  { :root { --gut: 32px; } }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: var(--text); text-decoration: none; }

h1, h2 { font-family: var(--font-display); }

.dim { color: var(--faint); font-weight: 400; }

.spacer { flex: 1; }

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

.eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 26px;
}

/* ------------------------------------------------------------ theme toggle */

.theme-toggle {
  width: 30px; height: 30px;
  border-radius: 10px; border: none;
  background: var(--surface); color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer; font-size: 13px; padding: 0;
  font-family: inherit;
  transition: color .2s ease, background .2s ease;
}
.theme-toggle:hover { color: var(--text); background: var(--surface2); }

/* The button shows the appearance you would switch TO, so light mode shows
   the moon. Swapped in CSS off the root attribute rather than in JS, so it is
   already correct on the very first paint.

   All four rules deliberately select on the icon classes alone. An earlier
   `.theme-toggle svg { display: block }` outranked `.theme-toggle__sun`
   (0,1,1 beats 0,1,0), so the sun could never be hidden and both showed at
   once. Keep these at matching specificity. */
.theme-toggle__moon,
.theme-toggle__sun { display: block; }

.theme-toggle__sun { display: none; }

:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  font-size: 14px; font-weight: 600;
  padding: 12px 22px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: filter .2s ease, background .2s ease;
}

.btn--solid { color: var(--bg); background: var(--text); }
.btn--solid:hover { color: var(--bg); filter: brightness(1.15); }

.btn--soft { color: var(--text); background: var(--surface); }
.btn--soft:hover { color: var(--text); background: var(--surface2); }

.btn--sm { font-size: 13px; padding: 8px 16px; border-radius: 10px; white-space: nowrap; }
.btn--sm:hover { filter: brightness(1.2); }

/* Home hero only. The press kit and privacy buttons stay at the base size,
   as in the design. */
.btn--lg { font-size: 16px; padding: 15px 28px; border-radius: 14px; }

/* The honeypot: never shown, never announced. Bots that fill it are dropped. */
.hp-field {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* ------------------------------------------------------------- spec strip */

.specs {
  border-radius: 20px;
  border: 1px solid var(--line);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
}

.spec__label { font-size: 12px; color: var(--faint); margin-bottom: 6px; }
.spec__value { font-size: 15px; }

/* ----------------------------------------------------------- image slots */
/* A slot fills its positioned parent. If the <img> inside fails to load
   (i.e. the artwork has not been dropped in yet) site.js marks the slot
   empty and a caption shows what belongs there. */

.slot { position: absolute; inset: 0; display: block; }

.slot img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.slot--contain img { object-fit: contain; }

.slot__hint { display: none; }

.slot.is-empty img { display: none; }

.slot.is-empty .slot__hint {
  display: grid;
  place-items: center;
  position: absolute; inset: 0;
  padding: 16px;
  text-align: center;
  font-size: 12px; line-height: 1.45;
  color: var(--faint);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px dashed var(--line);
  border-radius: 12px;
}

.slot__hint b {
  display: block;
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  margin: 90px auto 0;
  padding: 28px var(--gut) 56px;
  border-top: 1px solid var(--line2);
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: flex-start;
  font-size: 13px; color: var(--faint);
}

.footer-brand { display: flex; flex-direction: column; gap: 18px; }

.footer-brand__name {
  display: flex; align-items: center; gap: 8px;
  color: var(--muted);
}

.footer-brand__mark {
  width: 14px; height: 14px; border-radius: 5px;
  background: var(--accent); display: block;
}

.footer-brand__meta {
  font-size: 13px; line-height: 1.5;
  color: var(--faint); max-width: 240px;
}

.footer-brand__meta a { color: var(--muted); }
.footer-brand__meta a:hover { color: var(--text); }

.footer-links { display: flex; gap: 20px; }
.footer-links a { color: inherit; }

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

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