/* ============================================================
   Barbara Magnolfi — "Cinema Italiano"
   Dark, editorial, cinematic. Cormorant Garamond display +
   Jost geometric sans. Gold primary accent, blood-red used
   sparingly for high-impact moments. Film-grain atmosphere.
   ============================================================ */

/* fonts:start — self-hosted (was a render-blocking @import to Google Fonts).
   Regenerate the woff2 files + these rules with: node scripts/fetch-fonts.mjs */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-latin-ext-500-italic.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/jost-latin-ext-300-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/jost-latin-300-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jost-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jost-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jost-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jost-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* fonts:end */

:root {
  --bg:        #0c0a09;
  --bg-soft:   #15110e;
  --bg-card:   #181310;
  --ink:       #ece3d4;
  --ink-dim:   #9a8b76;
  --gold:      #c9a24b;
  --gold-soft: #e6cd8c;
  --red:       #8f1626;
  --red-bright:#b51f30;
  --line:      rgba(201, 162, 75, 0.20);
  --line-soft: rgba(236, 227, 212, 0.08);
  --display:   'Cormorant Garamond', Georgia, serif;
  --sans:      'Jost', system-ui, -apple-system, sans-serif;
  --maxw:      1200px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Permanent dark background on the root so the iOS safe areas are always this
   colour. Toggling the <html> background per overlay leaves a stale paint in the
   safe areas on iOS that only clears on navigation, so we never change it. */
html { scroll-behavior: smooth; background: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  min-height: 100vh;
}

/* film grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* <picture> wraps responsive images; make the wrapper transparent to layout so
   every existing `… img` rule keeps targeting the <img> as a direct child. */
picture { display: contents; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); padding-left: max(clamp(20px, 5vw, 56px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(20px, 5vw, 56px), env(safe-area-inset-right, 0px)); }

/* selection */
::selection { background: var(--red); color: var(--ink); }

/* ============ HEADER / NAV ============ */
.site-head {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line-soft);
}
/* The header-bar frosting lives on a pseudo-element, not on .site-head itself,
   so the mobile nav dropdown (a descendant) is NOT nested inside a
   backdrop-filter — iOS Safari refuses to render a nested backdrop-filter, which
   is why the dropdown's blur was missing on iPhone. */
.site-head::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: rgba(12, 10, 9, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.site-head__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 56px);
  padding-left: max(clamp(20px, 5vw, 56px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 5vw, 56px), env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 24px;
  min-height: 72px;
}
.brand {
  font-family: var(--display); font-size: 1.5rem; font-weight: 500;
  letter-spacing: 0.06em; line-height: 1; white-space: nowrap;
  transition: opacity 0.7s var(--ease);
}
.site-head.brand-hidden .brand { opacity: 0; pointer-events: none; }
.brand b { font-weight: 500; }
.brand .first { color: var(--ink-dim); font-style: italic; }
.nav { display: flex; gap: clamp(16px, 2.4vw, 34px); flex: 1; justify-content: center; }
.nav a {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim); padding: 6px 0; position: relative; transition: color 0.3s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-soft); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.cart-toggle {
  background: none; border: 1px solid var(--line); color: var(--gold-soft);
  font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 6px 10px; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}
.cart-toggle:hover { background: var(--gold); color: #170f04; border-color: var(--gold); }
.cart-toggle.is-empty { visibility: hidden; }
.cart-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.lang-switch { position: relative; margin-left: 8px; }
.lang-switch__btn {
  background: none; font-family: var(--sans); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px solid var(--line);
  padding: 6px 10px; cursor: pointer; transition: all 0.3s var(--ease);
  display: flex; align-items: center; gap: 4px;
}
.lang-switch__btn:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.lang-switch__btn svg { width: 8px; height: 8px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.2s var(--ease); }
.lang-switch[open] .lang-switch__btn svg { transform: rotate(180deg); }
.lang-switch__menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 110;
  background: var(--bg-soft); border: 1px solid var(--line); min-width: 100%;
  flex-direction: column;
}
.lang-switch[open] .lang-switch__menu { display: flex; }
.lang-switch__menu a {
  font-family: var(--sans); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-dim); padding: 8px 12px; transition: all 0.2s var(--ease);
  white-space: nowrap;
}
.lang-switch__menu a:hover { color: var(--gold-soft); background: rgba(201,162,75,0.08); }

.nav-burger { background: none; border: none; color: var(--ink); cursor: pointer; font-size: 1.4rem; display: none; }

/* ============ FOOTER ============ */
.site-foot {
  border-top: 1px solid var(--line-soft); margin-top: 100px;
  padding: 46px 20px calc(60px + env(safe-area-inset-bottom, 0px)); text-align: center;
}
.site-foot .brand { font-size: 1.8rem; display: inline-block; margin-bottom: 14px; }
.site-foot__nav { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.site-foot__nav a { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); transition: color 0.3s; }
.site-foot__nav a:hover { color: var(--gold-soft); }
.site-foot__social { margin-bottom: 22px; }
.site-foot__social a { display: inline-block; color: var(--ink-dim); transition: color 0.3s; margin: 0 8px; }
.site-foot__social a:hover { color: var(--gold-soft); }
.site-foot__social svg { width: auto; height: 22px; }
.site-foot small { color: var(--ink-dim); font-size: 0.72rem; letter-spacing: 0.08em; }

/* ============ HERO (home) ============ */
.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: grayscale(0.15) contrast(1.05) brightness(0.92); }
.hero__img::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 6%, rgba(12,10,9,0.62) 38%, rgba(12,10,9,0.18) 65%, rgba(12,10,9,0.22) 100%),
    radial-gradient(120% 80% at 50% 50%, transparent 35%, rgba(12,10,9,0.45) 100%);
}
.hero__content { position: relative; z-index: 2; padding-bottom: clamp(50px, 10vh, 110px); width: 100%; }
.hero__eyebrow { font-size: 0.92rem; font-weight: 500; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink); margin-bottom: 22px; text-shadow: 0 2px 8px rgba(0,0,0,0.7); }
.hero h1 {
  font-family: var(--display); font-weight: 500; line-height: 0.92;
  font-size: clamp(3.4rem, 11vw, 9rem); letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.hero h1 .l2 { display: block; font-style: italic; color: var(--gold-soft); margin-left: 0.12em; }
.hero__tag { max-width: 44ch; margin-top: 26px; color: var(--ink); font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 300; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.hero__ctas { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }

/* scroll hint chevron */
.scroll-hint {
  position: relative; z-index: 3; color: var(--gold-soft); font-size: 2.4rem; line-height: 1;
  text-align: center; margin-top: 32px;
  opacity: 0; animation: bob 2s var(--ease) infinite, fadein 1s 1.2s var(--ease) forwards;
  transition: opacity 0.5s var(--ease);
}
.scroll-hint.hidden { opacity: 0 !important; animation: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes fadein { to { opacity: 0.5; } }

/* staggered reveal */
.reveal { opacity: 0; transform: translateY(20px); animation: rise 0.9s var(--ease) forwards; }
.reveal-1 { animation-delay: 0.1s; } .reveal-2 { animation-delay: 0.25s; }
.reveal-3 { animation-delay: 0.4s; } .reveal-4 { animation-delay: 0.55s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* hero-intro — mobile-only block below the hero fold */
.hero-intro { display: none; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-block; font-family: var(--sans); font-size: 0.76rem;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 28px;
  cursor: pointer; transition: all 0.3s var(--ease); border: 1px solid var(--gold);
}
.btn--solid { background: var(--gold); color: #170f04; border-color: var(--gold); }
.btn--solid:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.btn--ghost { background: none; color: var(--gold-soft); }
.btn--ghost:hover { background: var(--gold); color: #170f04; }

/* ============ SECTION SCAFFOLD ============ */
.page-head { padding: clamp(60px, 11vh, 120px) 0 24px; }
.page-head .eyebrow { font-size: 0.74rem; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.page-head h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1; }
.rule { height: 1px; background: var(--line); border: none; margin: 28px 0; }

/* ============ HOME teaser strips ============ */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; padding: clamp(60px, 10vh, 110px) 0; }
.feature:nth-child(even) .feature__media { order: 2; }
.feature__media { aspect-ratio: 4/5; overflow: hidden; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.05); transition: transform 0.8s var(--ease); }
.feature:hover .feature__media img { transform: scale(1.04); }
.feature__body .eyebrow { font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.feature__body h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.04; margin-bottom: 18px; }
.feature__body p { color: var(--ink-dim); margin-bottom: 24px; }

/* ============ BIO ============ */
.bio-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(36px, 6vw, 76px); align-items: start; padding-top: 30px; }
.bio-portrait { position: sticky; top: 110px; }
.bio-portrait img { width: 100%; filter: grayscale(0.25) contrast(1.05); }
.bio-portrait figcaption { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-dim); margin-top: 12px; }
.epigraph { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.3; color: var(--gold-soft); margin-bottom: 8px; }
.epigraph + cite { display: block; font-style: normal; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 36px; }
.prose p { margin-bottom: 22px; font-size: 1.04rem; max-width: 64ch; }
.prose p:first-of-type::first-letter { font-family: var(--display); font-size: 3.6rem; float: left; line-height: 0.8; padding: 6px 12px 0 0; color: var(--gold); }
.prose em { color: var(--gold-soft); font-style: italic; }

/* ============ FILMOGRAPHY ============ */
.film-section { margin-top: 50px; }
.film-section > h2 { font-family: var(--display); font-weight: 500; font-size: 1.9rem; color: var(--gold-soft); margin-bottom: 6px; }
.film-section > h2 + .count { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 18px; display: block; }
.film {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 8px 26px; align-items: baseline;
  padding: 18px 12px; border-bottom: 1px solid var(--line-soft); transition: background 0.3s;
  border-radius: 4px;
}
.film:hover { background: rgba(201,162,75,0.03); }
.film__year { font-family: var(--display); font-size: 1.4rem; color: var(--gold); }
.film__title { font-size: 1.05rem; }
.film__title b { font-weight: 400; }
.film__title.is-key b { color: var(--gold-soft); }
.film__title .dir { color: var(--ink-dim); font-size: 0.9rem; }
.film__role { color: var(--ink-dim); font-size: 0.86rem; font-style: italic; text-align: right; }

/* ============ MEDIA / interviews ============ */
.media-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 30px; }
.media-item {
  border: 1px solid var(--line-soft); padding: 30px 28px; display: flex; flex-direction: column; gap: 10px;
  transition: all 0.35s var(--ease); background: var(--bg-soft);
}
.media-item:hover { border-color: var(--line); background: var(--bg-card); transform: translateY(-3px); }
.media-item .outlet { font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.media-item h3 { font-family: var(--display); font-weight: 500; font-size: 1.45rem; line-height: 1.15; }
.media-item .meta { font-size: 0.8rem; color: var(--ink-dim); }
.media-item .read { margin-top: auto; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft); }

/* media sections */
.media-section { margin-top: 56px; }
.media-section h2 {
  font-family: var(--display); font-weight: 500; font-size: 1.6rem;
  margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}

/* video grid */
.video-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 20px; }
.video-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--line-soft); background: var(--bg-soft);
  transition: all 0.35s var(--ease); overflow: hidden;
}
.video-card:hover { border-color: var(--line); background: var(--bg-card); transform: translateY(-3px); }
.video-card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #111; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) contrast(1.05); transition: filter 0.4s var(--ease), transform 0.5s var(--ease); }
.video-card:hover .video-card__thumb img { filter: grayscale(0) contrast(1.08); transform: scale(1.03); }
.video-card__thumb::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.25); transition: background 0.3s var(--ease);
}
.video-card:hover .video-card__thumb::after { background: rgba(0,0,0,0.1); }
.video-card__thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-card__thumb.is-playing::after { content: none; }
.video-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(12,10,9,0.7); border: 1.5px solid var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease);
}
.video-card:hover .video-card__play { background: var(--gold); border-color: var(--gold); }
.video-card__play svg { width: 16px; height: 16px; fill: var(--gold-soft); margin-left: 2px; }
.video-card:hover .video-card__play svg { fill: #170f04; }
.video-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.video-card__channel { font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.video-card__title { font-family: var(--display); font-weight: 500; font-size: 1.15rem; line-height: 1.2; }

/* ============ GALLERY ============ */
/* Gallery sections (photos page) */
.gallery-group { margin-top: 56px; }
.gallery-group:first-of-type { margin-top: 34px; }
.gallery-group__title {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  color: var(--gold-soft); letter-spacing: 0.02em;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.gallery-group .masonry { margin-top: 22px; }

.masonry { columns: 3; column-gap: 14px; margin-top: 30px; }
.masonry figure { break-inside: avoid; margin-bottom: 14px; overflow: hidden; cursor: zoom-in; position: relative; }
.masonry img { width: 100%; height: auto; filter: grayscale(0.25) contrast(1.04); transition: transform 0.7s var(--ease), filter 0.5s; }
.masonry figure:hover img { transform: scale(1.05); filter: grayscale(0) contrast(1.05); }

/* display:none when closed: Safari 26's Liquid Glass toolbar samples fixed
   elements' background-color to tint itself, and it STILL samples opacity:0 /
   visibility:hidden elements. Only display:none removes this dark overlay from
   the render tree so the toolbar re-samples the page and reverts to glass. */
.lightbox { position: fixed; inset: 0; z-index: 200; background: #000; display: none; align-items: center; justify-content: center; padding: 4vw; touch-action: none; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; max-height: 90dvh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.lightbox__close { position: absolute; top: calc(20px + env(safe-area-inset-top, 0px)); right: calc(24px + env(safe-area-inset-right, 0px)); color: var(--ink); font-size: 2rem; background: none; border: none; cursor: pointer; z-index: 2; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--gold-soft); font-size: 2.4rem; cursor: pointer; padding: 20px; opacity: 0.7; transition: opacity 0.3s; }
.lightbox__nav:hover { opacity: 1; }
.lightbox__prev { left: max(1vw, env(safe-area-inset-left, 0px)); } .lightbox__next { right: max(1vw, env(safe-area-inset-right, 0px)); }
/* Scroll behind the overlays is held by touch-action:none on the lightbox /
   scrim and overscroll-behavior:contain on the drawer — NOT by pinning <body>
   with position:fixed, which on iOS 26 makes the Liquid Glass toolbar expand
   (the page looks scrolled to the top) and disturbs its tint compositor. */

/* ============ SHOP ============ */
.shop-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: 36px; padding-bottom: 40px; }
.product { border: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--bg-card), var(--bg-soft)); display: flex; flex-direction: column; transition: border-color 0.35s; }
.product:hover { border-color: var(--line); }
.product__media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.product__media img { width: 100%; height: 100%; object-fit: contain; transition: opacity 0.4s var(--ease); filter: contrast(1.04); }
.product__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
/* Skeleton cards reserve the grid's space before shop.js renders the products,
   so the page below doesn't shift (CLS). shop.js replaces them on render. */
.product.is-skeleton { pointer-events: none; }
.product.is-skeleton .product__body { min-height: 330px; }
.product__title { font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.12; }
.product__desc { color: var(--ink-dim); font-size: 0.84rem; flex: 1; }

/* variation thumbnails */
.variations { display: flex; flex-wrap: wrap; gap: 7px; }
.variations.is-single { display: none; }
.var-thumb { width: 42px; height: 42px; border: 1px solid var(--line-soft); overflow: hidden; cursor: pointer; padding: 0; background: none; transition: border-color 0.25s, transform 0.25s; }
.var-thumb img { width: 100%; height: 100%; object-fit: cover; }
.var-thumb:hover { transform: translateY(-2px); }
.var-thumb[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.product__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; gap: 12px; }
.product__price { font-family: var(--display); font-size: 1.45rem; color: var(--gold-soft); white-space: nowrap; }
.product__price .was { color: var(--ink-dim); text-decoration: line-through; font-size: 1rem; margin-right: 8px; }
.product__price.tbd { font-size: 0.82rem; font-family: var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.var-label { font-size: 0.72rem; color: var(--ink-dim); letter-spacing: 0.04em; min-height: 1em; }
.btn-add {
  background: none; border: 1px solid var(--gold); color: var(--gold-soft);
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 10px 18px; cursor: pointer; transition: all 0.25s var(--ease); white-space: nowrap;
}
.btn-add:hover:not(:disabled) { background: var(--gold); color: #170f04; }
.btn-add:disabled { opacity: 0.35; cursor: not-allowed; border-style: dashed; }

/* ============ CART DRAWER ============ */
/* display:none when closed (not opacity/visibility) so Safari 26 stops sampling
   this dark scrim and the Liquid Glass toolbar reverts to glass on close. */
.drawer-scrim { display: none; position: fixed; inset: 0; background: rgba(6,5,4,0.66); z-index: 150; touch-action: none; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); background: var(--bg-soft); border-left: 1px solid var(--line); transform: translateX(100%); visibility: hidden; transition: transform 0.4s var(--ease); z-index: 160; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 600px) {
  .drawer { width: 100%; border-left: none; }
  .drawer__head {
    padding-top: calc(28px + env(safe-area-inset-top, 0px));
  }
  .drawer__foot {
    padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
  .site-head, main, .site-foot, .hero, .hero-intro { transition: opacity 0.35s var(--ease); }
  .drawer-open .site-head,
  .drawer-open main,
  .drawer-open .site-foot,
  .drawer-open .hero,
  .drawer-open .hero-intro,
  .lb-open .site-head,
  .lb-open main,
  .lb-open .site-foot,
  .lb-open .hero,
  .lb-open .hero-intro { opacity: 0; }
}
@media (max-width: 600px) {
  body.drawer-open { background: var(--bg-soft); }
  body.lb-open { background: #000; }
}
.drawer-open .drawer { transform: none; visibility: visible; }
.drawer-open .drawer-scrim { display: block; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 28px 26px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100; background: var(--bg-soft); }
.drawer__head h2 { font-family: var(--display); font-weight: 500; font-size: 1.7rem; }
.drawer__close { background: none; border: none; color: var(--ink-dim); font-size: 1.7rem; cursor: pointer; line-height: 1; }
.drawer__close:hover { color: var(--gold-soft); }
#cart-items { list-style: none; padding: 6px 26px; }
.cart-empty { color: var(--ink-dim); padding: 48px 0; text-align: center; }
.cart-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.cart-row__img { width: 54px; height: 54px; object-fit: cover; }
.cart-row__name { font-family: var(--display); font-size: 1.15rem; line-height: 1.1; }
.cart-row__var { font-size: 0.74rem; color: var(--ink-dim); }
.cart-row__ctl { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cart-row__ctl button { width: 24px; height: 24px; border: 1px solid var(--line-soft); background: none; color: var(--ink); cursor: pointer; }
.cart-row__ctl button:hover { border-color: var(--gold); color: var(--gold-soft); }
.cart-row__price { font-family: var(--display); color: var(--gold-soft); text-align: right; white-space: nowrap; }
.cart-row__rm { background: none; border: none; color: var(--ink-dim); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0; margin-top: 4px; }
.cart-row__rm:hover { color: var(--red-bright); }
.drawer__foot { padding: 24px 26px 30px; border-top: 1px solid var(--line); position: relative; z-index: 1; }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.drawer__total span:first-child { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; color: var(--ink-dim); }
.drawer__total span:last-child { font-family: var(--display); font-size: 1.9rem; color: var(--gold-soft); }
.drawer__shipping { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.drawer__shipping span:first-child { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem; color: var(--ink-dim); margin-right: auto; }
.drawer__shipping select { -webkit-appearance: none; appearance: none; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23ece3d4' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center / 10px; border: 1px solid var(--line); color: var(--ink); font-family: var(--sans); font-size: 0.82rem; padding: 6px 28px 6px 10px; border-radius: 0; cursor: pointer; }
.drawer__shipping select:focus { border-color: var(--gold); outline: none; }
.shipping-amt { font-family: var(--display); font-size: 1.9rem; color: var(--gold-soft); white-space: nowrap; }
.drawer__order-total { border-top: 1px solid var(--line); padding-top: 18px; }
#checkout-btn { width: 100%; background: var(--gold); color: #170f04; border: none; font-family: var(--sans); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 16px; cursor: pointer; transition: background 0.25s; }
#checkout-btn:hover:not(:disabled) { background: var(--gold-soft); }
#checkout-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.drawer__note { text-align: center; font-size: 0.68rem; color: var(--ink-dim); margin-top: 12px; }
#checkout-box.active { margin-top: 14px; background: var(--ink); border-radius: 6px; padding: 10px; }
/* PayPal-only mode (Advanced Checkout off): just the gold button, no box. */
#checkout-box.bare { margin-top: 14px; }
#paypal-button-container { min-height: 0; transition: min-height 0.3s; }
#checkout-box.active #paypal-button-container { min-height: 150px; }
.cart-confirm { text-align: center; padding: 32px 16px; list-style: none; }
.cart-confirm__icon { font-size: 2.4rem; color: var(--gold); margin-bottom: 12px; }
.cart-confirm h3 { font-family: var(--display); font-size: 1.6rem; margin-bottom: 8px; }
.cart-confirm p { color: var(--ink-dim); font-size: 0.88rem; line-height: 1.5; }
.cart-confirm__id { font-size: 0.72rem; letter-spacing: 0.1em; margin-top: 16px; color: var(--ink-dim); }
apple-pay-button { --apple-pay-button-width: 100%; --apple-pay-button-height: 48px; --apple-pay-button-border-radius: 6px; display: block; cursor: pointer; }
#wallet-button-container:not(:empty) { margin-bottom: 16px; }
#applepay-wrapper, #googlepay-wrapper { margin: 0; }
#googlepay-wrapper button { width: 100% !important; border-radius: 6px !important; min-height: 48px; }
.wallet-skeleton { height: 48px; border-radius: 6px; background: linear-gradient(90deg, #d8ccb6 25%, #e8dfce 37%, #d8ccb6 63%); background-size: 400% 100%; animation: wallet-shimmer 1.4s ease infinite; }
@keyframes wallet-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ============ RESUME ============ */
.resume-headshots { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-top: 30px; }
.resume-thumbs { display: flex; flex-direction: column; gap: 14px; }
.resume-thumb {
  width: 100px; height: 134px; border: 2px solid var(--line-soft); overflow: hidden;
  cursor: pointer; padding: 0; background: none; transition: border-color 0.3s var(--ease), transform 0.25s;
}
.resume-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.04); transition: filter 0.4s; }
.resume-thumb:hover { transform: translateY(-2px); }
.resume-thumb:hover img { filter: grayscale(0) contrast(1.05); }
.resume-thumb[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.resume-thumb[aria-pressed="true"] img { filter: grayscale(0) contrast(1.05); }
.resume-main { overflow: hidden; aspect-ratio: 3/4; max-height: 520px; }
.resume-main img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.1) contrast(1.05); transition: opacity 0.4s var(--ease); }
.resume-slide { display: none; }

.resume-vitals { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 24px; padding: 46px 0 20px; border-bottom: 1px solid var(--line); }
.resume-vitals__name h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.resume-union { display: inline-block; margin-top: 8px; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line); padding: 5px 14px; }
.resume-vitals__stats { display: flex; gap: clamp(20px, 4vw, 44px); }
.stat { display: flex; flex-direction: column; align-items: center; }
.stat__label { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.stat__val { font-family: var(--display); font-size: 1.2rem; color: var(--gold-soft); }

.resume-section { padding: 36px 0 0; }
.resume-section__title {
  font-family: var(--display); font-weight: 500; font-size: 1.7rem; color: var(--gold-soft);
  padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 0;
}

.resume-reps { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 56px); }
.resume-reps .resume-rep { flex: 1 1 260px; }
.resume-rep { padding: 20px 0; }
.resume-rep strong { font-family: var(--display); font-weight: 500; font-size: 1.2rem; }
.resume-rep__loc { color: var(--ink-dim); font-size: 0.9rem; }
.resume-rep__phones { margin-top: 6px; color: var(--gold-soft); font-size: 0.95rem; letter-spacing: 0.04em; }
.resume-rep__divisions { margin-top: 4px; font-size: 0.82rem; color: var(--ink-dim); letter-spacing: 0.06em; }
.resume-rep__divisions a { color: inherit; overflow-wrap: anywhere; }
.resume-rep__divisions a:hover { color: var(--gold-soft); }

.resume-credits {}
.credit {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px 28px; align-items: baseline;
  padding: 12px 12px; border-bottom: 1px solid var(--line-soft); transition: background 0.3s;
  border-radius: 4px;
}
.credit:hover { background: rgba(201,162,75,0.03); }
.credit__title { font-size: 1.02rem; font-weight: 400; }
.credit__role { color: var(--gold-soft); font-style: italic; font-size: 0.9rem; text-align: right; }
.credit__prod { color: var(--ink-dim); font-size: 0.82rem; text-align: right; min-width: 140px; }
.credit__ep { color: var(--ink-dim); font-size: 0.88rem; font-style: italic; }

.resume-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; padding: 24px 0 40px; }
.skill-group h4 { font-family: var(--display); font-weight: 500; font-size: 1.1rem; color: var(--gold-soft); margin-bottom: 6px; }
.skill-group p { font-size: 0.92rem; color: var(--ink-dim); line-height: 1.55; }
.resume-cta { text-align: center; padding: 48px 0 20px; }

/* ============ RESPONSIVE ============ */

/* — wide + short screens (laptops / iPad landscape): shift hero image up, scale down hero text — */
@media (min-width: 861px) and (max-height: 940px) {
  .hero__img img { object-position: center 38%; }
  .hero h1 { font-size: clamp(3rem, 7vw, 5.5rem); }
}

/* — tablet & below: collapse nav to burger — */
@media (max-width: 960px) {
  /* Mobile nav: the .nav panel IS the bar's frosting (constant, never faded),
     so the nav-bar blur can't flicker on toggle. The menu is revealed by growing
     the panel's height (a curtain) rather than fading the frosted layer, and the
     links fade in on top. The bar's own frost (.site-head::before) is unused on
     mobile — the panel covers that job for both the bar and the menu in one layer. */
  .site-head::before { display: none; }
  .nav {
    display: flex; position: absolute; top: 0; left: 0; right: 0; z-index: 1;
    flex-direction: column; gap: 0;
    overflow: hidden;
    padding: 73px 0 0;
    background: rgba(12, 10, 9, 0.78);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    max-height: 73px;
    pointer-events: none;
    transition: max-height 0.34s var(--ease), border-bottom-color 0.34s var(--ease);
  }
  .nav.open {
    max-height: 370px;
    border-bottom-color: var(--line);
    pointer-events: auto;
  }
  /* Bar content rides above the frosted panel. */
  .site-head__inner > :not(.nav) { position: relative; z-index: 2; }
  /* Links fade in with a gentle stagger as the panel opens; hidden (not just
     clipped) while closed so they aren't focusable / read by screen readers. */
  .nav a {
    padding: 14px 28px; opacity: 0; visibility: hidden;
    transition: opacity 0.24s var(--ease), visibility 0s linear 0.34s;
  }
  .nav.open a { opacity: 1; visibility: visible; transition: opacity 0.24s var(--ease), visibility 0s; }
  .nav.open a:nth-child(1) { transition-delay: 0.08s; }
  .nav.open a:nth-child(2) { transition-delay: 0.12s; }
  .nav.open a:nth-child(3) { transition-delay: 0.16s; }
  .nav.open a:nth-child(4) { transition-delay: 0.20s; }
  .nav.open a:nth-child(5) { transition-delay: 0.24s; }
  .nav.open a:nth-child(6) { transition-delay: 0.28s; }
  .nav-burger, .cart-toggle ~ .nav-burger { display: block; visibility: visible; min-width: auto; }
  .site-head__inner { gap: 12px; }
  .brand { margin-right: auto; }
  .cart-toggle.is-empty { display: none; }
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .nav, .nav a, .nav.open, .nav.open a { transition: none; transform: none; }
}

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr 1.2fr; gap: clamp(20px, 4vw, 40px); }
  .hero__img img { object-position: center 18%; }
  .bio-grid { grid-template-columns: 1fr; }
  .bio-portrait { position: static; max-width: 420px; }
  .masonry { columns: 2; }
  .resume-headshots { gap: 14px; }
  .credit { grid-template-columns: 1fr auto; }
  .credit__prod { display: none; }
}

/* — small mobile — */
@media (max-width: 620px) {
  /* hero — image + name only; supporting text below the fold */
  .hero { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
  .hero__eyebrow, .hero__tag, .hero__ctas { display: none; }
  .hero__content { padding-bottom: calc(clamp(48px, 8vh, 90px) + env(safe-area-inset-bottom, 0px)); }
  .scroll-hint { font-size: 2rem; margin-top: 20px; }
  .hero-intro {
    display: block;
    padding-top: 48px;
    padding-bottom: 48px;
    text-align: center;
  }
  .hero-intro__eyebrow {
    font-size: 0.74rem; letter-spacing: 0.42em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 18px;
  }
  .hero-intro__tag {
    max-width: 44ch; margin: 0 auto;
    color: var(--ink); font-size: 1rem; font-weight: 300; line-height: 1.65;
  }
  .hero-intro__ctas {
    display: flex; gap: 16px; margin-top: 28px;
    justify-content: center; flex-wrap: wrap;
  }
  .feature { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .masonry { columns: unset; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .masonry::-webkit-scrollbar { display: none; }
  .masonry figure { flex: 0 0 80vw; scroll-snap-align: center; margin-bottom: 0; break-inside: auto; }
  .masonry img { height: auto; }
  .film { grid-template-columns: 60px 1fr; padding: 14px 10px; }
  .film__role { grid-column: 2; text-align: left; }
  .resume-headshots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; }
  .resume-headshots::-webkit-scrollbar { display: none; }
  .resume-thumbs { display: none; }
  .resume-main, .resume-slide { flex: 0 0 80vw; scroll-snap-align: center; aspect-ratio: 3/4; max-height: none; display: block; overflow: hidden; }
  .resume-slide img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.1) contrast(1.05); }
  .resume-vitals { flex-direction: column; align-items: flex-start; }
  .credit { grid-template-columns: 1fr; gap: 2px 0; padding: 14px 10px; }
  .credit__role { text-align: left; }
  .credit__prod { text-align: left; min-width: 0; }
  .site-foot__nav { gap: 18px 22px; }
  .site-foot__nav a { font-size: 0.65rem; letter-spacing: 0.16em; }
}

/* — very short screens (iPhone SE, etc.) — */
@media (max-width: 620px) and (max-height: 700px) {
  .hero__content { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .scroll-hint { font-size: 1.6rem; margin-top: 12px; }
  .hero h1 { font-size: clamp(2.8rem, 10vw, 5rem); }
}