@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Shared palette with the portfolio, from the ASCII scene (hex in comments, converted to OKLCH). */
  --bg: oklch(0.2057 0.0233 62.95);           /* #1f150c  page, and the scene's own background */
  --bg-clear: oklch(0.2057 0.0233 62.95 / 0);
  --deep: oklch(0 0 0);                        /* #000000  ink on amber */
  --ground: oklch(0.2391 0.0158 141.13);       /* #1b211a  stacked sections below the hero */
  --grass: oklch(0.5638 0.0976 130.24);        /* #628141 */
  --grass-hi: oklch(0.7075 0.1056 129.88);     /* #8bae66 */
  --coat: oklch(0.8933 0.026 94.76);           /* #e1dcc9  the mark's dim bars */
  --coat-hi: oklch(0.8808 0.0603 83.48);       /* #ebd5ab */
  --stripe: oklch(0.3148 0.0474 69.64);        /* #412d15  hairlines, rail track */
  --stripe-deep: oklch(0.2352 0.0331 57.16);   /* #2a1a0e */
  --accent: oklch(0.8005 0.1349 71.05);        /* #f4ae52  eyebrows, links, CTA, rail fill */
  --ember: oklch(0.6264 0.1629 46.98);         /* #d4621a  hover */
  --text: oklch(0.9682 0.0254 78.92);          /* #fef3e2 */
  --text-dim: oklch(0.8933 0.026 94.76);       /* #e1dcc9 */

  --rule: var(--stripe);
  /* Scrim over the scene where the type sits. Strength measured, see DESIGN.md. */
  --veil: oklch(0.2057 0.0233 62.95 / 0.86);
  --veil-soft: oklch(0.2057 0.0233 62.95 / 0.6);

  --scene-top: clamp(6.5rem, 4rem + 9vh, 10rem);
  --step-film: clamp(2.4rem, 0.9rem + 5.6vw, 7rem);

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --space-section: clamp(3rem, 7vw, 6rem);

  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --step-hero: clamp(2.5rem, 0.9rem + 6.6vw, 7.5rem);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(100svh, 40rem);
  display: grid;
  grid-template-rows: auto auto 1fr;
  padding-inline: var(--gutter);
  background: var(--bg);
}

/* The ASCII scene (ascii/thylacines.js) fills the stage behind everything. */
.world {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* A soft veil behind each piece of type, so the words stay readable when an animal or a canopy walks or sways
   behind them, while the rest of the scene stays at full strength. It moves and fades with its text. */
.copy > *,
.top nav a,
.cta,
.rail,
.film-on h3,
.film-on .row ul,
.film-on .empty,
.film-on .plain {
  position: relative;
  width: fit-content;
}
.copy > *::before,
.top nav a::before,
.cta::before,
.rail::before,
.film-on h3::before,
.film-on .row ul::before,
.film-on .empty::before,
.film-on .plain::before {
  content: "";
  position: absolute;
  inset: -0.5rem -0.75rem;
  z-index: -1;
  pointer-events: none;
  /* no box: the scene clears a soft space around the type itself (drawClearings in ascii/thylacines.js) */
}

.top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
}
.brand { display: block; line-height: 0; }
.brand svg { width: 2.75rem; height: 2.75rem; }
.m-dim { fill: var(--coat); }
.m-lit { fill: var(--accent); }
.top nav { display: none; gap: 2.5rem; }
.top nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
}
.top nav a:hover { color: var(--text); }
.btn {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--rule);
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn { background: transparent; }

.copy {
  position: relative;
  z-index: 3;
  padding-block: clamp(2rem, 8vh, 6rem) 2.5rem;
}
.eyebrow {
  margin-bottom: 1rem;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
h1 {
  max-width: 13ch;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--step-hero);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.cta {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cta svg {
  box-sizing: content-box;
  padding: 1.1rem;
  background: var(--accent);
  color: var(--deep);
}
.cta:hover svg { background: var(--text); }
.cta:focus-visible { outline-offset: 6px; }

/* Sections */

main { padding-inline: var(--gutter); background: var(--ground); }

section {
  display: grid;
  gap: 1.5rem;
  padding-block: var(--space-section);
  border-top: 1px solid var(--rule);
}
section:first-child { border-top: 0; }
h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h3 {
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.row {
  display: grid;
  gap: 0.75rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.row:first-child { border-top: 0; padding-top: 0; }
.row:last-child { padding-bottom: 0; }

.row li, .plain li, .empty {
  font-size: var(--step-1);
  line-height: 1.4;
}
.row li, .empty { color: var(--text-dim); }
.plain { display: grid; gap: 0.5rem; }
.plain a { overflow-wrap: anywhere; }

footer {
  padding: 2rem var(--gutter) 2.5rem;
  background: var(--ground);
  color: var(--text-dim);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}
footer::before {
  content: "";
  display: block;
  margin-bottom: 2rem;
  border-top: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .top nav { display: flex; }
  section {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  section h2 { grid-column: 1 / 5; }
  section .body { grid-column: 5 / 13; max-width: 44rem; }
}

/* Film mode: the script pins the stage and scrubs the type with scroll; the scene behind runs on its own */

.film-on .film { height: calc(115svh * (var(--n, 5) - 1) + 100svh); position: relative; }
.film-on .stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  padding-inline: 0;
  display: block;
}
/* The film is the whole page: no strip after it, one background to the last pixel. */
.film-on body { background: var(--bg); }
.film-on footer { display: none; }

.film-on .top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  padding-inline: var(--gutter);
}
.film-on .cta { z-index: 5; }

.film-on main {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  background: none;
  pointer-events: none;
}
.film-on .scene {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  padding: var(--scene-top) var(--gutter) 0;
  border-top: 0;
  visibility: hidden;
  pointer-events: none;
}
.film-on .copy.scene { align-self: normal; }
.film-on .scene > *,
.film-on .scene .body > * { pointer-events: auto; }
.film-on .copy,
.film-on .scene .body,
.film-on .scene .row {
  transform-origin: 0 0;
  will-change: transform, opacity, filter;
}
.film-on .w,
.film-on .scene li,
.film-on .eyebrow { display: inline-block; will-change: transform; }
.film-on .scene li { display: block; }

.film-on h1 {
  max-width: 15ch;
  font-size: var(--step-film);
  line-height: 0.95;
}

.film-on section h2 {
  position: relative;
  z-index: 1; /* above the veil of the block below, which reaches up behind it */
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
/* The label sits above the block below it, so its own veil is pulled upward and stops short of that block's
   words; the block's veil reaches up behind the label from underneath. */
.film-on section h2::before {
  content: "";
  position: absolute;
  inset: -0.5rem -0.75rem -0.25rem;
  z-index: -1;
  pointer-events: none;
}
.film-on section .body { display: grid; max-width: none; }
.film-on #scene-build .body > .row {
  grid-area: 1 / 1;
  padding: 0;
  border: 0;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-content: start;
}
.film-on h3 {
  max-width: 14ch;
  font-size: var(--step-film);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.film-on .row ul { display: grid; gap: 0.25rem; }
.film-on .row li {
  color: var(--text-dim);
  font-size: var(--step-1);
  line-height: 1.3;
}
.film-on .empty {
  color: var(--text);
  font-weight: 700;
  font-size: var(--step-film);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 10ch;
}
.film-on .plain { gap: 0.35rem; }
.film-on .plain li {
  font-weight: 700;
  font-size: clamp(1.3rem, 0.55rem + 3.4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.film-on .plain a { text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

.rail {
  position: absolute;
  z-index: 5;
  left: var(--gutter);
  bottom: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  gap: 0.375rem;
}
.rail button {
  all: unset;
  box-sizing: border-box;
  display: grid;
  gap: 0.5rem;
  width: clamp(1.75rem, 7vw, 7.5rem);
  min-width: 0;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  cursor: pointer;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rail button[aria-current] { color: var(--text); }
.rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.rail .lab { display: none; }
.rail .bar { display: block; height: 3px; background: var(--rule); }
.rail .fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

@media (min-width: 48rem) {
  .rail button { width: clamp(5.25rem, 8vw, 7.5rem); }
  .rail .lab { display: block; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Day and night. The scene sets html.is-night or html.is-day as its sky turns; the page follows.
   Night matches the scene's black sky; day matches its white one, with the portfolio's ink and amber ink. */
html.is-night {
  --bg: oklch(0 0 0);                          /* the scene's night sky */
  --veil: oklch(0 0 0 / 0.86);
  --veil-soft: oklch(0 0 0 / 0.6);
}
html.is-day {
  color-scheme: light;
  --bg: oklch(1 0 0);                          /* the scene's day sky */
  --ground: oklch(0.95 0.02 75);               /* bone */
  --text: oklch(0.2352 0.0331 57.16);          /* ink #2a1a0e */
  --text-dim: oklch(0.45 0.014 75);            /* smoke #5a544d */
  --accent: oklch(0.52 0.11 60);               /* amber ink #965719 */
  --coat: oklch(0.45 0.014 75);
  --stripe: oklch(0.86 0.02 75);
  --deep: oklch(1 0 0);
  --veil: oklch(1 0 0 / 0.86);
  --veil-soft: oklch(1 0 0 / 0.6);
}
body, .hero, main, footer { transition: background-color 0.6s ease, color 0.6s ease; }

.top-end { display: flex; align-items: center; gap: 0.75rem; }
/* Day / night switch: set in the same mono as the eyebrow and the rail. The current time of day is lit amber,
   the other one waits dim; no box, no icon. */
.tod {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tod .sep { opacity: 0.5; }
.tod .d, .tod .n { transition: color 0.3s ease; }
html.is-day .tod .d, html.is-night .tod .n { color: var(--accent); }
.tod:hover .d, .tod:hover .n { color: var(--text); }
html.is-day .tod:hover .d, html.is-night .tod:hover .n { color: var(--accent); }
.tod:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }