/* ============================================================
   KINETIC HERITAGE — Accelerationist Coastal
   A direction study for Justin Wasser. Bone & Sand kept as the
   anchor; everything else sharpened. Prestige serif (heritage)
   against engineered mono (frontier). Institutional rigor:
   zero radius, hairlines, technical readouts. No soft shadows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Bone & Sand (the anchor) ---- */
  --bone-50:  #FBF8F1;
  --bone-100: #F6F1E8;
  --bone-200: #EFE9DD;
  --bone-300: #E6DECF;
  --greige-400: #BCB09E;
  --greige-500: #A99C88;
  --greige-600: #8C8071;
  --ink-900: #2C2A25;
  --ink-700: #4A463E;
  --ink-500: #6E6A60;
  --ink-300: #9A9488;

  /* ---- accents, sharper: status dots & rule ticks only ---- */
  --clay-300: #DBBBA4;
  --clay-500: #BC8467;   /* the live / active signal */
  --clay-700: #97623F;
  --sea-500:  #93A89E;   /* the quiet one */
  --sea-700:  #6E8279;

  /* ---- structural rules ---- */
  --rule:        rgba(44, 42, 37, 0.16);
  --rule-faint:  rgba(44, 42, 37, 0.08);
  --rule-strong: rgba(44, 42, 37, 0.30);
  --rule-tech:   rgba(44, 42, 37, 0.42);  /* the sharp technical hairline */

  /* ---- type ---- */
  --serif: 'Newsreader', 'Hoefler Text', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, Arial, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --display-1: clamp(3.5rem, 1rem + 9vw, 8.5rem);
  --display-2: clamp(2.5rem, 1.2rem + 5vw, 5.25rem);
  --display-3: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --display-4: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  --lede: clamp(1.375rem, 1.05rem + 1.2vw, 1.9rem);

  --tracking-mono: 0.02em;
  --tracking-label: 0.22em;   /* the tracked mono label */
  --tracking-label-wide: 0.32em;

  /* ---- spacing ---- */
  --margin-page: clamp(1.25rem, 5.5vw, 7.5rem);
  --measure-narrow: 34rem;
  --measure-text: 42rem;
  --measure-max: 88rem;
  --section-y: clamp(4rem, 8vw, 9rem);

  /* ---- motion ---- */
  --ease-sharp: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 340ms;
  --dur-slow: 620ms;

  --grain-opacity: 0.07;
}

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

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

body {
  margin: 0;
  background: var(--bone-100);
  color: var(--ink-900);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::selection { background: var(--clay-300); color: var(--ink-900); }
:focus-visible { outline: 1px solid var(--clay-500); outline-offset: 3px; }

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }

/* the tracked mono label — the one piece of "UI" type */
.label {
  font-family: var(--mono);
  font-size: 0.6875rem;          /* 11px */
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-500);
  line-height: 1;
}
.label--wide { letter-spacing: var(--tracking-label-wide); }
.label--ink  { color: var(--ink-900); }
.label--faint{ color: var(--ink-300); }
.label--clay { color: var(--clay-700); }
.label--sea  { color: var(--sea-700); }
.foot__top { transition: color var(--dur-base) var(--ease-quiet); }
.foot__top:hover { color: var(--ink-900); }

/* mono data value */
.data {
  font-family: var(--mono);
  font-size: 0.9375rem;          /* 15px */
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  color: var(--ink-900);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.data--sm { font-size: 0.8125rem; }
.data--lg { font-size: 1.0625rem; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  color: var(--ink-900);
}

/* ============================================================
   TECHNICAL READOUT — the signature element
   label over value, cells divided by a thin vertical rule
   ============================================================ */
.readout {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-top: 1px solid var(--rule-tech);
  border-bottom: 1px solid var(--rule-tech);
}
.readout__cell {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.3rem 1.05rem 0;
  margin-right: 1.3rem;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.readout .data { white-space: nowrap; font-size: 0.875rem; }
.readout--lg .data { font-size: 0.9375rem; }
.readout__cell:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.readout--lg .readout__cell { padding-block: 1.25rem 1.3rem; }

/* live status dot */
.dot {
  width: 6px; height: 6px;
  background: var(--clay-500);
  display: inline-block;
  flex: none;
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .dot { animation: ds-blink 2.4s var(--ease-quiet) infinite; }
}
@keyframes ds-blink { 0%, 55%, 100% { opacity: 1; } 70%, 85% { opacity: 0.25; } }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

/* ============================================================
   CORNER-TICK FRAME — crop marks around a plate
   ============================================================ */
.frame { position: relative; }
.frame__ticks { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.frame__ticks::before,
.frame__ticks::after,
.frame__ticks > i::before,
.frame__ticks > i::after { content: ""; position: absolute; width: 15px; height: 15px; }
/* registration marks sit just OUTSIDE the frame, on the bone */
.frame__ticks::before { top: -7px; left: -7px; border-top: 1px solid var(--ink-700); border-left: 1px solid var(--ink-700); }
.frame__ticks::after  { top: -7px; right: -7px; border-top: 1px solid var(--ink-700); border-right: 1px solid var(--ink-700); }
.frame__ticks > i::before { content: ""; position: absolute; width: 15px; height: 15px; bottom: -7px; left: -7px; border-bottom: 1px solid var(--ink-700); border-left: 1px solid var(--ink-700); }
.frame__ticks > i::after  { content: ""; position: absolute; width: 15px; height: 15px; bottom: -7px; right: -7px; border-bottom: 1px solid var(--ink-700); border-right: 1px solid var(--ink-700); }

/* ============================================================
   PHOTOGRAPHY — faded film B&W, crisp corners, grain
   ============================================================ */
.film-bw { filter: grayscale(1) contrast(0.94) brightness(1.04) sepia(0.10); }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  opacity: var(--grain-opacity); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* ============================================================
   TICK RULER — a measured hairline
   ============================================================ */
.ruler {
  height: 10px;
  background-image: repeating-linear-gradient(to right, var(--rule-tech) 0 1px, transparent 1px 24px);
  background-position: left bottom;
  background-repeat: repeat-x;
  border-bottom: 1px solid var(--rule);
}

/* ============================================================
   BUTTONS — squared, mono, institutional
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-family: var(--mono); font-weight: 500; font-size: 0.75rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: 0.95rem 1.5rem; border: 1px solid var(--ink-900);
  background: var(--ink-900); color: var(--bone-100);
  cursor: pointer; line-height: 1;
  transition: background var(--dur-base) var(--ease-sharp), color var(--dur-base) var(--ease-sharp);
}
.btn:hover { background: var(--clay-700); border-color: var(--clay-700); }
.btn { white-space: nowrap; }
.btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--rule-tech); }
.btn--ghost:hover { background: var(--ink-900); color: var(--bone-100); border-color: var(--ink-900); }
.btn__arrow { font-family: var(--mono); }

/* ============================================================
   REVEAL — kinetic rise. opacity is PERMANENTLY 1 (never animated),
   so content can never blank when a throttled/offscreen iframe
   freezes the transition. Only transform animates: stuck at t0 just
   means a harmless ~22px shift, still fully visible.
   ============================================================ */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: transform var(--dur-slow) var(--ease-sharp); }
  .reveal:not(.vis) { transform: translateY(22px); }
  .reveal[data-d="1"] { transition-delay: 70ms; }
  .reveal[data-d="2"] { transition-delay: 140ms; }
  .reveal[data-d="3"] { transition-delay: 210ms; }
}
@media (prefers-reduced-motion: reduce) { .reveal { transform: none !important; } }

/* draw-in hairline — rests visible (scaleX 1); only the entrance scales up */
.drawline { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .drawline { transition: transform var(--dur-slow) var(--ease-sharp); }
  .drawline:not(.vis) { transform: scaleX(0); }
}

@media print { .reveal, .drawline { transform: none !important; } .grain::after { display: none; } }

/* ============================================================
   MERIDIAN TRANSIT — the westward ruler. One real move:
   Toronto (origin) → South Bay (terminus). The line/scale is
   the device; only the two endpoints carry coordinates.
   ============================================================ */
.transit { background: var(--bone-200); border-top: 1px solid var(--rule-tech); border-bottom: 1px solid var(--rule-tech); }
.transit__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; }
.transit__meta { display: flex; gap: 1.6rem; }

.transit__scale { position: relative; height: 220px; margin-top: 2.6rem; }
.transit__ticks { position: absolute; left: 0; right: 0; top: 150px; height: 8px;
  background-image: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 32px); }
.transit__axis { position: absolute; left: 0; right: 0; top: 150px; border-top: 1px solid var(--rule-tech); }
.transit__seg  { position: absolute; top: 149px; height: 2px; background: var(--clay-500); transform-origin: left center; }
.transit__west { position: absolute; right: 0; top: 128px; }

.transit__stop { position: absolute; top: 0; height: 158px; }
.transit__stem { position: absolute; left: 0; top: 86px; bottom: 0; border-left: 1px solid var(--ink-700); }
.transit__dot  { position: absolute; left: -4px; top: 146px; width: 9px; height: 9px; background: var(--clay-500); }
.transit__lab  { position: absolute; top: 0; display: flex; flex-direction: column; gap: 0.5rem; width: 220px; }
.transit__stop--start .transit__lab { left: 0; }
.transit__stop--end   .transit__lab { right: -1px; left: auto; text-align: right; }
.transit__stop--end   .transit__stem { left: auto; right: 0; }
.transit__stop--end   .transit__dot  { left: auto; right: -5px; }

.transit__deg { position: absolute; top: 166px; transform: translateX(-50%); }

@media (max-width: 760px) {
  .transit__scale { height: auto; display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1.8rem; }
  .transit__ticks, .transit__axis, .transit__seg, .transit__west, .transit__deg, .transit__stem, .transit__dot { display: none; }
  .transit__stop { position: static; height: auto; border-left: 2px solid var(--clay-500); padding-left: 1rem; }
  .transit__lab { position: static; width: auto; text-align: left !important; }
  .transit__stop--end .transit__lab { text-align: left; }
}