/* ============================================================
   PEOPLE IN MOTION — design system
   Built on the holding page's own language: one matte near-black
   field, warm off-white type, a single grey accent sampled from
   the wristband photograph, and imagery whose edges dissolve into
   the page so nothing is ever framed.

   The routes are the holding page continued, not a second site
   wearing the same logo.
   ============================================================ */

/* Self-hosted fonts. Loading fonts straight from Google's CDN sends
   every visitor's IP address to Google on each page view, which is
   the actual data-protection issue — see /privacy/. Same two files
   Google itself serves (Fraunces at weights 500/600, Inter at
   400/500/600 — both variable, so one file each covers every weight
   declared below), just kept on our own domain instead. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/fraunces-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/fraunces-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
}

:root {
  /* Sampled from the wristband photo: matte black body, warm charcoal
     backdrop, soft graded highlight on the lit floor beneath it. */
  --bg: #0c0c0c;
  --bg-2: #1a1918;
  --surface: #302e2b;
  --text: #f4f1ea;
  --text-dim: rgba(244, 241, 234, 0.62);
  --text-faint: rgba(244, 241, 234, 0.38);
  --accent: #93918d;
  --accent-light: #a8a59f;
  --accent-dark: #7d7b76;
  --accent-text: #0c0c0c;
  --error: #b5675a;
  --rule: rgba(244, 241, 234, 0.12);
  --rule-strong: rgba(244, 241, 234, 0.24);
  --shadow-soft: 0 24px 50px rgba(0, 0, 0, 0.5);

  --font-display: "Fraunces", serif;
  --font-body: "Inter", sans-serif;

  /* The holding page's scale is modest on purpose — the restraint
     is part of the look. These stay close to it rather than
     reaching for editorial drama the source never had. */
  --t-hero:  clamp(1.7rem, 5.2vw, 2.9rem);
  --t-title: clamp(1.25rem, 2.8vw, 1.75rem);
  --t-lede:  clamp(1rem, 1.5vw, 1.12rem);
  --t-body:  1rem;
  --t-small: 0.85rem;
  --t-label: 0.72rem;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: clamp(2.75rem, 7vw, 4.5rem);
  --s-7: clamp(3.5rem, 9vw, 6.5rem);

  /* The holding page is a centred column. Content widens a little
     for a list of entries, but the axis never moves. */
  --col:      480px;
  --col-wide: 620px;
  --col-media: 560px;
  --gutter: 1.25rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-mid: 420ms;
  --dur-slow: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

.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;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -4rem;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--text);
  color: var(--bg);
  padding: 0.6rem 1rem;
  font-size: var(--t-small);
  font-weight: 600;
  border-radius: 999px;
}
.skip-link:focus { top: 0.75rem; }

/* ============================================================
   Background motion
   The holding page's slow drift, carried through unchanged. It is
   the only ambient movement on the site.
   ============================================================ */

.bg-motion {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 30% 20%, rgba(147, 145, 141, 0.12), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(147, 145, 141, 0.06), transparent 60%),
    var(--bg);
  background-size: 160% 160%;
  animation: drift 24s ease-in-out infinite alternate;
}

@keyframes drift {
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 20% 15%, 80% 85%, 0 0; }
}

/* ============================================================
   Page frame — a centred column, as on the holding page
   ============================================================ */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 2rem var(--gutter) 2rem;
}

.col {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  text-align: center;
}
.col--wide  { max-width: var(--col-wide); }
.col--media { max-width: var(--col-media); }

.section { width: 100%; margin-top: var(--s-7); }
.section--tight { margin-top: var(--s-5); }

/* ============================================================
   Masthead
   The holding page has no navigation. These pages need one, so it
   is kept to the quietest possible form: the mark, then three
   words on one line beneath it. Nothing sticky, nothing blurred.
   ============================================================ */

.masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding-bottom: var(--s-5);
}

.masthead__mark {
  display: block;
  width: 92px;
}

.mark {
  width: 100%;
  height: auto;
  display: block;
  fill: var(--text);
}

/* Draw-on variant — the mark draws itself on load rather than
   simply fading in, on pages where the mark itself is the entry
   point's main character. Two overlaid copies of the exact same
   untouched path: one rendered as a stroke and animated via
   stroke-dashoffset, one as the ordinary solid fill (.mark,
   unchanged) that fades in as the line completes. */
.masthead__mark--draw {
  position: relative;
}
.masthead__mark--draw .mark {
  opacity: 0;
  animation: reveal-fill var(--dur-mid) var(--ease-out) 0.85s forwards;
}
.masthead__mark__stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
}
.masthead__mark__stroke path {
  fill: none;
  stroke: var(--text);
  stroke-width: 55;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-mark 1.1s var(--ease-out) 0.1s forwards;
}

@keyframes draw-mark {
  to { stroke-dashoffset: 0; }
}
@keyframes reveal-fill {
  to { opacity: 1; }
}

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
}

.masthead__nav a {
  position: relative;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  padding-bottom: 4px;
  transition: color var(--dur-fast) ease;
}

/* An underline that draws itself in, rather than a border that's
   simply there or not — the same line-drawing language as the
   mark, in miniature, on hover and on the current page alike. */
.masthead__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.masthead__nav a:hover,
.masthead__nav a:focus-visible { color: var(--text); }
.masthead__nav a:hover::after,
.masthead__nav a:focus-visible::after { transform: scaleX(1); }

.masthead__nav a[aria-current="page"] {
  color: var(--text);
}
.masthead__nav a[aria-current="page"]::after {
  background: var(--accent);
  animation: underline-draw var(--dur-mid) var(--ease-out) 0.9s both;
}

@keyframes underline-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ============================================================
   Type
   ============================================================ */

.headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: 1.22;
  margin: 0;
  text-wrap: balance;
}

.headline .line { display: block; }

.support {
  color: var(--text-dim);
  font-size: var(--t-lede);
  line-height: 1.6;
  margin: var(--s-3) auto 0;
  max-width: 34ch;
}

.label {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.counter {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* The rotator's voice: italic, accent grey. On the routes it sets
   the quiet asides rather than a rotating carousel. */
.aside {
  color: var(--accent);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 34ch;
}

.prose {
  color: var(--text-dim);
  font-size: var(--t-body);
  line-height: 1.75;
  margin: 0 auto;
  max-width: 38ch;
}

/* ============================================================
   Imagery
   The holding page's treatment is the identity: exposure lifted so
   engraving reads, edges dissolved by a radial mask so the picture
   has no frame and sits in the page rather than on it. Every image
   on the site takes it, which is what lets a produced frame and a
   documentary photograph share a page.
   ============================================================ */

.plate {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.plate img,
.plate video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  filter: brightness(1.7) contrast(0.92);
  -webkit-mask-image: radial-gradient(
    ellipse 56% 52% at 50% 50%,
    black 50%,
    transparent 86%
  );
  mask-image: radial-gradient(
    ellipse 56% 52% at 50% 50%,
    black 50%,
    transparent 86%
  );
}

/* Scene photography is already exposed; it needs the dissolve but
   not the lift the matte-black object required. */
.plate--scene img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: brightness(1.02) contrast(0.98) saturate(0.92);
  -webkit-mask-image: radial-gradient(
    ellipse 62% 60% at 50% 50%,
    black 46%,
    transparent 88%
  );
  mask-image: radial-gradient(
    ellipse 62% 60% at 50% 50%,
    black 46%,
    transparent 88%
  );
}

/* A pair of frames from one film is still one picture. The dissolve
   is applied to the pair, not to each frame, so it reads as a single
   plate rather than two portholes — and the corner watermarks burnt
   into the supplied stills fall away in the falloff. */
.plate--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 58% at 50% 50%,
    black 48%,
    transparent 90%
  );
  mask-image: radial-gradient(
    ellipse 60% 58% at 50% 50%,
    black 48%,
    transparent 90%
  );
}

.plate--pair img {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Real, already-graded film needs the same treatment as scene
   photography above: the dissolve, not the brightness lift a
   matte-black object required. Wider aspect, since this is a shot
   film rather than a portrait still. */
.plate--scene video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: brightness(1.02) contrast(0.98) saturate(0.92);
  -webkit-mask-image: radial-gradient(
    ellipse 62% 60% at 50% 50%,
    black 46%,
    transparent 88%
  );
  mask-image: radial-gradient(
    ellipse 62% 60% at 50% 50%,
    black 46%,
    transparent 88%
  );
}

/* Phone-shot footage, upright. Same treatment, narrower frame —
   and capped narrower on the page so a vertical clip doesn't run
   the full column width and tower over everything around it. */
.plate--portrait {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.plate--portrait video {
  aspect-ratio: 9 / 16;
}

/* ============================================================
   Film control
   One control, in the site's own type. The browser's own bar,
   scrubber and overflow menu belong to no design.
   ============================================================ */

.playtoggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: var(--s-2) auto 0;
  padding: 0.35rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.playtoggle:hover,
.playtoggle:focus-visible { color: var(--text); border-bottom-color: var(--accent); }

.playtoggle__bars { display: inline-flex; gap: 3px; align-items: flex-end; height: 0.7em; }
.playtoggle__bars i {
  display: block;
  width: 2px;
  height: 100%;
  background: currentColor;
  transform-origin: bottom;
  transition: transform var(--dur-mid) var(--ease-out);
}
.playtoggle[aria-pressed="false"] .playtoggle__bars i:first-child { transform: scaleY(0.45); }

/* Track row actions
   Play sits with a download link beside it, in the same quiet
   register as the home mark: faint until you mean to use it, never
   competing with the play control for attention. */
.track__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.track__actions .playtoggle { margin: 0; }

.track__download {
  display: inline-flex;
  color: var(--text-faint);
  transition: color var(--dur-fast) ease;
}
.track__download:hover,
.track__download:focus-visible { color: var(--text); }

.track__download svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   The move line
   Every entry states what it was, then what it became, joined by
   the mark. Centred, like everything else here.
   ============================================================ */

.move {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-title);
  line-height: 1.25;
}

.move__from { color: var(--text-dim); }
.move__to   { color: var(--text); }

.move__mark {
  flex: none;
  width: 30px;
  height: auto;
  fill: var(--accent);
  transform: translateY(-0.1em);
  transition: transform var(--dur-mid) var(--ease-out);
}

.entry:hover .move__mark { transform: translateY(-0.1em) translateX(0.25em); }

/* ============================================================
   Entries
   A stacked record, centred on the page's axis. Hairlines separate
   them; nothing is boxed.
   ============================================================ */

.entries { display: grid; gap: var(--s-7); width: 100%; }

.entry { display: grid; gap: var(--s-3); justify-items: center; }

.entry__meta {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
}

.entry__note {
  color: var(--text-dim);
  font-size: var(--t-body);
  line-height: 1.75;
  margin: 0 auto;
  max-width: 38ch;
}

/* Generated work is labelled in the faintest voice on the site —
   never the accent the real accounts carry. */
.label--made { color: var(--text-faint); }

/* ============================================================
   Kinds — Arrow, Ripple, Spark
   Three definitions down the centre line, separated by hairlines.
   Not cards: the page's own column, divided.
   ============================================================ */

.kinds { display: grid; gap: 0; width: 100%; margin-top: var(--s-5); }

.kind {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
}
.kind:last-of-type { border-bottom: 1px solid var(--rule); }

.kind__def {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-lede);
  line-height: 1.45;
  color: var(--text);
  margin: 0 auto;
  max-width: 32ch;
}

.kind__rule {
  font-size: var(--t-small);
  color: var(--text-faint);
  margin: 0;
}

/* ============================================================
   Chapters
   Numbers are the book's real order, so they earn their place.
   ============================================================ */

/* Sits above the headline on a single book's own page, pointing
   back to the series index. Quiet, same register as the footer
   links — this is wayfinding, not a call to action. */
.back {
  display: inline-block;
  color: var(--text-faint);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  margin-bottom: var(--s-3);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.back:hover,
.back:focus-visible { color: var(--text); border-color: var(--accent); }

.chapters {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  width: 100%;
  text-align: left;
}

.chapter {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--s-2);
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.chapter:first-child { border-top: 1px solid var(--rule); }

.chapter__no {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.chapter__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--text);
}

/* ============================================================
   Album cover
   The one light-ground image on the site. It deliberately does not
   take the .plate treatment: the dissolve mask assumes a dark
   subject on a dark field, and would eat this artwork's cream
   edges. So it keeps a hard square edge and full brightness, and
   reads as a record sleeve rather than as part of the page.
   ============================================================ */

.albumcover {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: var(--s-3) auto 0;
  box-shadow: var(--shadow-soft);
}

/* ============================================================
   Tracklist
   Same hairline rhythm as Chapters, with a play control added.
   Reuses .playtoggle exactly as the film control does, so a track
   row and a video control speak the same language.
   ============================================================ */

.tracklist {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  width: 100%;
  text-align: left;
  display: grid;
  gap: 0;
}

.track {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  gap: var(--s-2);
  align-items: center;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.track:first-child { border-top: 1px solid var(--rule); }

.track__num {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.track__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--text);
}

.track__duration {
  display: block;
  font-size: var(--t-small);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  margin-top: 0.2rem;
}

.track .playtoggle {
  margin: 0;
  padding: 0.35rem 0 0.35rem 0.6rem;
  border-bottom: none;
  border-left: 1px solid var(--rule-strong);
}
.track .playtoggle:hover,
.track .playtoggle:focus-visible { border-bottom: none; }

/* ============================================================
   Resources
   The same hairline rhythm as Chapters, holding whatever gets
   added later from content.js — ebooks, tracks, courses, stories.
   Not cards, on purpose: a stacked list, like everything else here.
   ============================================================ */

.resources {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  width: 100%;
  text-align: left;
  display: grid;
  gap: 0;
}

.resource {
  display: grid;
  gap: 0.35rem;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.resource:first-child { border-top: 1px solid var(--rule); }

.resource__tag {
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.resource__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--text);
  margin: 0;
}
.resource__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) ease;
}
.resource__title a:hover,
.resource__title a:focus-visible { border-bottom-color: var(--accent); }

.resource__desc {
  color: var(--text-dim);
  font-size: var(--t-small);
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}

/* Stands in for .resource__desc when a cover exists — the picture
   instead of the line of text. Modest width, not a hero plate: this
   is a list row, not the featured image treatment used elsewhere. */
.resource__cover {
  display: block;
  width: 100%;
  max-width: 140px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

/* Cover and description side by side — the text sized to feel as
   substantial as the picture beside it, not a small caption
   underneath. Italic display type nods to the tagline set on the
   cover artwork itself. */
.resource__cover-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: 0.15rem;
}

.resource__cover-row .resource__cover {
  flex: none;
  margin: 0;
}

.resource__desc--cover {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  line-height: 1.35;
  color: var(--text);
  max-width: none;
  flex: 1;
  min-width: 0;
}

.resource__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: 0.15rem;
}

.resource__link {
  color: var(--text);
  font-weight: 500;
  font-size: var(--t-small);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  border-bottom: 1px solid var(--accent);
}
.resource__link::after {
  content: "→";
  transition: transform var(--dur-fast) ease;
}
.resource__link:hover::after,
.resource__link:focus-visible::after { transform: translateX(3px); }

/* A quieter second action — sampling a few pages isn't the main
   ask of the row, downloading the whole thing is. */
.resource__link--preview {
  color: var(--text-dim);
  border-bottom-color: var(--rule-strong);
}
.resource__link--preview:hover,
.resource__link--preview:focus-visible {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ============================================================
   Awaiting
   The honest state for a territory that is open but not yet full.
   Designed and specific, never an apology.
   ============================================================ */

.awaiting {
  display: grid;
  gap: var(--s-3);
  justify-items: center;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ============================================================
   Home mark
   A way back to the front page that is always there without being
   a bar: the mark alone, small, in the top-left corner, held at
   low opacity so it reads as a quiet affordance rather than a
   second logo competing with the masthead's. It brightens on
   hover, which is where it announces itself as a button.
   Only on the sub-pages — the front page is already home.
   ============================================================ */

.homemark {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 40;
  display: block;
  width: 26px;
  line-height: 0;
  opacity: 0.34;
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}

.homemark svg {
  width: 100%;
  height: auto;
  display: block;
  fill: var(--text);
}

.homemark:hover,
.homemark:focus-visible {
  opacity: 1;
  transform: translateX(-2px);
}

@media (min-width: 700px) {
  .homemark {
    top: var(--s-3);
    left: var(--s-3);
    width: 30px;
  }
}

/* ============================================================
   Footer — the holding page's, unchanged
   ============================================================ */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-top: var(--s-7);
  padding-top: 1.5rem;
  width: 100%;
}

.footer a {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.footer a:hover,
.footer a:focus-visible { color: var(--text); border-color: var(--accent); }

/* Social marks -- placed ahead of the real URLs, which land later.
   Plain spans, not links: an <a> with nothing to point to yet reads
   as broken. Swap each span for an <a href="..."> (keeping the
   class and inner svg) once a handle exists, and the a:hover rule
   above will pick it up automatically. */
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: 0.15rem;
}
.footer__social svg {
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  transition: color var(--dur-fast) ease;
}
.footer__social a { border-bottom: 0; display: inline-flex; }
.footer__social a:hover svg,
.footer__social a:focus-visible svg { color: var(--text); }

/* ============================================================
   Legal
   The fine print, not the ritual. Left-aligned for readability —
   the one place on the site actual reading order matters more than
   the centred axis — but the same palette, hairlines and type as
   everywhere else, so it never feels like a bolted-on page.
   ============================================================ */

.legal {
  width: 100%;
  max-width: var(--col-wide);
  margin: 0 auto;
  text-align: left;
}

.legal__updated {
  color: var(--text-faint);
  font-size: var(--t-small);
  margin: 0 0 var(--s-5);
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-title);
  line-height: 1.3;
  color: var(--text);
  margin: var(--s-5) 0 var(--s-2);
}
.legal h2:first-of-type { margin-top: 0; }

.legal h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--text);
  margin: var(--s-3) 0 var(--s-1);
}

.legal p {
  color: var(--text-dim);
  font-size: var(--t-body);
  line-height: 1.75;
  margin: 0 0 var(--s-2);
}

.legal ul, .legal ol {
  color: var(--text-dim);
  font-size: var(--t-body);
  line-height: 1.75;
  margin: 0 0 var(--s-2);
  padding-left: 1.25em;
}

.legal li { margin-bottom: 0.4em; }
.legal li:last-child { margin-bottom: 0; }

.legal a {
  color: var(--text);
  border-bottom: 1px solid var(--accent);
  text-decoration: none;
}
.legal a:hover, .legal a:focus-visible { color: var(--accent-light); }

.legal strong { color: var(--text); font-weight: 600; }

/* ============================================================
   Arrival
   The holding page settles its lines in on load. The routes do the
   same, once, and then hold still.
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.arrive { opacity: 0; animation: fadeUp 0.7s ease forwards; }
.arrive--1 { animation-delay: 0.05s; }
.arrive--2 { animation-delay: 0.18s; }
.arrive--3 { animation-delay: 0.31s; }
.arrive--4 { animation-delay: 0.44s; }

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bg-motion { animation: none; }
  .arrive { opacity: 1; animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}