/* ==========================================================================
   Mizell Media · jmizellmedia.com
   Shared stylesheet. Dark screening-room aesthetic: near-black ground,
   bone-white editorial serif, timecode mono labels, one brass accent.
   Performance is a design constraint: two font families, no frameworks.
   ========================================================================== */

:root {
  --bg: #0a0a0b;
  --bg-raise: #131315;
  --bg-slate: #0f0f11;
  --bg-band: #111114;
  --ink: #ece7dd;
  --ink-dim: #a59d8f;
  --ink-faint: #6d675d;
  --hairline: rgba(236, 231, 221, 0.14);
  --hairline-soft: rgba(236, 231, 221, 0.07);
  --brass: #c2a368;
  --brass-dim: #8f7a52;
  --rec: #c33c2b;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 34em;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(5rem, 12vh, 9rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* A display value in author CSS beats the UA rule for [hidden]; force it. */
[hidden] { display: none !important; }

html {
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  min-height: 100svh;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
p a, li a { border-bottom: 1px solid var(--brass-dim); transition: border-color .2s, color .2s; }
p a:hover, li a:hover { color: var(--brass); border-color: var(--brass); }

::selection { background: var(--brass); color: var(--bg); }

/* --------------------------------------------------------------------------
   Film grain: one static SVG turbulence tile, fixed, non-interactive.
   -------------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: .045;
  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%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.9rem, 9vw, 7.25rem); }
h2 { font-size: clamp(2.1rem, 5.2vw, 4rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

.serif-i { font-style: italic; color: var(--brass); }

p { max-width: var(--measure); color: var(--ink-dim); }
p.lede {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink);
}

/* Timecode-style label: the connective tissue of the whole system */
.tc {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: .75em;
}
/* No prefix glyph: the REC dot stands alone where it appears, and every
   other label is either real metadata or deleted in favor of the heading. */
.tc--gold { color: var(--brass); }
.tc .rec {
  width: .5em; height: .5em; border-radius: 50%;
  background: var(--rec); flex: none;
  animation: rec-blink 2.4s steps(1) infinite;
}
@keyframes rec-blink { 50% { opacity: .25; } }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap { max-width: 82rem; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 94rem; }
.section { padding-block: var(--section); }
.section + .section { border-top: 1px solid var(--hairline-soft); }

.grid-2 {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (min-width: 800px) {
  .grid-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .grid-2--even { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 800px) { .grid-2--middle { align-items: center; } }

.stack > * + * { margin-top: 1.25rem; }
.stack-lg > * + * { margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: border-color .35s;
  border-bottom: 1px solid transparent;
}
/* THE BLUR LIVES ON A PSEUDO-ELEMENT, NEVER ON .site-head ITSELF.
   Any element carrying a backdrop-filter becomes the containing block for its
   fixed-position descendants. .site-nav is fixed inset:0 and lives inside the
   header, so while the header held the blur the fullscreen menu measured itself
   against the 70px header instead of the viewport. Toggling the filter off on
   open was not enough: the browser needs a frame to recompute the containing
   block, which is the half second of the menu appearing at the top and then
   jumping to centre. ::before has no descendants, so nothing gets contained and
   the nav is viewport-sized from the very first frame. Do not move this back. */
.site-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 11, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.site-head.is-scrolled::before { opacity: 1; }
.site-head.is-scrolled { border-bottom-color: var(--hairline-soft); }
/* Must follow .is-scrolled: while the menu is open the header cannot carry a
   backdrop-filter, or it becomes the containing block for the fixed overlay
   and the menu clips to the header instead of filling the viewport. */
.site-head.is-nav-open::before { opacity: 0; }
.site-head.is-nav-open { border-bottom-color: transparent; }
body.nav-locked {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}
.site-head .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--gutter);
  max-width: 82rem;
  margin-inline: auto;
}
.brand {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand em { font-style: italic; color: var(--brass); }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.site-nav a {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--brass); border-bottom-color: var(--brass-dim); }
.site-nav .nav-cta {
  color: var(--bg);
  background: var(--ink);
  padding: .55rem 1.1rem;
  border-radius: 2rem;
  border-bottom: none;
  transition: background-color .2s;
}
.site-nav .nav-cta:hover { background: var(--brass); color: var(--bg); }

/* Mobile nav */
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--hairline);
  color: var(--ink); font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .5rem .9rem; border-radius: 2rem; cursor: pointer;
}
@media (max-width: 720px) {
  .nav-toggle { display: block; position: relative; z-index: 120; }
  .site-nav {
    position: fixed; inset: 0; z-index: 90;
    flex-direction: column; justify-content: center;
    gap: 2rem;
    background: rgba(10, 10, 11, .97);
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
  }
  .site-nav.is-open { opacity: 1; pointer-events: auto; }
  .site-nav a { font-size: .95rem; }
}

/* --------------------------------------------------------------------------
   Hero: letterboxed, full viewport
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(194, 163, 104, .13), transparent 55%),
    radial-gradient(90% 70% at 12% 88%, rgba(56, 48, 38, .5), transparent 60%),
    linear-gradient(175deg, #101012 0%, var(--bg) 62%);
}
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .55;
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, transparent 45%);
}
.hero-inner {
  padding: 0 var(--gutter) clamp(4rem, 10vh, 7rem);
  max-width: 82rem;
  margin-inline: auto;
  width: 100%;
}
.hero .tc { white-space: nowrap; font-size: clamp(.55rem, 1.9vw, .6875rem); }

/* Page identity line. Rule sits under the text only, like a chapter mark. */
.slug {
  display: inline-flex;
  align-items: center;
  gap: .75em;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brass-dim);
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--hairline);
  max-width: none;
}
.page-hero--center .slug { margin-inline: auto; }
.hero h1 { max-width: 11em; margin-top: 1.25rem; }
.hero .lede { margin-top: 1.75rem; }

/* Cinema bars */
.letterbox {
  position: absolute; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: .8rem var(--gutter);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--bg);
}
.letterbox--top { top: 0; padding-top: 4.4rem; }
.letterbox--bottom { bottom: 0; }

/* Page hero (interior pages): shorter, with a ghost-title watermark */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(9rem, 22vh, 13rem) 0 clamp(3rem, 7vh, 5rem);
  background: radial-gradient(70% 90% at 82% 10%, rgba(194, 163, 104, .07), transparent 60%);
}
/* A frame from the page's own work, dimmed and masked into the ground.
   Gives the hero depth and uses Jake's imagery instead of a decorative word. */
.hero-plate {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(54%, 44rem);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .38;
  filter: saturate(.7) contrast(1.06);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 62%);
  mask-image: linear-gradient(to right, transparent 0%, #000 62%);
}
.hero-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 20%),
    linear-gradient(to bottom, transparent 30%, var(--bg) 100%);
}
.page-hero--center .hero-plate { width: 100%; }
.page-hero--center .hero-plate img {
  opacity: .26;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 18%, transparent 70%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 18%, transparent 70%);
}
@media (max-width: 800px) {
  .hero-plate { width: 100%; }
  .hero-plate img {
    opacity: .2;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
  }
}

.page-hero + .section { padding-top: clamp(2.5rem, 6vh, 4.5rem); }
.page-hero--center { text-align: center; }
.page-hero--center .tc { justify-content: center; }
.page-hero--center .lede, .page-hero--center h1 { margin-inline: auto; }
.page-hero h1 { margin-top: 1.1rem; }
.page-hero .lede { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Section ground: an alternating band so the page reads in sections
   -------------------------------------------------------------------------- */
.section--raised { background: var(--bg-band); border-top-color: transparent; }
.section--raised + .section { border-top-color: transparent; }
.section--raised .client-grid li { background: var(--bg-band); }

/* Centered section intro: heading and its supporting line share one axis */
.center-block { text-align: center; margin-inline: auto; }
.center-block > * { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 1rem 1.75rem;
  border-radius: 3rem;
  border: 1px solid var(--hairline);
  color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s, transform .25s;
}
.btn:hover { border-color: var(--brass); color: var(--brass); transform: translateY(-2px); }
.btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--solid:hover { background: var(--brass); border-color: var(--brass); color: var(--bg); }
.btn .arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Services index (home)
   -------------------------------------------------------------------------- */
.svc-list { list-style: none; border-top: 1px solid var(--hairline); }
.svc-list li { border-bottom: 1px solid var(--hairline); }
.svc-link {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.6rem) .25rem;
  transition: padding-left .3s, background-color .3s;
}
.svc-link:hover { padding-left: 1.25rem; background: rgba(236, 231, 221, .035); }
.svc-num { font-family: var(--mono); font-size: .6875rem; letter-spacing: .2em; color: var(--ink-faint); }
.svc-name { font-family: var(--serif); font-size: clamp(1.7rem, 4.5vw, 3.2rem); line-height: 1.05; }
.svc-link:hover .svc-name { color: var(--brass); }
.svc-meta { font-family: var(--mono); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); text-align: right; }
.svc-desc { grid-column: 2 / -1; max-width: var(--measure); color: var(--ink-dim); font-size: .95rem; }
@media (max-width: 640px) {
  .svc-link { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .svc-meta { display: none; }
}

/* --------------------------------------------------------------------------
   Film frames: lite YouTube embed facade + placeholder slates
   -------------------------------------------------------------------------- */
.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-slate);
  border: 1px solid var(--hairline-soft);
  overflow: hidden;
}
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lite-yt { cursor: pointer; }
.lite-yt .poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
  transition: transform .6s cubic-bezier(.2, .6, .2, 1), opacity .3s;
}
.lite-yt:hover .poster { transform: scale(1.03); }
.lite-yt::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,11,.75), transparent 45%);
  pointer-events: none;
}
.play-badge {
  position: absolute; top: 1rem; right: 1rem;
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  border-radius: 2rem;
  border: 1px solid var(--hairline);
  background: rgba(10,10,11,.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: .45rem .9rem;
  z-index: 3;
  transition: background-color .25s, border-color .25s, color .25s;
  pointer-events: none;
}
.lite-yt:hover .play-badge { background: var(--brass); border-color: var(--brass); color: var(--bg); }
.play-badge svg { width: .7em; height: .7em; fill: currentColor; }
.frame-caption {
  position: absolute; left: 1.25rem; bottom: 1rem; right: 1.25rem; z-index: 3;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  pointer-events: none;
}
.frame-caption .title {
  font-family: var(--serif);
  font-size: clamp(.95rem, 1.9vw, 1.35rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.frame-caption .time { flex: none; }
.frame-caption .time { font-family: var(--mono); font-size: .625rem; letter-spacing: .2em; color: var(--ink-dim); }

/* Brand mark band (/about). The clip is screen-blended, so its black ground
   drops out against the page and only the mark survives. The original flare
   could not survive keying the cream ground, so the bloom is rebuilt here in
   brass, which matches the site rather than the source file. */
.logo-band {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.logo-band__glow {
  position: absolute;
  width: min(38rem, 88vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(194, 163, 104, .40) 0%,
    rgba(194, 163, 104, .12) 34%,
    transparent 68%);
  opacity: 0;
  pointer-events: none;
}
.logo-band__mark {
  position: relative;
  width: min(19rem, 54vw);
  height: auto;
  /* lighten, not screen: screen ADDS the clip's residual black to the page and
     leaves a visible box. lighten takes the per-channel max, so every pixel
     darker than the page ground vanishes outright. */
  mix-blend-mode: lighten;
}
.logo-band.is-playing .logo-band__glow { animation: mark-bloom 4.05s ease-in-out both; }
@keyframes mark-bloom {
  0%, 16% { opacity: 0; transform: scale(.72); }
  46%     { opacity: 1; transform: scale(1.05); }
  64%     { opacity: .8; transform: scale(1); }
  100%    { opacity: 0; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-band.is-playing .logo-band__glow { animation: none; opacity: .5; }
}

/* Instagram band. Direct /embed/ iframes, cropped to the media only.
   Instagram's embed is a fixed 54px account header, then the media, then the
   likes and comments bar. Measured in situ on this page at the real column
   width: header is 54px regardless of width, and the media box is Instagram's
   4:5 portrait cap, so its height tracks the column width (380px wide gave a
   476px media band on all three posts).
   Hence aspect-ratio on the wrapper (scales) plus a fixed -54px pull (does not).
   Do NOT measure this against a standalone embed page in a tall window:
   Instagram lets the media grow past 4:5 there and you get the wrong number. */
.ig-grid {
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: 1fr;
  max-width: 26rem;
}
@media (min-width: 1000px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); max-width: none; }
}
.ig-card { min-width: 0; }
.ig-media {
  position: relative;
  /* Instagram's media box is its 4:5 cap (380 wide measured 476 tall). Cropping
     at exactly that leaves a 1px line of the white comment bar showing at the
     bottom once rounding is involved, so the box is deliberately a couple of
     pixels short of the media. That trim is what removes the white line. */
  aspect-ratio: 380 / 473;
  overflow: hidden;           /* load-bearing: this is what crops the chrome */
  background: var(--bg-band);
}
.ig-media iframe {
  position: absolute;
  top: -54px;                 /* exactly the account header height, fixed px */
  left: 0;
  width: 100%;
  height: 1000px;             /* ample; the crop decides what is seen */
  border: 0;
}
/* max-width:none is required: the global `p { max-width: var(--measure) }`
   otherwise caps this at 544px with margin-left 0, so text-align:center
   centres the button inside a box that is itself sitting on the left. */
/* Half the usual section padding: at full height this band dominated the page. */
.ig-band { padding-block: calc(var(--section) / 2); }
/* Below the 3-up breakpoint this becomes three very tall stacked posts, which
   reads badly on a phone (Micah, 09-04), so it is not shown there at all. */
@media (max-width: 999px) { .ig-band { display: none; } }
.ig-follow {
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  max-width: none;
  text-align: center;
}

/* Reel wall: every owed film is vertical, so the grid is too */
.reel-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .reel-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .reel-grid { grid-template-columns: repeat(3, 1fr); } }

/* Vertical films (YouTube Shorts): shown in their real 9:16 shape, paired */
.reel-pair {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  max-width: 46rem;
  margin-inline: auto;
}
@media (min-width: 640px) { .reel-pair { grid-template-columns: 1fr 1fr; } }
.reel-pair--3 { max-width: 62rem; }
@media (min-width: 800px) { .reel-pair--3 { grid-template-columns: repeat(3, 1fr); } }
.frame--vertical { aspect-ratio: 9 / 16; }

/* Placeholder slate: a film awaiting its embed code. Zero network cost. */
.slate {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(-45deg, transparent 0 26px, rgba(236,231,221,.025) 26px 27px),
    var(--bg-slate);
}
.slate .tc { color: var(--brass-dim); }
.slate .slate-title { font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--ink-dim); }
.slate .todo {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px dashed var(--hairline);
  padding: .4rem .7rem;
}

.work-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 800px) { .work-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .work-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   Coming-soon film frames: real poster, player arrives with the embed
   -------------------------------------------------------------------------- */
.frame--soon .poster, .frame--img .poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
}
.frame--soon::after, .frame--img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,11,.78), transparent 45%);
  pointer-events: none;
}
a.frame--img .poster { transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
a.frame--img:hover .poster { transform: scale(1.03); }
.soon-badge {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  font-family: var(--mono); font-size: .625rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(10, 10, 11, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--hairline);
  padding: .45rem .8rem;
  border-radius: 2rem;
}

/* --------------------------------------------------------------------------
   Case narrative block (client / location / approach / outcome)
   -------------------------------------------------------------------------- */
.case-facts {
  display: grid; gap: 1.75rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.75rem;
}
@media (min-width: 640px) { .case-facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 800px) {
  /* Spread the spec column down the full height of the narrative beside it */
  .grid-2--fill { align-items: stretch; }
  .grid-2--fill .case-facts {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.75rem;
  }
}
.case-facts dt {
  font-family: var(--mono); font-size: .625rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .5rem;
}
.case-facts dd { color: var(--ink-dim); font-size: .95rem; max-width: 28em; }

/* Key-moments transcript list */
.moments { list-style: none; border-top: 1px solid var(--hairline); }
.moments li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.5rem;
  padding: 1.1rem .25rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.moments .stamp { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; color: var(--brass-dim); padding-top: .3rem; }
.moments p { font-size: .95rem; }

/* --------------------------------------------------------------------------
   Client roll: names as a flowing serif credits line
   -------------------------------------------------------------------------- */
.client-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
}
.client-grid li {
  background: var(--bg);
  padding: 1.5rem 1rem;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color .25s, background-color .25s;
}
.client-grid li:hover { color: var(--brass); background: rgba(236, 231, 221, .04); }

/* --------------------------------------------------------------------------
   Pricing band
   -------------------------------------------------------------------------- */
.price-band { text-align: center; }
.price-band .figure {
  font-family: var(--serif);
  font-size: clamp(3rem, 10vw, 7.5rem);
  line-height: 1;
  margin-top: 1.5rem;
}
.price-band .figure em { font-style: italic; color: var(--brass); }
.price-band p { margin-inline: auto; margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.6rem .25rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brass); }
.faq summary .ind {
  font-family: var(--mono); font-size: .8rem; color: var(--ink-faint);
  transition: transform .25s; flex: none;
}
.faq details[open] summary .ind { transform: rotate(45deg); }
.faq details[open] summary { color: var(--brass); }
.faq .a { padding: 0 .25rem 1.75rem; }

.faq-aside {
  margin-top: 2.75rem;
  padding: 2rem;
  border: 1px solid var(--hairline-soft);
  position: relative;
  overflow: hidden;
  background: radial-gradient(90% 120% at 0% 0%, rgba(194, 163, 104, .06), transparent 60%);
}
/* Mizell Media monogram, painted in brass via mask so it matches the palette */
.faq-aside::after {
  content: "";
  position: absolute;
  right: -1.5rem;
  bottom: -1.75rem;
  width: 11rem;
  height: 11rem;
  background-color: var(--brass);
  opacity: .28;
  -webkit-mask: url("/assets/images/mizell-monogram.png") center / contain no-repeat;
  mask: url("/assets/images/mizell-monogram.png") center / contain no-repeat;
  pointer-events: none;
}
.faq-aside p { color: var(--ink-dim); font-size: .95rem; }
.faq-aside .btn { margin-top: 1.4rem; }

/* Short capture form inside the CTA band. Three fields, one row on desktop,
   posting to the same endpoint as the full contact form. */
.capture {
  margin: 2.25rem auto 0;
  max-width: 50rem;
  display: grid;
  gap: .9rem;
  text-align: left;
}
@media (min-width: 700px) {
  .capture { grid-template-columns: repeat(3, 1fr); align-items: end; }
  .capture .capture-wide { grid-column: 1 / -1; }
  .capture .capture-span2 { grid-column: span 2; }
}
/* Small "or" sitting in the gutter between the email and phone boxes */
@media (min-width: 700px) {
  .field--or { position: relative; }
  .field--or::before {
    content: "or";
    position: absolute;
    left: -.45rem;
    bottom: .55rem;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .08em;
    color: var(--brass-dim);
    pointer-events: none;
  }
}

/* Submission confirmation, shown in place so nobody leaves the site */
.form-status {
  margin: 1.6rem auto 0;
  max-width: 34em;
  padding: 1.3rem 1.6rem;
  border: 1px solid var(--hairline);
  background: radial-gradient(90% 130% at 50% 0%, rgba(194, 163, 104, .1), transparent 70%);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}
.form-status.is-error { border-color: rgba(195, 60, 43, .55); color: var(--ink-dim); }
.capture-hint {
  margin: -.25rem 0 .35rem;
  text-align: left;
  max-width: none;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.capture .field label { margin-bottom: .45rem; }
.capture .btn {
  grid-column: 1 / -1;
  justify-self: center;
  width: auto;
  margin-top: 2.25rem;
  justify-content: center;
}
.capture-note {
  margin: 1.1rem auto 0;
  max-width: 28em;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.capture-note a { color: var(--brass-dim); border-bottom: 1px solid var(--brass-dim); }
.capture-note a:hover { color: var(--brass); }

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */
.portrait { position: relative; margin-top: var(--portrait-drop, 1.75rem); }
.portrait picture { position: relative; display: block; }
.portrait picture::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 32%;
  background: linear-gradient(to top, rgba(236, 231, 221, .17), transparent);
  pointer-events: none;
}
.portrait img {
  width: 100%;
  filter: saturate(.9);
  border: 1px solid var(--hairline-soft);
}
.portrait figcaption {
  margin-top: .8rem;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@media (min-width: 800px) {
  /* Keep the About copy level with the top of the portrait */
  .about-copy { margin-top: var(--portrait-drop, 1.75rem); }
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.form-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .span-2 { grid-column: 1 / -1; }
}
.field label {
  display: block;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .6rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.05rem;
  padding: .6rem 0;
  border-radius: 0;
  transition: border-color .25s;
}
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.field select option { background: var(--bg-raise); color: var(--ink); }
.field textarea { resize: vertical; min-height: 4.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--brass);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }

.draft-note {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--brass-dim);
  border: 1px dashed var(--hairline);
  padding: .8rem 1rem;
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   Photo galleries: mixed portrait/landscape, caption under every frame
   -------------------------------------------------------------------------- */
.photo-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .photo-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .photo-grid .shot--wide { grid-column: 1 / -1; }
}
@media (min-width: 800px) {
  .photo-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
/* Feature layout: one tall frame beside two stacked wides, all ending level.
   --flip mirrors it so consecutive sets never read the same. */
.photo-grid--feature { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  /* The grid owns the height, so both columns end on the same line by
     construction. Images crop to fill rather than dictating row heights. */
  .photo-grid--feature {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 13 / 10;
    align-items: stretch;
  }
  .photo-grid--feature figure.shot { display: flex; flex-direction: column; min-height: 0; }
  .photo-grid--feature figure.shot picture { flex: 1; min-height: 0; display: block; }
  .photo-grid--feature figure.shot img { width: 100%; height: 100%; object-fit: cover; }
  .photo-grid--feature .shot--tall { grid-row: span 2; }
  .photo-grid--feature--flip .shot--tall { grid-column: 2; grid-row: 1 / span 2; }
  .photo-grid--feature--flip .shot--16:nth-of-type(2) { grid-column: 1; grid-row: 1; }
  .photo-grid--feature--flip .shot--16:nth-of-type(3) { grid-column: 1; grid-row: 2; }
}

@media (max-width: 639px) {
  /* Stacked single column: hold a consistent rhythm instead of letting a
     portrait frame tower over the landscape one beside it. */
  .photo-grid--feature figure.shot picture { display: block; aspect-ratio: 3 / 2; }
  .photo-grid--feature figure.shot img { width: 100%; height: 100%; object-fit: cover; }
  .photo-grid--feature figure.shot--tall picture { aspect-ratio: 3 / 4; }
}

/* Mixed orientations in one row: crop to a shared ratio so blocks end level */
.photo-grid--even figure.shot picture { display: block; aspect-ratio: 3 / 2; }
.photo-grid--even figure.shot img { width: 100%; height: 100%; object-fit: cover; }
figure.shot { margin: 0; }
figure.shot img {
  width: 100%;
  border: 1px solid var(--hairline-soft);
  background: var(--bg-slate);
  filter: saturate(.92);
}
figure.shot figcaption {
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
figure.shot figcaption .credit { color: var(--brass-dim); white-space: nowrap; }

/* Visually hidden but still read by search engines and screen readers */
.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;
}
/* Client logos, normalised to one tone via mask so mixed source artwork
   reads at equal weight on the dark ground and inherits the hover colour. */
.logo-mark {
  display: block;
  width: 100%;
  max-width: 11rem;
  height: 2.6rem;
  background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.logo-mark--tall { height: 3.4rem; max-width: 7rem; }

/* Companies worked with: text-mark plates until real logo files arrive */
.logo-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 2.5rem;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
}
@media (min-width: 760px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
.logo-grid li {
  background: var(--bg);
  min-height: 4.4rem;
  padding: 1.1rem .9rem;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color .25s, background-color .25s;
}
.section--raised .logo-grid li { background: var(--bg-band); }
.logo-grid li:hover,
.section--raised .logo-grid li:hover {
  color: var(--brass);
  background: rgba(194, 163, 104, .12);
}

/* Contact preference: two small optional pills, blank is fine */
.pref { border: 0; padding: 0; margin: 0; }
.pref legend {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: .6rem;
  padding: 0;
}
.pref-row { display: flex; gap: .6rem; }
.pref-row label {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--hairline);
  border-radius: 2rem;
  padding: .45rem .95rem;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.pref-row label:hover { color: var(--ink); border-color: var(--brass-dim); }
.pref-row input { accent-color: var(--brass); margin: 0; width: .8rem; height: .8rem; }
.pref-row input:checked + span { color: var(--brass); }

/* Footer social icon buttons */
.foot-social {
  display: flex;
  flex-direction: column;   /* stacked, per Jake: Instagram, email, YouTube */
  gap: .6rem;
  align-items: flex-start;
}
.social-icon {
  /* Jake asked for these ~5 to 10% larger on the 09-04 call. 2.4 -> 2.6rem is 8%. */
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--ink-dim);
  transition: color .2s, border-color .2s, background-color .2s;
}
.social-icon:hover { color: var(--bg); background: var(--brass); border-color: var(--brass); }
.social-icon svg { width: 1.08rem; height: 1.08rem; fill: currentColor; }

/* Per-set Instagram credit button */
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: 2rem;
  padding: .5rem 1rem;
  transition: background-color .2s, color .2s, border-color .2s;
}
.social-btn:hover { background: var(--brass); color: var(--bg); border-color: var(--brass); }
.social-btn svg { width: .95em; height: .95em; fill: currentColor; flex: none; }

/* --------------------------------------------------------------------------
   Stub pages (photography / weddings)
   -------------------------------------------------------------------------- */
.stub-mark {
  display: inline-block;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-dim);
  border: 1px dashed var(--hairline);
  padding: .5rem .9rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   CTA band + footer
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band .wrap {
  position: relative;
  max-width: 58rem;
  border: 1px solid var(--hairline-soft);
  padding: clamp(3.5rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  background: radial-gradient(85% 100% at 50% 0%, rgba(194, 163, 104, .08), transparent 70%);
}
.cta-band .wrap::before, .cta-band .wrap::after {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
}
.cta-band .wrap::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--brass);
  border-left: 2px solid var(--brass);
}
.cta-band .wrap::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--brass);
  border-right: 2px solid var(--brass);
}
.cta-band .tc { justify-content: center; }
.cta-band h2 { max-width: 14em; margin-inline: auto; }
.cta-band p { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 2.5rem; }

.site-foot {
  border-top: 1px solid var(--hairline);
  padding: 3.5rem 0 2.5rem;
}
.foot-grid {
  display: grid; gap: 2.5rem;
  align-items: start;
}
@media (min-width: 800px) {
  /* The icon column takes the whole span between the nav and the mark so the
     icons can centre inside it, rather than being nudged left by a fixed margin. */
  .foot-grid { grid-template-columns: 2fr 1fr 1fr auto; }
  .foot-social { align-items: center; }
}
@media (max-width: 799px) {
  /* Mark sits beside the nav list rather than stranded at the bottom. */
  .foot-grid { grid-template-columns: 1fr auto; column-gap: 1.5rem; }
  .foot-grid > div:first-child { grid-column: 1 / -1; grid-row: 1; }
  .foot-nav    { grid-column: 1; grid-row: 2; }
  .foot-mark   { grid-column: 2; grid-row: 2; justify-content: flex-end; align-self: center; }
  .foot-social { grid-column: 1 / -1; grid-row: 3; }
}

/* Footer mark, bottom right. Alpha-mask PNG tinted by currentColor, the same
   technique the client logos use, so it sits on the dark ground at the right
   weight and warms to brass on hover. */
.foot-mark { display: flex; justify-content: flex-start; }
@media (min-width: 800px) {
  .foot-mark { justify-content: flex-end; align-self: end; }
}
.foot-mark a { display: block; color: var(--ink-dim); transition: color .25s ease; }
.foot-mark a:hover, .foot-mark a:focus-visible { color: var(--brass); }
.foot-mark__logo {
  display: block;
  width: 7.5rem;
  aspect-ratio: 360 / 459;
  background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.site-foot .brand { font-size: 1.6rem; }
.site-foot p { font-size: .9rem; max-width: 24em; margin-top: 1rem; }
.foot-nav { list-style: none; display: grid; gap: .6rem; }
.foot-nav a {
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
}
.foot-nav a:hover { color: var(--brass); }
.foot-legal {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-soft);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.foot-legal a { color: var(--ink-faint); }
.foot-legal a:hover { color: var(--brass); }

/* --------------------------------------------------------------------------
   Reveal-on-scroll: feels like a rack focus, not a bounce.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.2, .6, .2, 1), transform .8s cubic-bezier(.2, .6, .2, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tc--gold { color: var(--brass); }
.tc .rec { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}