@import url("tokens.css");

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; position: relative;
  font-family: var(--font-ui); font-size: var(--step-0); line-height: 1.6;
  color: var(--text); /* no body background: the page background shows through, so the stars behind show too */
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--hairline-strong); text-underline-offset: 0.25em; }
a:hover { text-decoration-color: var(--ray-yellow); }
:focus-visible { outline: 1px solid var(--ray-yellow); outline-offset: 4px; }
::selection { background: var(--ray-violet); color: #fff; }
h1, h2, h3, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
.wrap { width: min(100% - 2 * var(--space-4), var(--wrap)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--space-3); top: -4rem; background: var(--accent); color: var(--space-950); padding: var(--space-2) var(--space-3); z-index: 60; }
.skip-link:focus { top: var(--space-3); }
.eyebrow { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); }

/* ---------- Space: stars and a faint nebula behind everything ---------- */
.space { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg); }
.space__stars, .space__stars--far { position: absolute; inset: -10%; background-repeat: repeat; }
.space__stars {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 38% 62%, #e4e9ff 50%, transparent 55%),
    radial-gradient(1.8px 1.8px at 71% 24%, #fff 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 86% 78%, #d6deff 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 55% 90%, #fff 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 24% 84%, #eef0ff 50%, transparent 55%),
    radial-gradient(1.7px 1.7px at 93% 8%, #fff 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 4% 52%, #e4e9ff 50%, transparent 55%),
    radial-gradient(1.4px 1.4px at 62% 40%, #fff 50%, transparent 55%);
  background-size: 460px 460px; opacity: 0.9;
}
.space__stars--far {
  background-image:
    radial-gradient(1px 1px at 8% 40%, #b9c3f5 50%, transparent 55%),
    radial-gradient(1px 1px at 46% 12%, #b9c3f5 50%, transparent 55%),
    radial-gradient(1px 1px at 64% 52%, #d0d7ff 50%, transparent 55%),
    radial-gradient(1px 1px at 30% 94%, #b9c3f5 50%, transparent 55%),
    radial-gradient(1px 1px at 80% 66%, #d0d7ff 50%, transparent 55%),
    radial-gradient(1px 1px at 96% 30%, #b9c3f5 50%, transparent 55%),
    radial-gradient(1px 1px at 18% 70%, #d0d7ff 50%, transparent 55%),
    radial-gradient(1px 1px at 52% 78%, #b9c3f5 50%, transparent 55%);
  background-size: 250px 250px; opacity: 0.7;
}
.space__nebula {
  position: absolute; inset: 0;
  background:
    radial-gradient(45% 40% at 85% 8%, color-mix(in srgb, var(--ray-violet) 28%, transparent), transparent 70%),
    radial-gradient(40% 45% at 8% 95%, color-mix(in srgb, var(--ray-orange) 16%, transparent), transparent 70%),
    radial-gradient(35% 30% at 55% 55%, color-mix(in srgb, var(--ray-violet) 8%, transparent), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .space__stars, .space__stars--far { will-change: transform; }
  .space__stars { animation: twinkle 7s ease-in-out infinite alternate, drift 240s linear infinite; }
  .space__stars--far { animation: twinkle 11s ease-in-out infinite alternate-reverse, drift 400s linear infinite; }
  @keyframes twinkle { from { opacity: 0.55; } to { opacity: 0.95; } }
  @keyframes drift { to { transform: translate3d(-460px, -230px, 0); } }
}

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 40; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--header-h); }
.wordmark { display: inline-flex; align-items: center; gap: 0.6rem; height: var(--island-h); text-decoration: none; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.26em; text-transform: uppercase; }
.wordmark__mark { width: 2.3rem; height: 2.3rem; flex: none; }
.wordmark__text { white-space: nowrap; transition: opacity var(--speed) var(--ease); }
.wordmark:focus-visible { outline-offset: 4px; }
/* Scrolled: the name tucks away and only the mark floats */
html[data-js][data-scrolled] .site-header { position: fixed; inset: 0 0 auto 0; pointer-events: none; }
html[data-js][data-scrolled] .site-header .wrap > * { pointer-events: auto; }
html[data-js][data-scrolled] .wordmark__text { opacity: 0; width: 0; overflow: hidden; }
html[data-js][data-scrolled] .wordmark { background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* The timeline island: where you are, and a step either way */
.tl-island { display: flex; align-items: center; gap: var(--space-1); border: 1px solid var(--hairline-strong); background: color-mix(in srgb, var(--space-900) 78%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: var(--space-1); }
.tl-island__label { padding: 0 var(--space-3); font-size: var(--step--1); letter-spacing: 0.06em; color: var(--text-soft); white-space: nowrap; min-width: 8.5rem; text-align: center; font-variant-numeric: lining-nums; }
.tl-island button { width: var(--island-h); height: 2.25rem; display: grid; place-items: center; background: none; border: 0; color: var(--text-soft); cursor: pointer; font: inherit; font-size: 1.1rem; transition: color var(--speed), background var(--speed); }
.tl-island button:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--ray-violet) 22%, transparent); }
.tl-island button:disabled { opacity: 0.35; cursor: default; }
.tl-island button:focus-visible { outline-offset: -3px; }
html:not([data-js]) .tl-island:not(.tl-island--link) { display: none; }
/* The same box on the entry pages, holding a link back to the timeline */
.tl-island--link a { display: flex; align-items: center; height: 2.25rem; padding: 0 var(--space-4); font-size: var(--step--1); letter-spacing: 0.06em; color: var(--text-soft); text-decoration: none; white-space: nowrap; transition: color var(--speed), background var(--speed); }
.tl-island--link a:hover { color: var(--text); background: color-mix(in srgb, var(--ray-violet) 22%, transparent); }
.tl-island--link a:focus-visible { outline-offset: -3px; }

/* ---------- Intro ---------- */
.intro { padding-block: var(--space-5) var(--space-4); }
.intro h1 { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.005em; max-width: 18ch; margin-block: var(--space-2) var(--space-3); }
.intro h1 .prism-text { background: var(--prism); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .intro h1 .prism-text { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; } }
.intro p.lede { max-width: 38rem; color: var(--text-soft); font-size: var(--step-1); line-height: 1.5; }

/* ---------- The timeline ----------
   An ordered list of entries along a beam of refracted light. Wide screens: a horizontal strip you scroll
   sideways. Narrow screens: the same list, running down the page. */
.timeline { --beam: 2px; position: relative; }
.entries { position: relative; display: grid; gap: var(--space-5); padding: var(--space-2) 0 var(--space-5) var(--space-5); }
.entries::before { /* the beam: vertical on narrow screens */
  content: ""; position: absolute; left: 0.55rem; top: 0; bottom: 0; width: var(--beam);
  background: var(--prism-down); box-shadow: 0 0 14px 1px color-mix(in srgb, var(--ray-violet) 55%, transparent); opacity: 0.9;
}
.entry { position: relative; }
.entry__node {
  position: absolute; left: calc(-1 * var(--space-5) + 0.55rem + var(--beam) / 2); top: 1.4rem; width: 0.9rem; height: 0.9rem; transform: translate(-50%, 0);
  border-radius: 50%; background: var(--space-950); border: 2px solid var(--star-500); transition: border-color var(--speed), box-shadow var(--speed), background var(--speed);
}
.entry[data-state="open"] .entry__node { border-color: var(--ray-yellow); background: #fff; }
.entry[data-active] .entry__node { border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ray-violet) 40%, transparent), 0 0 18px 4px color-mix(in srgb, var(--ray-yellow) 50%, transparent); }
.entry__card {
  position: relative; padding: var(--space-4); border: 1px solid var(--hairline); background: var(--surface);
  transition: border-color var(--speed) var(--ease), background var(--speed) var(--ease), opacity var(--speed);
}
.entry[data-active] .entry__card { border-color: var(--hairline-strong); background: var(--surface-hover); }
.entry[data-active] .entry__card::before { content: ""; position: absolute; inset: -1px -1px auto -1px; height: 2px; background: var(--prism); }
.entry[data-state="sealed"] .entry__card { opacity: 0.62; }
.entry[data-state="sealed"][data-active] .entry__card { opacity: 0.85; }
.entry__card { display: flex; flex-direction: column; }
.entry__cta { margin-top: auto; padding-top: var(--space-3); }
/* The whole card is the link: the button's link stretches over the card */
.entry__link { color: inherit; text-decoration: none; }
.entry__link::after { content: ""; position: absolute; inset: 0; }
.entry__link:focus-visible { outline: none; }
.entry__btn { display: inline-block; padding: var(--space-2) var(--space-4); border: 1px solid var(--hairline-strong); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); transition: background var(--speed) var(--ease), color var(--speed), border-color var(--speed); }
.entry[data-state="open"] .entry__card:hover, .entry[data-state="open"] .entry__card:focus-within { border-color: var(--ray-orange); background: var(--surface-hover); }
.entry__card:hover .entry__btn, .entry__card:focus-within .entry__btn { background: var(--ray-yellow); border-color: var(--ray-yellow); color: var(--space-950); }
.entry__link:focus-visible .entry__btn { outline: 2px solid var(--ray-yellow); outline-offset: 3px; }
.entry__no { font-size: var(--step--2); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); }
.entry__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.12; margin-bottom: var(--space-2); }
.entry__excerpt { color: var(--text-soft); font-size: var(--step-0); }
.entry--end { color: var(--text-muted); font-size: var(--step--1); letter-spacing: 0.06em; padding-block: var(--space-2); }
.entry--end .entry__node { top: 0.9rem; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-3); color: var(--text-muted); font-size: var(--step--1); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); }
.site-footer p { margin: 0; }
.motion-toggle { font: inherit; color: var(--text-muted); background: none; cursor: pointer; border: 1px solid var(--hairline-strong); padding: var(--space-1) var(--space-3); }
.motion-toggle:hover { color: var(--text); border-color: var(--ray-yellow); }
.motion-toggle[aria-pressed="true"] { color: var(--ray-yellow); border-color: var(--ray-yellow); }

/* ---------- Narrow screens: the island becomes a pill along the bottom ---------- */
@media (max-width: 59.99rem) {
  html[data-js] .tl-island[data-island] { position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 2 * var(--space-3)); }
  html[data-js] body.home { padding-bottom: 5rem; }
  .entries { padding-right: var(--space-4); grid-template-columns: minmax(0, 1fr); } /* a right margin, and a column that cannot grow past the screen */
  .entry, .entry__card { min-width: 0; }
  .entry__card { overflow-wrap: anywhere; }
}

/* ---------- Wide screens: one screen, the timeline runs sideways ---------- */
@media (min-width: 60rem) {
  html[data-js] body.home { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
  html[data-js] body.home main { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  html[data-js] body.home .site-footer { padding-block: var(--space-3); }
  html[data-js] .intro { padding-block: var(--space-4) var(--space-3); }
  html[data-js] .journal { min-height: 0; display: grid; align-items: center; }
  .timeline { overflow-x: auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; padding-inline: calc(50% - var(--card-w) / 2); outline-offset: -2px; } /* so that every entry, first and last included, can sit in the middle */
  .entries { display: flex; width: max-content; gap: var(--space-4); padding: var(--space-5) 0 var(--space-4) 0; }
  .entries::before { left: 0; right: 0; top: calc(var(--space-5) + 0.45rem); bottom: auto; width: auto; height: var(--beam); background: var(--prism); }
  .entry { width: var(--card-w); flex: none; padding-top: var(--space-4); }
  .entry__node { left: var(--space-4); top: 0.45rem; transform: translate(-50%, -50%); }
  .entry__card { height: 100%; }
  .entry--end { width: 12rem; align-self: start; }
  .entry--end .entry__node { left: var(--space-4); top: 0.45rem; }
  .entry--end .entry__card { border: 0; background: none; padding-inline: 0; }
}
@media (min-width: 60rem) and (max-height: 52rem) {
  html[data-js] .intro h1 { font-size: var(--step-3); margin-block: var(--space-1) var(--space-2); }
  html[data-js] .intro p.lede { font-size: var(--step-0); }
  html[data-js] .entries { padding-top: var(--space-4); }
}
@media (min-width: 60rem) and (max-height: 40rem) {
  html[data-js] .intro p.lede, html[data-js] .intro .eyebrow { display: none; }
  html[data-js] .entry__card { padding: var(--space-3); }
  html[data-js] .site-header .wrap { height: 3.5rem; }
  html[data-js] .site-footer { padding-block: var(--space-2); }
}

/* ---------- Reading an entry ---------- */
.reading { padding-block: var(--space-5) var(--space-5); }
.reading__head, .reading__body, .reading__nav { max-width: 40rem; margin-inline: auto; }
.reading__head h1 { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.04; margin: var(--space-2) 0 var(--space-3); }
.reading__lede { font-size: var(--step-1); line-height: 1.45; color: var(--text-soft); font-style: italic; }
.reading__body { margin-top: var(--space-5); display: grid; gap: var(--space-4); font-size: 1.2rem; line-height: 1.75; color: var(--text-soft); }
.reading__body .reading__sign { margin-top: var(--space-2); text-align: right; font-style: italic; color: var(--text); letter-spacing: 0.02em; }
.reading__nav { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; }
.reading__nav a { color: var(--text-soft); text-decoration: none; }
.reading__nav a:hover { color: var(--ray-yellow); }
/* On a short page the footer still sits on the bottom edge */
body.entry-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.entry-page main { flex: 1; }
.tl-island--link a > span { margin-right: 0.4rem; }