/* ============================================================
   THE VISITOR  /  PAGES (lab)
   The chrome every sub-page shares, lifted rule for rule from section-lab.html so Work, About and
   Contact look like the home lab: nav, page hero, section head, cta, footer F, grain and glow.
   Page-specific rules live in each page's own <style>. Folds into styles.css with system.css later.
   ============================================================ */

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(5, 5, 5, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav__brand img { height: 14px; width: auto; }
.nav__links { display: flex; align-items: center; gap: var(--s-6); }
.nav__links a:not(.btn) { font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; color: var(--text-2); text-decoration: none; transition: color var(--dur-fast); }
.nav__links a:not(.btn):hover, .nav__links a[aria-current="page"] { color: var(--text); }
@media (max-width: 767px) { .nav__links { gap: var(--s-4); } .nav__links a:not(.btn) { display: none; } }

/* ---------- page hero: quiet and typographic. The home hero has the tower; these have the words. ---------- */
.page-hero { position: relative; padding-block: var(--s-10) var(--s-9); }
.page-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); align-items: end; }
.page-hero .t-label { grid-column: 1 / -1; }
.page-hero .t-display { grid-column: 1 / 10; max-width: 20ch; }
.page-hero .t-lead { grid-column: 1 / 8; }
@media (max-width: 767px) {
  .page-hero { padding-block: var(--s-9) var(--s-8); }
  .page-hero .t-display, .page-hero .t-lead { grid-column: 1 / -1; }
}

/* a page hero with the footer's light turned over: the dither gradient comes down from the top edge */
.page-hero--lit { overflow: hidden; padding-top: clamp(14rem, 34vh, 22rem); }   /* room for the light to fall before the words */
/* no glow here (Owen): the dither alone carries the light on the Work hero */
.page-hero__grad { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero__grad canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.page-hero--lit > .container { position: relative; z-index: 1; }

/* ---------- the client marquee (the home lab's) ---------- */
.marquee { overflow: hidden; padding-block: 1.6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee-track { display: flex; width: max-content; animation: marquee 50s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: 3.25rem; padding-right: 3.25rem; flex: none; }
.marquee-logo { flex: none; width: 120px; height: 90px; object-fit: contain; opacity: 0.7; transition: opacity 0.3s; }
.marquee-logo:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- the subject hero: the home hero's frame on a sub-page. A real subject through the dot dither (the engine), the page
   fading up from the bottom, the words at the foot. ---------- */
.hero { position: relative; isolation: isolate; min-height: calc(88svh - 72px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: var(--bg); }
#dither-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 42%, rgba(5, 5, 5, 0.5) 72%, rgba(5, 5, 5, 0.9) 90%, var(--bg) 100%); }
.hero__content { position: relative; z-index: 2; align-self: end; width: 100%; padding-top: var(--s-10); padding-bottom: var(--s-8); }
.hero__content .t-display { max-width: 20ch; }
.hero__content .t-lead { margin-top: var(--s-4); max-width: 48ch; }
.hero__content .t-label { margin-bottom: var(--s-5); }

/* ---------- a page hero with the home CTA's dither field under it (unused) ---------- */
.page-hero--field { isolation: isolate; min-height: 62vh; display: grid; align-items: end; overflow: hidden; }
.page-hero--field > .container { position: relative; z-index: 1; width: 100%; }   /* a grid item with auto margins would shrink to its text */
.cta-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cta-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.8; }
.cta-field::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 46%, rgba(5, 5, 5, 0.72) 76%, var(--bg) 100%); }

/* ---------- the dot field under sections (the lab's convention) ---------- */
.dots { position: relative; container-type: inline-size; overflow: hidden; }
.dots > .container { position: relative; z-index: 1; }
.dots::before {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  --p: calc(((min(100cqw, 1440px) - 2 * var(--margin) - 11 * var(--col-gap)) / 12 + var(--col-gap)) / 2);
  left: calc((100cqw - min(100cqw, 1440px)) / 2 + var(--margin) - 40 * var(--p));
  width: calc(100cqw + 80 * var(--p));
  background-image: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.11) 1.2px, transparent 1.7px);
  background-size: var(--p) var(--p);
}

/* ---------- section head, split (the lab's override of the system's) ---------- */
.section-head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.section-head--split .t-h2 { grid-column: 1 / 8; max-width: none; }
.section-head--split .section-head__note { grid-column: 9 / 13; justify-self: end; }
@media (max-width: 767px) { .section-head--split .t-h2, .section-head--split .section-head__note { grid-column: 1 / -1; justify-self: start; text-align: left; } }

/* ---------- closing cta ---------- */
.cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); }
.cta > * { grid-column: 1 / 9; }
.cta .t-lead { max-width: 46ch; }
.cta-row { display: flex; align-items: center; gap: var(--s-6); margin-top: var(--s-3); flex-wrap: wrap; }
@media (max-width: 767px) { .cta > * { grid-column: 1 / -1; } }

/* ---------- footer F: the dither gradient. A tall dark sign-off; a soft light comes up through the bottom edge and dissolves into the dark through the 4px Bayer. ---------- */
.footer { position: relative; min-height: 72vh; display: flex; align-items: flex-start; overflow: hidden; border-top: 1px solid var(--line); padding-block: var(--s-9) var(--s-7); }
.footer::before { content: ''; position: absolute; z-index: 0; left: 50%; top: 100%; width: 108vw; height: 70vw; max-width: 1800px; max-height: 1200px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 79, 0, 0.235), rgba(255, 79, 0, 0.09) 43%, rgba(255, 79, 0, 0.03) 73%, rgba(255, 79, 0, 0)); pointer-events: none; }
.footer__grad { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.footer__grad canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.footer__grid { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); align-content: start; align-items: start; }
.footer__brand { grid-column: 1 / 5; display: grid; gap: var(--s-4); }
.footer__brand img { height: 13px; width: auto; }
.footer__brand .t-small { max-width: 28ch; }
.footer__nav { grid-column: 6 / 9; }
.footer__social { grid-column: 9 / 12; }
.footer__nav, .footer__social { display: grid; gap: var(--s-3); align-content: start; }
.footer__nav a, .footer__social a { font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; color: var(--text-2); text-decoration: none; width: fit-content; transition: color var(--dur-fast); }
.footer__nav a:hover, .footer__social a:hover { color: var(--text); }
.footer__meta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-6); flex-wrap: wrap; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.footer__meta a { color: inherit; text-decoration: none; }
.footer__meta a:hover { color: var(--text); }
@media (max-width: 767px) { .footer__brand, .footer__nav, .footer__social { grid-column: 1 / -1; } }

/* ---------- the tuning panel (the home lab's), for dialling a hero's dither in; L hides and shows it ---------- */
.lab-dots { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 100; display: grid; gap: 6px; width: 320px; box-sizing: border-box; padding: 10px 12px 12px; background: var(--panel); border: 1px solid var(--line-2); }
.lab-dots label { display: grid; grid-template-columns: 54px 1fr 38px; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; color: var(--text-3); }
.lab-dots output { text-align: right; color: var(--text); }
.lab-dots input[type=range] { width: 100%; margin: 0; accent-color: var(--accent); }
.lab-dots__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.lab-dots__row button { font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; color: var(--text-3); padding: 0; }
.lab-dots__row button:hover { color: var(--text); }
.lab-dots__row span { display: flex; gap: 10px; flex: none; }
.lab-dots__row button:disabled { opacity: 0.35; cursor: default; }
.lab-dots__row button:disabled:hover { color: var(--text-3); }
.lab-dots__row code { font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-2); user-select: all; }
.lab-dots > * { min-width: 0; }
body.hide-lab .lab-dots, body.hide-lab .lab-stack { display: none; }
/* the panels gathered into one stack (lab-settings.js), each with a head and a minimize */
.lab-stack { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 100; display: flex; flex-direction: column; gap: 8px; width: 320px; max-height: calc(100vh - 2 * var(--s-5)); overflow: auto; }
.lab-stack .lab-dots { position: static; width: auto; bottom: auto; right: auto; }
.lab-dots__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--t-label); text-transform: uppercase; color: var(--text-3); }
.lab-dots__head button { font-family: var(--font-mono); font-size: 14px; line-height: 1; color: var(--text-3); padding: 0 4px; }
.lab-dots__head button:hover { color: var(--text); }
.lab-dots.is-min > :not(.lab-dots__head) { display: none; }
.lab-dots.is-min { padding-bottom: 10px; }

/* ---------- the treatment: a fine grain over everything, dither included (a 216px raster tile made once in pages.js) ---------- */
.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.14; will-change: transform; contain: strict; background-repeat: repeat; background-size: 216px 216px; }

/* touch devices: no card or headshot dither at all; the picture shows with its gradient, as it would on hover (Owen) */
@media (hover: none) { .wm canvas, .member__photo canvas { display: none !important; } .wm::after { opacity: 1 !important; } }

/* the tuning panels exist only where the head script set html.lab (localhost, or ?lab=1); nowhere else do they ever paint */
html:not(.lab) .lab-dots, html:not(.lab) .lab-stack { display: none !important; }

/* the hero arrives from black: its canvas and its words stay dark until the engine has a real frame (data-ready), then fade in together */
#dither-canvas { opacity: 0; transition: opacity 0.9s ease; }
.hero[data-ready] #dither-canvas { opacity: 1; }
.hero:has(#dither-canvas) .hero__content { transition: opacity 0.9s ease; }
.hero:has(#dither-canvas):not([data-ready]) .hero__content { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #dither-canvas, .hero:has(#dither-canvas):not([data-ready]) .hero__content { opacity: 1; transition: none; } }

@media (max-width: 767px) {
  .footer::before { width: 180vw; height: 120vw; }   /* phones: the glow was sized in vw and vanished; now it reads */
  .footer__grad { top: 48%; }   /* the dither field sits under the words, not behind them */
}

@media (max-width: 767px) {
  .dots::before { --p: calc(((100cqw - 2 * var(--margin) - 3 * var(--col-gap)) / 4 + var(--col-gap)) / 2); }   /* phones: a four-column pitch (~44px), not the twelve-column one (~15px) (Owen: the grid is too small on mobile) */
}

/* footer links: a 24px touch target, the rhythm unchanged */
.footer__nav a, .footer__social a { padding-block: 5px; margin-block: -5px; }