/* ============================================================
   MESA ASSEMBLY — styles
   Design language after Reform Collective:
   cream paper, ink type, one accent (Mesa Orange #CC5A18), editorial serif
   display + grotesque UI + mono micro-labels, parentheses habit.
   ============================================================ */

:root {
  --cream: #F9F8ED;
  --ink: #0A0A0A;
  --accent: #CC5A18;
  --ink-60: rgba(10, 10, 10, .6);
  --ink-40: rgba(10, 10, 10, .4);
  --ink-15: rgba(10, 10, 10, .15);
  --cream-60: rgba(249, 248, 237, .62);
  --cream-15: rgba(249, 248, 237, .16);

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Space Mono', 'Courier New', monospace;
  --pixel: 'Press Start 2P', 'Courier New', monospace;

  --ease: cubic-bezier(.76, 0, .24, 1);
  --header-h: 76px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  scrollbar-width: none; /* Firefox — hidden bar, wheel/touch/keys still scroll */
  /* iOS Safari inflates text on some phones (accessibility text size, old
     builds) — the nowrap button labels then shave their last glyph inside
     their overflow-hidden roll box ("Build Your Bran"). Pin at 100%. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
::-webkit-scrollbar { display: none; /* Chromium/Safari/Edge */ }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
sup { line-height: 0; }

::selection { background: var(--accent); color: var(--cream); }

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

.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 300;
  background: var(--ink); color: var(--cream);
  padding: .6em 1.2em; border-radius: 999px; font-family: var(--mono); font-size: .75rem;
  transition: top .3s var(--ease);
}
.skip:focus { top: 1rem; }

/* ---------- micro label (rasterGrotesk stand-in) ---------- */
.micro {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ---------- shared section furniture ---------- */
.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: 1.4rem;
}

.section-title em, .hero__title em, .footer__title em, .contact__title em, .creator__title em {
  font-style: italic;
  color: var(--accent);
}

/* ---------- rotating parenthetical words — the orange (words) in the big
     headlines retype through three synonyms letter by letter with instant
     per-letter swaps (harsh typewriter, no slide, no fade), and each
     synonym wears its own face (Press Start 2P pixel → Archivo → Space Mono).
     JS (initWordRotators) builds the letter spans; no JS = static word.
     nowrap keeps `(` + word + `)` one unbreakable unit, so a long synonym
     wraps to its own line whole instead of hanging below its `(`. ---------- */
em.rot { white-space: nowrap; }
.rot__word { display: inline-block; white-space: nowrap; }
.rot__lt { display: inline; }
/* Press Start 2P is a monospace face with a full 1em advance — vastly wider
   than the narrow Instrument Serif italic it replaced, so it runs at a much
   smaller size — measured at 1440×900 (.39em keeps every word −11%…+11% of
   the authored serif width; +12% is the jump budget). All-caps glyphs are
   part of the 8-bit look. */
.rot__lt--pixel { font-family: var(--pixel); font-style: normal; font-size: .39em; letter-spacing: 0; }
/* Archivo 600 and Space Mono run much wider than the narrow Instrument Serif,
   so the variant faces are sized down to roughly the authored word's width —
   measured, not eyeballed — or every font swap would shove the line around. */
.rot__lt--sans  { font-family: var(--sans); font-weight: 600; font-style: normal; letter-spacing: -.01em; font-size: .94em; }
.rot__lt--mono  { font-family: var(--mono); font-style: normal; font-size: .76em; }
.rot__sr { /* live word for screen readers; the letter spans are aria-hidden */
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- roll-label hover (Reform signature) ---------- */
.btn__labels {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  height: 1.3em;
  /* a hair of slack so iOS sub-pixel width rounding (DPR 2/3, zoom) can't
     shave the final glyph inside the overflow-hidden box ("…Bran"); the
     negative margin keeps spacing identical */
  padding-inline: .1em;
  margin-inline: -.1em;
}
.btn__labels span {
  display: block;
  line-height: 1.3;
  white-space: nowrap;
  transition: transform .45s var(--ease);
}
.btn:hover .btn__labels span,
a:hover > .btn__labels span,
.menu-btn:hover .btn__labels span,
.menu-btn[aria-expanded="true"] .btn__labels span {
  transform: translateY(-100%);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .72em 1.6em;
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  line-height: 1.25;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.btn--big {
  font-size: 1.12rem;
  padding: 1em 2.1em;
  margin-top: 3.5rem;
}
.btn--big:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--cream); }
.btn--accent:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.roll-link {
  font-family: var(--mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color .3s, border-color .3s;
}
.roll-link:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   LOADER — red (#F75E4A) screen, wordmark letters rising once
   from their masks, then the screen splits into two panels that
   slide apart. Also closes over the page on page-to-page links.
   ============================================================ */
body.is-loading { overflow: hidden; }

.loader {
  position: fixed; inset: 0; z-index: 400;
}

.loader__panel {
  position: absolute; left: 0; right: 0; height: 50.5%;
  background: #F75E4A; /* loader red (was Reform blue #2B6BE4) */
  transition: translate 1.05s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.loader__panel--top { top: 0; }
.loader__panel--bottom { bottom: 0; }

.loader--exit .loader__panel--top    { translate: 0 -101%; transition-delay: .79s; }
.loader--exit .loader__panel--bottom { translate: 0 101%;  transition-delay: .79s; }
.loader--exit { pointer-events: none; }

/* quick curtain for arrivals on non-home pages: flash the cover, no dwell.
   The .loader--fast class is added by runCurtain(el, true) in main.js. */
.loader--fast .loader__panel { transition-duration: .7s; }
.loader--exit.loader--fast .loader__panel--top    { transition-delay: 0s; }
.loader--exit.loader--fast .loader__panel--bottom { transition-delay: 0s; }
.loader--fast .loader__content {
  transition: translate .45s cubic-bezier(0.755, 0.05, 0.855, 0.06), opacity .3s ease;
}
.loader--fast .loader__corner { display: none; }
.loader--fast .loader__wordmark .l i {
  animation-duration: .4s;
  animation-delay: calc(var(--i, 0) * .02s);
}

/* ---------- page-to-page curtain transitions ----------
   Clicking a link to the other page: JS builds a bare curtain (--enter =
   panels parked off-screen), then drops the class so the panels slide SHUT
   with the same curve as the exit. Navigation hands over mid-travel; the
   next page loads already covered and runs its usual loader open. */
.loader--enter .loader__panel--top    { translate: 0 -101%; }
.loader--enter .loader__panel--bottom { translate: 0 101%; }

/* Transition arrival on contact (whose HTML ships without a loader): the
   flag is known to a tiny inline <head> script before main.js runs, so the
   page hides behind the loader color until main.js injects the curtain.
   The failsafe is CSS-only — if the script ever fails, the page unhides
   itself at 3s. The visitor can never be stuck on the curtain color. */
html.mesa-arriving { background: #F75E4A; }
html.mesa-arriving body.contact-page { visibility: hidden; animation: mesaArriveFailsafe 0s 3s forwards; }
html.mesa-arriving body.contact-page .loader { visibility: visible; }
@keyframes mesaArriveFailsafe { to { visibility: visible; } }

.loader__content {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: 1.6rem;
  color: var(--ink);
  transition: translate .8s cubic-bezier(0.755, 0.05, 0.855, 0.06), opacity .35s .45s ease;
}
.loader--exit .loader__content { translate: 0 55%; opacity: 0; }

.loader__wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 7.5rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;               /* mask for the synchronized roll */
  padding-inline: .14em;          /* keep italic swashes clear of the clip */
}

.loader__word {
  display: inline-block;
  /* after the letters land, the whole mark rolls: hold, drop, rise */
  animation: loaderRoll 2.6s 1.9s infinite;
}

.loader__wordmark .l {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.loader__wordmark .l i {
  display: inline-block;
  font-style: normal;
  /* one-shot cascade: each letter rises once and stays */
  animation: loaderRise .65s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.055s);
}
.loader__wordmark .l--italic i { font-style: italic; }
/* italic letters slant past their advance box: widen each rise-mask a touch on
   both sides (padding) and cancel it with negative margins so letter spacing is
   unchanged but the swash tips (C, t, l, e) stop getting shaved at the mask edge */
.loader__wordmark .l--italic { padding-inline: .055em; margin-inline: -.055em; }
.loader__wordmark .l--gap { width: .26em; }

/* the ® rides along with the word instead of rolling from a mask.
   vertical-align .45em (not 1.35em) keeps its top on the letters' cap line
   instead of floating high above the word and bloating the line box */
.loader__wordmark .l--reg { overflow: visible; vertical-align: .45em; }
.loader__wordmark .l--reg i {
  font-size: .38em;
  animation: loaderFade .5s .45s both;
}

@keyframes loaderRise {
  from { translate: 0 calc(100% + .04em); }
  to   { translate: 0 0; }
}
@keyframes loaderFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes loaderRoll {
  0%, 30.8% { translate: 0 0; }
  44.2% {
    translate: 0 110%;
    animation-timing-function: cubic-bezier(0.55, 0, 0.7, 0.4);
  }
  100% {
    translate: 0 0;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* on exit, reset the roll so the complete mark slides away whole */
.loader--exit .loader__word { animation: none; }

/* bottom-right flourish: a ransom-note row (mixed typefaces + a trapezoid
   tile, same flat language). Lives inside .loader__content so it rides the
   exit slide and fade. */
.loader__corner {
  position: absolute; right: 2.2rem; bottom: 1.9rem;
  animation: loaderRise .6s .95s cubic-bezier(0.22, 1, 0.36, 1) both, loaderFade .5s 1.05s both;
}
.loader__ransom {
  display: flex; align-items: center; gap: .75rem;
}
.loader__ransom-serif {
  font-family: var(--serif); font-style: italic;
  font-size: 2.1rem; line-height: 1;
  color: var(--cream);
}
.loader__ransom-tile { width: 30px; height: auto; }
.loader__ransom-mono {
  font-family: var(--mono); font-weight: 700;
  font-size: 1.45rem; line-height: 1;
  color: #FFFFFF;
}
@media (max-width: 700px) {
  .loader__corner { right: 1.2rem; bottom: 1.3rem; }
  .loader__ransom-serif { font-size: 1.6rem; }
  .loader__ransom-tile { width: 23px; }
  .loader__ransom-mono { font-size: 1.15rem; }
}

/* ============================================================
   HEADER — difference blend so it self-inverts over dark strips
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
  padding: 0 clamp(1.2rem, 3vw, 2.5rem);
  color: #fff;
  mix-blend-mode: difference;
}

.logo {
  font-family: var(--serif);
  font-size: 1.75rem;
  letter-spacing: -.01em;
  text-decoration: none;
  line-height: 1;
}
.logo sup { font-family: var(--mono); font-size: .55em; margin-left: .1em; }

.header-actions { display: flex; align-items: center; gap: 1rem; }

.menu-btn {
  font-weight: 500; font-size: .95rem; line-height: 1.25;
  border: 1px solid currentColor; border-radius: 999px;
  padding: .72em 1.6em;
}

/* ============================================================
   MENU OVERLAY
   ============================================================ */
.menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center;
  visibility: hidden; opacity: 0;
  transition: opacity .5s var(--ease), visibility 0s .5s;
}
.menu.open { visibility: visible; opacity: 1; transition: opacity .5s var(--ease); }
.menu[hidden] { display: none; }

.menu__inner { width: min(1100px, 92vw); }

.menu__list { counter-reset: mi; }
.menu__list li {
  opacity: 0; transform: translateY(34px);
  transition: opacity .6s var(--ease) calc(var(--i) * 90ms + .15s),
              transform .6s var(--ease) calc(var(--i) * 90ms + .15s);
}
.menu.open .menu__list li { opacity: 1; transform: none; }

.menu__link {
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2rem);
  text-decoration: none;
  padding: .55em 0;
  border-bottom: 1px solid var(--cream-15);
}
.menu__link::before {
  counter-increment: mi;
  content: "(" counter(mi, decimal-leading-zero) ")";
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--accent);
  transition: transform .4s var(--ease);
}
.menu__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  transition: transform .4s var(--ease), color .3s;
}
.menu__sub {
  font-family: var(--mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--cream-60);
  margin-left: auto;
  text-align: right;
}
.menu__link:hover .menu__title { transform: translateX(14px); color: var(--accent); }
.menu__link:hover::before { transform: translateX(14px); }

.menu__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  font-family: var(--mono); font-size: .78rem;
}
.menu__foot a { text-decoration: none; border-bottom: 1px solid var(--cream-15); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.menu__foot a:hover { color: var(--accent); border-color: var(--accent); }
.menu__socials { display: flex; gap: 1.4rem; }
.menu__foot .micro { color: var(--cream-60); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(3rem, 7vh, 5rem) 1.2rem 6rem;
}

.grid-lines {
  position: absolute; inset: 0;
  display: flex; justify-content: space-evenly;
  pointer-events: none;
}
.grid-lines i { width: 1px; height: 100%; background: var(--ink-15); }

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.1rem, 9.5vw, 8.4rem);
  line-height: .98;
  letter-spacing: -.025em;
}
.hero__title > span { display: block; }

/* rotating badge */
.hero__badge {
  display: inline-block;
  width: .82em; height: .82em;
  margin-left: .1em;
  vertical-align: baseline;
  position: relative;
  top: .04em;
}
.badge__spin {
  transform-origin: 60px 60px;
  transform-box: view-box;
  animation: spin 16s linear infinite;
}
.badge__text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  fill: var(--ink);
}
.badge__mesa { fill: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__sub {
  max-width: 46ch;
  margin-top: 2.4rem;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--ink-60);
}
.hero__sub em { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 1.08em; }

.hero__cta { margin-top: 2.8rem; }
.hero__cta:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ============================================================
   HERO MEDIA — after Reform's hero video: a full-bleed band under
   the header. Looping clip, Mesa Assembly + logo lockup settling
   over the bottom once it has played a beat, and a pill that
   follows the cursor anywhere across the band.
   ============================================================ */
.hero-media {
  position: relative;
  margin-top: var(--header-h);
  aspect-ratio: 160 / 69; /* Reform's exact hero band */
  background: var(--ink-15);
}

.hero-media__frame {
  position: absolute; inset: 0;
  overflow: hidden;
}

.hero-media__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* wordmark band — hidden until the video has played a beat, then the
   giant lockup scrolls across the bottom of the band (left → right) */
.hero-media__overlay {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(.6rem, 3vh, 1.6rem);
  overflow: hidden;
  color: var(--ink);
  opacity: 0;
  translate: 0 22px;
  transition: opacity .9s cubic-bezier(0.215, 0.610, 0.355, 1),
              translate .9s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.hero-media--live .hero-media__overlay { opacity: 1; translate: 0 0; }

/* dark footage (the two V2 dark grades): swap the ink wordmark for cream
   so the type stays legible over the dark clip — the logo cap stays ink
   (black topper on the red trapezoid, deliberately not cream) */
.hero-media--dark .hero-media__overlay { color: var(--cream); }

.hero-media__track {
  display: flex;
  width: max-content;
  animation: heroTrack 26s linear infinite;
}
.hero-media__group { display: flex; flex: none; }

@keyframes heroTrack {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.hero-media__item {
  display: flex; align-items: center; gap: .32em;
  padding-right: .8em;
}

.hero-media__logo { width: clamp(2.2rem, 4.5vw, 4.6rem); height: auto; flex: none; }

.hero-media__word {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: .95;
  letter-spacing: -.03em;
  white-space: nowrap;
}

/* ---------- cursor pill (Reform's Build Your Brand follower) ----------
   The anchor is a zero-size point; the pill centers itself on it.
   Default: parked mid-band (touch / no-JS fallback); once fixed,
   it escapes the frame's overflow clip.
   .is-follow: fixed + driven to the mouse by JS. The native OS cursor
   stays visible over the band (no cursor:none) — the pill just trails
   it, leaving a short Sandevistan-style chromatic afterimage trail
   (`.hero-media__trail`) behind it. */
.hero-media__cursor {
  position: absolute;
  left: 50%; top: 47%;
  width: 0; height: 0;
  z-index: 130;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.hero-media--live .hero-media__cursor { opacity: 1; }

.hero-media__pill {
  position: absolute;
  left: 0; top: 0;
  translate: -50% -50%;
  display: flex; align-items: center; gap: .8em;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  padding: 1.4em 1.8em;
  font-weight: 500;
  font-size: clamp(.95rem, 1.5vw, 1.375rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.hero-media__pill svg { width: .8em; height: .8em; flex: none; }

/* chromatic afterimage trail — Sandevistan-style: JS builds a short row
   of pill-shaped solid silhouettes, each sampled a few frames further
   back in the pill's position history and more transparent, so a moving
   pill leaves a short multicolor trail that drains back into it when it
   stops. Solid fills only — no blur, no shadow, no gradient. */
.hero-media__trail {
  position: absolute;
  left: 0; top: 0;
  border-radius: 999px;
  pointer-events: none;
  will-change: transform;
}

/* parked pill is a real button (touch + no-JS); hover pointers disable
   it until the follower engages, so there's no invisible click target */
.hero-media__cursor .hero-media__pill { pointer-events: auto; }

@media (hover: hover) and (pointer: fine) {
  .hero-media__cursor { transition: none; }
  .hero-media--live .hero-media__cursor { opacity: 0; }
  .hero-media__cursor .hero-media__pill { pointer-events: none; }
  .hero-media__cursor.is-follow {
    position: fixed;
    left: 0; top: 0;
    opacity: 1;
  }
  .hero-media__cursor.is-follow .hero-media__pill { pointer-events: auto; }
}
.hero-media__cursor:focus-within { opacity: 1; }


.marquee {
  background: var(--ink); color: var(--cream);
  overflow: hidden;
  padding: .95rem 0;
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--pixel);
  font-size: .7rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0; /* Press Start 2P spaces itself — added tracking cracks the 8px grid */
  white-space: nowrap;
}
/* pixel-art ✦ — the font has no U+2726, so the star is drawn as a 15-square
   sparkle on a 7×7 grid (crispEdges, currentColor). display:inline-block
   overrides the global `img, svg { display: block }` reset — block stars
   would line-break the marquee into a column. */
.px-star {
  display: inline-block;
  width: .78em; height: .78em;
  fill: currentColor;
  shape-rendering: crispEdges;
  vertical-align: -.06em;
  margin: 0; /* the surrounding spaces are full 1em PS2P advances — enough on their own */
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   WORK
   ============================================================ */
.work { padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 4vw, 4rem) 0; }
.work-list { border-bottom: 1px solid var(--ink-15); }

.work-item { border-top: 1px solid var(--ink-15); }

.work-row {
  width: 100%;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, auto) 1fr auto 2rem;
  align-items: center;
  gap: clamp(.8rem, 2vw, 2rem);
  padding: 1.7rem .6rem;
  text-align: left;
  transition: background .3s;
}
.work-row:hover { background: rgba(255, 255, 255, .65); }
.work-row--link { text-decoration: none; }
.work-row__arrow { font-family: var(--sans); font-size: 1.5rem; line-height: 1; }
.work-row__arrow::before, .work-row__arrow::after { display: none; }
.work-library-link { display: flex; justify-content: flex-end; margin-top: 1.8rem; }
.work-library-link .roll-link { font-size: .7rem; }

.work-row__num { color: var(--accent); }

.work-row__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  transition: transform .4s var(--ease);
}
.work-row:hover .work-row__name { transform: translateX(10px); }

.work-row__tag { color: var(--ink-60); font-size: .98rem; justify-self: end; text-align: right; }
.work-row__tags { color: var(--ink-40); justify-self: end; white-space: nowrap; }

/* plus → minus expander */
.work-row__plus { position: relative; width: 16px; height: 16px; justify-self: end; }
.work-row__plus::before, .work-row__plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--ink);
  transition: transform .4s var(--ease), background .3s;
}
.work-row__plus::before { width: 16px; height: 1.5px; }
.work-row__plus::after  { width: 1.5px; height: 16px; }
.work-row[aria-expanded="true"] .work-row__plus::after { transform: scaleY(0); }
.work-row[aria-expanded="true"] .work-row__plus::before,
.work-row[aria-expanded="true"] .work-row__plus::after { background: var(--accent); }

/* expandable panel */
.work-panel { overflow: hidden; height: 0; transition: height .5s var(--ease); }
.work-panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: .4rem .6rem 2.6rem calc(3.2rem + clamp(.8rem, 2vw, 2rem));
}
.work-panel__text p { color: var(--ink-60); font-size: 1.05rem; max-width: 56ch; }
.work-panel__text .roll-link { display: inline-block; margin-top: 1.4rem; }

.stack { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.stack li {
  border: 1px solid var(--ink-15);
  border-radius: 999px;
  padding: .35em .9em;
  color: var(--ink-60);
}

.work-panel__art svg {
  width: 100%; height: auto;
  border: 1px solid var(--ink-15);
}
/* clickable panel art (Northcurrent, Career Launchpad — the turnables are
   .hover-media) — flat hover: the frame border deepens to ink */
.work-panel__art--link { display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.work-panel__art--link svg { transition: border-color .25s ease; }
.work-panel__art--link:hover svg,
.work-panel__art--link:focus-visible svg { border-color: var(--ink); }
.work-panel__art--link:focus-visible { outline: none; }

/* Northcurrent panel — their actual gold logo icon on the slate accent */
.nc-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--accent);
  overflow: hidden;
}
.nc-art svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}
.nc-art img { width: 46%; height: auto; }

/* BYU Calendar panel — the project's own OG banner, full-bleed and clickable */
.yc-art img {
  display: block;
  width: 100%; height: auto;
  border: 1px solid var(--ink-15);
  transition: border-color .25s ease;
}
.yc-art:hover img,
.yc-art:focus-visible img { border-color: var(--ink); }

/* real product screenshots as panel art (DC Sys Tech, SalesBird, Northcurrent,
   Launchpad) — same full-bleed treatment as .yc-art */
.shot-art img {
  display: block;
  width: 100%; height: auto;
  border: 1px solid var(--ink-15);
  transition: border-color .25s ease;
}
.shot-art:hover img,
.shot-art:focus-visible img { border-color: var(--ink); }

/* ShopBird panel — dashboard up front, Vehicle Intelligence fades in on hover;
   flat cross-fade, no blur/shadow. Tag hides on touch (no hover to promise) */
.swap-art { position: relative; display: block; }
.swap-art img {
  display: block;
  width: 100%; height: auto;
  border: 1px solid var(--ink-15);
  transition: border-color .25s ease;
}
.swap-art__alt {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  border: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.swap-art:hover .swap-art__alt,
.swap-art:focus-visible .swap-art__alt { opacity: 1; }
.swap-art:hover img:not(.swap-art__alt),
.swap-art:focus-visible img:not(.swap-art__alt) { border-color: var(--ink); }
.swap-art__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .45em .9em;
  background: var(--cream);
  color: var(--ink);
  border-top: 1px solid var(--ink-15);
  border-right: 1px solid var(--ink-15);
  opacity: .85;
  transition: opacity .25s ease;
}
.swap-art:hover .swap-art__tag { opacity: 0; }
@media (pointer: coarse) { .swap-art__tag { display: none; } }
.art-letter {
  font-family: var(--serif);
  font-size: 150px;
  fill: var(--ink);
}
.art-micro {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  fill: var(--ink);
  opacity: .55;
}

/* hover turntable — real renders, blended frame by frame (see initHoverMedia) */
.hover-media {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--ink-15);
  isolation: isolate;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.hover-media--tall { width: min(100%, 420px); justify-self: start; }
.hover-media img,
.hover-media canvas {
  display: block;
  width: 100%;
  height: auto;
}
.hover-media canvas {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.hover-media[data-ready] canvas { opacity: 1; }
.hover-media__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .45em .9em;
  background: var(--cream);
  color: var(--ink);
  border-top: 1px solid var(--ink-15);
  border-right: 1px solid var(--ink-15);
  opacity: .85;
}
.hover-media:hover .hover-media__tag { opacity: 0; }
.hover-media:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (pointer: coarse) { .hover-media { cursor: grab; } }
@media (prefers-reduced-motion: reduce) { .hover-media { cursor: pointer; } }

/* ============================================================
   ACHIEVEMENTS — after Reform's "Awards & Recognitions": giant
   serif over smaller grotesk sub-title, honors column left and
   a name (count) list right, all ink on cream.
   ============================================================ */
.achievements {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 4vw, 4rem);
  border-top: 1px solid var(--ink-15);
}

/* ocean-line canvas sits behind everything in the section */
.achievements__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.achievements > *:not(.achievements__canvas) {
  position: relative; z-index: 1;
}

.achievements__inner {
  max-width: 62rem;
  margin-left: min(18vw, 20rem);
}

.achievements__title { margin: 0 0 clamp(3rem, 6vw, 4.5rem); }

.achievements__big {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 8.5vw, 7.6rem);
  line-height: .98;
  letter-spacing: -.02em;
}

.achievements__sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-top: .2rem;
}

.achievements__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.achievements__label {
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 1.2rem;
}

.achievements__line {
  color: var(--ink-60);
  font-size: .95rem;
  line-height: 1.75;
}

.achievements__list li {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.3vw, 2.1rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  padding: .32em 0;
}
.achievements__list span {
  font-family: var(--mono);
  font-size: .62em;
  color: var(--ink-60);
  margin-left: .35em;
  vertical-align: .12em;
}

/* ============================================================
   CREATOR — meet-the-person band after Achievements. The photo
   wears jarin.dev's graphite mat: slight tilt, desaturated crop.
   ============================================================ */
.creator {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.2rem, 4vw, 4rem);
  border-top: 1px solid var(--ink-15);
}
.creator__inner {
  max-width: 62rem;
  margin-left: min(18vw, 20rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.creator__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 8.5vw, 7.6rem);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.4rem);
}
.creator__lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-60);
  max-width: 36rem;
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
}
.creator__lede strong { color: var(--ink); font-weight: 600; }
.creator__lede em { font-family: var(--serif); font-style: italic; color: var(--ink); }
.creator__photo { margin: 0; width: min(100%, 23rem); }
.creator__frame {
  background: #303746; /* graphite mat, as on jarin.dev */
  padding: 10px;
  transform: rotate(-3deg);
}
.creator__frame img {
  width: 100%; height: auto;
  aspect-ratio: .87; object-fit: cover;
  filter: saturate(.75);
}
.creator__photo figcaption { margin-top: 1.1rem; color: var(--ink-60); }

/* ============================================================
   SERVICES
   ============================================================ */
.services { padding: 0 clamp(1.2rem, 4vw, 4rem) clamp(5rem, 10vw, 9rem); }

.services__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(2rem, 5vw, 5rem);
}

.service {
  border-top: 1px solid var(--ink-15);
  padding: 2rem .8rem 2.4rem;
  position: relative;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.service:hover { background: var(--ink); color: var(--cream); }

.service__num { color: var(--accent); display: block; margin-bottom: 1.1rem; }
.service h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -.015em;
  margin-bottom: .6rem;
}
.service p { color: var(--ink-60); font-size: .98rem; max-width: 42ch; transition: color .35s; }
.service:hover p { color: var(--cream-60); }

/* ============================================================
   MISSION (full-bleed rocks band — the "Nova" moment)
   ============================================================ */
.mission {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  border-top: 1px solid var(--ink-15);
  overflow: hidden;
}
.mission__bg {
  position: absolute; inset: 0; z-index: -1;
  background: url("../assets/abstractRocks.webp") center / cover no-repeat;
}
.mission__inner {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.2rem, 2.6vw, 2.4rem) clamp(1.2rem, 4vw, 4rem) clamp(1.2rem, 3vw, 2.6rem);
}

/* Giant word sits in the image's bright top band (0–25% height);
   the dark rocks (28–72%) stay clear in the middle. */
.mission__word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4.2rem, 11vw, 12rem);
  line-height: .9;
  letter-spacing: -.03em;
  text-align: center;
  color: var(--ink);
  align-self: start;
  /* Mesa sits lower in the scene: baseline lands ~40% of the band height
     (10% top margin ≈ 144px at 1440; statement below is unchanged) */
  margin: 10% 0 0;
}
.mission__mark {
  font-size: .18em;
  vertical-align: super;
  letter-spacing: 0;
  color: var(--accent);
}

/* Performance statement sits in the light bottom band, below the rocks. */
.mission__tag {
  align-self: end;
  text-align: center;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.5vw, 7.5rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  /* statement rides higher off the bottom edge, closing in on Mesa */
  margin-bottom: .36em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(5rem, 9vw, 8rem) clamp(1.2rem, 4vw, 4rem) 0;
  overflow: hidden;
}

.footer__top {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.8rem, 3.5vw, 3rem);
}
.footer__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 16ch;
}

/* ============================================================
   CONTACT PAGE (contact.html) — the black sheet: serif title with a
   rotating parenthetical, underlined editorial form fields, contact
   options in a link column, and the giant Mesa® wordmark bookending
   the bottom exactly like the home footer. Shares main.js with index
   (menu / hero-media / swirl code no-ops when its elements are absent).
   ============================================================ */
.contact-page {
  background: var(--ink);
  color: var(--cream);
  color-scheme: dark; /* native form furniture (select list, autofill) renders dark */
}

.contact { padding: 0 clamp(1.2rem, 4vw, 4rem); }

.contact__hero {
  max-width: 74rem;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem));
  padding-bottom: clamp(2.8rem, 6vw, 4.5rem);
}

.contact__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 7vw, 6.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  border-top: 1px solid var(--cream-15);
  padding: clamp(2.8rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

/* the form — underlined fields on the black sheet, no boxes */
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}
.contact-form__field { margin-bottom: 2rem; }
.contact-form__field .micro { display: block; color: var(--cream-60); margin-bottom: .55rem; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  color: var(--cream);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cream-15);
  border-radius: 0;
  padding: .6em .05em;
  transition: border-color .3s var(--ease);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-bottom-color: var(--accent); }
.contact-form textarea { resize: vertical; min-height: 7em; line-height: 1.55; }
.contact-form ::placeholder { color: rgba(249, 248, 237, .35); }
.contact-form option { background: var(--ink); color: var(--cream); }
/* Chrome autofill paints a yellow tint that would break the black sheet */
.contact-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--cream);
  -webkit-box-shadow: 0 0 0 1000px var(--ink) inset;
}

.contact-form__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.2rem;
  margin: .2rem 0 0;
}
.contact-form__foot .btn { gap: .7em; }
.contact-form__foot svg { width: .8em; height: .8em; flex: none; }
.contact-form__status { color: var(--accent); }

/* contact options — same link treatment the old footer columns wore */
.contact__label { display: block; color: var(--cream-60); margin: 1.8rem 0 .9rem; }
.contact__label:first-child { margin-top: 0; }
.contact__link {
  display: block;
  text-decoration: none;
  font-size: 1.05rem;
  padding: .3em 0;
  color: var(--cream);
  transition: color .3s, transform .3s var(--ease);
}
.contact__link:hover { color: var(--accent); transform: translateX(6px); }

/* the bookend rides higher on this page — less dead black under the form */
.contact-page .footer { padding-top: clamp(1.8rem, 3.5vw, 3rem); }

.footer__wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(8rem, 24vw, 24rem);
  line-height: .74;
  letter-spacing: -.03em;
  text-align: center;
  margin-bottom: -.06em;
  user-select: none;
}
.footer__wordmark sup { font-size: .18em; font-family: var(--mono); vertical-align: 1.8em; }

.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .8rem;
  border-top: 1px solid var(--cream-15);
  padding: 1.2rem 0 1.4rem;
  color: var(--cream-60);
}
.footer__disclaimer { flex-basis: 100%; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease) var(--d, 0s), transform .85s var(--ease) var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* mobile: the band takes about two-thirds of the screen (crop, don't fit);
   phones play the same V2-grade pool as desktop (the original
   BackgroundVideo.webm is no longer part of the site). */
@media (max-width: 1100px) {
  .hero-media {
    aspect-ratio: auto;
    height: 70svh;
    min-height: 420px;
  }
  /* parked "Build Your Brand" pill rides a quarter-band higher than the
     desktop mid-band park so it sits up in the band's upper area on phones */
  .hero-media__cursor { top: 22%; }
}

@media (max-width: 900px) {
  .achievements__inner { margin-left: 0; }
  .achievements__row { grid-template-columns: 1fr; gap: 2.4rem; }

  .creator__inner { margin-left: 0; grid-template-columns: 1fr; gap: 2.8rem; }
  .creator__photo { width: min(100%, 19rem); }

  .work-row { grid-template-columns: 2.4rem 1fr 2rem; grid-template-areas: "num name plus" ". tag plus" ". tags plus"; }
  .work-row__num { grid-area: num; align-self: start; }
  .work-row__name { grid-area: name; }
  .work-row__tag { grid-area: tag; justify-self: start; text-align: left; margin-top: .5rem; }
  .work-row__tags { grid-area: tags; justify-self: start; margin-top: .4rem; }
  .work-row__plus { grid-area: plus; align-self: start; margin-top: .5rem; }

  .work-panel__inner { grid-template-columns: 1fr; padding-left: calc(2.4rem + clamp(.8rem, 2vw, 2rem)); }

  .services__grid { grid-template-columns: 1fr; }

  .contact__grid { grid-template-columns: 1fr; gap: 2.8rem; }

  /* Mission: drop the 16:9 overlay scene, stack normally over the cover image. */
  .mission { aspect-ratio: auto; padding: clamp(4rem, 10vw, 6rem) clamp(1.2rem, 4vw, 4rem); }
  .mission__inner { position: static; display: block; }
  .mission__word { font-size: clamp(4.2rem, 22vw, 8rem); margin: 0 0 1.6rem; }
  .mission__tag { font-size: clamp(1.8rem, 9vw, 3.2rem); }
}

@media (max-width: 720px) {
  .header-actions .btn--pill { display: none; }
  .contact-form__row { grid-template-columns: 1fr; gap: 0; }
  .menu__sub { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-media__trail { display: none; } /* no afterimage trail when motion is off */
}

/* ============================================================
   404 — cream sheet, title-first, one way home
   ============================================================ */
.notfound {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1.5rem, 6vw, 6rem);
}
.notfound__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 9vw, 7.5rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  max-width: 12ch;
}
.notfound__title em { font-style: italic; color: var(--accent); }
.notfound__lede {
  margin: 1.8rem 0 2.4rem;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--ink-60);
  max-width: 44ch;
}