/* ==========================================================================
   SSVIDEO — site.css
   Palette, typography and the dolly spine are set by design/direction.md.
   Night is the default (a tungsten-lit room). Day is the same room with
   the practicals up.
   Two faces only: Archivo (display) + Instrument Sans (body).
   Mono (ui-monospace) is reserved for timecode and shot numbers.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------- */
:root{
  --bg:#0B0C0E;            /* near-black, tungsten-lit room */
  --surface-1:#141619;     /* panel */
  --surface-2:#1D2126;     /* raised / hover */
  --border:#2A2F36;        /* steel hairline */
  --ink:#F4F1EA;           /* warm white, tungsten bounce */
  --muted:#99A1AB;         /* cool steel grey */
  --accent:#E8A33D;        /* tungsten amber — CTA + reel line only */
  --accent-hover:#F5B95C;
  --accent-2:#5C7C99;      /* steel blue — rules, decorative */
  --marker-line:#8A9BAA;   /* dolly-spine ring (inactive) — 6.9:1 on --bg */
  --marker-ink:#E6EAEF;    /* dolly-spine numeral (inactive) — 16.2:1 on --bg */

  /* measured-for-contrast text values */
  --accent-text:#E8A33D;        /* amber as text: 8.9:1 on --bg */
  --accent-2-text:#A8C0D4;      /* steel blue as small caps/links: 7.9:1 on --bg */
  --link:#A8C0D4;
  --cta-bg:#E8A33D;
  --cta-bg-hover:#F5B95C;
  --cta-ink:#0B0C0E;            /* 9.2:1 on the amber fill */
  --cta-border:transparent;
  --scrim-a:rgba(11,12,14,.74);
  --scrim-b:rgba(11,12,14,.42);
  --scrim-c:rgba(11,12,14,.94);

  --shadow:0 1px 0 rgba(255,255,255,.03), 0 18px 40px -24px rgba(0,0,0,.9);

  /* Header height. EVERY consumer reads this token — scroll-padding-top, the fixed
     bar itself, the mobile panel's top and height, the hero's top padding, the
     interior page-head offset and the mobile scroll hairline — so the bar and all
     of its offsets move together. Never hardcode a header height anywhere else.
     Raised for the larger brand mark on 2026-09-25 (was a flat 64px at every width);
     the phone value deliberately stays 64px so the Florida phone hero framing and
     the mobile panel geometry are untouched. */
  --head-h:64px;

  /* fluid scale */
  --step--1:clamp(.8125rem,.79rem + .12vw,.875rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.0625rem);
  --step-1:clamp(1.125rem,1.07rem + .28vw,1.25rem);
  --step-2:clamp(1.375rem,1.24rem + .6vw,1.75rem);
  --step-3:clamp(1.625rem,1.35rem + 1.3vw,2.5rem);
  --step-4:clamp(2rem,1.5rem + 2.4vw,3.25rem);
  --step-5:clamp(2.35rem,1.5rem + 4vw,4.4rem);

  --radius:12px;
  --ease:cubic-bezier(.16,1,.3,1);
}

html[data-theme="day"]{
  --bg:#F4F0E9;            /* warm paper */
  --surface-1:#FFFFFF;
  --surface-2:#EBE4D9;
  --border:#D5CCBE;
  --ink:#16181C;
  --muted:#5C636D;         /* 5.3:1 on --bg */
  --accent:#C87F1E;
  --accent-hover:#A96712;
  --accent-2:#3B5C7A;
  --marker-line:#6B7887;   /* 4.0:1 on --bg */
  --marker-ink:#1D2126;    /* 14.3:1 on --bg */
  --accent-text:#8F5A12;   /* amber as text, dark enough for 5.2:1 */
  --accent-2-text:#3B5C7A; /* 6.3:1 on --bg */
  --link:#2C4F6E;
  --cta-bg:#D08A22;
  --cta-bg-hover:#B87418;
  --cta-ink:#101215;       /* 6.9:1 on the amber fill */
  --cta-border:#8F5A12;
  --scrim-a:rgba(8,9,11,.68);
  --scrim-b:rgba(8,9,11,.34);
  --scrim-c:rgba(8,9,11,.9);
  --shadow:0 1px 0 rgba(255,255,255,.7), 0 18px 40px -28px rgba(30,25,16,.45);
}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 12px)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--step-0); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.nav-open{overflow:hidden}
img{max-width:100%; height:auto; display:block}
/* WebP delivery — <picture> is a container only. display:contents removes its box so
   the inner <img> keeps exactly the position it had before (absolute hero plate,
   grid cell in .gallery, object-fit frame in .detail__media). Older browsers that
   ignore contents still get the <img>, which is why the PNG stays as the src. */
picture{display:contents}
a{color:var(--link); text-decoration:none; text-underline-offset:3px}
a:hover{text-decoration:underline}
ul,ol{padding-left:1.15rem}
h1,h2,h3,h4{font-family:"Archivo","Instrument Sans",sans-serif; font-weight:800; letter-spacing:-.02em; margin:0 0 .5em; line-height:1.1}
h1{font-size:var(--step-5); line-height:1.02}
h2{font-size:var(--step-3); line-height:1.08; letter-spacing:-.018em}
h3{font-size:var(--step-1); letter-spacing:-.012em; line-height:1.25}
h4{font-size:var(--step-0); letter-spacing:.02em; text-transform:uppercase}
p{margin:0 0 1.1em}
strong{font-weight:600; color:var(--ink)}
hr{border:0; border-top:1px solid var(--border); margin:2.5rem 0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
::selection{background:var(--accent); color:var(--cta-ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--cta-ink);padding:10px 16px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- layout ------------------------------------------------------ */
.wrap{width:100%; max-width:1200px; margin:0 auto; padding:0 24px}
.wrap--prose{max-width:740px}
.band{padding:clamp(56px,7.5vw,112px) 0}
.band--tight{padding:clamp(40px,5vw,68px) 0}
.band--panel{background:var(--surface-1); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.grid{display:grid; gap:clamp(20px,3vw,36px)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stack>*+*{margin-top:1.25rem}
.rule{height:1px; background:var(--border); border:0; margin:0}

/* ---------- type helpers ------------------------------------------------ */
.kicker{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2-text);
  margin:0 0 1rem; display:flex; align-items:center; gap:.7rem;
}
.kicker::after{content:""; height:1px; flex:1; background:var(--border)}
.nowrap{white-space:nowrap}   /* keeps a leading "&" off the end of a line */
.lede{font-size:var(--step-1); color:var(--ink); line-height:1.55; max-width:60ch}
.muted{color:var(--muted)}
.tc{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; letter-spacing:.06em}
.shotnum{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:600; font-size:.75rem; color:var(--accent-text); letter-spacing:.1em}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:14px 26px; min-height:46px; border-radius:10px; border:1px solid transparent;
  font-family:"Archivo",sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  transition:background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn--accent{background:var(--cta-bg); color:var(--cta-ink); border-color:var(--cta-border)}
.btn--accent:hover{background:var(--cta-bg-hover); color:var(--cta-ink)}
.btn--ghost{border-color:var(--border); color:var(--ink); background:transparent}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent-text)}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* the showreel line — hairline underline, amber on hover. Direction: one click. */
.reel-line{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:"Archivo",sans-serif; font-weight:700; font-size:var(--step-1);
  color:var(--ink); padding-bottom:.45rem; border-bottom:1px solid var(--border);
  transition:border-color .22s var(--ease), color .22s var(--ease);
}
.reel-line:hover{text-decoration:none; border-bottom-color:var(--accent); color:var(--accent-text)}
.reel-line__tri{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}

/* ---------- placeholder markers (see SITE-MANIFEST.md) ------------------ */
.todo{
  display:inline-block; margin:.35rem 0; padding:.6rem .8rem;
  border:1px dashed var(--accent); border-radius:8px;
  background:rgba(232,163,61,.07); color:var(--accent-text);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem; line-height:1.5; letter-spacing:0;
}
.todo--block{display:block; width:100%}
.todo em{font-style:normal; opacity:.85}

/* ---------- dolly spine (the signature move) ---------------------------- */
.spine{position:fixed; left:30px; top:0; bottom:0; width:1px; z-index:40; display:none}
.spine__rail{position:absolute; inset:0; background:var(--border)}
.spine__progress{position:absolute; left:0; top:0; width:1px; height:100%; background:var(--accent);
  transform:scaleY(var(--p,0)); transform-origin:top center; transition:transform .12s linear}
.spine__shots{position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:32px}
.shot{display:flex; align-items:center; gap:12px}
/* All four markers have to read at a glance. Inactive is a bright steel ring on a
   solid dark disc with a near-white numeral (16:1); the active one takes the amber
   ring and the amber numeral, so amber keeps meaning "the live shot".

   The word pill is a HOVER/FOCUS affordance only, and that is a measured decision,
   not a style preference. The rail is fixed at left:30px and the spine appears from
   1240px up, while the centred 1200px content column puts body text at x=144 on a
   1440px viewport and as far left as x=44 at 1240px. The pill reaches x=169, so an
   always-visible pill painted over the first characters of whatever copy sat in its
   band (measured: 'Availability' covered 25px of copy on rates/contact at 1440, and
   'Proof'/'Jib' covered copy at 1240-1280). Hover and focus still reveal the word;
   the disc alone carries the live-shot signal, and the disc never reaches the text. */
.shot__num{width:32px; height:32px; border-radius:50%; border:1px solid var(--marker-line); background:var(--bg);
  display:grid; place-items:center; font-family:ui-monospace,monospace; font-weight:700; font-size:.8rem;
  color:var(--marker-ink);
  transition:border-color .22s var(--ease), color .22s var(--ease), background-color .22s var(--ease)}
.shot__label{font-family:"Archivo",sans-serif; font-weight:700; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); background:var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:3px 9px; white-space:nowrap;
  opacity:0; transform:translateX(-6px); transition:opacity .2s var(--ease), transform .2s var(--ease)}
.shot:hover .shot__label,.shot:focus-visible .shot__label{opacity:1; transform:none}
.shot:hover{text-decoration:none}
.shot:hover .shot__num{border-color:var(--accent); color:var(--accent-text)}
.shot[aria-current="true"] .shot__num{border-color:var(--accent); color:var(--accent-text); background:var(--surface-2)}
.shot[aria-current="true"] .shot__label{color:var(--accent-text); border-color:var(--accent)}

/* mobile carries the same idea as a scroll hairline under the header */
.rail-mobile{position:fixed; left:0; right:0; top:var(--head-h); height:2px; z-index:39; background:transparent}
.rail-mobile span{display:block; height:100%; width:100%; background:var(--accent);
  transform:scaleX(var(--p,0)); transform-origin:left center; transition:transform .12s linear}

/* ---------- header / nav ------------------------------------------------ */
/* The frosted plate lives on ::before, NOT on .site-head itself. A backdrop-filter other
   than `none` makes that element the containing block for its position:fixed descendants,
   and the mobile panel below is exactly that: .nav sits inside .site-head. With the blur on
   .site-head the open panel resolved top/bottom against the bar's own height instead
   of the viewport, collapsed to a sliver, and `overflow-y:auto` clipped every item but
   the first.
   Blurring the pseudo-element keeps the identical frosted look and hands the containing
   block back to the viewport. */
.site-head{position:fixed; top:0; left:0; right:0; z-index:60; height:var(--head-h);
  border-bottom:1px solid var(--border)}
.site-head::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.head__inner{max-width:1200px; margin:0 auto; padding:0 24px; height:100%;
  display:flex; align-items:center; gap:16px}
/* The real mark: two inks, one file each. White is cut for the night room and
black for the day one, so BOTH images ship in the markup and CSS hides one per
theme — the same shape as the theme-toggle icons below. The inline head script
sets data-theme before paint, so the swap cannot flash and it still resolves
with JS off. Sized by height alone: width:auto lets each file's own intrinsic
ratio (1109/312 and 445/126) carry the width, so neither file is resampled.

   Sizing: this is the site's name and Sam asked for it to carry as much weight as it
   does on the old Squarespace site, where the mark renders 275 x 77px at 1440. It is
   therefore driven from one place here plus two breakpoint steps (640px and 1140px),
   never per page. The phone value is capped by horizontal fit and not by taste: the
   header row is 24 pad + mark + 16 + 44 nav-toggle + 16 + 44 theme-toggle + 24 pad, so
   at 320px a 40px mark needs 310.20px of the 320 available (9.8px slack) while a 44px
   mark needs 324.4px and overflows. Both files are tightly cropped to the artwork — no
   transparent padding — so a height of N px is N px of mark. */
.brand{display:flex; align-items:center; gap:0; color:var(--ink); margin-right:auto}
.brand:hover{text-decoration:none}
.brand__logo{display:block; width:auto; height:40px; flex:0 0 auto}
.brand__logo--day{display:none}
html[data-theme="day"] .brand__logo--night{display:none}
html[data-theme="day"] .brand__logo--day{display:block}
.nav{display:none}
/* Open panel: viewport-relative, running from under the bar to the bottom of the screen.
   The explicit height is the belt to the ::before braces — if any ancestor ever becomes a
   containing block again the panel still fills the screen instead of collapsing. dvh keeps
   it correct under a mobile URL bar; older engines drop that line and keep the vh one. */
body.nav-open .nav{display:block; position:fixed; left:0; right:0; top:var(--head-h);
  height:calc(100vh - var(--head-h)); height:calc(100dvh - var(--head-h));
  background:var(--bg); border-top:1px solid var(--border); padding:20px 24px 40px; overflow-y:auto; z-index:59}
.nav__list{list-style:none; margin:0 0 22px; padding:0}
.nav__list a{display:block; padding:13px 4px; min-height:48px; color:var(--ink);
  font-family:"Archivo",sans-serif; font-weight:600; font-size:1.05rem; border-bottom:1px solid var(--border)}
.nav__list a:hover{color:var(--accent-text); text-decoration:none}
.nav__list a[aria-current="page"]{color:var(--accent-text)}
.nav__cta{width:100%}
.nav-toggle,.theme-toggle{background:transparent; border:1px solid var(--border); border-radius:9px;
  width:44px; height:44px; min-width:44px; display:grid; place-items:center; cursor:pointer; color:var(--ink);
  transition:border-color .22s var(--ease), color .22s var(--ease)}
.nav-toggle:hover,.theme-toggle:hover{border-color:var(--accent); color:var(--accent-text)}
.nav-toggle__bar{display:block; width:17px; height:2px; background:currentColor; border-radius:2px}
.nav-toggle__bar+.nav-toggle__bar{margin-top:4px}
.nav-toggle{display:grid; gap:0}
.theme-toggle svg{width:19px; height:19px}
html[data-theme="night"] .theme-toggle .i-sun{display:none}
html[data-theme="day"] .theme-toggle .i-moon{display:none}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative; min-height:min(90vh,760px); display:flex; align-items:flex-end;
  padding:calc(var(--head-h) + 56px) 0 52px; overflow:hidden; border-bottom:1px solid var(--border);
  /* the room stays dark under the still, in both themes */
  --ink:#F4F1EA; --muted:#C6CCD4; --border:rgba(255,255,255,.22); --accent-text:#F5B95C; --link:#DCC9A6;
  --accent-2-text:#A8C0D4; /* the dark room keeps the night steel-blue kicker in both themes */
  color:#F4F1EA}
.hero__media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero__scrim{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,var(--scrim-a) 0%,var(--scrim-b) 44%,var(--scrim-c) 100%)}
.hero__inner{position:relative; z-index:2; width:100%}
.hero h1{max-width:20ch; margin-bottom:.35em; text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero__sub{font-size:var(--step-1); max-width:56ch; color:#E7E2D8; margin-bottom:1.6em; text-shadow:0 1px 16px rgba(0,0,0,.6)}
.hero__meta{position:absolute; z-index:2; right:24px; bottom:52px; display:none;
  writing-mode:vertical-rl; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:#B9C0C8}
.hero__foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; margin-top:2rem;
  padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.22)}
.hero__facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin:0; padding:0; list-style:none;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:#C6CCD4}
.hero__facts li{display:flex; align-items:center; gap:.5rem}
.hero__facts li::before{content:""; width:5px; height:5px; background:var(--accent); border-radius:50%}

/* ---------- capability marquee ----------------------------------------- */
.marquee{position:relative; border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden;
  padding:15px 0; background:var(--surface-1)}
/* The set is duplicated and the track travels exactly -50% of its own width, so the
   loop has no seam. These two gradients are the edge mask: items dissolve into the
   strip at both viewport edges instead of being sheared mid-word. */
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; z-index:2;
  width:clamp(44px,7vw,104px); pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg,var(--surface-1) 22%,transparent 100%)}
.marquee::after{right:0; background:linear-gradient(270deg,var(--surface-1) 22%,transparent 100%)}
.marquee__track{display:flex; width:max-content; animation:slide 42s linear infinite}
.marquee__set{display:flex; align-items:center; gap:2.4rem; padding-right:2.4rem; margin:0; list-style:none}
.marquee__set li{font-family:"Archivo",sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap; display:flex; align-items:center; gap:2.4rem}
.marquee__set li::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent-2)}
@keyframes slide{to{transform:translateX(-50%)}}
/* The proof strip carries the real credit list (measured 25,914px per set), so the
   shared 42s loop would throw it past the eye at >600px/s. Duration is set from that
   measurement for a ~150px/s read — an item crosses the viewport in about 12s.
   If credits are added or removed, re-measure the set and scale this number. */
.marquee--credits .marquee__track{animation-duration:175s}

/* ---------- asymmetric capability split --------------------------------- */
.split{display:grid; gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.split__cell{padding:clamp(28px,4vw,48px) 0; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column; gap:.9rem}
.split__cell:last-child{border-bottom:0}
.split__cell h3{margin:0; font-size:var(--step-2)}
.split__cell p{margin:0; color:var(--muted)}
.split__head{display:flex; align-items:baseline; gap:.9rem}
.split__more{font-family:"Archivo",sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.04em; margin-top:auto; padding-top:.6rem}

/* ---------- cards ------------------------------------------------------- */
.card{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
  padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:.7rem;
  transition:transform .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease)}
.card:hover{transform:translateY(-2px); border-color:var(--accent-2); background:var(--surface-2)}
.card h3{margin:0}
.card p{margin:0; color:var(--muted); font-size:.98rem}
.card__icon{width:26px; height:26px; color:var(--accent-text)}
.card__link{margin-top:auto; padding-top:.6rem; font-family:"Archivo",sans-serif; font-weight:700; font-size:.85rem}
.list-check{list-style:none; margin:0; padding:0}
.list-check li{position:relative; padding-left:1.7rem; margin-bottom:.7rem; color:var(--muted)}
.list-check li::before{content:""; position:absolute; left:0; top:.55em; width:9px; height:9px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg)}
.list-check strong{color:var(--ink)}

/* ---------- alternating detail blocks ---------------------------------- */
.detail{display:grid; gap:clamp(22px,4vw,52px); align-items:center;
  grid-template-columns:1fr; padding:clamp(30px,5vw,56px) 0}
.detail+.detail{border-top:1px solid var(--border)}
.detail__media{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface-1)}
.detail__media img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/2}
.detail__media figcaption{padding:12px 14px; font-size:.82rem; color:var(--muted); border-top:1px solid var(--border)}
.detail__body h3{font-size:var(--step-2); margin-bottom:.5rem}

/* ---------- spec list --------------------------------------------------- */
.specs{list-style:none; margin:1.2rem 0 0; padding:0; border-top:1px solid var(--border)}
.specs li{display:flex; gap:1rem; justify-content:space-between; padding:.75rem 0; border-bottom:1px solid var(--border); font-size:.95rem}
.specs dt,.specs__k{color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem;
  font-family:"Archivo",sans-serif; font-weight:700}
.specs__v{text-align:right; color:var(--ink)}

/* ---------- pull quote (slot — awaiting a real quote) ------------------- */
.pullquote{background:var(--surface-1); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:clamp(40px,7vw,88px) 0; text-align:left}
.pullquote blockquote{margin:0; font-family:"Archivo",sans-serif; font-weight:700;
  font-size:var(--step-3); line-height:1.24; letter-spacing:-.02em; max-width:34ch}
.pullquote cite{display:block; margin-top:1.2rem; font-style:normal; font-size:.85rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* ---------- CTA band ---------------------------------------------------- */
.cta-band{position:relative; overflow:hidden; border-top:1px solid var(--border)}
.cta-band__grid{display:grid; gap:clamp(24px,4vw,48px); align-items:end}
.cta-band h2{max-width:24ch}

/* ---------- media / gallery -------------------------------------------- */
.media-frame{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface-1)}
.media-frame img{width:100%}
.reel-slot{aspect-ratio:16/9; display:grid; place-items:center; text-align:center; padding:24px;
  background:
    repeating-linear-gradient(135deg,var(--surface-1) 0 14px,var(--surface-2) 14px 28px);
  border:1px dashed var(--border); border-radius:var(--radius)}
.reel-slot__inner{max-width:56ch}
.gallery{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gallery figure{margin:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface-1)}
.gallery img{width:100%; aspect-ratio:16/10; object-fit:cover}
.gallery figcaption{padding:12px 14px; font-size:.82rem; color:var(--muted); border-top:1px solid var(--border)}
/* Archive variant: the frames on about.html are Sam's own photographs and are shown at
   their native aspect ratio — the default 16/10 crop would slice the portrait frames
   into landscape bands. align-items:start keeps each figure tight to its own image. */
.gallery.gallery--natural{align-items:start}
.gallery.gallery--natural img{width:100%; height:auto; aspect-ratio:auto}
/* Linked thumbnails: where a grid image opens a full-size frame, the anchor is a block —
   an inline anchor reserves baseline space under the image. */
.gallery figure>a{display:block}
/* Archive clips (work.html): same figure shell as a still; the clip keeps its own 16:9
   ratio and never exceeds its column. */
.gallery video{width:100%; height:auto; display:block; background:var(--bg)}

/* Sign-off at the end of the creator's statement (about.html only). */
.signature{margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid var(--border);
  font-family:"Archivo",sans-serif; font-weight:700; font-size:1rem; letter-spacing:.02em; color:var(--ink)}

/* ---------- form -------------------------------------------------------- */
.form{display:grid; gap:18px; margin-top:2rem}
.form__row{display:grid; gap:18px; grid-template-columns:1fr}
.field label{display:block; font-family:"Archivo",sans-serif; font-weight:700; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem}
.field input,.field textarea,.field select{
  width:100%; padding:13px 14px; min-height:46px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface-1); color:var(--ink); font-family:inherit; font-size:1rem;
  transition:border-color .2s var(--ease), background-color .2s var(--ease)}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--accent); background:var(--surface-2)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted); opacity:.75}
.form__note{border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:0 8px 8px 0;
  background:var(--surface-1); padding:14px 18px; font-size:.9rem; color:var(--muted)}
.form__status{display:none; margin-top:1rem; padding:14px 18px; border-radius:9px;
  border:1px dashed var(--accent); color:var(--accent-text); font-size:.92rem}
.form__status.is-shown{display:block}
/* Form states. Sending keeps the dashed tungsten hairline the status bar has
   always used; the two settled states go solid and use the site's own
   high-contrast text tokens so the message reads at the same weight as the
   note above it. No new colours. */
.form__status[data-state="success"]{border-style:solid; border-color:var(--accent-2); color:var(--accent-2-text)}
.form__status[data-state="error"]{border-style:solid; border-color:var(--accent); color:var(--accent-text)}
/* Honeypot (the contact forms' spam trap). Moved out of sight and out of the
   tab order — never display:none, and never a hidden input, because both
   read as a field a bot should fill. */
.field--trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.contact-facts{list-style:none; margin:1.4rem 0 0; padding:0}
.contact-facts li{padding:.7rem 0; border-bottom:1px solid var(--border); font-size:.95rem}

/* ---------- footer ------------------------------------------------------ */
.site-foot{border-top:1px solid var(--border); background:var(--surface-1); padding:clamp(44px,6vw,72px) 0 26px}
.foot__grid{display:grid; gap:clamp(28px,4vw,44px); grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.foot__grid h3{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem}
.foot__grid ul{list-style:none; margin:0; padding:0}
.foot__grid li{margin-bottom:.6rem}
.foot__grid a{color:var(--ink); font-size:.95rem}
.foot__grid a:hover{color:var(--accent-text)}
.foot__base{margin-top:clamp(32px,5vw,52px); padding-top:22px; border-top:1px solid var(--border);
  display:grid; gap:12px; font-size:.82rem; color:var(--muted)}
.foot__legal{max-width:88ch; font-size:.78rem; line-height:1.6}

/* ---------- page header (interior pages) -------------------------------- */
.page-head{padding:calc(var(--head-h) + clamp(44px,7vw,84px)) 0 clamp(30px,4vw,48px);
  border-bottom:1px solid var(--border); background:var(--surface-1)}
.page-head h1{max-width:26ch}
.page-head .lede{margin-top:1.2rem}
.crumbs{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 1.2rem}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent-text)}

/* ---------- responsive -------------------------------------------------- */
/* No max-width:639px block for the brand any more: 40px is the base value above, so
   the phone size is the mobile-first default rather than an override. */
@media (min-width:640px){
  .form__row--2{grid-template-columns:1fr 1fr}
  /* Tablet. Still a hamburger row (the inline nav only arrives at 1140px), so the
     mark can carry more weight than on a phone without crowding anything: the whole
     row needs 367.1px of the 640 available. */
  :root{--head-h:76px}
  .brand__logo{height:56px}
  /* The footer mark is capped below the header value on purpose. It sits in a
     `repeat(auto-fit,minmax(215px,1fr))` cell that measures 240px at 1140 — narrower
     than the 277px a 78px mark needs — and the global `img{max-width:100%}` would cap
     the width while `height:78px` held, squashing the mark horizontally instead of
     scaling it (caught by measurement, not by eye). 56px is 199.05px wide, under the
     215px minimum, so it can never be clamped at any width. */
  .site-foot .brand__logo{height:56px}
}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1px 1.15fr; align-items:stretch}
  .split__cell{padding:clamp(34px,4vw,54px) clamp(20px,3vw,40px)}
  .split__cell:first-child{padding-left:0}
  .split__cell:last-child{padding-right:0}
  .split__divider{background:var(--border)}
  .detail{grid-template-columns:.95fr 1.05fr}
  .detail--flip .detail__media{order:2}
  .cta-band__grid{grid-template-columns:1.4fr .9fr}
  .foot__base{grid-template-columns:auto 1fr; align-items:start}
}
@media (min-width:1140px){
  /* Desktop. 78px reproduces the old site's mark (measured 275 x 77 there) — at this
     ratio that is 277.3 x 78px. The inline nav needs 1048.7px of the 1140 available,
     so it fits at the breakpoint with no wrap. */
  :root{--head-h:104px}
  .brand__logo{height:78px}
  .nav-toggle{display:none}
  .nav{display:flex; align-items:center; gap:22px; position:static}
  .nav__list{display:flex; gap:16px; margin:0}
  .nav__list a{padding:8px 0; min-height:0; font-size:.87rem; font-weight:600; border-bottom:2px solid transparent}
  .nav__list a:hover,.nav__list a[aria-current="page"]{border-bottom-color:var(--accent)}
  .nav__cta{width:auto; padding:11px 18px; min-height:40px; font-size:.85rem}
  .rail-mobile{display:none}
}
/* 1264px, not 1240px: the rail is fixed at left:30px and the disc spans x=14..46. Below
   a 1264px viewport the centred 1200px column leaves under a 32px gutter, so at exactly
   1240-1263px the opaque disc clipped 2px off the first character of body copy on every
   page (measured on the pre-change files as well — this was latent, not new). 1264px is
   the first width where the content column clears the disc. */
@media (min-width:1264px){
  .spine{display:block}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .marquee{overflow-x:auto}
  .marquee__track{animation:none}
}

/* ---------- authority lockup — 30 years behind the camera ---------------
   Composition source of truth: mocks/authority-lockup.html.
   The plate IS the photograph. Giant 30 + YEARS / hairline / BEHIND THE CAMERA
   and the three craft paragraphs sit ON the still, left-weighted. Caption
   "Camera Jib · Arizona desert" is last in the copy stack. Right column stays
   empty so the arm, camera head, desert and sky keep that side of the frame.
   Light left/bottom scrim only — no charcoal/black panel behind the type.
   Like .hero, the photo band keeps the dark room's light ink in BOTH themes,
   so day-mode --ink (#16181C) can never land near-black type on the plate.
   The photo is never inverted. No gold, grain, or flare. */
.lockup-band{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(72vh,760px);
  display:flex; align-items:stretch;
  border-bottom:1px solid #2A2F36;
  background-color:#1c1814;
  --ink:#F4F1EA;
  --muted:#D5DBE2;
  --accent-2-text:#DCC9A6;
  --border:rgba(244,241,234,.22);
  color:var(--ink);
}
.lockup-band__stage{position:relative; width:100%; min-height:inherit; display:flex; align-items:stretch}
.lockup-band__plate{position:absolute; inset:0; z-index:0; pointer-events:none}
.lockup-band__plate img{width:100%; height:100%; max-width:none; object-fit:cover; object-position:70% 52%}
.lockup-band__scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(11,12,14,.38) 0%, rgba(11,12,14,.12) 26%, rgba(11,12,14,0) 50%),
    linear-gradient(180deg, rgba(11,12,14,.06) 0%, rgba(11,12,14,0) 38%, rgba(11,12,14,.28) 100%)}
.lockup{position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,34rem) minmax(0,1fr);
  align-items:end; gap:clamp(20px,3vw,40px);
  width:100%; max-width:1200px;
  padding:clamp(32px,5vw,64px) 0 clamp(36px,5vw,72px)}
.lockup__type{display:flex; flex-direction:column; justify-content:flex-end; min-width:0;
  gap:clamp(18px,2.4vw,28px)}
.lockup__figure{max-width:34rem}
.lockup__copy{max-width:34rem; background:transparent; margin:0; padding:0; border:0}
.lockup__since{margin:0 0 12px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-2-text); text-shadow:0 2px 14px rgba(11,12,14,.7)}
.lockup__pair{display:flex; align-items:flex-end; gap:clamp(16px,2.4vw,32px)}
.lockup__num{font-family:"Archivo",sans-serif; font-weight:900;
  font-size:clamp(6.4rem,16vw,13.5rem); line-height:.78; letter-spacing:-.055em;
  color:var(--ink); display:block; text-shadow:0 10px 48px rgba(11,12,14,.55)}
.lockup__stack{display:flex; flex-direction:column; justify-content:flex-end; gap:.55rem; padding-bottom:.18em}
.lockup__years{font-family:"Archivo",sans-serif; font-weight:700;
  font-size:clamp(.68rem,1.1vw,.82rem); letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); text-shadow:0 2px 14px rgba(11,12,14,.7)}
.lockup__rule{display:block; width:42px; height:1px; background:rgba(244,241,234,.45)}
.lockup__arm{font-family:"Archivo",sans-serif; font-weight:700;
  font-size:clamp(.62rem,.95vw,.74rem); letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); line-height:1.45; max-width:12ch; text-shadow:0 2px 14px rgba(11,12,14,.7)}
.lockup__copy p{color:var(--muted); max-width:46ch; text-shadow:0 2px 18px rgba(11,12,14,.7)}
.lockup__copy p:first-of-type{font-size:var(--step-1); color:var(--ink); line-height:1.5; margin-bottom:1.15em}
.lockup__copy p:last-child{margin-bottom:0}
.lockup__copy .lockup__still{margin:18px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,241,234,.72);
  text-shadow:0 2px 14px rgba(11,12,14,.7); max-width:none}
.lockup__picture{min-width:0}
@media (max-width:879px){
  .lockup-band{min-height:min(78vh,640px)}
  .lockup{grid-template-columns:1fr; align-items:end; padding:24px 0 28px}
  .lockup-band__scrim{background:
    linear-gradient(180deg, rgba(11,12,14,.06) 0%, rgba(11,12,14,.02) 42%, rgba(11,12,14,.36) 100%),
    linear-gradient(90deg, rgba(11,12,14,.16) 0%, rgba(11,12,14,0) 55%)}
  .lockup__copy,
  .lockup__figure{max-width:none; background:transparent; margin:0; padding:0; border:0}
  .lockup__num{font-size:clamp(5.6rem,28vw,8.5rem)}
  .lockup__picture{display:none}
}