/* Aether Tools — design tokens per handoff (design/design_handoff_aethertools_home) */
:root {
  --bg: #050507;
  --card-bg: #0a0b0f;
  --tile-fill: #080a10;
  --greentext-bg: #070b08;
  --rule: #14161d;
  --card-border: #1a1d26;
  --chip-border: #232734;
  --hairline: #3a4152;
  --heading: #ece8de;
  --wordmark: #e8e4da;
  --text: #d7d4cc;
  --card-body: #b9bdc7;
  --hero-sub: #a9adb8;
  --chrome: #9aa1af;
  --dim: #8a93a6;
  --dim-2: #8f97a8;
  --dim-3: #99a1b2;
  --eyebrow: #7f8798;
  --greentext: #8fd06f;
  --phosphor: #39ff14;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--phosphor); color: var(--bg); }

/* Void plate — fixed div-style layer (not background-attachment, which iOS
   Safari mishandles). Sits under the starfield and everything else. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url(/img/bg_void.webp) center / cover no-repeat;
  pointer-events: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- starfield (dots injected by js/site.js) ---- */
#starfield {
  position: fixed;
  inset: -60px;
  pointer-events: none;
  z-index: 0;
  animation: at-drift 240s linear infinite alternate;
}
#starfield .star {
  position: absolute;
  border-radius: 50%;
  background: #cfd6e4;
}

@keyframes at-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50px, -34px, 0); }
}

/* Breathe is the only pulse allowed on the site — >=3s cycles, no flashing. */
@keyframes at-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

/* ---- header ---- */
.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 32px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--chrome);
  border-bottom: 1px solid var(--rule);
}
.brand-row { display: flex; align-items: baseline; gap: 12px; }
.wordmark { color: var(--wordmark); }
.brand-tag { color: var(--dim-2); }
.header-status { display: flex; align-items: baseline; gap: 16px; }
.signal-dot { color: var(--phosphor); opacity: 0.8; }

/* ---- hero ---- */
.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px 24px 40px;
}
.eyebrow {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--eyebrow);
}
.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--heading);
  max-width: 15ch;
}
.hero h1 em { font-style: italic; color: #d9d2bf; }
.hero-sub {
  margin: 0 0 30px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--hero-sub);
  max-width: 56ch;
}
.greentext {
  margin: 0 0 48px;
  padding: 16px 22px;
  border: 1px solid #16241a;
  background: var(--greentext-bg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--greentext);
  text-align: left;
}

/* ---- ephemeris wheel ---- */
.wheel-wrap {
  position: relative;
  width: min(720px, 94vw);
}
/* Static engraved halo behind the rotating SVG — radially symmetric so the
   rotation reads against it. */
.wheel-halo {
  position: absolute;
  inset: -3%;
  background: url(/img/bg_hero_mandala.webp) center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}
.ephemeris {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}
.rim-numeral {
  font-family: var(--mono);
  font-size: 11px;
  fill: #6a7280;
  opacity: 0.7;
  text-anchor: middle;
}
.glyph {
  font-family: var(--serif);
  font-size: 30px;
  fill: #c6cbd8;
  opacity: 0.35;
  text-anchor: middle;
  dominant-baseline: central;
}
.tile { cursor: pointer; outline: none; }
.tile-glow {
  fill: var(--accent);
  opacity: 0.1;
  transition: opacity 0.4s;
}
.tile-ring {
  fill: var(--tile-fill);
  stroke: var(--accent);
  stroke-width: 1;
  stroke-opacity: 0.55;
  transition: stroke-opacity 0.4s;
}
.tile-icon { stroke: var(--accent); fill: none; }
.tile-icon .filled { fill: var(--accent); stroke: none; }
.tile-label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 2px;
  fill: var(--accent);
  text-anchor: middle;
  opacity: 0;
  transition: opacity 0.3s;
}
.tile-hit { fill: transparent; }
/* Focus behaves identically to hover (handoff §Interactions). */
.tile:hover .tile-glow, .tile:focus .tile-glow { opacity: 0.3; }
.tile:hover .tile-ring, .tile:focus .tile-ring { stroke-opacity: 1; }
.tile:hover .tile-label, .tile:focus .tile-label { opacity: 1; }
.center-wordmark {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 4px;
  fill: var(--wordmark);
  text-anchor: middle;
}
.center-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  fill: var(--chrome);
  text-anchor: middle;
}
.wheel-caption {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--dim-3);
}

/* ---- instrument roster ---- */
.roster {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px 80px;
}
.roster .eyebrow { margin: 0 0 10px; }
.roster h2 {
  margin: 0 0 36px;
  font-size: 34px;
  font-weight: 400;
  color: var(--heading);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.card {
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 40px;
}
.card-head { display: flex; align-items: center; gap: 14px; }
.card-icon-img {
  flex-shrink: 0;
  display: block;
  border-radius: 6px;
  border: 1px solid var(--chip-border);
}
.card-head h3 {
  margin: 0;
  flex: 1;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--chrome);
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--phosphor);
  animation: at-breathe 4s ease-in-out infinite;
}
/* Future "tuning" state: hollow dot, no animation. */
.status-dot.tuning {
  background: transparent;
  border: 1px solid var(--phosphor);
  animation: none;
}
.card-desc {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--card-body);
}
.tags {
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--dim);
}
.tags span { border: 1px solid var(--chip-border); padding: 4px 9px; }
.card-links {
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
}
.card-links a {
  color: var(--tint);
  text-decoration: none;
  border-bottom: 1px solid var(--tint-border);
}
.card-links a:hover {
  color: var(--tint-hover);
  border-bottom-color: var(--tint);
}
.card-links a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.empty-slot {
  border: 1px dashed var(--card-border);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.slot-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--dim-2);
}
.slot-note {
  margin: 0;
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  color: var(--eyebrow);
}

/* ---- footer ---- */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  padding: 40px 32px 48px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 2;
  color: var(--dim);
}
.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
.site-footer .wordmark { margin: 0 0 4px; letter-spacing: 0.14em; }
.footer-mail {
  color: #9fb3d4;
  text-decoration: none;
  border-bottom: 1px solid var(--chip-border);
}
.footer-mail:hover { color: #d4e2f7; }
.footer-heading { margin: 0 0 4px; letter-spacing: 0.18em; color: var(--dim-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-links a {
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid var(--chip-border);
}
.footer-links a:hover { color: var(--text); }
.site-footer a:focus-visible {
  outline: 1px solid #5aa7ff;
  outline-offset: 3px;
}
.footer-legal { max-width: 360px; }
.footer-legal p { margin: 0; color: var(--dim-3); }

/* ---- reduced motion: freeze everything; the wheel never starts (js) ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #starfield, .status-dot { animation: none; }
}