/* ==========================================================================
   MAST — Shawn Doxey Portfolio Design System (v1.0, migrated from Webflow)
   Source of truth: site-manifest.md §4–5 + compiled styles pulled via the
   Webflow API on 2026-07-10. Values marked ⚠CAL need one-time calibration
   against the live site (data not exposed by the API).
   Reference frame: 1440px (px ÷ 14.4 = vw). Fluid range: 20rem → 120rem.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts (drop the woff2 files into /fonts — filenames per Webflow export)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Mango Grotesque";
  src: url("../fonts/MangoGrotesque-ExtraBold.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Akzidenz-Grotesk Std";
  src: url("../fonts/akzidgrostdreg-webfont.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Akzidenz-Grotesk Std";
  src: url("../fonts/akzidgrostdmed-webfont.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Akzidenz-Grotesk Std";
  src: url("../fonts/akzidgrostdbol-webfont.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Design tokens  (manifest §4)
   -------------------------------------------------------------------------- */
:root {
  /* Color primitives */
  --_color---primary--orange: #ff3b00;
  --_color---primary--dark-orange: #9c331b;
  --_color---neutral--white: #ffffff;
  --_color---neutral--black: #1d1c1a;
  --_color---neutral--dark-gray: #292825;
  --_color---neutral--mid-gray-1: #cccabf;
  --_color---neutral--mid-gray-2: #474641;
  --_color---neutral--light-gray: #f0eee6;
  --_color---neutral--cream: #f4f1e5;
  --_color---secondary--yellow: #f8d47a;
  --_color---secondary--blue: #0073e6;
  --_color---dark-base: #121212;

  /* Font stacks (compiled values from published CSS) */
  --font-primary: "Akzidenz-Grotesk Std", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Mango Grotesque", "Arial Narrow", Impact, sans-serif;

  /* Fluid type scale — clamp(min, min-0.2*(max-min) + (max-min)vw, max),
     fluid viewport range 20rem→120rem (manifest §4.2) */
  --text-display: clamp(12rem, 11.2rem + 4vw, 16rem);
  --text-h1: clamp(2.8rem, 2.26rem + 2.7vw, 5.5rem);
  --text-h2: clamp(2rem, 1.64rem + 1.8vw, 3.8rem);
  --text-h3: clamp(1.5rem, 1.34rem + 0.8vw, 2.3rem);
  --text-h4: clamp(1.3rem, 1.26rem + 0.2vw, 1.5rem);
  --text-h5: clamp(1.1rem, 1.08rem + 0.1vw, 1.2rem);
  --text-h6: clamp(0.9rem, 0.88rem + 0.1vw, 1rem);
  --text-p-xl: clamp(1.2rem, 1.14rem + 0.3vw, 1.5rem);
  --text-p-lg: clamp(1.1rem, 1.07rem + 0.15vw, 1.25rem);
  --text-p: clamp(0.9rem, 0.88rem + 0.1vw, 1rem);
  --text-p-sm: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem);
  --text-eyebrow: clamp(0.8rem, 0.78rem + 0.1vw, 0.9rem);

  /* Layout & components (manifest §4.3) */
  --container--gutter: 6vw;               /* always bind as variable */
  --container--max-width: 120rem;
  --_layout---grid--columns: 12;
  --_layout---grid--gap-main: clamp(1.25rem, 0.89286rem + 1.78571vw, 2.5rem); /* exact compiled value */
  --_layout---grid--gap-md: 24px;
  --_layout---grid--gap-sm: 8px;
  --_layout---grid--gap-button: 16px;
  --_layout---section--gap-mobile: 4vw;
  --section-padding: clamp(3rem, 2.4rem + 3vw, 6rem);
  --card-padding: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --radius-card: 0rem;
  --radius-button: 0.5rem;

  /* Inter-section rhythm — measured off the published Webflow build
     (live .webflow.io, verified at 1271px and 900px viewports).
     Every spacer there derives from --section-padding:
       XL (between all sections)  = section-padding × 1.1
       MD (extra around intro)    = section-padding × 0.75
       SM (hero → hero media)     = section-padding × 0.48
     Galleries carry half of --gallery-gap each side so adjacent
     sections always sum to one XL. */
  --gap-xl: calc(var(--section-padding) * 1.1);
  --gap-md: calc(var(--section-padding) * 0.75);
  --gap-sm: calc(var(--section-padding) * 0.48);
  --gallery-gap: var(--gap-xl);

  /* Default (light) theme primitives + semantic roles — overridden by u-theme-* */
  --theme-bg: var(--_color---neutral--white);
  --theme-text: var(--_color---neutral--black);
  --theme-accent: var(--_color---primary--orange);
  --primary--background: var(--_color---neutral--white);
  --primary--text: var(--_color---neutral--black);
  --primary--accent: var(--_color---primary--orange);
  --primary--accent-dark: var(--_color---primary--dark-orange);
  --primary--border: #333333;
  /* Eyebrow labels: black on light/brand backgrounds, white on dark ones */
  --eyebrow-text: #000000;
}

/* --------------------------------------------------------------------------
   2. Theme modes — one per project (manifest §5). Attach to .page-wrapper.
   -------------------------------------------------------------------------- */
/* Each theme exposes raw --theme-* primitives so .u-invert can swap them */
.u-theme-home            { --theme-bg:#ff3b00; --theme-text:#f4f1e5; --theme-accent:#f4f1e5; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#000000; }
.u-theme-home-light      { --theme-bg:#f4f1e5; --theme-text:#ff3b00; --theme-accent:#ff3b00; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#000000; }
.u-theme-alvita          { --theme-bg:#23753d; /* deepened for AA (was #2b8c49) */ --theme-text:#ffffff; --theme-accent:#eec25f; /* TODO(design): confirm honey vs brand */ --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#ffffff; }
.u-theme-cleanseries     { --theme-bg:#f26600; --theme-text:#ffffff; --theme-accent:#1d1d1b; /* rule: dark themes get a non-white accent */ --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); }
.u-theme-digitaltrends   { --theme-bg:#162636; --theme-text:#ffffff; --theme-accent:#ff0180; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#ffffff; }
.u-theme-filmfest        { --theme-bg:#1d1c36; --theme-text:#d5d1ad; --theme-accent:#e0b64e; /* TODO(design): confirm gold vs brand */ --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#e0b64e; }
.u-theme-dreamforce      { --theme-bg:#4454b7; --theme-text:#ffffff; --theme-accent:#ffe200; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#ffe200; }
.u-theme-hackthebracket  { --theme-bg:#2a7bb6; --theme-text:#ffffff; --theme-accent:#67edff; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#ffffff; }
/* Accent = brand gold (PMS 130C) so the dark theme gets a second temperature —
   labels/rules/index go gold, headline + values stay white (STS pattern) */
.u-theme-jdawgs          { --theme-bg:#832224; --theme-text:#ffffff; --theme-accent:#f2a900; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#f2a900; }
/* Grey lifted #6c6c6c→#7d7d7d so ink text clears AA (4.8:1, was 3.7);
   accent goes full ink — monochrome IS the Weller poster brand */
.u-theme-weller          { --theme-bg:#7d7d7d; --theme-text:#1a0500; --theme-accent:#1a0500; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); }
/* Ink-on-grey is the one theme where sunk body copy would dip below AA */
.u-theme-weller .pintro_summary-text { color: var(--primary--text); }
.u-theme-fuel            { --theme-bg:#242424; --theme-text:#ffffff; --theme-accent:#ff5400; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#ffffff; }
.u-theme-nbcpeacock      { --theme-bg:#000000; --theme-text:#ffffff; --theme-accent:#fdbb09; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#fdbb09; }
.u-theme-adobe-biz       { --theme-bg:#a50046; --theme-text:#ffffff; --theme-accent:#c9c4ff; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#c9c4ff; }
.u-theme-proseries       { --theme-bg:#4b4b4b; --theme-text:#ffffff; --theme-accent:#d9a441; /* TODO(design): confirm amber vs brand */ --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#ffffff; }
/* All Projects page tokens (art direction 2026-07-11): Background/Primary
   #121212, Secondary/Brand #FF3B00 */
.u-theme-allprojects     { --theme-bg:#121212; --theme-text:#f4f1e5; --theme-accent:#ff3b00; --primary--background:var(--theme-bg); --primary--text:var(--theme-text); --primary--accent:var(--theme-accent); --eyebrow-text:#ffffff; }

/* Inverted band: primary and secondary (accent) swap. <div class="u-invert">
   marks a trigger zone — when it crosses the viewport center, js/site.js adds
   .is-inverted to the page-wrapper and the WHOLE page cross-fades its theme. */
.page-wrapper.is-inverted {
  --primary--background: var(--theme-accent);
  --primary--text: var(--theme-bg);
  --primary--accent: var(--theme-bg);
  /* inverted bands sit on the light accent color */
  --eyebrow-text: #000000;
}
/* Softened large-area colors for the page color flip (design review):
   the original hot accents stay for small elements on the dark theme bg,
   but are too hot as full-page backgrounds — these swap in only while
   inverted. */
.u-theme-digitaltrends.is-inverted { --primary--background: #ddc1fb; --primary--accent: #ff80bf; }
.u-theme-dreamforce.is-inverted     { --primary--background: #fff5ab; }
.u-theme-hackthebracket.is-inverted { --primary--background: #cbedee; }
/* The pop accents (dark-theme second-color rule) are for small elements on
   the theme bg — band flips keep their original light secondary colors */
.u-theme-jdawgs.is-inverted      { --primary--background: #f5f2f2; }
.u-theme-cleanseries.is-inverted { --primary--background: #fff2d1; }
.u-theme-filmfest.is-inverted    { --primary--background: #d5d1ad; }
.u-theme-alvita.is-inverted      { --primary--background: #fef7ea; }
.u-theme-proseries.is-inverted   { --primary--background: #e5ddca; }
.u-theme-adobe-biz.is-inverted   { --primary--background: #e0deff; }
.u-theme-weller.is-inverted      { --primary--background: #d5cab1; --primary--text: #1a0500; --primary--accent: #1a0500; }

/* Vertical display type: tone-on-tone with the page background — a slightly
   LIGHTER shade on dark backgrounds, slightly DARKER on light ones. */
.page-wrapper { --vt-color: #d9d9d9; } /* default (white bg): slightly darker */
.u-theme-home            { --vt-color: #db3300; } .u-theme-home.is-inverted            { --vt-color: #ded9c6; }
.u-theme-home-light      { --vt-color: #ded9c6; }
.u-theme-alvita          { --vt-color: #3da55c; } .u-theme-alvita.is-inverted          { --vt-color: #eedfc5; }
.u-theme-cleanseries     { --vt-color: #d25800; } .u-theme-cleanseries.is-inverted     { --vt-color: #e9d5a8; }
.u-theme-digitaltrends   { --vt-color: #2e475f; } .u-theme-digitaltrends.is-inverted   { --vt-color: #c59eef; }
.u-theme-filmfest        { --vt-color: #33325a; } .u-theme-filmfest.is-inverted        { --vt-color: #bfba8f; }
.u-theme-dreamforce      { --vt-color: #5b6cd1; } .u-theme-dreamforce.is-inverted      { --vt-color: #efe184; }
.u-theme-hackthebracket  { --vt-color: #3e92d1; } .u-theme-hackthebracket.is-inverted  { --vt-color: #a8d8da; }
.u-theme-jdawgs          { --vt-color: #9e3a3c; } .u-theme-jdawgs.is-inverted          { --vt-color: #ded7d7; }
.u-theme-weller          { --vt-color: #808080; } .u-theme-weller.is-inverted          { --vt-color: #bfb194; }
.u-theme-fuel            { --vt-color: #3a3a3a; } .u-theme-fuel.is-inverted            { --vt-color: #db4800; }
.u-theme-nbcpeacock      { --vt-color: #1f1f1f; } .u-theme-nbcpeacock.is-inverted      { --vt-color: #dfa300; }
.u-theme-adobe-biz       { --vt-color: #bf1a60; } .u-theme-adobe-biz.is-inverted       { --vt-color: #e8e8e8; }
.u-theme-proseries       { --vt-color: #616161; } .u-theme-proseries.is-inverted       { --vt-color: #cfc5ac; }
.u-theme-allprojects     { --vt-color: #303030; }
/* themed elements that should ride the 0.6s page cross-fade */
.hero_eyebrow-dot, .pintro_lead, .pintro_metric-value, .eyebrow-component,
.eyebrow, .hero_eyebrow-text,
.pintro_role-eyebrow, .pintro_summary-eyebrow, .nav-logo_link, .section,
.logos_label, .logos_caption_text, .logos_rule, .logos_grid, .logos_item,
.brand-color_separator {
  transition: color 0.6s ease, background-color 0.6s ease, border-color 0.6s ease;
}

/* --------------------------------------------------------------------------
   3. Base / reset / typography
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-p);
  line-height: 1.6;
  color: var(--primary--text);
  background-color: var(--primary--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--primary--accent); text-decoration: none; }
a:hover { color: var(--primary--text); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: 500; margin-top: 0; }
/* No widows: never leave a single word alone on the last line of headings
   or intro/lead copy (text-wrap: pretty re-balances the final lines) */
h1, h2, h3, h4, h5, h6, .pintro_lead, .pintro_summary-text, .paragraph-xl, .paragraph-lg { text-wrap: pretty; }
h1 { font-size: var(--text-h1); line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 0.2em; }
h2 { font-size: var(--text-h2); line-height: 1.1;  letter-spacing: -0.02em; margin-bottom: 0.2em; }
h3 { font-size: var(--text-h3); line-height: 1.2;  margin-bottom: 0.3em; }
h4 { font-size: var(--text-h4); line-height: 1.4;  margin-bottom: 0.4em; }
h5 { font-size: var(--text-h5); line-height: 1.4;  margin-bottom: 0.5em; }
h6 { font-size: var(--text-h6); line-height: 1.4;  margin-bottom: 0.6em; }
p  { margin-top: 0; margin-bottom: 1em; }
.display-font  { font-family: var(--font-display); font-size: var(--text-display); font-weight: 500; line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.2em; }
.paragraph-xl  { font-size: var(--text-p-xl); line-height: 1.4; font-weight: 400; }
.paragraph-lg  { font-size: var(--text-p-lg); line-height: 1.5; font-weight: 400; }
.paragraph-sm  { font-size: var(--text-p-sm); line-height: 1.5; font-weight: 400; }
/* Unified eyebrow voice: italic Title Case (STS reference), no all-caps */
.eyebrow {
  font-size: 16px; line-height: 1.2; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none; margin-bottom: 1.5em;
  color: var(--eyebrow-text); font-style: italic;
}
/* Underlined eyebrows hug their label — never stretch to the column */
.eyebrow-component,
.pintro_role-eyebrow,
.pintro_summary-eyebrow,
.project-nav_label {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
  font-style: italic;
}
.eyebrow-component {
  padding-top: 0.5rem; padding-bottom: 0.35em;
  border-bottom: 2px solid var(--primary--accent);
}
.u-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;
}

/* --------------------------------------------------------------------------
   4. Page shell
   -------------------------------------------------------------------------- */
.page-wrapper {
  position: relative; display: flex; flex-direction: column; overflow: clip;
  background-color: var(--primary--background); color: var(--primary--text);
  transition: background-color 0.6s ease, color 0.6s ease;
}
.u-minh-100vh { min-height: 100vh; }
.page-main { display: flex; flex-direction: column; flex: 1 1 0%; }
.container {
  display: block; width: 100%; margin-inline: auto;
  max-width: var(--container--max-width);
  padding-inline: var(--container--gutter);
}
.section {
  position: relative;
  padding-top: var(--section-padding); padding-bottom: var(--section-padding);
  background-color: transparent; color: var(--primary--text);
}

/* --------------------------------------------------------------------------
   5. Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem var(--container--gutter); /* bar height −30% via padding only */
  /* glass bar: translucent themed background + blur, hairline in the
     secondary (accent) page color spanning the bottom */
  border-bottom: 1px solid var(--primary--accent);
  background-color: transparent;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.6s ease, border-color 0.6s ease;
}
/* js/site.js: hidden while scrolling down, back on any scroll up */
.nav.is-hidden { transform: translateY(-102%); }
/* Logo lockup: mark + single-line wordmark, colored by the page theme's
   accent (secondary page color) — global rule, inherits per u-theme-* */
.nav-logo_link {
  display: inline-flex; align-items: center; gap: 10px; width: auto;
  padding-left: 0; color: var(--primary--accent); line-height: 1;
}
.nav-logo_mark { width: 30px; height: 30px; flex: 0 0 auto; display: block; }
.nav-logo_wordmark {
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  line-height: 1; text-transform: uppercase; letter-spacing: 0.04em;
  /* optical vertical centering: caps sit high in the em box (measured 0.08em) */
  transform: translateY(0.08em);
}
.nav-menu { position: static; margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.nav-link {
  display: inline-flex; justify-content: center; align-items: center; gap: 0.3em;
  padding: 0.6em 0.8em; color: currentColor;
  font-size: var(--text-p-sm); font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.nav-link:hover { color: var(--primary--accent); }
.nav-menu_btn { display: none; padding: 0.75rem 0.5rem; background: none; border: 0; cursor: pointer; }
.nav-menu_btn-bar {
  display: block; width: 1.5rem; height: 1px; margin: 4px 0;
  background-color: var(--primary--text);
  transition: opacity 300ms cubic-bezier(0.165, 0.84, 0.44, 1),
              transform 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --------------------------------------------------------------------------
   6. Hero / Identifier
   -------------------------------------------------------------------------- */
/* Hero exits tight: the display type's own descender box supplies the
   visual breathing room, so the section adds almost none */
.section.cc-hero { padding-top: calc(50px + var(--nav-height, 90px)); padding-bottom: 8px; background-color: transparent; }
.hero_content { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero_eyebrow { display: flex; max-width: 518px; align-items: center; gap: 16px; }
.hero_eyebrow-dot { width: 2px; height: 16px; flex: 0 0 auto; background-color: var(--primary--accent); }
/* Resolves manifest flag #9 (was literal #000): black on light, white on dark */
.hero_eyebrow-text {
  font-family: var(--font-primary); color: var(--eyebrow-text);
  font-size: 16px; line-height: 1.2; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none; margin: 0;
  font-style: italic;
}
.hero_headline {
  margin: 0; font-family: var(--font-display); color: var(--primary--accent);
  font-size: clamp(3.5rem, 17.36vw, 15.625rem);
  line-height: 0.78; font-weight: 800; letter-spacing: 0; text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. Feature / Hero Media Card (full-bleed at ALL breakpoints — locked rule)
   -------------------------------------------------------------------------- */
.section.cc-feature {
  display: block; width: 100%; padding: 0;
  /* Margins, not padding: the gap must show page bg, not the cream card bg */
  margin-block: calc(var(--gallery-gap) / 2);
  background-color: var(--_color---neutral--cream);
}
/* Hero type hands off almost flush to the hero media — the headline's
   descender zone is the real spacer (design revision 2026-07-15) */
.section.cc-hero + .section.cc-feature { margin-top: calc(var(--gap-sm) * 0.3); }

/* 7b. PICTURE-WINDOW CARD — one shared window system, two frame variants.
   Anatomy (identical everywhere): .card frame → .card-bg cover → .card-scrim
   → .card-win (media window — width fills --win-width; height hugs the
   video's native aspect via js/site.js) → .card-lockup.
   Variants only override the custom properties on .card — they never
   restructure. All sizing is fluid against the 1440 frame.
   Source-of-truth values folded in from the existing site (kept over the
   refactor spec's reference numbers): lockup offset 24px@1440 (spec: 48px),
   lockup title 1rem/700 (spec: 24px). Scrim markup is retained but never
   shown — lockup contrast comes from white text (default) or .cc-dark on
   light card backgrounds, not a hover tint. */
.card {
  --win-ratio: 16 / 9;           /* fallback until JS probes native aspect */
  --frame-ratio: auto;           /* landscape: height derives from the mat */
  --win-width: 54%;              /* landscape window width (existing hero) */
  --pad: 11%;                    /* landscape vertical mat (existing hero) */
  --lockup-offset: clamp(16px, 1.667vw, 32px); /* 24px @1440 (existing) */
  position: relative; display: flex; overflow: hidden; width: 100%;
  justify-content: center; align-items: center;
  aspect-ratio: var(--frame-ratio);
  background-color: var(--_color---neutral--dark-gray);
  color: inherit; text-decoration: none;
}
/* full-width placements: frame spans its container, bg mats around the window */
.card--landscape { padding: var(--pad) 0; }
/* slider + non-full-width grid cards: landscape window inside a portrait
   frame, bg dominating vertically */
.card--portrait {
  --frame-ratio: 550 / 720;
  --pad: 7.27%;                  /* 40px @ 550 reference frame */
  --win-width: calc(100% - var(--pad) * 2);
  /* no physical padding: % padding resolves against the CONTAINING block's
     width (wrong basis when the card is narrower than its parent, e.g. in
     the slider track) — the mats come from flex-centering the win instead */
  padding: 0;
}
.card-bg {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; /* always center-crop */
  -webkit-user-drag: none;
}
.card-scrim {
  /* Kept in markup for structure; intentionally never visible — see §7b. */
  display: none;
}
.card-win {
  position: relative; z-index: 2; display: block; overflow: hidden;
  width: var(--win-width); flex: 0 0 auto;
  height: auto; aspect-ratio: var(--win-ratio); /* JS overrides to native */
  border-radius: 0; background-color: var(--_color---neutral--dark-gray);
}
.card-win .inline-video-component { display: block; width: 100%; height: 100%; }
/* hover-play video: visibility handled ONCE here — js/site.js toggles the
   data-show-video attribute on the frame */
.media-hover_video {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none;
  transition: opacity 400ms ease;
}
.card[data-show-video] .media-hover_video { opacity: 1; }
.card-lockup {
  position: absolute; left: var(--lockup-offset); right: var(--lockup-offset);
  bottom: var(--lockup-offset); z-index: 3; display: flex;
  flex-direction: column; gap: 4px;
  pointer-events: none; color: #ffffff;
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms ease 60ms, transform 420ms cubic-bezier(0.16, 1, 0.3, 1) 60ms;
}
.card-lockup.cc-dark { color: #121212; }
.card-lockup_title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; }
.card-lockup_meta { margin: 0; font-size: 0.75rem; line-height: 1.4; font-weight: 400; opacity: 0.7; }
a.card:hover .card-lockup, a.card:focus-visible .card-lockup { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .card-lockup { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Inline video (Cloudflare Stream, scroll-play — js/site.js)
   Pattern: frame sets WIDTH; HEIGHT hugs native aspect (set by JS).
   Media (poster + iframe) always fills that frame 100% × 100%.
   -------------------------------------------------------------------------- */
.inline-video-component { position: relative; display: block; overflow: clip; width: 100%; height: 100%; }
.inline-video_poster {
  position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%;
  pointer-events: none; object-fit: cover; transition: opacity 600ms ease;
}
.inline-video-component.is-playing .inline-video_poster { opacity: 0; }
.inline-video_video {
  position: absolute; inset: 0; z-index: 0; display: block;
  width: 100%; height: 100%; border: 0; object-fit: cover;
  /* 1% cover-crop kills hairline letterbox edges from px rounding */
  transform: scale(1.01); transform-origin: center;
}

/* 8b. Hero/Media Card interaction — merged into the Picture-Window Card
   system (§7b): .card-scrim, .card-lockup, .media-hover_video +
   [data-show-video]. */

/* --------------------------------------------------------------------------
   9. Project Intro
   -------------------------------------------------------------------------- */
.pintro_section { width: 100%; }
/* pintro_border-top removed globally per design revision (was: 2px solid var(--primary--border)) */
.pintro_border-top { display: none; }
.pintro_row {
  display: flex; width: 100%;
  align-items: flex-start;
  /* Published rhythm (content-measured on the live build): plain XL into the
     intro copy, XL + MD out of it. Neighbours contribute half an XL each. */
  padding-block: calc(var(--gallery-gap) / 2) calc(var(--gallery-gap) / 2 + var(--gap-md));
}
.pintro_col-left { width: 31.94vw; padding-right: 2vw; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
.pintro_col-right { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.pintro_role-eyebrow, .pintro_summary-eyebrow {
  display: inline-block; width: max-content; max-width: 100%;
  margin: 0 0 2.5rem; padding-top: 0.5rem; padding-bottom: 0.35em;
  justify-self: start; align-self: start;
  border-bottom: 2px solid var(--primary--accent);
  color: var(--eyebrow-text); font-style: italic;
}
.pintro_role-line {
  margin: 0; font-family: var(--font-primary);
  font-size: var(--text-eyebrow); line-height: 1.2; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Roles: stacked, Title Case; first line top-aligns with the overview headline */
.pintro_role-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.6em;
  font-size: var(--text-h4); line-height: 1; font-weight: 500;
  color: var(--primary--accent);
  transition: color 0.6s ease;
}
.pintro_role-list > li { margin: 0; padding: 0; line-height: inherit; }
.pintro_lead {
  margin: 0; padding: 0;
  color: var(--primary--accent);
  line-height: 1;
}
/* Headline follows the same measure as the summary paragraph below (62ch ≈ 45rem) */
.pintro_headline { max-width: 45rem; }

/* Desktop: subgrid locks Role list + Overview headline onto one shared row
   so their top edges stay aligned regardless of eyebrow widths. */
@media (min-width: 768px) {
  .pintro_row:has(> .pintro_col-left) {
    display: grid;
    grid-template-columns: 31.94vw minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 2vw;
    row-gap: 2.5rem;
    align-items: start;
  }
  .pintro_row:has(> .pintro_col-left) > .pintro_col-left,
  .pintro_row:has(> .pintro_col-left) > .pintro_col-right {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 3;
    width: auto;
    min-width: 0;
    padding-right: 0;
  }
  .pintro_row:has(> .pintro_col-left) .pintro_role-eyebrow,
  .pintro_row:has(> .pintro_col-left) .pintro_summary-eyebrow {
    margin-bottom: 0;
    justify-self: start;
    width: max-content;
  }
  .pintro_row:has(> .pintro_col-left) .pintro_role-list,
  .pintro_row:has(> .pintro_col-left) .pintro_lead {
    margin-top: 0;
    align-self: start;
  }
  .pintro_row:has(> .pintro_col-left) .pintro_summary-text {
    margin-top: 0;
  }
}
/* Homepage intro: bumped exactly one step up the fluid type scale
   (h2 -> h1) and left-justified to the page margin (no eyebrow column) */
.pintro_headline.cc-intro-xl { font-size: var(--text-h1); line-height: 1.02; max-width: 66rem; color: var(--primary--text); }
/* Body copy sinks ~15% toward the bg so headlines own the full text color */
.pintro_summary-text {
  max-width: 62ch; margin-top: 2rem;
  color: color-mix(in srgb, var(--primary--text) 85%, var(--primary--background));
}
/* AA guards: bright orange bgs cap light text near 3:1 — copy goes ink,
   matching those themes' black labels; the bracket blue passes only unsunk */
.u-theme-home .pintro_summary-text,
.u-theme-home-light .pintro_summary-text { color: #1d1c1a; }
.u-theme-cleanseries .pintro_summary-text { color: #1d1d1b; }
.u-theme-hackthebracket .pintro_summary-text { color: var(--primary--text); }
.pintro_metrics-row { display: flex; width: 100%; justify-content: flex-end; gap: 1.67vw; }
.pintro_metric-col { flex: 1 1 0%; min-width: 0; }
.pintro_metric-value { margin: 0; color: var(--primary--accent); }
.pintro_metric-desc { margin: 0; }

/* --------------------------------------------------------------------------
   10. Galleries — geometry lifted verbatim from compiled Webflow styles
   -------------------------------------------------------------------------- */
/* 10a. Asymmetrical Window Video Bleed */
/* Published section is 50vw tall — the window plate reads centered with a few
   vw of cover visible around it, not floating in a deep band. */
.asym-section { position: relative; overflow: hidden; width: 100%; height: auto; aspect-ratio: 100 / 50; }
.asym-bleed { position: absolute; left: 0; top: 0; right: 20.63vw; bottom: 0; z-index: 1; overflow: hidden; }
.asym-cover { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.asym-window {
  position: absolute; left: 39.69%; top: 50%; z-index: 2; overflow: hidden;
  width: 54vw; height: auto; aspect-ratio: 16 / 9; /* JS overrides to native */
  border-radius: 0;
  background-color: #ffffff; transform: translate(-50%, -50%);
}
/* 10b. Asymmetrical Image Bleed */
.asym-image-bleed_section { position: relative; display: flex; width: 100%; justify-content: flex-start; }
.asym-image-bleed_img { position: relative; overflow: hidden; width: 79.38vw; height: auto; aspect-ratio: 1143 / 661; /* JS hugs native */ }
.asym-image-bleed_img > img { display: block; width: 100%; height: auto; position: static; object-fit: cover; }

/* 10c. Right Bleed (stacked floater)
   Grid overlay — both columns are in-flow so the section HEIGHT HUGS the
   taller stack (bleed top offset + frame). No fixed 107vw envelope, so
   bottom dead-space can't unbalance inter-section gaps. */
.rb-section {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
  overflow: hidden; width: 100%; height: auto;
  background-color: transparent;
}
.rb-col-content {
  grid-area: 1 / 1; position: relative; justify-self: start; align-self: start;
  margin-left: 1.94vw; overflow: hidden; width: 37.85vw; height: auto; aspect-ratio: 545 / 827;
}
.rb-col-bleed {
  grid-area: 1 / 1; position: relative; justify-self: end; align-self: start;
  margin-top: 23.06vw; overflow: hidden; width: 57.43vw; height: auto; aspect-ratio: 827 / 1211;
}
.rb-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.rb-floater {
  position: absolute; left: 41%; top: 50%; z-index: 2; overflow: hidden;
  width: 20vw; height: auto; aspect-ratio: 9 / 16; /* JS overrides to native */
  transform: translate(-50%, -50%);
}
.rb-floater_media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 10d. Right Bleed Centered */
.right-bleed-centered_section { position: relative; display: flex; width: 100%; align-items: center; gap: 9.03vw; }
.right-bleed-centered_img-main { position: relative; overflow: hidden; width: 33.68vw; flex-shrink: 0; height: auto; aspect-ratio: 485 / 842; }
.right-bleed-centered_img-secondary { position: relative; overflow: hidden; width: 45.69vw; flex-shrink: 0; height: auto; aspect-ratio: 1316 / 958; }
.right-bleed-centered_section img { display: block; width: 100%; height: auto; position: static; object-fit: cover; }
/* Decorative vertical type — hero-scale word running bottom-to-top on the
   right, semi-transparent white so the themed page shows through */
.vertical-type {
  position: absolute; top: -42vw; left: 21vw; z-index: 1; /* nudged left off the image edge (was 24vw — tangent) */
  writing-mode: vertical-rl; /* reads top-to-bottom — word start greets you as you scroll */
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(7rem, 34.72vw, 31.25rem); line-height: 0.78;
  text-transform: uppercase; letter-spacing: 0; white-space: nowrap;
  color: var(--vt-color, #121212); /* tone-on-tone with the page bg */
  transition: color 0.6s ease;
  pointer-events: none; user-select: none;
}
@media (max-width: 767px) { .vertical-type { display: none; } }
/* Variant for the closing Right Bleed 2up — full hero scale like the CLEAN
   treatment; sits in the open field between the dropped secondary (left)
   and the tall primary (right) */
.vertical-type.cc-2up {
  top: auto; bottom: 65vw; left: 59.5vw;
}
/* Variant for the grey Left Bleed band — overlaps the bleed image (but stays
   under the z-2 floater video) */
.vertical-type.cc-quality {
  top: auto; bottom: calc(2vw + 50vh - 29.2vw); left: 21vw; /* compensates the root's −29.2vw height change */
}
/* RULE: vertical words belong ONLY in offset image grids with a large open
   field. Two standard slots: */
/* — Right 2 Bleed: word below the left image, right edge kissing the right
   image's left edge, running off the section bottom */
.vertical-type.cc-r2b { top: 70vw; left: 16vw; }
/* Adobe for Business: all three r2b words (Scale/Create/System) ride higher
   than the default 70vw (moved up 40%, then back down 20% twice) */
/* "Create": raised 23.6vw so the tail stays out of the picture window below */
.u-theme-adobe-biz .vertical-type.cc-r2b { top: 36.9vw; }
/* "Stream": raised 19.4vw (~300px) per design review */
.u-theme-nbcpeacock .vertical-type.cc-r2b { top: 50.6vw; }
/* "Trends": raised 28.4vw (~400px) per design review */
.u-theme-digitaltrends .vertical-type.cc-r2b { top: 41.6vw; }
/* "System" (band r2b): higher than the shared slot so it clears the face
   in the bleed photo */
.u-theme-adobe-biz .u-invert .vertical-type.cc-r2b { top: 34vw; }
/* — Right Bleed 2up: long-word variant sits in the open field ABOVE the
   dropped secondary (left), tucked toward the primary (right) edge */
.vertical-type.cc-2up-xl {
  top: 2vw; left: 12vw;
  font-size: clamp(4.5rem, 22.9vw, 20.6rem);
}
/* JDawgs — SAUCE / IS / BOSS across separate offset galleries (Film Fest pattern).
   Each word sits in the white space created by that section's image offset. */
.vertical-type.cc-sauce {
  /* Right 2 Bleed open field — same slot as .cc-r2b */
  top: 70vw; left: 16vw;
}
.horizontal-type.cc-is {
  /* Straddle the secondary image top (col padding-top: 50vw) so type
     always partially overlaps the media, never floats in empty field alone.
     Left 26.6vw = original 4vw + 350px-at-1546 (design review 2026-07-15) */
  top: calc(38vw - 300px); left: 26.6vw;
}
.vertical-type.cc-boss {
  /* Between the images: under primary (right), over secondary (left) */
  top: 22vw;
  left: calc(32vw - 120px);
  z-index: 2;
  font-size: clamp(9rem, 34vw, 30rem);
}
/* Film Fest — POWER OF CREATIVITY across the three offset grids */
.vertical-type.cc-power { top: 52vw; left: 16vw; }
.vertical-type.cc-creativity { top: 60vw; left: 2.5vw; font-size: clamp(4rem, 13vw, 11.7rem); }
/* Horizontal display type — SHORT connector words (IS, OF) OVERSCALE the
   vertical baseline and always straddle an image edge (never float alone
   in empty offset space). z-index above gallery frames so the overlap reads. */
.horizontal-type {
  position: absolute; z-index: 3;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(12rem, 52vw, 48rem); line-height: 0.78;
  text-transform: uppercase; letter-spacing: 0; white-space: nowrap;
  color: var(--vt-color, #121212); transition: color 0.6s ease;
  pointer-events: none; user-select: none;
}
@media (max-width: 767px) { .horizontal-type { display: none; } }
/* Film Fest OF — straddles the left image bottom edge in Right 2 Bleed */
.horizontal-type.cc-of { top: 28vw; left: 4vw; }
/* Top-left variant of Right 2 Bleed: left image rides the top edge, the
   right bleed image drops down instead */
.right2-bleed_section.cc-topleft .right2-bleed_img-content { margin-top: 0; }
.right2-bleed_section.cc-topleft .right2-bleed_img-bleed { margin-top: 8vw; }

/* 10e. Tall Video / Image Overlay (picture window)
   (.centered-media_section shares the pattern: base image gives the section
   its height, overlay layer centers the video box)
   NOTE: the wrapper's height comes entirely from .tall-base-img — every
   tall-base-img MUST carry width/height attributes in the HTML so the
   section has intrinsic height before the lazy image loads (otherwise
   0-height clip + loading=lazy deadlocks and the section never renders). */
.tall-video-wrapper, .tall-vimage-wrapper, .centered-media_section { position: relative; overflow: hidden; width: 100%; line-height: 0; }
.tall-base-img { display: block; width: 100%; height: auto; }
.tall-overlay-layer {
  position: absolute; left: 0; top: 0; display: flex; width: 100%; height: 100%;
  justify-content: center; align-items: center;
}
.tall-video-box { position: relative; z-index: 10; overflow: hidden; width: 54vw; height: auto; border-radius: 0; line-height: 0; aspect-ratio: 16 / 9; /* JS overrides */ }

/* 10f. Left Bleed — grid overlay, height hugs the content column stack */
.gallery-left-bleed_root {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
  overflow: hidden; width: 100%; height: auto;
}
.gallery-left-bleed_img-bleed {
  grid-area: 1 / 1; position: relative; justify-self: start; align-self: start;
  overflow: hidden; width: calc(50vw - var(--_layout---grid--gap-main) / 2);
  height: auto; aspect-ratio: 720 / 853;
}
.gallery-left-bleed_img-content {
  grid-area: 1 / 1; position: relative; justify-self: end; align-self: start;
  margin-top: 42.57vw; margin-right: var(--container--gutter);
  overflow: hidden; width: calc(44vw - var(--_layout---grid--gap-main) / 2);
  height: auto; aspect-ratio: 634 / 1201;
}
/* CleanSeries quality badge — straddles the content image's left edge */
.quality-badge {
  position: absolute; z-index: 3; top: 79vw;
  right: calc(var(--container--gutter) + 44vw - var(--_layout---grid--gap-main) / 2 - 5.5vw);
  width: 11vw; height: 11vw;
}
@media (max-width: 767px) { .quality-badge { position: static; width: 40%; height: auto; align-self: center; } }
.gallery-left-bleed_floater {
  position: absolute; left: 31.18vw; top: 35.63vw; z-index: 2; display: block;
  width: 45.83vw; height: auto;
}
.gallery-left-bleed_video-inner { width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; /* JS overrides */ }
.gallery-left-bleed_root img.gallery-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 10m. Right 2 Bleed — left flush, right dropped (geometry from published Webflow).
   Relative offset = 13.89vw. `.cc-topleft` flips: left flush, right only 8vw. */
.right2-bleed_section {
  position: relative; display: flex; width: 100%; height: auto;
  padding-left: var(--container--gutter); /* padding-block set by the shared gallery rhythm rule */
  align-items: flex-start; gap: 1.67vw;
}
.right2-bleed_img-content { position: relative; overflow: hidden; margin-top: 0; width: 37.92vw; height: auto; aspect-ratio: 546 / 843; flex-shrink: 0; }
.right2-bleed_img-bleed { position: relative; overflow: hidden; margin-top: 13.89vw; flex: 1 1 0%; min-width: 0; height: auto; aspect-ratio: 822 / 1201; }
.right2-bleed_section img { display: block; width: 100%; height: auto; position: static; object-fit: cover; }

/* 10n. Phone Collage — botanical floater background + 4 absolutely-positioned
   staggered columns of app screens (geometry from the published Webflow build).
   Section height 138.82vw = the botanical image's exact aspect ratio
   (2880x3998), so the full artwork shows edge-to-edge with no cropping. */
.phone-collage_section {
  position: relative;
  width: 100%;
  height: 138.82vw;
  overflow: hidden;
}
.phone-collage_floater {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}
.phone-collage_col {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 21.18vw;
}
.phone-collage_col.cc-col-1 { row-gap: 5.97vw; top: 26.25vw; left: -3.61vw; }
.phone-collage_col.cc-col-2 { row-gap: 6.39vw; top: 11.39vw; left: 25.42vw; }
.phone-collage_col.cc-col-3 { row-gap: 7.01vw; top: 35.07vw; left: 54.44vw; }
.phone-collage_col.cc-col-4 { row-gap: 6.67vw; top: 20.76vw; left: 82.36vw; }
.phone-collage_img {
  position: relative;
  overflow: hidden;
  z-index: 0;
  width: 100%;
  aspect-ratio: 610 / 1244;
}
.phone-collage_floater img,
.phone-collage_img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 10p. Bleed + Square — one image bleeding off the left edge + one square
   inside the gutter; .cc-flip mirrors it (square left, bleed right) */
.bleed-square_section { position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; }
.bleed-square_img-bleed { position: relative; overflow: hidden; width: 52vw; flex-shrink: 0; height: auto; aspect-ratio: 749 / 562; }
.bleed-square_img-square { position: relative; overflow: hidden; width: 30.5vw; flex-shrink: 0; margin-right: var(--container--gutter); height: auto; aspect-ratio: 1 / 1; }
.bleed-square_section img { display: block; width: 100%; height: auto; position: static; object-fit: cover; }
.bleed-square_section.cc-flip { flex-direction: row-reverse; }
.bleed-square_section.cc-flip .bleed-square_img-square { margin-right: 0; margin-left: var(--container--gutter); }

/* 10q. 3up Bleed Right — large left still + two stacked right (geometry from Webflow) */
.threeup-bleed_section {
  position: relative;
  display: flex;
  width: 100%;
  padding-left: var(--container--gutter);
  align-items: flex-start;
  gap: 1.67vw;
}
.threeup-bleed_col-left { flex-shrink: 0; width: 45.83vw; }
.threeup-bleed_img-main {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 660 / 650;
}
.threeup-bleed_col-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 13.89vw;
  min-width: 0;
}
.threeup-bleed_img-top-wrap { width: 100%; padding-left: 13.33vw; }
.threeup-bleed_img-top {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 516 / 352;
}
.threeup-bleed_img-bottom {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 708 / 394;
}
.threeup-bleed_img-main img,
.threeup-bleed_img-top img,
.threeup-bleed_img-bottom img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 10r. Thumbnail Collage — three small sketches on a gradient panel with an
   open field right (geometry + gradient measured off the published Weller) */
.thumbnail-collage_section {
  position: relative; width: 100%;
  padding-block: calc(var(--gallery-gap) / 2);
}
.thumbnail-collage_wrap {
  position: relative; width: 88.86vw; height: 48.75vw;
  background-image: linear-gradient(237.4deg, #48433c 8.27%, #1d1c17 95.82%);
}
.thumbnail-collage_grid {
  position: absolute; left: 7.43vw; top: 13.61vw;
  display: flex; gap: 2.08vw;
}
.thumbnail-collage_item { position: relative; overflow: hidden; width: 16.94vw; height: auto; aspect-ratio: 488 / 618; }
.thumbnail-collage_item img { display: block; width: 100%; height: auto; position: static; object-fit: cover; }

/* 10s. Double Poster — tall main poster bleeding right, small companion low
   left (published Weller geometry; img boxes at published proportions) */
.double-poster_section {
  position: relative; width: 100%;
  height: calc(116.36vw + var(--gallery-gap)); /* published canvas + rhythm halves */
}
.double-poster_img-bleed {
  position: absolute; left: 6vw; top: calc(60vw + var(--gallery-gap) / 2);
  width: 30.71vw; height: auto; aspect-ratio: 1116 / 2048; overflow: hidden;
}
.double-poster_img-second {
  position: absolute; right: 0; top: calc(var(--gallery-gap) / 2);
  width: 56.11vw; height: auto; aspect-ratio: 5611 / 9916; overflow: hidden;
}
.double-poster_section img { display: block; width: 100%; height: auto; position: static; object-fit: cover; }
.double-poster_img-second img { height: 100%; object-fit: cover; }

/* 10t. Single Left Bleed — tall portrait poster off the left edge */
.single-bleed_section { position: relative; display: flex; width: 100%; justify-content: flex-start; }
.single-bleed_img { position: relative; overflow: hidden; width: 65.56vw; height: auto; aspect-ratio: 2000 / 2660; }
.single-bleed_img img { display: block; width: 100%; height: auto; position: static; object-fit: cover; }

/* 10u. Simple 2up */
.simple-2up_section {
  position: relative; display: flex; width: 100%;
  padding: calc(var(--gallery-gap) / 2) var(--container--gutter);
  gap: var(--_layout---grid--gap-main);
}
.simple-2up_item { position: relative; overflow: hidden; flex: 1 1 0%; min-width: 0; height: auto; aspect-ratio: 1 / 1; }
.simple-2up_item img { display: block; width: 100%; height: auto; position: static; object-fit: cover; }

/* 10g. Brand Logos */
.logos_section {
  position: relative; display: flex;
  /* Published internal padding: 3.47vw above the label, 5.56vw below the grid */
  padding: 3.47vw 3.33vw 5.56vw;
  flex-direction: column; align-items: flex-start; gap: 0;
}
.logos_inner { display: flex; width: 100%; flex-direction: column; align-self: stretch; }
.logos_label { color: var(--primary--text); font-size: 0.85rem; line-height: 1rem; font-weight: 500; font-style: italic; margin: 0 0 0.8vw; }
/* Rules and dividers derive from the theme text color so they stay visible on
   any band background (light or dark) */
.logos_rule { width: 100%; height: 1px; flex-shrink: 0; background-color: color-mix(in srgb, var(--primary--text) 35%, transparent); }
.logos_grid { display: grid; width: 100%; align-items: stretch; grid-template-columns: 1fr 1fr 1fr; gap: 0; border-bottom: 1px solid color-mix(in srgb, var(--primary--text) 35%, transparent); }
.logos_section.cc-2up .logos_grid { grid-template-columns: 1fr 1fr; }
.logos_item {
  display: flex; width: 100%; flex-direction: column; justify-content: space-between;
  border-right: 1px solid color-mix(in srgb, var(--primary--text) 35%, transparent); gap: 0;
}
.logos_item:last-child { border-right: none; }
.logos_tile {
  display: flex; overflow: hidden; width: 100%; padding: 8% 12%;
  justify-content: center; align-items: center; aspect-ratio: 432/238; border-radius: 0;
}
.logos_img { display: block; width: auto; height: auto; max-height: 100%; max-width: 100%; object-fit: contain; }
.logos_caption { display: flex; width: 100%; padding: 0.83vw 1.11vw 1vw 1.5vw; flex-direction: column; align-items: flex-start; }
.logos_caption_text { margin: 0 0 15px; color: color-mix(in srgb, var(--primary--text) 75%, var(--primary--background)); font-size: 0.75rem; line-height: 1; font-weight: 400; }

/* 10h. Brand Colors */
.brand-color_section {
  position: relative; display: flex;
  padding: 3.47vw 3.33vw 5.56vw;
  flex-direction: column; align-items: flex-start; gap: 2.22vw;
}
/* Band edges: published wraps the brand block in spacer XL + spacer MD
   before the internal 3.47vw pad, and spacer XL after the 5.56vw pad.
   Neighbouring sections contribute half an XL each. */
.u-invert > .logos_section:first-child,
.u-invert > .brand-color_section:first-child {
  padding-top: calc(var(--gallery-gap) / 2 + var(--gap-md) + 3.47vw);
}
.u-invert > .logos_section:last-child,
.u-invert > .brand-color_section:last-child {
  padding-bottom: calc(var(--gallery-gap) / 2 + 5.56vw);
}
.brand-color_header { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.56vw; }
.brand-color_separator { width: 100%; height: 1px; flex-shrink: 0; background-color: color-mix(in srgb, var(--primary--text) 35%, transparent); }
.brand-color_grid { display: flex; width: 100%; flex-wrap: wrap; align-items: stretch; gap: 0; }
.brand-color_swatch { position: relative; overflow: hidden; width: 33.333%; aspect-ratio: 445/231; }
.brand-color_block { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.brand-color_scrim {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); pointer-events: none;
}
.brand-color_lockup {
  position: absolute; left: 2.78vw; bottom: 2.71vw; z-index: 2; display: flex;
  flex-direction: column; align-items: flex-start; gap: 0.56vw;
}
.brand-color_meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.brand-color_meta-line { margin: 0; color: #ffffff; font-size: 0.75rem; line-height: 1.35; font-weight: 400; }
.brand-color_name { margin: 0; color: #ffffff; font-size: var(--text-h6); font-weight: 500; }

/* Pantone flat variant (per brand guide): 4-up, no scrim, dark text on flat chips */
.brand-color_section.cc-pantone .brand-color_swatch { width: 25%; }
.brand-color_section.cc-pantone .brand-color_lockup { top: 34%; bottom: auto; gap: 1.1vw; }
.brand-color_section.cc-pantone .brand-color_name { color: #1d1c1a; }
.brand-color_section.cc-pantone .brand-color_meta-line { color: inherit; }
.brand-color_section.cc-pantone .brand-color_meta { color: #47463f; }
.brand-color_section.cc-pantone .brand-color_meta-line + .brand-color_meta-line { margin-top: 0.15em; }

/* 10i. Video Collage — ::before sizer replaces fixed height so the band
   can't run longer than the composition */
.video-collage_section { position: relative; overflow: hidden; width: 100%; height: auto; }
.video-collage_section::before {
  content: ""; display: block; width: 100%;
  padding-bottom: 69.15%; /* composition envelope as % of width */
}
.video-collage_item { position: absolute; overflow: hidden; border-radius: 0; height: auto; }
/* media fills the item's width; height hugs native aspect (JS sets aspect-ratio) */
.video-collage_item .inline-video-component { position: relative; display: block; width: 100%; height: 100%; }
.video-collage_item .inline-video-component iframe,
.video-collage_item .inline-video_poster { width: 100%; height: 100%; object-fit: cover; }
.video-collage_media { width: 100%; height: 100%; }
/* Item placement — widths from Figma "Gallery / Video Collage" (px ÷ 14.4 = vw);
   aspect-ratio values are fallbacks until JS probes each stream */
.video-collage_item.cc-item-1 { left: 0; top: 2.29vw; width: 33.19vw; aspect-ratio: 1 / 1; }
.video-collage_item.cc-item-2 { left: 67.08vw; top: 0; width: 29.38vw; aspect-ratio: 1 / 1; }
.video-collage_item.cc-item-3 { left: 35.07vw; top: 20.69vw; width: 45.83vw; aspect-ratio: 606 / 640; z-index: 2; }

/* 10j. Gallery Collage (16 thumbs) */
.gallery-collage_section {
  position: relative; overflow: hidden; width: 100%;
  padding: calc(var(--gallery-gap) / 2) 3.33vw;
}
.gallery-collage_grid { display: grid; width: 100%; grid-auto-rows: auto; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.8vw; }
.gallery-collage_item { position: relative; overflow: hidden; width: 100%; height: auto; aspect-ratio: 388 / 236; background-color: #ffffff; border-radius: 0; }
.gallery-collage_img { display: block; width: 100%; height: auto; object-fit: cover; }

/* 10k. Video Floater — grid overlay, height hugs the backdrop */
.video-floater_section {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
  overflow: hidden; width: 100%; height: auto;
}
.video-floater_bg {
  grid-area: 1 / 1; position: relative; justify-self: end; align-self: start;
  z-index: 1; overflow: hidden; width: 72.99vw; height: auto; aspect-ratio: 1051 / 568;
}
.video-floater_img { display: block; width: 100%; height: auto; object-fit: cover; }
.video-floater_wrap {
  grid-area: 1 / 1; position: relative; justify-self: start; align-self: end;
  z-index: 2; overflow: hidden; margin-left: 3.33vw;
  width: 45.97vw; height: auto; aspect-ratio: 16 / 9; /* JS overrides */
}
.video-floater_media { width: 100%; height: 100%; }

/* 10l. Right Bleed 2up — secondary (left, dropped) then primary (right, tall bleed).
   DOM order must be secondary → primary. Geometry from published Webflow. */
.right-bleed2up_section {
  position: relative;
  display: flex; width: 100%; padding-left: var(--container--gutter);
  align-items: flex-start; gap: 1.53vw;
}
.right-bleed2up_col-primary { min-width: 0; flex: 1 1 0%; position: relative; z-index: 3; }
.right-bleed2up_img-primary { position: relative; overflow: hidden; width: 100%; height: auto; aspect-ratio: 825 / 1410; }
.right-bleed2up_col-secondary { width: 37.85vw; padding-top: 50vw; flex-shrink: 0; position: relative; z-index: 1; }
.right-bleed2up_img-secondary { position: relative; overflow: hidden; width: 100%; height: auto; aspect-ratio: 545 / 845; }
.right-bleed2up_section img { display: block; width: 100%; height: auto; position: static; object-fit: cover; }

/* --------------------------------------------------------------------------
   10z. Gallery inter-section rhythm
   ONE rule for every gallery: padding-block half of --gallery-gap each side
   so adjacent sections always share the same gap. Envelope comps (RB, left
   bleed, video floater, right 2 bleed) now HEIGHT-HUG their media — no fixed
   vw envelopes that leave dead space at the bottom.
   -------------------------------------------------------------------------- */
.rb-section,
.gallery-left-bleed_root,
.right-bleed-centered_section,
.asym-section,
.asym-image-bleed_section,
.tall-video-wrapper,
.tall-vimage-wrapper,
.centered-media_section,
.video-collage_section,
.video-floater_section,
.bleed-square_section,
.double-poster_section,
.single-bleed_section,
.right2-bleed_section,
.right-bleed2up_section,
.threeup-bleed_section {
  padding-block: calc(var(--gallery-gap) / 2);
}
/* Full-bleed closer → All Projects: flush exit (no page-color band).
   Inset gallery types (not full viewport width) restore exit padding below. */
.u-invert:has(+ .project-nav_section) > section:last-of-type,
section:has(+ .project-nav_section) {
  padding-bottom: 0;
}
.u-invert:has(+ .project-nav_section) > section:last-of-type:is(
  .asym-image-bleed_section,
  .bleed-square_section,
  .threeup-bleed_section,
  .right-bleed2up_section,
  .double-poster_section,
  .single-bleed_section,
  .thumbnail-collage_section,
  .simple-2up_section,
  .gallery-collage_section
),
section:is(
  .asym-image-bleed_section,
  .bleed-square_section,
  .threeup-bleed_section,
  .right-bleed2up_section,
  .double-poster_section,
  .single-bleed_section,
  .thumbnail-collage_section,
  .simple-2up_section,
  .gallery-collage_section
):has(+ .project-nav_section) {
  padding-bottom: var(--gallery-gap);
}
/* Band → band needs no extra rule: every section now carries half an XL,
   so adjacent bands meet at exactly one XL. */
/* phone / thumbnail / simple-2up / gallery-collage set padding via shorthand above */

/* --------------------------------------------------------------------------
   11. Section / All Projects (only section that keeps a black background)
   -------------------------------------------------------------------------- */
.project-nav_section {
  width: 100%; padding: 5.56vw var(--container--gutter); /* published pad */
  background-color: #242424; /* Background/Grey (no token in MAST base — literal per design) */
  color: var(--_color---neutral--cream);
}
/* matches the unified eyebrow pattern: italic Title Case + accent underline */
.project-nav_label {
  display: inline-block; width: max-content; max-width: 100%;
  margin: 0 0 2vw; padding-top: 0.5rem; padding-bottom: 0.35em;
  border-bottom: 2px solid var(--primary--accent);
  color: var(--eyebrow-text); font-size: 16px; line-height: 1.2; font-weight: 500;
  text-transform: none; letter-spacing: 0.02em; font-style: italic;
}
/* Footer project grid is always on charcoal — keep label light there */
.project-nav_section .project-nav_label { color: #ffffff; }
.project-nav_grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--_layout---grid--gap-main);
}
.project-thumb {
  position: relative; display: block; color: inherit;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
.project-thumb:hover, .project-thumb:focus-visible { transform: scale(1.035); z-index: 2; }
.project-thumb_img { position: relative; z-index: 0; display: block; overflow: hidden; width: 100%; height: auto; aspect-ratio: 17 / 10; background-color: #1c1c1c; }
/* Locked crop frame — exempt from native image-hug so the grid stays uniform */
.project-thumb_img img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
}
/* hover: project name stamps in, centered in the frame — no scrim (design
   review: gradients muddied the thumbs). Label color adapts to the image:
   white by default, ink when js flags the thumb .is-light. */
.project-thumb_label {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: grid; place-items: center; text-align: center; padding: 0 6%;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(14px, 1.55vw, 26px); line-height: 0.95; letter-spacing: 0.01em;
  color: #ffffff;
  opacity: 0; transform: translateY(6px);
  transition: opacity 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.project-thumb.is-light .project-thumb_label { color: #1d1c1a; }
.project-thumb:hover .project-thumb_label,
.project-thumb:focus-visible .project-thumb_label { opacity: 1; transform: translateY(0); }
/* touch devices: no hover state — label always on */
@media (hover: none) {
  .project-thumb_label { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.cc-footer, .footer {
  position: relative;
  display: flex; padding-top: 120px; padding-bottom: 0; flex-direction: column;
  gap: 0; background-color: #121212; color: var(--_color---neutral--cream);
}
.footer_hello-wrap {
  overflow: hidden;
  margin-top: -20px;
  padding: 0 46px 0 48px;
}
.footer_hello {
  /* padding-top clears glyph overshoot so tops aren't clipped by the wrap;
     negative margin bleeds ~20% of the em below the clip edge */
  margin: 0 0 -0.2em;
  padding-top: 0.1em;
  font-family: var(--font-display);
  font-size: clamp(7.7rem, 33.3vw, 30rem); /* 20% smaller again */
  line-height: 0.78; font-weight: 800;
  letter-spacing: 0; text-transform: uppercase;
}
.footer_hello_say { color: var(--footer-say, var(--theme-accent)); }   /* page secondary */
/* Ink/dark pop accents vanish on the charcoal footer — those themes hand
   the wordmark their original light secondary instead */
.u-theme-weller      { --footer-say: #d5cab1; }
.u-theme-cleanseries { --footer-say: #fff2d1; }
.footer_hello_hello { color: var(--theme-bg); }     /* page primary */
/* Info lockup — top-right, beside the end of HELLO! */
.footer_info-row {
  position: absolute;
  top: 106px; right: 48px; z-index: 2;
  display: flex;
  padding: 0;
  justify-content: flex-end;
}
.footer_info { display: flex; width: 293px; max-width: 100%; flex-direction: column; gap: 18px; }
.footer_eyebrow { font-family: var(--font-primary); color: var(--_color---neutral--cream); font-size: 12px; line-height: 1.4; margin: 0; }
.footer_tagline { margin: 0; font-family: var(--font-primary); color: var(--_color---neutral--white); font-size: 17px; line-height: 1.5; }
.footer_links { display: flex; padding-top: 8px; gap: 32px; }
.footer_link { font-family: var(--font-primary); color: var(--_color---neutral--white); font-size: 17px; line-height: 1.5; text-decoration: none; }
.footer_link:hover { color: var(--_color---neutral--cream); opacity: 0.8; }

/* --------------------------------------------------------------------------
   13. Responsive rules (manifest §8 locked rules)
   Breakpoints: 991 (tablet) / 767 (small) / 478 (tiny)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .asym-window { width: 65vw; }
  .tall-video-box { width: 65vw; }
  .project-nav_grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
  /* Uniform mobile rhythm, 50% of the former mobile gap */
  :root {
    --gallery-gap: 6vw; /* boundary beat; internal stacks keep 4vw */
  }
  /* Features carry the mobile half-beat; hero handoff stays flush */
  .section.cc-feature { margin-block: 3vw; }
  .section.cc-hero + .section.cc-feature { margin-top: 0; }
  /* Hero top joins the mobile rhythm: 73px nav clearance + one 6vw beat
     (the desktop 50px + 90px fallback left 67px of dead air) */
  .section.cc-hero { padding-top: calc(73px + 6vw); }
  /* Feature media simplifies to the reel at mobile (no bg mat), but keeps
     the page margin — ONLY the hero reel runs full bleed (design review) */
  .section.cc-feature { padding-inline: var(--container--gutter); }
  .section.cc-hero + .section.cc-feature { padding-inline: 0; }
  .section.cc-feature .card { padding: 0; background-color: transparent; }
  .section.cc-feature .card-bg,
  .section.cc-feature .card-scrim { display: none; }
  .section.cc-feature .card-win { width: 100%; }
  /* picture-window video recenters at mobile */
  .asym-window { width: 62vw; left: 50%; }
  .tall-video-box { width: 62vw; }
  /* picture-windows gain the standard gutter at mobile, never stack */
  .asym-bleed { right: var(--container--gutter); }

  .nav-menu .nav-link { display: none; }
  .nav-menu_btn { display: block; }
  .nav.is-open .nav-link { display: inline-flex; }

  /* floater/stacked components stack vertically at mobile (locked rule) */
  .rb-section { height: auto; display: flex; flex-direction: column; gap: var(--_layout---section--gap-mobile); padding-inline: var(--container--gutter); }
  .rb-col-content, .rb-col-bleed, .rb-floater {
    position: static; width: 100%; height: auto; transform: none;
  }
  .rb-col-content { aspect-ratio: 545/827; }
  .rb-col-bleed { aspect-ratio: 827/1211; }
  .rb-floater { aspect-ratio: 288/559; }
  .rb-cover, .rb-floater_media { position: absolute; }
  .rb-col-content, .rb-col-bleed, .rb-floater { position: relative; inset: auto; }
  /* tall floater video: stacked in flow, centered, full width within the gutters */
  .rb-floater { width: 100%; margin-inline: auto; }

  .gallery-left-bleed_root { height: auto; display: flex; flex-direction: column; gap: var(--_layout---section--gap-mobile); padding-inline: var(--container--gutter); }
  .gallery-left-bleed_img-bleed, .gallery-left-bleed_img-content, .gallery-left-bleed_floater {
    position: relative; inset: auto; width: 100%; height: auto;
  }
  .gallery-left-bleed_img-bleed { aspect-ratio: 720/853; }
  .gallery-left-bleed_img-content { aspect-ratio: 634/1201; }

  .right-bleed-centered_section { flex-direction: column; gap: var(--_layout---section--gap-mobile); padding-inline: var(--container--gutter); }
  .right-bleed-centered_img-main, .right-bleed-centered_img-secondary { width: 100%; }

  .right-bleed2up_section { flex-direction: column; gap: var(--_layout---section--gap-mobile); padding-inline: var(--container--gutter); }
  .right-bleed2up_col-secondary { width: 100%; padding-top: 0; }

  .right2-bleed_section { flex-direction: column; height: auto; gap: var(--_layout---section--gap-mobile); padding-inline: var(--container--gutter); }
  .right2-bleed_img-content { width: 100%; height: auto; aspect-ratio: 546 / 843; flex: none; margin-top: 0; }
  .right2-bleed_img-bleed { width: 100%; height: auto; aspect-ratio: 774 / 1201; flex: none; margin-top: 0; }

  .bleed-square_section, .bleed-square_section.cc-flip { flex-direction: column; gap: var(--_layout---section--gap-mobile); padding-inline: var(--container--gutter); }
  .bleed-square_img-bleed, .bleed-square_img-square { width: 100%; margin: 0 !important; }

  .threeup-bleed_section { flex-direction: column; gap: 4vw; padding-inline: var(--container--gutter); }
  .threeup-bleed_col-left,
  .threeup-bleed_col-right { width: 100%; }
  .threeup-bleed_col-right { gap: 4vw; }
  .threeup-bleed_img-top-wrap { padding-left: 0; }

  /* Weller galleries (thumbnail collage / double poster / single bleed) are
     fully vw-proportional — they scale down without restacking */

  .simple-2up_section { flex-direction: column; gap: var(--_layout---section--gap-mobile); }
  .simple-2up_item { width: 100%; flex: none; }

  .video-collage_section { height: auto; display: flex; flex-direction: column; gap: var(--_layout---section--gap-mobile); padding-inline: var(--container--gutter); }
  .video-collage_section::before { display: none; }
  .video-collage_item { position: relative; inset: auto !important; width: 100% !important; }

  .video-floater_section { height: auto; display: flex; flex-direction: column; gap: var(--_layout---section--gap-mobile); padding-inline: var(--container--gutter); }
  .video-floater_bg, .video-floater_wrap { position: relative; inset: auto; width: 100%; height: auto; }
  .video-floater_bg { aspect-ratio: 1051/568; }
  .video-floater_wrap { aspect-ratio: 662/503; }

  .pintro_row { flex-direction: column; gap: 2.5rem; }
  .pintro_row:has(> .pintro_col-left) {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
  }
  .pintro_row:has(> .pintro_col-left) > .pintro_col-left,
  .pintro_row:has(> .pintro_col-left) > .pintro_col-right {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    width: 100%;
  }
  .pintro_row:has(> .pintro_col-left) .pintro_role-eyebrow,
  .pintro_row:has(> .pintro_col-left) .pintro_summary-eyebrow {
    margin-bottom: 2.5rem;
  }
  .pintro_row:has(> .pintro_col-left) .pintro_role-list,
  .pintro_row:has(> .pintro_col-left) .pintro_lead {
    margin-top: 0;
  }
  .pintro_col-left { width: 100%; padding-right: 0; }
  .pintro_metrics-row { flex-wrap: wrap; gap: 6vw; }

  .gallery-collage_grid { grid-template-columns: 1fr 1fr; gap: 3vw; }
  .logos_grid, .logos_section.cc-2up .logos_grid { grid-template-columns: 1fr; }
  .logos_item { border-right: none; border-bottom: 1px solid color-mix(in srgb, var(--primary--text) 35%, transparent); }
  .brand-color_swatch { width: 50%; }
  .brand-color_section.cc-pantone .brand-color_swatch { width: 50%; }
  .brand-color_section.cc-pantone .brand-color_lockup { gap: 2.4vw; }
  .project-nav_grid { grid-template-columns: repeat(3, 1fr); }

  .footer_hello-wrap { padding-inline: var(--container--gutter); }
  .footer_info-row { top: 32px; right: var(--container--gutter); left: auto; }
  .cc-footer, .footer { padding-top: 72px; gap: 0; }
}

@media (max-width: 478px) {
  .asym-window { width: 70vw; }
  .tall-video-box { width: 70vw; }
  .brand-color_swatch { width: 100%; }
  .brand-color_section.cc-pantone .brand-color_swatch { width: 100%; }
  .project-nav_grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   14. Global mobile gallery rules (design revision)
   Assets never bleed to the viewport edge on mobile — the hero media card
   (.cc-feature) is the ONLY full-bleed exception. Every gallery section sits
   full width between the page margins with extra vertical breathing room.
   Placed last so it wins the cascade over the per-section rules above.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Uniform mobile rhythm: every media-to-media gap equals
     --_layout---section--gap-mobile (4vw). Half on each gallery section.
     Spacer divs are retired — padding-block carries the rhythm. */
  .rb-section, .gallery-left-bleed_root, .right-bleed-centered_section,
  .right-bleed2up_section, .right2-bleed_section, .video-collage_section,
  .video-floater_section, .gallery-collage_section,
  .tall-video-wrapper, .tall-vimage-wrapper, .asym-image-bleed_section,
  .asym-section, .bleed-square_section, .centered-media_section {
    padding-inline: var(--container--gutter);
    padding-block: calc(var(--gallery-gap) / 2);
  }
  .threeup-bleed_section {
    padding-inline: var(--container--gutter);
    padding-block: calc(var(--gallery-gap) / 2);
  }
  .section.cc-feature + .u-invert {
    padding-top: 3vw;
  }
  .u-invert:has(+ .project-nav_section) > section:last-of-type,
  section:has(+ .project-nav_section) {
    padding-bottom: 0;
  }
  .u-invert:has(+ .project-nav_section) > section:last-of-type:is(
    .asym-image-bleed_section,
    .bleed-square_section,
    .threeup-bleed_section,
    .right-bleed2up_section,
    .double-poster_section,
    .single-bleed_section,
    .thumbnail-collage_section,
    .simple-2up_section,
    .gallery-collage_section
  ),
  section:is(
    .asym-image-bleed_section,
    .bleed-square_section,
    .threeup-bleed_section,
    .right-bleed2up_section,
    .double-poster_section,
    .single-bleed_section,
    .thumbnail-collage_section,
    .simple-2up_section,
    .gallery-collage_section
  ):has(+ .project-nav_section) {
    padding-bottom: var(--gallery-gap);
  }
  .u-invert:has(+ .u-invert) > section:last-of-type {
    padding-bottom: var(--gallery-gap);
  }
  .simple-2up_section {
    padding-inline: var(--container--gutter);
    padding-block: calc(var(--gallery-gap) / 2);
  }
  /* brand sections keep breathing room around their labels */
  .logos_section, .brand-color_section { padding: 6vw var(--container--gutter); }
  .logos_section + .logos_section,
  .logos_section + .brand-color_section { padding-top: 3vw; }
  /* band-edge desktop pads don't apply at mobile */
  .u-invert > .logos_section:first-child,
  .u-invert > .brand-color_section:first-child { padding-top: 6vw; }
  .u-invert > .logos_section:last-child,
  .u-invert > .brand-color_section:last-child { padding-bottom: 6vw; }
  /* gallery collage matches the uniform gap too */
  .gallery-collage_grid { gap: var(--_layout---section--gap-mobile); }
  /* intro on the mobile scale (page-wrapper prefix outranks theme rules) */
  .page-wrapper .pintro_row { padding-block: 6vw 3vw; }
  /* asym picture window: image fills the frame, gutters only */
  .asym-section { height: auto; aspect-ratio: 100 / 70; }
  .asym-bleed { left: var(--container--gutter); right: var(--container--gutter); }
  .asym-image-bleed_img { width: 100%; }
}

/* --------------------------------------------------------------------------
   15. Motion — hero load-in + gallery parallax
   Both honor prefers-reduced-motion; parallax is desktop-only (stacked
   mobile layouts stay still). Driven by js/site.js via the --par variable.
   -------------------------------------------------------------------------- */
/* mask clips the headline during the rise; em padding gives glyph headroom
   (line-height .78 lets caps overflow the line box) without layout shift */
.hero_headline-mask {
  overflow: hidden; padding: 0.15em 0; margin: -0.15em 0;
  font-size: clamp(3.5rem, 17.36vw, 15.625rem); line-height: 0.78;
}
@media (prefers-reduced-motion: no-preference) {
  .hero_eyebrow { opacity: 0; transform: translateY(10px); animation: hero-fade 0.5s ease-out 0.15s forwards; }
  /* Letter stack-in: js/site.js splits the H1 into .hero_letter spans; each
     rises into place left-to-right with its own randomized delay + duration */
  .hero_headline.is-split .hero_letter {
    transform: translateX(100vw);
    animation: hero-letter-fly var(--dur, 0.7s) cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0.3s) forwards;
  }
  /* After the stack-in: slow vertical-only bob, no side-to-side, no rotation */
  .hero_headline.is-split { animation: hero-bob 5.5s ease-in-out 2.4s infinite; }
}
@keyframes hero-fade { to { opacity: 1; transform: translateY(0); } }
@keyframes hero-letter-fly { to { transform: translateX(0); } }
@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-4px); }
  70% { transform: translateY(2.5px); }
}
.hero_word { display: inline-block; white-space: nowrap; }
.hero_letter { display: inline-block; }

/* 15b. Cinematic film grain — fixed SVG noise overlay, stepped background-
   position shifts to flicker like a running 16mm roll */
.grain-overlay {
  position: fixed; inset: -60px; z-index: 999; pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
@media (prefers-reduced-motion: no-preference) {
  .grain-overlay { animation: grain-flicker 0.8s steps(1, end) infinite; }
}
@keyframes grain-flicker {
  0%, 100% { background-position: 0 0; }
  10% { background-position: -12px -26px; }
  20% { background-position: -38px 12px; }
  30% { background-position: 18px -58px; }
  40% { background-position: -14px 58px; }
  50% { background-position: -36px 24px; }
  60% { background-position: 36px 2px; }
  70% { background-position: 0 34px; }
  80% { background-position: 8px 84px; }
  90% { background-position: -24px 24px; }
}

/* 15c. Scroll-driven reveal — secondary typography glides up on entry.
   Hidden state is gated on html.motion-ok (set by the inline script at the
   bottom of the page) so content stays visible without JS */
html.motion-ok [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), color 0.6s ease;
}
html.motion-ok [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.motion-ok [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  [data-parallax], .par-frame { will-change: transform; }
  /* STRUCTURAL PARALLAX — images stay 100%×100% cover; never scale/grow.
     js/site.js sets --par on .par-frame (sole-child covers) or the element. */
  img[data-parallax] { transform: translate3d(0, var(--par, 0px), 0); }
  .par-frame { transform: translate3d(0, var(--par, 0px), 0); }
  .par-frame > img {
    width: 100%; height: 100%; object-fit: cover; transform: none;
  }
  /* floaters keep their centering transform and drift slightly fast */
  .rb-floater[data-parallax], .asym-window[data-parallax] {
    transform: translate(-50%, calc(-50% + var(--par, 0px)));
  }
  .tall-video-box[data-parallax], .gallery-left-bleed_floater[data-parallax],
  .video-floater_wrap[data-parallax], .video-collage_item[data-parallax],
  .hero_content[data-parallax], .card-win[data-parallax], .container[data-parallax],
  .phone-collage_col[data-parallax] {
    transform: translate3d(0, var(--par, 0px), 0);
  }
  .vertical-type[data-parallax],
  .horizontal-type[data-parallax] {
    transform: translate3d(0, var(--par, 0px), 0);
  }
}

/* --------------------------------------------------------------------------
   11. Core pages — Home / About / All Projects
   -------------------------------------------------------------------------- */
/* 11a. Selected Work slider (scroll-snap + pointer drag; Flickity retired) */
.works_section {
  position: relative; width: 100%;
  padding-block: calc(var(--gallery-gap) / 2);
}
.works_header { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 var(--container--gutter) 2.5vw; }
/* eyebrow bottoms out against the nav arrows (design review 2026-07-11) */
.works_header .project-nav_label { margin-bottom: 0; }
.works_arrows { display: flex; gap: 10px; }
.works_arrow {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid currentColor; border-radius: 0; background: transparent;
  color: inherit; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease;
}
.works_arrow:hover { background-color: var(--primary--text); color: var(--primary--background); }
.works_arrow svg { display: block; }
.works_track {
  display: flex; gap: var(--_layout---grid--gap-main); overflow-x: auto;
  padding: 0 var(--container--gutter); scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* Smooth programmatic arrow / snap scrolls; drag/coast force auto via JS classes */
  scroll-behavior: smooth;
}
.works_track::-webkit-scrollbar { display: none; }
.works_track.is-dragging,
.works_track.is-coasting {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
.works_track.is-dragging { cursor: grabbing; }
/* Slider cards are Picture-Window Cards (card--portrait; 550px @1440).
   Slider bg drift pans object-position (js/site.js) — images never scale. */
.works_card { flex: 0 0 38.2vw; scroll-snap-align: start; }

/* 11b. All Projects — broken offset grid, replicated from the Webflow
   "Template Page for All Projects": alternating full-width rows, two-up
   rows with a 20rem desktop stagger on the right card (cc-desktop-stagger),
   and offset singles on the 12-col rhythm. Cards are the Hero/Media Card
   component: cover image, hover-play video, text lockup overlay, no scrim.
   Portrait cards ~3:4 (11/14); full rows landscape >16:9 (21/9). */
.aproj_section { position: relative; width: 100%; padding: 3.47vw 3.33vw 5.56vw; }
.aproj_row { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: var(--_layout---grid--gap-main); }
.aproj_col { position: relative; min-width: 0; flex: 0 0 auto; }
.aproj_col.cc-5 { width: calc(41.666% - var(--_layout---grid--gap-main) / 2); }
.aproj_col.cc-6 { width: calc(50% - var(--_layout---grid--gap-main) / 2); }
.aproj_col.cc-12 { width: 100%; }
.aproj_col.cc-offset-1 { margin-left: 8.333%; }
.aproj_col.cc-offset-3 { margin-left: 25%; }
.aproj_stagger { display: block; height: 20rem; } /* = Webflow cc-desktop-stagger */
/* Grid cards are Picture-Window Cards: cc-wide rows → card--landscape,
   everything else → card--portrait (see §7b). */
.aproj-card { width: 100%; }
@media (max-width: 991px) { .aproj_stagger { display: none; } }
@media (max-width: 767px) {
  .aproj_section { padding: 0 var(--container--gutter) var(--_layout---section--gap-mobile); }
  .aproj_row { flex-direction: column; gap: var(--_layout---section--gap-mobile); }
  .aproj_col.cc-5, .aproj_col.cc-6 { width: 100%; }
  .aproj_col.cc-offset-1, .aproj_col.cc-offset-3 { margin-left: 0; }
  /* Stacked cards read as one deck: uniform frame height AND poster-window
     width regardless of the desktop landscape/portrait variant */
  .aproj-card.card--landscape,
  .aproj-card.card--portrait { --frame-ratio: 4 / 3; padding: 0; --win-width: 64%; }
}

/* 11c. About */
.asym-image-bleed_section.cc-right { justify-content: flex-end; }

@media (max-width: 767px) {
  .works_card { flex-basis: 70vw; }
}

/* --------------------------------------------------------------------------
   16. View Transitions — card → project-hero morph (MPA, cross-document).
   Origin cards are tagged view-transition-name: project-hero-morph at click
   time by js/site.js (never hardcoded here — many cards share a page); the
   destination hero window is tagged on pagereveal and untagged when the
   transition finishes. Unsupported browsers get plain navigation.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(project-hero-morph) {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  ::view-transition-old(project-hero-morph),
  ::view-transition-new(project-hero-morph) {
    animation: none; height: 100%; width: 100%; object-fit: cover; overflow: clip;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.55s; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Media frames hug native image aspect (js/site.js sets aspect-ratio).
   In-flow images: width 100% / height auto. Absolute covers (.rb-cover,
   .gallery-cover, .asym-cover, .card-bg) still fill their frames.
   Project-nav thumbs are exempt — locked 17:10 crop grid. */
.is-media-frame:not(.project-thumb_img) > img:not(.inline-video_poster):not(.rb-cover):not(.gallery-cover):not(.card-bg):not(.asym-cover),
.is-media-frame img.gallery-collage_img,
.is-media-frame img.video-floater_img {
  display: block; width: 100%; height: auto; max-width: 100%;
  position: static; inset: auto; object-fit: cover;
}
.is-media-frame > img.rb-cover,
.is-media-frame > img.gallery-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* All Projects thumbs: always uniform 17:10 cover cells (ignore hug / stale class) */
.project-thumb_img,
.project-thumb_img.is-media-frame {
  aspect-ratio: 17 / 10;
  height: auto;
}
.project-thumb_img > img,
.project-thumb_img.is-media-frame > img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
}
.asym-bleed,
.gallery-left-bleed_img-bleed,
.rb-col-content,
.rb-col-bleed { z-index: 0; }
.right-bleed-centered_img-main, .right-bleed-centered_img-secondary,
.right2-bleed_img-content, .right2-bleed_img-bleed,
.asym-image-bleed_img, .double-poster_img-bleed, .double-poster_img-second,
.threeup-bleed_img-main, .threeup-bleed_img-top, .threeup-bleed_img-bottom, .bleed-square_img-bleed, .bleed-square_img-square,
.single-bleed_img, .simple-2up_item,
.gallery-left-bleed_img-content,
.right-bleed2up_col-primary { z-index: 3; }
.right-bleed2up_col-secondary { position: relative; z-index: 1; }

/* ==========================================================================
   16. Editorial furniture — magazine kit (opt-in, prototyped on JDawgs).
   Six small systematic pieces + ink/texture treatment; per-page usage is an
   art-direction decision, the components never change.
   ========================================================================== */

/* 16a. Folio — issue-style page marker, fixed like a running foot */
.folio {
  position: fixed; left: 24px; bottom: 18px; z-index: 60;
  margin: 0; font-family: var(--font-primary); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--eyebrow-text, var(--primary--text)); pointer-events: none;
}
.folio em { font-style: normal; color: var(--primary--accent); }

/* 16b. Photo caption — credit line hung off a gallery frame */
.ed-caption {
  position: absolute; z-index: 4; margin: 0;
  font-family: var(--font-primary); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; line-height: 1.6;
  color: var(--primary--text); opacity: 0.7; max-width: 16vw;
}
.ed-caption::before {
  content: ""; display: inline-block; width: 1.4em; height: 2px;
  background: var(--primary--accent); margin-right: 0.6em; vertical-align: 0.3em;
}
/* default hang: in the open field beside an asym image bleed */
.asym-image-bleed_section .ed-caption {
  left: calc(79.38vw + 2.2vw); bottom: calc(var(--gallery-gap) / 2 + 0.4vw);
}

/* 16c. Annotation — sidebar copy composed onto washed imagery (STS pattern) */
.ed-note {
  position: absolute; z-index: 4; width: 34ch; max-width: 26vw;
}
.section.cc-feature .ed-note { left: var(--container--gutter); bottom: 3vw; }
.ed-note .eyebrow { margin-bottom: 1rem; }
.ed-note_text {
  margin: 0; font-size: 0.9rem; line-height: 1.65;
  color: #ffffff; text-wrap: pretty;
}

/* 16d. Pull quote — one promoted line, broken off the grid */
.ed-pull {
  position: relative; width: min(24ch, 62vw); margin-block: calc(var(--gallery-gap) / 2);
  margin-inline: 14vw 0; padding-left: 2.2vw;
  border-left: 0.55vw solid var(--primary--accent);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 3.6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.01em;
  color: var(--primary--text); quotes: none;
}

/* 16e. Chapter word — RETIRED per design review 2026-07-15 (felt bolted-on) */

/* 16f. Intro metrics strip — receipts, STS treatment: italic label over a
   short accent rule, plain-face value beneath. Lives inside the overview
   column so the lockups align with the summary. CMS-optional per project. */
.pintro_metrics-row {
  margin-top: 3.5vw;
  justify-content: flex-start; gap: 8vw;
}
/* When receipts close the intro, hand off tighter to the first gallery */
.pintro_row:has(.pintro_metrics-row) {
  padding-bottom: calc(var(--gallery-gap) / 2);
}
/* Variant: metrics band leading the intro. Three equal 34.3vw axes shared
   with the intro below: gutter (6vw), story column (40.3vw), and 74.6vw —
   the last lockup sits inboard of the right edge. */
.container > .pintro_metrics-row {
  margin-block: 6vw 3vw;
  display: grid; grid-template-columns: 34.3vw 34.3vw 1fr; gap: 0;
}
/* Keep the tightened intro exit now that the receipts follow it directly */
.u-theme-jdawgs .pintro_row { padding-bottom: calc(var(--gallery-gap) / 2); }
.pintro_metrics-row .pintro_metric-col { flex: 0 0 auto; min-width: 0; }
.pintro_metric-label {
  display: inline-block; width: max-content; max-width: 100%;
  margin: 0 0 0.9em; padding-bottom: 0.4em;
  border-bottom: 2px solid var(--primary--accent);
  font-style: italic; font-size: 0.85rem; line-height: 1.2;
  color: var(--eyebrow-text, var(--primary--text));
}
.pintro_metric-value {
  margin: 0; font-family: var(--font-primary); font-weight: 500;
  font-size: 1.1rem; line-height: 1.3; letter-spacing: 0.01em;
  color: var(--primary--text);
}
/* Variant: strip overlaid on a feature/hero media card (STS photo-band style) */
.section.cc-feature .pintro_metrics-row {
  position: absolute; left: var(--container--gutter); bottom: 3vw; right: var(--container--gutter);
  z-index: 3; margin: 0;
}

/* 16g. Ink — display type prints into whatever it crosses */
.u-ink .vertical-type,
.u-ink .horizontal-type { mix-blend-mode: multiply; }

/* 16h. Distress — weathered print edge on display type (SVG filter is
   inlined per page as #ed-distress) */
.u-distress .vertical-type { filter: url(#ed-distress); }

/* 16i. Intro hierarchy — STS treatment: accent index number beside an XL
   headline; role demoted to a micro credit on the page edge; summary
   becomes an offset story column. */
.pintro_row { position: relative; }
.pintro_col-index { flex: 0 0 auto; width: 5.5vw; }
.pintro_index {
  display: block; padding-top: 1.1rem;
  font-size: 1.4rem; font-weight: 700; font-style: italic; line-height: 1;
  color: var(--primary--accent);
}
.ed-rolestamp {
  position: absolute; left: calc(-1 * var(--container--gutter) + 1.9vw); top: 0.6rem;
  margin: 0; writing-mode: vertical-rl;
  font-family: var(--font-primary); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: var(--eyebrow-text, var(--primary--text));
  /* Recedes behind the intro's louder type per design review — the one
     deliberate sub-AA whisper (role is also in the page copy/metadata) */
  opacity: 0.65;
}
.pintro_story { margin-top: 5.5vw; margin-left: 28.8vw; }
.pintro_story .eyebrow { margin-bottom: 0.7em; }
.pintro_story .pintro_summary-text { margin-top: 0; }

/* 16j. Exposed grid — intentional hairline segments, varied lengths,
   anchored to image edges and text frames (STS). Placement is per-instance
   art direction via inline left/top/height/bottom. */
.ed-rule {
  position: absolute; width: 1px; z-index: 3; pointer-events: none;
  background: color-mix(in srgb, var(--primary--accent) 26%, transparent);
}
/* Text-frame variant: drop-line off the story column — starts below the
   overview + copy block and trails down toward the first gallery */
.pintro_story { position: relative; }
.pintro_story > .ed-rule { left: -2vw; top: calc(100% + 1.5vw); height: 9vw; }

/* 16k. All Projects grid — editorial furniture for the site's shared tail.
   The band is always charcoal, so its accent pins to the portfolio orange
   (per-page theme accents like CleanSeries ink-black would vanish here). */
.project-nav_section { --primary--accent: #ff3b00; --eyebrow-text: #ffffff; }
/* Index stamps — the folio system extended to the grid */
.project-nav_grid { counter-reset: pthumb; }
.project-nav_grid .project-thumb { counter-increment: pthumb; }
.project-nav_grid .project-thumb::before {
  content: counter(pthumb, decimal-leading-zero);
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-size: 10px; letter-spacing: 0.14em; font-weight: 500;
  color: #ffffff; opacity: 0.85; pointer-events: none;
}
/* Dim-to-lit: thumbs rest muted and wake on hover */
.project-nav_grid .project-thumb_img img {
  filter: saturate(0.55) brightness(0.82);
  transition: filter 220ms ease;
}
.project-nav_grid .project-thumb:hover .project-thumb_img img,
.project-nav_grid .project-thumb:focus-visible .project-thumb_img img,
.project-nav_grid .project-thumb.is-current .project-thumb_img img { filter: none; }
/* Index stamps adapt to the thumb: white on dark images, ink on light ones */
.project-nav_grid .project-thumb.is-light::before { color: #1d1c1a; }
/* You-are-here: the current project stays lit with an accent keyline */
.project-nav_grid .project-thumb.is-current .project-thumb_img { outline: 2px solid #ff3b00; outline-offset: -2px; }

/* Kit responsive guards */
@media (max-width: 767px) {
  .folio, .ed-caption, .ed-note, .ed-rolestamp, .pintro_col-index, .ed-rule { display: none; }
  .ed-pull { width: auto; margin-inline: var(--container--gutter); }
  .pintro_metrics-row { flex-wrap: wrap; gap: 6vw; justify-content: flex-start; }
  .pintro_story { margin-left: 0; }
}