/* Ecliptic Studio — one-page site. Page layer only.
   Phase B, S05, 2026-09-09. Requires tokens.css and components.css.

   Nothing here re-decides anything. Every value is a token; this file only places things.
   Tiers, per KIT.md: the hero is T1 — black, grain, limb darkening, the mark assembling
   once per session. Everything below it is T2 — #0A0A0A, grain, Register only. The one
   paper section is T3 and takes the tooth. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--ec-s6); }
@media (max-width: 700px) { .wrap { padding: 0 var(--ec-s5); } }

/* ---- nav ---------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 10; background: var(--ec-ground);
  border-bottom: var(--ec-hair) solid var(--ec-hairline); }
.nav__in { display: flex; align-items: center; gap: var(--ec-s5);
  padding: var(--ec-s3) 0; }
.nav__mark { display: flex; align-items: center; gap: var(--ec-s3); margin-right: auto;
  text-decoration: none; }
.nav__mark svg { width: 20px; height: 20px; color: var(--ec-reserved); flex: none; }
.nav__word { font-family: var(--ec-face-mark); font-size: 17px; letter-spacing: 0.24em;
  padding-left: 0.24em; color: var(--ec-reserved); text-transform: uppercase; line-height: 1; }
.nav a.lnk { font-family: var(--ec-face-micro); font-size: var(--ec-t-micro);
  letter-spacing: var(--ec-track-micro); text-transform: uppercase; color: var(--ec-ink-muted);
  text-decoration: none; position: relative; padding-bottom: 3px; }
.nav a.lnk::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--ec-plane); background: var(--ec-reserved); transform: scaleX(0);
  transform-origin: left; transition: transform var(--ec-register) var(--ec-register-ease); }
.nav a.lnk:hover { color: var(--ec-reserved); }
.nav a.lnk:hover::after { transform: scaleX(1); }
@media (max-width: 640px) { .nav__hide { display: none; } }

/* ---- hero, T1 ----------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: clamp(72px, 13vh, 132px) 0 clamp(64px, 11vh, 104px); }
.hero__mark { width: clamp(180px, 26vw, 280px); color: var(--ec-reserved); display: block; }
.hero__word { font-family: var(--ec-face-mark); text-transform: uppercase;
  font-size: clamp(44px, 9vw, 96px); letter-spacing: 0.24em; padding-left: 0.24em;
  color: var(--ec-reserved); line-height: 1; margin: var(--ec-s7) 0 0; }
.hero__rule { margin: var(--ec-s6) 0 var(--ec-s6); background: var(--ec-reserved); }
.hero__line { font-size: clamp(19px, 2.3vw, 25px); font-weight: var(--ec-w-light);
  color: var(--ec-body); max-width: 40ch; line-height: 1.45; }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--ec-s5); margin-top: var(--ec-s7); }

/* ---- sections ----------------------------------------------------------- */
.sec { padding: clamp(64px, 9vh, 104px) 0; }
.sec__head { display: flex; align-items: baseline; gap: var(--ec-s5); flex-wrap: wrap;
  border-top: var(--ec-plane) solid var(--ec-hairline); padding-top: var(--ec-s4);
  margin-bottom: var(--ec-s7); }
.sec__head h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: var(--ec-w-light);
  color: var(--ec-reserved); margin: 0; }
.sec__head .ec-micro { margin-left: auto; }
@media (max-width: 640px) { .sec__head .ec-micro { margin-left: 0; } }
.lede { font-size: var(--ec-t-lead); max-width: 62ch; color: var(--ec-body); }

/* Steps — the four contact points, described */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 96px 1fr; gap: var(--ec-s5);
  padding: var(--ec-s5) 0; border-bottom: var(--ec-hair) solid var(--ec-hairline);
  align-items: baseline; }
.steps li:first-child { border-top: var(--ec-hair) solid var(--ec-hairline); }
.steps b { display: block; color: var(--ec-reserved); font-weight: var(--ec-w-reg);
  font-size: var(--ec-t-lead); margin-bottom: var(--ec-s2); }
.steps p { margin: 0; font-size: var(--ec-t-small); max-width: 58ch; }
@media (max-width: 640px) { .steps li { grid-template-columns: 1fr; gap: var(--ec-s2); } }

/* Work list — the actual jobs, in the client's nouns */
.jobs { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--ec-s8); }
.jobs li { break-inside: avoid; padding: var(--ec-s3) 0;
  border-bottom: var(--ec-hair) solid var(--ec-hairline); font-size: var(--ec-t-small); }
@media (max-width: 700px) { .jobs { columns: 1; } }

/* Refusals, on paper */
.paper-sec { padding: clamp(56px, 8vh, 88px) 0; }
.refusals { max-width: 66ch; }
.refusals p { border-left: var(--ec-plane) solid var(--ec-hairline);
  padding-left: var(--ec-s5); margin: 0 0 var(--ec-s5); font-size: var(--ec-t-lead);
  line-height: 1.5; }
.refusals p:last-child { margin-bottom: 0; }

/* ---- the ask ------------------------------------------------------------ */
.ask { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ec-s8); align-items: start; }
@media (max-width: 860px) { .ask { grid-template-columns: 1fr; gap: var(--ec-s7); } }
.ask__pitch p { font-size: var(--ec-t-lead); max-width: 46ch; }
.form { display: block; }
.form .ec-field { max-width: none; }
.form__actions { display: flex; align-items: center; gap: var(--ec-s5); margin-top: var(--ec-s6);
  flex-wrap: wrap; }
.form__status { font-family: var(--ec-face-micro); font-size: var(--ec-t-micro);
  letter-spacing: var(--ec-track-micro); text-transform: uppercase; color: var(--ec-ink-muted); }
.form__status[data-state='error'] { color: var(--ec-reserved); }
.sent { border-top: var(--ec-plane) solid var(--ec-reserved); padding-top: var(--ec-s5); }
.sent h3 { color: var(--ec-reserved); font-size: var(--ec-t-h3); margin: 0 0 var(--ec-s3); }

/* ---- Ecliptic AI, the onboarding panel (S07, rebuilt S08) ------------------ */
/* `hidden` must win over component display rules (.form, .ec-btn), or a fallback form and a
   band-specific button show when they should not. */
.ec [hidden] { display: none !important; }

/* Glass, but still this brand: no radius, no hue except one thin line of corona, which is
   the only warm value in the system and is spent here on the AI's presence. The mark is its
   face. Motion is the eclipse itself: a ring of light that turns slowly at rest and quickly
   while it thinks. */
.ec {
  --eca-glass:      rgba(14, 15, 17, 0.72);
  --eca-glass-deep: rgba(6, 6, 7, 0.82);
  --eca-edge:       rgba(255, 255, 255, 0.09);
  --eca-edge-hi:    rgba(255, 255, 255, 0.22);
  --eca-fill:       rgba(255, 255, 255, 0.045);
  --eca-fill-hi:    rgba(255, 255, 255, 0.08);
  --eca-corona:     181, 167, 145;   /* --ec-corona as channels, for alpha */
  --eca-ease:       cubic-bezier(.16, 1, .3, 1);
}
html.eca-locked { overflow: hidden; }

/* The orb: the canonical mark inside a dark disc, ringed by a turning corona. */
.eca-orb { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ec-reserved);
  background: radial-gradient(circle at 35% 30%, #1a1b1d, #000 70%);
  box-shadow: inset 0 0 0 1px var(--eca-edge); }
.eca-orb svg { width: 64%; height: 64%; position: relative; z-index: 1; }
.eca-orb::before { content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--eca-corona), 0) 0deg,
    rgba(var(--eca-corona), .0) 200deg, rgba(var(--eca-corona), .95) 330deg, rgba(var(--eca-corona), 0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 1.5px), #000 calc(50% - 1px));
          mask: radial-gradient(circle, transparent calc(50% - 1.5px), #000 calc(50% - 1px));
  animation: eca-turn 7s linear infinite; }
.eca-orb::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(var(--eca-corona), .28), transparent 65%);
  transition: opacity 400ms ease; }
.eca-orb--lg { width: 40px; height: 40px; }
.eca[data-state=thinking] .eca-orb::before { animation-duration: 1.1s; }
.eca[data-state=thinking] .eca-orb::after,
.eca[data-state=speaking] .eca-orb::after { opacity: 1; animation: eca-breathe 1.6s ease-in-out infinite; }
@keyframes eca-turn { to { transform: rotate(360deg); } }
@keyframes eca-breathe { 50% { transform: scale(1.18); opacity: .55; } }

/* ---- the launcher in Start here ---- */
.eca-launch { max-width: 560px; }
.eca-launch__field { all: unset; box-sizing: border-box; cursor: text; width: 100%;
  display: flex; align-items: center; gap: var(--ec-s3); padding: 14px 14px 14px 16px;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--eca-fill-hi), var(--eca-fill));
  border: 1px solid var(--eca-edge);
  box-shadow: inset 0 1px 0 var(--ec-light-top), 0 20px 50px -20px rgba(0,0,0,.8);
  transition: border-color 240ms ease, transform 240ms var(--eca-ease); }
.eca-launch__field::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%);
  transform: translateX(-100%); }
.eca-launch__field:hover { border-color: var(--eca-edge-hi); transform: translateY(-1px); }
.eca-launch__field:hover::after { transform: translateX(100%); transition: transform 900ms var(--eca-ease); }
.eca-launch__field:focus-visible { outline: var(--ec-focus-ring) solid var(--ec-reserved); outline-offset: 3px; }
.eca-launch__ph { flex: 1; font: var(--ec-w-light) var(--ec-t-body)/1.3 var(--ec-face-ui); color: var(--ec-muted); }
.eca-launch__go, .eca__send { flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--ec-reserved); color: var(--ec-black); }
.eca-launch__go svg, .eca__send svg, .eca__x svg { width: 18px; height: 18px; fill: none;
  stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }

.eca-chips { display: flex; flex-wrap: wrap; gap: var(--ec-s2); margin-top: var(--ec-s3); }
.eca-chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 12px;
  font: var(--ec-w-reg) 13px/1.2 var(--ec-face-ui); color: var(--ec-body);
  background: var(--eca-fill); border: 1px solid var(--eca-edge);
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease; }
.eca-chip:hover { border-color: var(--eca-edge-hi); background: var(--eca-fill-hi); color: var(--ec-reserved); }
.eca-chip:focus-visible { outline: var(--ec-focus-ring) solid var(--ec-reserved); outline-offset: 2px; }

/* ---- the floating button ---- */
.eca-fab { all: unset; box-sizing: border-box; cursor: pointer; position: fixed; z-index: 900;
  right: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px;
  background: var(--eca-glass); border: 1px solid var(--eca-edge);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--ec-light-top), 0 18px 40px -12px rgba(0,0,0,.85);
  animation: eca-rise 520ms var(--eca-ease) both; transition: border-color 200ms ease; }
.eca-fab:hover { border-color: var(--eca-edge-hi); }
.eca-fab:focus-visible { outline: var(--ec-focus-ring) solid var(--ec-reserved); outline-offset: 3px; }
.eca-fab__label { font: var(--ec-w-reg) 14px/1 var(--ec-face-ui); letter-spacing: var(--ec-track-ui); color: var(--ec-reserved); }
@keyframes eca-rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* ---- the panel ---- */
.eca { position: fixed; inset: 0; z-index: 1000; }
.eca__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 380ms ease; }
.eca__panel { position: absolute; right: 24px; bottom: 24px;
  width: min(440px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 48px));
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--eca-glass), var(--eca-glass-deep));
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--eca-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 100px -20px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(18px) scale(.94); filter: blur(10px);
  transition: opacity 360ms var(--eca-ease), transform 520ms var(--eca-ease), filter 420ms var(--eca-ease); }
/* A line of light runs across the top edge as it opens: the ecliptic, drawn. */
.eca__panel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(var(--eca-corona), .9) 50%, transparent);
  transform: scaleX(0); opacity: 0; }
/* Ambient corona behind the header. It brightens while the AI is thinking. */
.eca__panel::after { content: ''; position: absolute; left: -20%; right: -20%; top: -180px; height: 300px;
  pointer-events: none; z-index: 0; opacity: .35;
  background: radial-gradient(closest-side, rgba(var(--eca-corona), .16), transparent);
  transition: opacity 600ms ease; }
.eca[data-state=thinking] .eca__panel::after { opacity: 1; animation: eca-breathe-glow 2.4s ease-in-out infinite; }
@keyframes eca-breathe-glow { 50% { opacity: .55; } }

.eca.is-open .eca__scrim { opacity: 1; }
.eca.is-open .eca__panel { opacity: 1; transform: none; filter: none; }
.eca.is-open .eca__panel::before { animation: eca-draw 1100ms var(--eca-ease) 120ms both; }
@keyframes eca-draw { 0% { transform: scaleX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: scaleX(1); opacity: .25; } }

.eca__head, .eca__log, .eca__foot { position: relative; z-index: 1; }
.eca__head { display: flex; align-items: center; gap: var(--ec-s3); padding: 16px 16px 14px 18px;
  border-bottom: 1px solid var(--eca-edge); }
.eca__id { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eca__id strong { font: var(--ec-w-reg) 15px/1.1 var(--ec-face-ui); letter-spacing: .02em; color: var(--ec-reserved); }
.eca__state { font: 500 10px/1 var(--ec-face-micro); letter-spacing: var(--ec-track-micro);
  text-transform: uppercase; color: var(--ec-muted); display: flex; align-items: center; gap: 6px; }
.eca__state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ec-aurora); }
.eca[data-state=thinking] .eca__state::before,
.eca[data-state=speaking] .eca__state::before { background: var(--ec-corona); animation: eca-blink 1s ease-in-out infinite; }
@keyframes eca-blink { 50% { opacity: .25; } }
.eca__x { all: unset; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--ec-muted); transition: color 200ms ease, background 200ms ease; }
.eca__x:hover { color: var(--ec-reserved); background: var(--eca-fill-hi); }
.eca__x:focus-visible { outline: var(--ec-focus-ring) solid var(--ec-reserved); outline-offset: -2px; }

.eca__log { flex: 1; overflow-y: auto; padding: 22px 18px 8px; scroll-behavior: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--eca-edge) transparent;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 18px);
          mask: linear-gradient(180deg, transparent 0, #000 18px); }
.eca__msg { margin-bottom: 18px; animation: eca-in 420ms var(--eca-ease) both; }
.eca__msg p { margin: 0 0 10px; max-width: none; font: var(--ec-w-light) 15px/1.6 var(--ec-face-ui); color: var(--ec-body); }
.eca__msg p:last-child { margin-bottom: 0; }
.eca__msg--you { display: flex; justify-content: flex-end; }
.eca__msg--you p { max-width: 85%; padding: 10px 14px; color: var(--ec-reserved); font-weight: var(--ec-w-reg);
  background: var(--eca-fill-hi); border: 1px solid var(--eca-edge); }
@keyframes eca-in { from { opacity: 0; transform: translateY(8px); } }
.eca-w { opacity: 0; filter: blur(5px); transition: opacity 320ms ease, filter 380ms ease; }
.eca-w.in { opacity: 1; filter: none; }
.eca-chips--log { margin: 4px 0 18px; animation: eca-in 520ms var(--eca-ease) 200ms both; }

.eca__typing { display: flex; gap: 5px; padding: 6px 0 18px; animation: eca-in 300ms var(--eca-ease) both; }
.eca__typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--ec-body);
  animation: eca-wave 1.2s ease-in-out infinite; }
.eca__typing span:nth-child(2) { animation-delay: .15s; }
.eca__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes eca-wave { 0%, 60%, 100% { opacity: .2; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }

.eca__foot { padding: 10px 14px 12px; border-top: 1px solid var(--eca-edge); background: rgba(0,0,0,.25); }
.eca__input { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px;
  background: var(--eca-fill); border: 1px solid var(--eca-edge);
  transition: border-color 220ms ease, box-shadow 220ms ease; }
.eca__input:focus-within { border-color: var(--eca-edge-hi);
  box-shadow: 0 0 0 4px rgba(255,255,255,.03), 0 0 30px -8px rgba(var(--eca-corona), .35); }
.eca__input textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; padding: 8px 0;
  max-height: 160px; font: var(--ec-w-light) 15px/1.45 var(--ec-face-ui); color: var(--ec-reserved); }
.eca__input textarea::placeholder { color: var(--ec-muted); }
.ec .eca__input textarea:focus, .ec .eca__input textarea:focus-visible { outline: 0; box-shadow: none; border: 0; }
.eca__send { all: unset; box-sizing: border-box; cursor: pointer; width: 36px; height: 36px;
  display: grid; place-items: center; color: var(--ec-muted); background: var(--eca-fill-hi);
  transition: background 200ms ease, color 200ms ease, transform 200ms var(--eca-ease); }
.eca__input.has-text .eca__send { background: var(--ec-reserved); color: var(--ec-black); }
.eca__input.has-text .eca__send:hover { transform: translateY(-1px); }
.eca__send:disabled { opacity: .4; cursor: default; }
.eca__send:focus-visible { outline: var(--ec-focus-ring) solid var(--ec-reserved); outline-offset: 2px; }
.eca__fine { margin: 8px 2px 0; max-width: none; font: 400 11px/1.4 var(--ec-face-ui); color: var(--ec-muted); }
.eca__status { color: var(--ec-body); }
.eca__status[data-state=error] { color: var(--ec-chromosphere); }
.eca__status:empty { display: none; }
.eca__status:not(:empty) + span { display: none; }

.eca__fit { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; animation: eca-in 420ms var(--eca-ease) both; }
.eca__fit-row { display: flex; gap: 8px; }
.eca__fit-row .eca__in { flex: 1; min-width: 0; }
.eca__in { box-sizing: border-box; width: 100%; padding: 11px 12px; border: 1px solid var(--eca-edge); border-radius: 0;
  background: var(--eca-fill); outline: 0; font: var(--ec-w-light) 15px/1.3 var(--ec-face-ui); color: var(--ec-reserved);
  transition: border-color 200ms ease; }
.eca__in::placeholder { color: var(--ec-muted); }
.eca__in:focus { border-color: var(--eca-edge-hi); }
.eca__lanes { border: 0; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eca__lanes legend { grid-column: 1 / -1; margin-bottom: 8px; padding: 0; }
.eca__lane { position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  border: 1px solid var(--eca-edge); background: var(--eca-fill); transition: border-color 200ms ease, background 200ms ease; }
.eca__lane input { position: absolute; opacity: 0; }
.eca__lane span { font: var(--ec-w-reg) 14px/1.25 var(--ec-face-ui); color: var(--ec-reserved); }
.eca__lane small { font: 400 12px/1.3 var(--ec-face-ui); color: var(--ec-muted); }
.eca__lane:has(input:checked) { border-color: rgba(var(--eca-corona), .7); background: var(--eca-fill-hi); }
.eca__lane:has(input:focus-visible) { outline: var(--ec-focus-ring) solid var(--ec-reserved); outline-offset: 2px; }
.eca__fit-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.eca__cta { all: unset; box-sizing: border-box; cursor: pointer; padding: 12px 18px; background: var(--ec-reserved); color: var(--ec-black);
  font: var(--ec-w-semi) 12px/1 var(--ec-face-ui); letter-spacing: var(--ec-track-caps); text-transform: uppercase;
  transition: transform 200ms var(--eca-ease); }
.eca__cta:hover { transform: translateY(-1px); }
.eca__cta:disabled { opacity: .5; cursor: default; }
.eca__cta:focus-visible, .eca__ghost:focus-visible { outline: var(--ec-focus-ring) solid var(--ec-reserved); outline-offset: 2px; }
.eca__ghost { all: unset; cursor: pointer; padding: 12px 4px; font: 400 13px/1 var(--ec-face-ui); color: var(--ec-muted); }
.eca__ghost:hover { color: var(--ec-reserved); }
.eca__fit .eca__status { font: 400 12px/1.3 var(--ec-face-ui); }

/* Phones: the panel becomes a full-height sheet that rises from the bottom. */
@media (max-width: 600px) {
  .eca__panel { inset: 0; width: auto; height: 100dvh; border: 0; transform: translateY(40px); }
  .eca-fab { right: 16px; bottom: 16px; }
  .eca__lanes { grid-template-columns: 1fr; }
  .eca__fit-row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .eca-orb::before, .eca-orb::after, .eca__panel::after, .eca__typing span, .eca-fab,
  .eca__msg, .eca-chips--log, .eca__fit, .eca__state::before { animation: none !important; }
  .eca__panel, .eca__scrim, .eca-w { transition: none; }
  .eca__panel { transform: none; filter: none; }
  .eca-w { opacity: 1; filter: none; }
}

/* ---- footer ------------------------------------------------------------- */
.foot { border-top: var(--ec-hair) solid var(--ec-hairline); padding: var(--ec-s7) 0 var(--ec-s8); }
.foot__in { display: flex; gap: var(--ec-s6); flex-wrap: wrap; align-items: baseline; }
.foot a { color: var(--ec-ink); text-decoration: none; border-bottom: var(--ec-hair) solid var(--ec-hairline); }
.foot a:hover { color: var(--ec-reserved); border-bottom-color: var(--ec-reserved); }

/* ---- motion ------------------------------------------------------------- */
/* Resolve: tracking settles once, on the hero word. Draw: the rule. Register: on scroll.
   Nothing else. All of it is suppressed under prefers-reduced-motion. */
/* Tracking resolves; the word never fades. The first frame of the site has to contain the
   name — an empty hero is what a slow connection and a link preview both capture. */
.js .hero__word { letter-spacing: 0.34em; }
.js .hero__word.in { letter-spacing: 0.24em;
  transition: letter-spacing 1200ms var(--ec-draw-ease); }
.js .hero__rule { transform: scaleX(0); transform-origin: left; }
.js .hero__rule.in { transform: scaleX(1); transition: transform var(--ec-draw) var(--ec-draw-ease); }
.js .reg { opacity: 0; transform: translateY(6px); }
.js .reg.in { opacity: 1; transform: none;
  transition: opacity var(--ec-resolve) var(--ec-resolve-ease),
              transform var(--ec-register) var(--ec-register-ease); }

@media (prefers-reduced-motion: reduce) {
  .js .hero__word, .js .hero__rule, .js .reg { opacity: 1; transform: none;
    letter-spacing: 0.24em; transition: none; }
}