*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 16px/1.5 var(--font-text);
  color: var(--on-field);
  background: var(--field);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
a { color: inherit; }
img { max-width: none; }
/* YouTube serves these covers as 4:3 with the 16:9 picture letterboxed inside. Show only the picture
   until the master frames arrive (content/projects.json "needs"). */
img[src$="/covers/first-light.jpg"], img[src$="/covers/lifted-sizzle.jpg"] { object-view-box: inset(12.5% 0); }

/* Each set takes one colour, in walls and type together. */
.page-ai      { --field: var(--organization-green); --on-field: var(--white); --focus: var(--white); }
.page-film    { --field: var(--reese);              --on-field: var(--ink);   --focus: var(--ink); }
.page-stills  { --field: var(--telescope-yellow);   --on-field: var(--ink);   --focus: var(--ink); }
.page-contact { --field: var(--fort-point-violet); --on-field: var(--white); --focus: var(--white); }
.page-project, .page-home { --field: #000; --on-field: var(--white); --focus: var(--telescope-yellow); }

.site-header {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 22px var(--gutter) 0;
  position: relative; z-index: 2; /* above the page: a poster-size heading's glyph box can rise into it */
}
.site-name {
  font: 700 22px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.site-name .mc { text-transform: none; font-size: .7em; vertical-align: .42em; letter-spacing: .05em; margin-right: -.02em; }
.site-nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.site-nav a {
  font: 600 17px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: 4px 0 6px; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.tab-ai .site-nav a[href="/ai/"], .tab-film .site-nav a[href="/film/"], .tab-stills .site-nav a[href="/stills/"] { border-bottom-color: currentColor; }

.site-footer {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  padding: 28px var(--gutter) 26px;
  font: 500 14px/1.3 var(--font-text);
}
.site-footer a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); }
.site-footer a:hover { border-bottom-color: currentColor; }

@media (max-width: 699px) {
  .site-header { flex-direction: column; gap: 14px; }
  .site-nav { gap: 6px 20px; }
  .site-nav a { font-size: 16px; letter-spacing: .14em; }
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Contact: the telephone in telescope yellow. */
.contact { position: relative; overflow: hidden; min-height: calc(100svh - 130px); padding: clamp(40px, 9vh, 120px) var(--gutter) clamp(40px, 8vh, 100px); } /* footer at the foot, as on the sheets */
/* The page's name in tone behind the links, as on the section pages (Hayden, 2026-10-20: "for consistency"), off the
   bottom right. */
.contact-title { position: absolute; z-index: -1; right: calc(var(--name-size) * -.05); bottom: calc(var(--name-size) * -.076); margin: 0;
  white-space: nowrap; pointer-events: none; font: 800 var(--name-size)/.74 var(--font-display); text-transform: uppercase; letter-spacing: -.01em;
  color: color-mix(in srgb, var(--field) 84%, #000); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact-list a {
  font: 600 clamp(28px, 3.6vw, 56px)/1.05 var(--font-display); letter-spacing: .02em; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.contact-list a:hover { border-bottom-color: currentColor; }