/* 0000 — shared core
   Vernacular across the site: an animation studio. The multiplane camera,
   the filmstrip, the colour plates. Tokens, chrome and shared components
   live here; each page adds one stylesheet of its own. */

:root {
  --ground: #E3E9E5;   /* table surface */
  --plane:  #F5F8F6;   /* a lit sheet — brighter than the table */
  --lit:    #FFFFFF;   /* light coming up through the glass */
  --glass:  #3E6B68;   /* edges and structure */
  --brass:  #8A5A20;   /* accent TEXT — carries contrast */
  --brass-fill: #C8955A; /* accent strokes and fills — no contrast duty */
  --ink:    #16211F;
  --dim:    #556865;

  --display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
             "Segoe UI", Inter, system-ui, sans-serif;
  --body: "Iowan Old Style", Georgia, "Palatino Linotype", "Book Antiqua", serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo,
          Consolas, monospace;

  --gut: clamp(1.25rem, 5vw, 5rem);
  --rail: color-mix(in srgb, var(--glass) 28%, transparent);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 1rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ── shared label role ────────────────────────────────────────────── */

.label, .page-eyebrow, .foot {
  font: 600 0.6875rem/1.2 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

/* ── skip link ────────────────────────────────────────────────────── */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gut); top: 1rem; z-index: 100;
  background: var(--brass); color: var(--ground);
  padding: .6rem 1rem; font: 600 .8rem var(--mono);
}

/* ── header ───────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem;
  padding: 1.6rem var(--gut);
  border-bottom: 1px solid transparent;
  transition: padding .4s ease, background-color .4s ease, border-color .4s ease;
}
.scrolled .site-header {
  padding-block: .85rem;
  background: color-mix(in srgb, var(--ground) 80%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--rail);
}

.brand {
  margin: 0;
  font: 800 1.05rem/1 var(--display);
  letter-spacing: -0.02em;
  view-transition-name: brand;
}

.site-header nav { display: flex; gap: 1.35rem; flex-wrap: wrap; }
.site-header nav a {
  color: var(--dim);
  font: 600 .6875rem/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }

/* ── page head (every page but the front) ─────────────────────────── */

.page-head {
  padding: 15vh var(--gut) 7vh;
  max-width: 62rem;
}
.page-eyebrow { color: var(--brass); margin-bottom: 1.5rem; }
.page-title {
  margin: 0;
  font: 800 clamp(2.6rem, 9vw, 6.5rem)/0.92 var(--display);
  letter-spacing: -0.045em;
  view-transition-name: page-title;
}
.page-lede {
  margin: 1.8rem 0 0;
  max-width: 42ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: color-mix(in srgb, var(--ink) 74%, var(--ground));
}

/* ── closing note (shared by the showcase pages) ──────────────────── */

.page-note {
  padding: 10vh var(--gut) 12vh;
  max-width: 44ch;
  color: color-mix(in srgb, var(--ink) 74%, var(--ground));
}

/* ── footer ───────────────────────────────────────────────────────── */

.foot {
  padding: 2rem var(--gut) 3rem;
  border-top: 1px solid var(--rail);
  color: var(--dim);
  letter-spacing: .1em;
  text-transform: none;
}
.foot p { margin: 0; }

/* ── reveal (progressive: visible unless JS opts in) ──────────────── */

.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.7,.28,1);
}

/* ── cross-document view transitions ──────────────────────────────── */

@view-transition { navigation: auto; }

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.22,.7,.28,1);
}
::view-transition-old(page-title), ::view-transition-new(page-title),
::view-transition-old(brand), ::view-transition-new(brand) {
  animation-duration: .5s;
}

/* ── narrow viewports ─────────────────────────────────────────────── */

@media (max-width: 560px) {
  .site-header { gap: .75rem; }
  .site-header nav { gap: .8rem; }
}

/* ── motion off ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* View transitions are animations, not transitions — silence them too. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

.calm .reveal { opacity: 1; transform: none; }