/*
  Home page: "Signal terrain". A three.js point terrain (terrain.js) sits fixed behind
  tall waypoint sections; each focus area lights its own region as the camera flies to it.
  Shared tokens and components come from styles.css.
*/

:root { --track-w: 15.5rem; }

/* Still fallback until (or unless) WebGL runs: dot-field with one vermilion region. */
body.home {
  background:
    radial-gradient(ellipse 40% 30% at 72% 58%, rgba(178, 58, 10, 0.16), rgba(178, 58, 10, 0) 70%),
    radial-gradient(ellipse 80% 60% at 65% 70%, var(--haze) 0%, rgba(213, 223, 234, 0) 70%),
    radial-gradient(circle, var(--dot) 1.1px, rgba(159, 178, 198, 0) 1.7px) 0 0 / 22px 22px,
    var(--sky);
  background-attachment: fixed;
}
html.gl-on body.home { background: var(--sky); }

.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stage canvas { display: block; width: 100%; height: 100%; }

/* ---------- header: brand chip and waypoint track ---------- */
.top { position: relative; z-index: 20; }
.top .brand { position: absolute; top: 1.25rem; left: var(--gutter); z-index: 20; }

.track {
  position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 20;
  width: var(--track-w);
  background: var(--panel); border: 1px solid var(--edge); border-radius: 3px;
  padding: 0.75rem 0.5rem 0.75rem 0.75rem;
}
.track ul { list-style: none; margin: 0; padding: 0; position: relative; }
.track ul::before {
  content: ""; position: absolute; right: 16px; top: 22px; bottom: 22px; width: 1px; background: var(--edge);
}
.track a {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem;
  min-height: 44px; padding: 0 0.25rem 0 0.5rem;
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.9375rem; line-height: 1.2; text-align: right;
}
.track a .mark {
  flex: none; width: 9px; height: 9px; margin-right: 8px;
  background: var(--panel); border: 1px solid var(--muted); transform: rotate(45deg);
}
.track a:hover { color: var(--ink); }
.track a:hover .mark { border-color: var(--ink); }
.track a[aria-current="step"] { color: var(--ink); }
.track a[aria-current="step"] .mark { background: var(--signal); border-color: var(--signal); }
.track .hint { margin: 0.5rem 0.25rem 0 0; font-size: var(--s-1); color: var(--muted); text-align: right; line-height: 1.4; }

/* ---------- waypoints ---------- */
main.waypoints { position: relative; z-index: 10; }
.waypoint {
  position: relative;
  min-height: 165vh;
  padding: 0 var(--gutter);
}
.waypoint:first-child { min-height: 150vh; }
.waypoint .panel {
  position: sticky; top: clamp(5.5rem, 20vh, 11rem);
  width: min(35rem, 100%);
  max-width: calc(100vw - var(--track-w) - 3 * var(--gutter));
}
.waypoint:first-child .panel { top: clamp(5.5rem, 16vh, 9rem); }
.waypoint[data-lit] .panel { border-left-color: var(--signal); }

.who { margin: 0 0 1.25rem; font-weight: 500; color: var(--link); font-size: var(--s0); }
.tagline { color: var(--text); padding-left: 1rem; border-left: 1px solid var(--signal); }
.area-desc { font-size: var(--s1); line-height: 1.5; color: var(--ink); }
.row { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

/* ---------- site links and per-area picks ---------- */
.top-links { position: absolute; top: 1.25rem; right: var(--gutter); z-index: 20; }
.jump-line { color: var(--text); }
.picks { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--edge); }
.picks li { border-bottom: 1px solid var(--edge); }
.picks a { display: block; padding: 0.6rem 0; text-decoration: none; font-weight: 500; line-height: 1.35; }
.picks a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.pick-kind { display: block; font-size: var(--s-1); font-weight: 500; color: var(--muted); }
.more-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 1.25rem; }

/* ---------- work and contact ---------- */
.final { min-height: 100vh; padding-top: 16vh; padding-bottom: 6rem; }
.final .panel {
  position: relative; top: auto;
  width: min(76rem, 100%);
  max-width: calc(100vw - var(--track-w) - 3 * var(--gutter));
}
.final-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem 2.5rem; margin-top: 1.25rem; }
.final-sub { font-family: var(--display); font-weight: 500; font-size: var(--s1); letter-spacing: -0.01em; }
.final-grid .work { margin-top: 0.75rem; }
.final .contact { margin-top: 0; }
.final .mail { font-size: clamp(1rem, 0.85rem + 0.5vw, 1.2rem); overflow-wrap: normal; word-break: keep-all; }
.work { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--edge); }
.work li { border-bottom: 1px solid var(--edge); }
.work a { display: block; padding: 1rem 0 1.05rem; text-decoration: none; color: var(--text); }
.work a:hover h3, .work a:focus-visible h3 { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.work a p { margin: 0.3rem 0 0; font-size: 0.9375rem; }
.work .where { display: block; margin-top: 0.3rem; font-size: var(--s-1); color: var(--muted); }
.contact { margin-top: 3rem; }
.mail {
  display: inline-block; margin-top: 1rem; min-height: 44px; padding: 0.2rem 0;
  font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 0.8rem + 1vw, var(--s2)); letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--signal); overflow-wrap: anywhere;
}
.mail:hover { color: var(--signal); }
.elsewhere { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.elsewhere a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* ---------- small screens: panels sit low, track becomes a top rail ---------- */
@media (max-width: 899px) {
  :root { --track-w: 0px; }
  .top {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--panel); border-bottom: 1px solid var(--edge);
  }
  .top .brand { position: static; border: 0; background: transparent; margin: 0.25rem 0 0 calc(var(--gutter) - 0.7rem); }
  .track {
    position: static; transform: none; width: auto; border: 0; border-radius: 0; background: transparent;
    padding: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .track::-webkit-scrollbar { display: none; }
  .track ul { display: flex; padding: 0 var(--gutter) 0.25rem; width: max-content; }
  .track ul::before { display: none; }
  .track a { flex-direction: row-reverse; justify-content: flex-start; gap: 0.5rem; padding: 0 0.9rem 0 0; white-space: nowrap; font-size: 0.875rem; }
  .track a .mark { margin-right: 0; width: 8px; height: 8px; }
  .track .hint { display: none; }
  .top-links { display: none; }
  .waypoint .panel { max-width: none; }
  .waypoint { min-height: 125svh; padding-top: 52svh; }
  .waypoint:first-child { min-height: 110svh; padding-top: 7.5rem; }
  .waypoint .panel, .waypoint:first-child .panel { position: relative; top: auto; }
  .final { padding-top: 40svh; min-height: 0; padding-bottom: 3rem; }
  main.waypoints > .waypoint { scroll-margin-top: 6.5rem; }
}
@media (max-width: 899px) and (min-height: 700px) {
  .waypoint:first-child { padding-top: 40svh; }
}