/* Brown Dog Media - site styles
   Palette and type are deliberately unlike selahcinema.com and daniellindeen.com:
   this is the parent LLC's commercial face, not the wedding brand. */

:root {
  --ink:      #141110;
  --ink-2:    #1B1714;
  --ink-3:    #241E19;
  --ink-4:    #2E2620;
  --cream:    #F7F2E9;
  --bone:     #E2D8C8;
  --muted:    #A2937F;
  --muted-2:  #7C7062;
  --tan:      #B9834C;
  --amber:    #E0A461;
  --line:     rgba(226, 216, 200, 0.14);
  --line-2:   rgba(226, 216, 200, 0.28);

  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Archivo Black", "Helvetica Neue", Impact, sans-serif;

  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --r: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

::selection { background: var(--tan); color: var(--ink); }

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

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

/* 2026-09-09, his call: all header/heading text site-wide is set in the wordmark's
   typeface, not just page titles — nothing on the site is left in a serif. */
h1 {
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(1.8rem, 1.05rem + 2.9vw, 3.1rem);
}
h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); line-height: 1.15; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.4rem);
  line-height: 1.5;
  color: var(--cream);
  max-width: 34ch;
}
.lede--wide { max-width: 46ch; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0 0 1.1rem;
  display: block;
  font-weight: 500;
}

.prose { max-width: 62ch; }
.prose p + p { margin-top: 0; }

.dim { color: var(--muted); }

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: clamp(4rem, 9vw, 8.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
/* For a section that is a single row of its own height and does not need the full
   rhythm around it, like the work scroller. */
.section--short { padding-block: clamp(2.6rem, 5.5vw, 4.6rem); }

.section--cream { background: var(--cream); color: #4A423A; }
.section--cream h1, .section--cream h2, .section--cream h3 { color: var(--ink); }
.section--cream .eyebrow { color: #9A6B3C; }
.section--cream .lede { color: #2E2823; }
.section--cream .dim { color: #6E6358; }

.section--ink2 { background: var(--ink-2); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* section head: heading and the thing itself, nothing padded in between */
.shead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
@media (min-width: 800px) {
  .shead { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
}

/* ---------- film perforation motif ---------- */

.perf {
  height: 14px;
  background-image: radial-gradient(circle at center, var(--line-2) 0 2.2px, transparent 2.4px);
  background-size: 22px 14px;
  background-repeat: repeat-x;
  opacity: 0.9;
}

/* ---------- header ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(20, 17, 16, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 70px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__txt {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.25;
  font-weight: 500;
}
.brand__txt b { display: block; font-weight: 600; }
.brand__txt span { display: block; color: var(--muted-2); letter-spacing: 0.3em; font-size: 0.62rem; }

.nav { display: none; }
@media (min-width: 940px) {
  .nav { display: flex; align-items: center; gap: 2rem; }
}
.nav a {
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--bone);
  padding-block: 0.4rem;
  position: relative;
  transition: color 0.2s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--tan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav a:hover { color: var(--cream); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--cream); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--tan);
  color: var(--ink);
  background: var(--amber);
  transition: background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}
.btn:hover { background: var(--cream); border-color: var(--cream); transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--line-2);
}
.btn--ghost:hover { background: transparent; border-color: var(--cream); color: var(--cream); }

.btn--lg { padding: 0.95rem 1.8rem; font-size: 0.95rem; }

.hdr .btn { display: none; }
@media (min-width: 940px) { .hdr .btn { display: inline-flex; } }

/* mobile menu */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 940px) { .burger { display: none; } }
.burger span {
  display: block; height: 1.5px; width: 100%;
  background: var(--cream);
  transition: transform 0.3s, opacity 0.2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mnav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding: 1rem var(--gut) 2rem;
}
.mnav[data-open="true"] { display: block; }
@media (min-width: 940px) { .mnav { display: none !important; } }
.mnav a {
  display: block;
  font-family: var(--display);
  font-size: 1.65rem;
  color: var(--cream);
  text-decoration: none;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.mnav .btn { margin-top: 1.4rem; width: 100%; justify-content: center; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-2);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Both are absolute so they stack instead of flowing. Static children would put the
   video below the full-height poster, where the hero's overflow clips it away and
   the clip plays where nobody can see it. */
.hero__media img, .hero__media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Two gradients: the vertical one seats the block, the horizontal one keeps the
     left-aligned type off whatever the photograph is doing on that side. */
  background:
    linear-gradient(to right, rgba(20,17,16,0.90) 0%, rgba(20,17,16,0.74) 36%, rgba(20,17,16,0.24) 74%, rgba(20,17,16,0.40) 100%),
    linear-gradient(to top, rgba(20,17,16,0.94) 0%, rgba(20,17,16,0.44) 42%, rgba(20,17,16,0.24) 70%, rgba(20,17,16,0.62) 100%);
}
.hero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(3rem, 7vw, 6rem);
}
/* Block caps run wider than the serif did, so the old ch-based caps would hold the
   headline to two or three cramped lines. It runs the measure instead. */
.hero h1 { max-width: none; }
.hero .lede { margin-top: 1.5rem; max-width: 44ch; color: var(--bone); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.2rem; }

/* page hero, shorter */
.phero { min-height: min(66svh, 660px); }
.phero h1 { max-width: none; }

/* ---------- credential strip ---------- */

.strip {
  background: var(--ink-3);
  border-block: 1px solid var(--line);
}
.strip__in {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  padding-block: 1.1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.strip__in span { display: inline-flex; align-items: center; gap: 0.6rem; }
.strip__in span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--tan);
  flex: none;
}

/* ---------- service chapters ---------- */

.chapters { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

.chapter {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .chapter { grid-template-columns: 1.05fr 1fr; }
  .chapter:nth-child(even) .chapter__media { order: -1; }
}

.chapter__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ink-3);
  aspect-ratio: 4 / 3;
}
.chapter__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0, 0.2, 1);
}
.chapter:hover .chapter__media img { transform: scale(1.035); }

.chapter__num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--tan);
  display: block;
  margin-bottom: 0.9rem;
}
.chapter h3 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); margin-bottom: 0.9rem; }
.chapter p { color: var(--muted); max-width: 46ch; }

.arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 0.35rem;
  transition: border-color 0.25s, color 0.25s, gap 0.25s;
}
.arrow:hover { border-color: var(--amber); color: var(--amber); gap: 0.9rem; }
.arrow svg { width: 14px; height: 14px; flex: none; }

/* ---------- work / film cards ---------- */

.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
/* Held to two columns on purpose: four film cards read as a 2x2 block, where
   auto-fit gave three across and left one orphan on the second row. */
.grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s, transform 0.3s;
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card__img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-3); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.5rem 1.5rem 1.7rem; flex: 1; display: flex; flex-direction: column; }
.card__kind {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 0.7rem;
}
.card h3 { margin-bottom: 0.7rem; }
.card p { color: var(--muted); font-size: 0.95rem; }

.awards { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.awards li {
  font-size: 0.82rem;
  color: var(--bone);
  display: flex;
  gap: 0.6rem;
  line-height: 1.4;
}
.awards svg { width: 13px; height: 13px; flex: none; margin-top: 0.28em; color: var(--tan); }

.card .arrow { margin-top: auto; padding-top: 1.2rem; align-self: flex-start; }

/* ---------- capability list ---------- */

.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.caps li {
  display: grid;
  gap: 0.35rem 2rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--line);
}
.caps li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 760px) {
  .caps li { grid-template-columns: 0.85fr 1.4fr; align-items: baseline; }
}
.caps h3 { font-size: 1.15rem; font-family: var(--sans); font-weight: 500; color: var(--cream); letter-spacing: 0; }
.caps p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.section--cream .caps h3 { color: var(--ink); }
.section--cream .caps li { border-color: rgba(20, 17, 16, 0.13); }

/* ---------- gallery ---------- */

.gallery { columns: 1; column-gap: clamp(0.75rem, 1.6vw, 1.25rem); }
@media (min-width: 620px) { .gallery { columns: 2; } }
@media (min-width: 1000px) { .gallery { columns: 3; } }

.gallery button {
  display: block;
  width: 100%;
  margin: 0 0 clamp(0.75rem, 1.6vw, 1.25rem);
  padding: 0;
  border: 0;
  background: var(--ink-3);
  border-radius: var(--r);
  overflow: hidden;
  cursor: zoom-in;
  break-inside: avoid;
  position: relative;
  line-height: 0;
}
.gallery img { width: 100%; transition: transform 0.7s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.4s; }
.gallery button:hover img { transform: scale(1.03); opacity: 0.88; }

/* Photos rise and settle in sequence rather than the grid appearing all at once.
   The stagger is on the photo, not the container, so it reads as movement. */
@media (prefers-reduced-motion: no-preference) {
  .gph {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: opacity 0.75s ease, transform 0.9s cubic-bezier(0.2, 0, 0.2, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .gph.in { opacity: 1; transform: none; }
}

/* lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12, 10, 9, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lb[data-open="true"] { display: flex; }
.lb img { max-width: 100%; max-height: 84svh; object-fit: contain; border-radius: 2px; }
.lb__cap {
  position: absolute;
  left: 0; right: 0; bottom: clamp(0.75rem, 2vw, 1.5rem);
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  padding-inline: 1rem;
}
.lb__x, .lb__nav {
  position: absolute;
  background: rgba(247, 242, 233, 0.09);
  border: 1px solid var(--line-2);
  color: var(--cream);
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s;
}
.lb__x:hover, .lb__nav:hover { background: rgba(247, 242, 233, 0.2); }
.lb__x { top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); }
.lb__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lb__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lb svg { width: 18px; height: 18px; }

/* ---------- about / split ---------- */

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 0.85fr 1.15fr; } }
.split__img { border-radius: var(--r); overflow: hidden; background: var(--ink-3); }
.split__img img { width: 100%; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 0; max-width: 62rem; }
.faq details {
  border-top: 1px solid var(--line);
  padding-block: 0.4rem;
}
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  cursor: pointer;
  list-style: none;
  padding-block: 1.25rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  color: var(--cream);
  line-height: 1.25;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--amber); }
.faq summary::after {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  margin-top: 0.4em;
  border-right: 1.5px solid var(--tan);
  border-bottom: 1.5px solid var(--tan);
  transform: rotate(45deg);
  transition: transform 0.3s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__a { padding-bottom: 1.5rem; max-width: 68ch; color: var(--muted); }
.faq__a p { margin-bottom: 0.85em; }
.section--cream .faq details { border-color: rgba(20, 17, 16, 0.13); }
.section--cream .faq summary { color: var(--ink); }
.section--cream .faq__a { color: #5E5449; }

/* ---------- CTA band ---------- */

.cta {
  background: var(--ink-3);
  border-top: 1px solid var(--line);
  text-align: center;
}
.cta .lede { margin-inline: auto; }
.cta__row { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 2rem; }
.cta__mail {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-top: 1.6rem;
}
.cta__mail a { color: var(--amber); text-decoration: none; border-bottom: 1px solid transparent; }
.cta__mail a:hover { border-color: var(--amber); }

/* ---------- footer ---------- */

.ftr {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem) 2.5rem;
  font-size: 0.9rem;
}
.ftr__top {
  display: grid;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 780px) {
  .ftr__top { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}
.ftr__h {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 1.1rem;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ftr a { color: var(--bone); text-decoration: none; transition: color 0.2s; }
.ftr a:hover { color: var(--amber); }
.ftr__blurb { color: var(--muted); max-width: 38ch; margin-top: 1.1rem; font-size: 0.9rem; }
.ftr__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* ---------- reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0, 0.2, 1); }
  .rv.in { opacity: 1; transform: none; }
}

/* ---------- misc ---------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amber);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 var(--r) 0;
  font-size: 0.9rem;
}
.skip:focus { left: 0; }

.note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  line-height: 1.6;
}

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; padding: 0; list-style: none; }
.tags li {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bone);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}
.section--cream .tags li { color: #4A423A; border-color: rgba(20, 17, 16, 0.2); }

/* ---- V2, 2026-09-09: grid-first home, work tiles, one-paragraph pitch, contact form ---- */

.section--top { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3.5rem, 8vw, 7rem); }
.h1--tight {
  max-width: none;
  margin-top: 1.1rem;
}
/* Runs the full measure, level with the photo and the body copy under it,
   rather than being held to a narrow column of its own. */
.h1--full {
  max-width: none;
  text-wrap: normal;
}

/* Held to one line, his call on the photo page. "PORTRAITS, EVENTS, BRAND, AND
   LOCATION WORK." measures 28.109x its font size in Archivo Black at this tracking,
   so dividing the measure by 28.2 is the largest size that still holds the line.
   Below this breakpoint one line would mean a headline too small to read as one, so
   it wraps instead. Changing the wording means re-measuring the divisor. */
.h1--fit { max-width: none; margin-top: 1.1rem; }
@media (min-width: 1000px) {
  .h1--fit {
    white-space: nowrap;
    font-size: min(3.1rem, calc((min(100vw, var(--wrap)) - 2 * var(--gut)) / 28.4));
  }
}

/* the one paragraph that sits under the work */
.pitch {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  max-width: 62ch;
}
.pitch p {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: var(--bone);
}
/* The aerial licence line is a statement, not body copy, so it spreads across the
   whole measure rather than sitting in a narrow column on the left. */
.pitch--wide { max-width: none; }
.pitch .arrow { margin-top: 1.2rem; }

/* contact form */
.cform {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 620px;
  margin: 2.2rem auto 0;
  text-align: left;
}
/* Off-screen rather than display:none, which some bots treat as a tell. */
.cform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (min-width: 680px) { .cform { grid-template-columns: 1fr 1fr; } }
.cform__f { display: flex; flex-direction: column; gap: 0.4rem; }
.cform__f--wide { grid-column: 1 / -1; }
.cform__f > span {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cform input,
.cform textarea {
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--cream);
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 0.72rem 0.85rem;
  width: 100%;
  resize: vertical;
}
.cform input:focus,
.cform textarea:focus {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
  border-color: transparent;
}
.cform__act {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cform__note {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--muted);
  margin: 0;
}
.cform__note[data-state="ok"] { color: var(--amber); }

/* Aerial hero carries real footage, so it gets a much lighter scrim than the
   V1 photo heroes: enough to seat the type, not enough to hide the shot. */
.hero__scrim--soft {
  background:
    linear-gradient(to right, rgba(20,17,16,0.72) 0%, rgba(20,17,16,0.42) 40%, rgba(20,17,16,0.06) 78%, rgba(20,17,16,0.14) 100%),
    linear-gradient(to top, rgba(20,17,16,0.80) 0%, rgba(20,17,16,0.16) 46%, rgba(20,17,16,0.04) 72%, rgba(20,17,16,0.24) 100%);
}


/* ---- V2.1, 2026-09-09: full-height three-column header, video tiles, icon links ---- */

/* The header IS the three disciplines. Equal columns, full page height, headline
   laid over all three. */
.hsplit {
  position: relative;
  /* The site header is sticky and sits above this, so its height comes off the
     top or the column labels fall below the fold. */
  height: calc(100svh - 4.4rem);
  min-height: 32rem;
  overflow: hidden;
  background: var(--ink);
}
/* A flat veil under the type layer, so difference blend has a steadier ground to
   invert against than the photographs alone give it. */
.hsplit__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(20, 17, 16, 0.46);
}
.hsplit__cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.hcol {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  border-right: 1px solid rgba(20, 17, 16, 0.5);
}
.hcol:last-child { border-right: 0; }
.hcol img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.1s cubic-bezier(0.2, 0, 0.2, 1), filter 0.5s;
  filter: saturate(0.92) brightness(0.82);
}
.hcol:hover img { transform: scale(1.04); filter: saturate(1) brightness(0.95); }
.hcol__k {
  position: absolute;
  left: 0; right: 0; bottom: clamp(1.5rem, 3vw, 2.6rem);
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(20, 17, 16, 0.8);
  z-index: 3;
}
.hcol:hover .hcol__k { color: var(--amber); }
.hcol:focus-visible { outline: 2px solid var(--amber); outline-offset: -4px; }

/* The type sits above all three columns and inverts whatever is under it. Pointer
   events off so the columns underneath stay clickable through the headline. */
.hsplit__type {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: difference;
  /* Keeps the block clear of the FILM / PHOTO / AERIAL labels along the bottom of
     the columns. Without it the subline lands in the same band as the labels. */
  padding-bottom: 4rem;
}
/* No container query needed: the mark derives its size from the same expression. */

/* The mark is a mark, not body copy, so its block runs the full viewport instead of
   the 1240px measure the rest of the site is set to. Eyebrow, mark and the line
   underneath all share that one left edge. */
.hsplit__type .wrap { width: 100%; max-width: none; text-align: left; }
.hsplit__eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
}
/* The wordmark is the header. One word per line, set as big as the header will hold,
   so it reads as a mark rather than as a sentence. */
.hsplit__mark {
  color: #fff;
  font-family: var(--display);
  font-weight: 400; /* Archivo Black ships one weight and it is already black */
  text-transform: uppercase;
  /* Two constraints, and the mark takes whichever is smaller.
     Width: "BROWN" is the widest of the three lines and measures 3.963x its font
     size in Archivo Black at this tracking (measured in a browser, not guessed).
     4.0 leaves a hair of slack for a classic scrollbar eating into 100vw.
     Height: three lines at 0.8 leading, plus the eyebrow and the line underneath,
     all have to stay inside a header that is one screen tall. 2.4 is the three
     lines; 11.25rem is the eyebrow and subline (76px measured), the 4rem the type
     block is inset by to clear the column labels, and 40px of slack.
     Height is what binds on a laptop, so this is as big as three lines can go
     without pushing the column labels below the fold.
     Dropping a line from this mark means re-deriving both numbers.
     0.8 leading is the floor: Archivo Black's caps are 0.73em, so anything tighter
     collides the lines. */
  --mark-fit-w: calc((100vw - 2 * var(--gut)) / 4.0);
  --mark-fit-h: calc((100svh - 4.4rem - 11.25rem) / 2.4);
  font-size: min(var(--mark-fit-w), var(--mark-fit-h));
  line-height: 0.8;
  letter-spacing: -0.045em;
  margin: 0;
  max-width: none;
}
.hsplit__mark span { display: block; white-space: nowrap; }
.hsplit__sub {
  font-family: var(--mono);
  /* One line, his call. The sentence measures 39.44x its font size in IBM Plex Mono
     at this tracking, so on a narrow phone the type has to come down to hold the
     line rather than the line breaking. Rewording it means re-measuring. */
  font-size: min(0.72rem, 2.2vw);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #fff;
  margin: 1.4rem 0 0;
  max-width: none;
}
/* Blend modes and this much contrast do not always survive a forced-colors or
   reduced-transparency setting, so fall back to plain cream on a scrim. */
@media (prefers-contrast: more) {
  .hsplit__type { mix-blend-mode: normal; background: rgba(20, 17, 16, 0.62); }
  .hsplit__mark, .hsplit__eyebrow, .hsplit__sub { color: var(--cream); }
}
@media (max-width: 700px) {
  .hsplit__cols { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); }
  .hcol { border-right: 0; border-bottom: 1px solid rgba(20, 17, 16, 0.5); }
  .hcol__k { bottom: auto; top: 50%; transform: translateY(-50%); }
}

/* Selected work: one row, scrolled sideways, starting on the reel. Bigger tiles than
   the grid it replaces, one or two on screen, and the section is shorter for it. */
.vscroll {
  margin-top: clamp(1.6rem, 2.6vw, 2.2rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Bleeds out to the container edge and pads back in, so the first tile still lines
     up with the headline while a tile can sit half off the edge and read as "more". */
  margin-inline: calc(-1 * var(--gut));
  padding-inline: var(--gut);
  /* Without this, mandatory snap aligns the first tile to the padding box and
     scrolls the gutter away, so the row starts 56px left of the heading. */
  scroll-padding-inline: var(--gut);
}
.vscroll::-webkit-scrollbar { display: none; }
.vscroll:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.vscroll__track {
  display: flex;
  gap: clamp(0.8rem, 1.6vw, 1.3rem);
  width: max-content;
  padding-block: 0.2rem;
}
.vtile {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: min(78vw, 620px);
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--cream);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink-3);
  transition: opacity 0.45s, filter 0.45s;
}
/* The tile nearest the middle of the scroller is the one in focus and the rest sit
   back, so it is obvious which one a click is about to take. Gated on data-ready so
   that with JS off every tile stays at full strength instead of dimmed forever. */
.vscroll[data-ready="true"] .vtile { opacity: 0.42; filter: saturate(0.3); }
.vscroll[data-ready="true"] .vtile[data-focus="true"] { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .vtile { transition: none; } }
.vtile__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.vtile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.4s;
  opacity: 0.86;
}
.vtile:hover .vtile__media img { transform: scale(1.04); opacity: 1; }
.vtile__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(2.6rem, 4vw, 3.2rem);
  color: var(--cream);
  pointer-events: none;
}
.vtile__play svg { width: 100%; height: auto; display: block; }
.vtile:hover .vtile__play { color: var(--amber); }
.vtile__k {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1rem 0.85rem;
  font-size: 0.9rem;
  background: linear-gradient(to top, rgba(20, 17, 16, 0.88), rgba(20, 17, 16, 0));
}

/* icon links under the About text */
.ilinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}
.ilinks a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--bone);
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.ilinks a:hover { color: var(--amber); border-color: var(--amber); transform: translateY(-2px); }
.ilinks a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ilinks svg { width: 1.3rem; height: 1.3rem; display: block; }

/* the aerial header runs taller than the other page heroes */
.phero--tall { min-height: min(78svh, 780px); }