@import url('tokens.css');

/* Home page. Colour, type, space, grid and motion tokens live in tokens.css;
   this file only lays the page out. The accent is the active project's own
   brand hue, set at runtime; at rest it is the ink. */
:root {
  /* The grid overlay is a feature: present, never louder than the text. */
  --g-col: color-mix(in srgb, var(--ink) 1.25%, transparent);
  --g-edge: color-mix(in srgb, var(--ink) 6%, transparent);
  --g-base: color-mix(in srgb, var(--ink) 4%, transparent);
  --g-base-min: color-mix(in srgb, var(--ink) 1.5%, transparent);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--paper); color: var(--ink); transition: background-color 400ms var(--ease), color 400ms var(--ease); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--f-text);
  line-height: var(--l-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
h1, h2, p, ul, li { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--soft); outline-offset: 3px; }

.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stage canvas { display: block; width: 100%; height: 100%; }
.resolved { position: fixed; z-index: 1; pointer-events: none; transition: opacity 240ms var(--ease); }

/* ---------- page grid ---------- */
.page { position: relative; z-index: 2; height: 100vh; height: 100dvh; padding: var(--pad) var(--margin); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); height: var(--snap-h, 100%); }
.rail { grid-column: 1 / 4; display: flex; flex-direction: column; min-height: 0; }
.field { grid-column: 4 / 13; position: relative; min-width: 0; min-height: 0; }

/* ---------- rail: one size, one weight; hierarchy from colour and space ---------- */
.block + .block { margin-top: 48px; }
.name { color: var(--ink); }
.soft { color: var(--soft); }
.label { color: var(--soft); }
.label.gap { margin-top: 24px; }
/* Rows: name at the start, metadata at the far end. */
.row { display: flex; align-items: center; color: var(--ink); transition: color var(--t-base) var(--ease); }
.row .d { color: var(--quiet); font-size: var(--f-meta); letter-spacing: 0.01em; margin-left: auto; transition: color var(--t-base) var(--ease); }
.is-hovering .row, .is-hovering .row .d { color: var(--soft); }
.is-hovering .row.is-on { color: var(--ink); }
.is-hovering .row.is-on .d { color: var(--soft); }

/* Line = time. On a work row, a hairline draws from the name to its dates. */
.row .lead { flex: 1; height: 1px; margin: 0 12px; background: var(--soft); opacity: 0.5; transform: scaleX(0); transform-origin: left; transition: transform var(--t-quick) var(--ease); }
.timeline .row.is-on .lead { transform: scaleX(1); transition: transform var(--t-slow) var(--ease) 60ms; }

/* Dot = a particle. One per page: it travels to the active row in the
   project's colour, the first particle to leave for the field. */
.list { position: relative; }
.dot {
  position: absolute; left: -17px; top: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  transform: translateY(var(--dot-y, 0px)) scale(0);
  transition: transform var(--t-slow) var(--ease), background-color var(--t-slow) var(--ease);
}
.dot.is-on { transform: translateY(var(--dot-y, 0px)) scale(1); }
.dot.is-arriving { transition: transform 0s, background-color var(--t-slow) var(--ease); }

.links { display: flex; gap: 24px; }
.link { color: var(--ink); }
/* ---------- excerpt: the rail's lower section answers the hovered row ---------- */
.excerpt { margin-top: auto; min-height: calc(var(--lh) * 5); position: relative; }
.ex-title { color: var(--ink); }
.excerpt .soft { max-width: 34ch; }
.excerpt.is-out .ex-title, .excerpt.is-out .w { opacity: 0; transition: opacity var(--t-quick) var(--ease); }
/* entrance: the title, then each line of the body develops in turn */
.ex-title, .w { transition: opacity var(--t-base) var(--ease); transition-delay: var(--d, 0ms); }
/* the dwell line: fills while the real asset is about to resolve (linear: it is a clock) */
.ex-time { position: absolute; left: 0; bottom: -12px; height: 1px; width: 100%; background: var(--soft); opacity: 0.5; transform: scaleX(0); transform-origin: left; }
.ex-time.is-running { transform: scaleX(1); transition: transform var(--dwell, 1s) linear; }
.ex-time.is-done { opacity: 0; transition: opacity var(--t-slow) var(--ease); transform: scaleX(1); }

/* ---------- controls: bottom-right of the field, quiet until used ---------- */
.controls { position: absolute; right: 0; bottom: 0; display: flex; gap: 24px; }
.ctl { color: var(--soft); transition: color 200ms var(--ease); }
.ctl:hover, .ctl[aria-pressed="true"] { color: var(--ink); }

/* ---------- overlay: same box, same variables ---------- */
.guides { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 260ms var(--ease); }
body.grid-on .guides { opacity: 1; }
.guides .cols { position: absolute; top: 0; bottom: 0; left: var(--margin); right: var(--margin);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.guides .col { background: var(--g-col); box-shadow: inset 1px 0 0 var(--g-edge), inset -1px 0 0 var(--g-edge); position: relative; }
.guides .col span { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; color: var(--soft); font-size: 11px; }
.guides .rows { position: absolute; left: var(--margin); right: var(--margin); top: var(--pad); bottom: 0;
  background-image:
    repeating-linear-gradient(to bottom, var(--g-base) 0 1px, transparent 1px var(--lh)),
    repeating-linear-gradient(to bottom, var(--g-base-min) 0 1px, transparent 1px var(--bl)); }
.guides .mline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--g-edge); }
.guides .mline.l { left: var(--margin); }
.guides .mline.r { right: var(--margin); }
@media (max-width: 760px) { .guides .col:nth-child(n+5) { display: none; } }

@media (max-width: 760px) {
  body { overflow: auto; }
  .page { height: auto; }
  .grid { height: auto; }
  .field { grid-column: 1 / -1; grid-row: 1; height: 64svh; }
  .rail { grid-column: 1 / -1; grid-row: 2; padding-top: 48px; }
  .excerpt { margin-top: 48px; min-height: 0; }
  .controls { position: static; grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; } }