/* Moofa — main stylesheet
   Editorial register. Serif body + display. Restrained palette. Generous whitespace.
   Inspired structurally by Pentagram; tonally by editorial publications.
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Geist:wght@300..600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --bg: #efe9dc;
  --paper-deep: #e6dfce;
  --ink: #14110d;
  --ink-soft: #4a443a;
  --ink-mute: #807870;
  --rule: #cdc4b0;
  --accent: #a25a1f;
  --max: 1280px;
  --reading: 680px;
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Geist', 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  /* No orphans, ever. Modern browsers prevent single-word last lines automatically. */
  text-wrap: pretty;
}

/* All long-form reading (essays, project text, lede) stays in the serif. */
.article, .article p, .article li,
.project-text, .project-text p,
.lede, .section-lede,
.pillar p, .principle p, .writing-item p,
.about-text, .about-text p {
  font-family: var(--serif);
}

/* Headings get balanced wrapping (every line roughly equal length, no orphans). */
h1, h2, h3, h4,
.hero-h1, .section-h2, .article h1, .article h2,
.work-tile h3, .writing-item h3, .pillar h3, .principle h3 {
  text-wrap: balance;
}

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule); }
a:hover { text-decoration-color: var(--accent); color: var(--accent); }

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

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 36px;
  background: rgba(239, 233, 220, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav-logo { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); line-height: 1.1; }
.nav-logo img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.nav-logo:hover { color: var(--ink); }
.nav-links { display: flex; gap: 32px; font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--accent); }
/* Mobile nav — masthead, not a hamburger.
   Four destinations fit across a 320px screen, so none of them hide behind
   a tap. Row one carries identity + the single action; row two carries the
   sections, separated by a rule. Reads as a printed masthead rather than
   app chrome, which is the register the rest of the site is in.

   Breakpoint is 820px, not the 720px the old rule used: the one-row nav
   needs ~800px before the wordmark crowds the links, so 720-800 was a dead
   zone where the old nav was already breaking. */
@media (max-width: 820px) {
  .nav { flex-wrap: wrap; padding: 12px 18px 0; }

  /* The five links become direct flex items of .nav, so Contact can stay on
     the identity row while the four sections drop to a row of their own. */
  .nav-links { display: contents; }

  /* padding-right guarantees breathing room against Contact at any width. */
  .nav-logo { order: 1; flex: 1 1 auto; min-width: 0; font-size: 14px; gap: 10px; padding-right: 14px; }
  .nav-logo img { width: 36px; height: 36px; }
  .nav-logo span { white-space: nowrap; }

  .nav-links a.nav-cta { order: 2; flex: 0 0 auto; }

  /* A zero-height full-width item forces the line break — and doubles as the
     rule between the two rows, so it costs no extra markup. */
  .nav::after {
    content: ""; order: 3;
    flex: 0 0 100%; height: 0;
    margin-top: 12px;
    border-top: 1px solid var(--rule);
  }

  /* justify-content: space-between spreads these edge to edge on their line. */
  .nav-links a:not(.nav-cta) {
    order: 4;
    font-size: 11px;
    max-height: 44px;
    padding: 11px 0 12px;
  }

  /* Condensed: while scrolling down, row two folds away and the bar becomes
     just identity + Contact. Scrolling up brings the masthead back. */
  .nav--condensed .nav-links a:not(.nav-cta) {
    max-height: 0; padding-top: 0; padding-bottom: 0;
    opacity: 0; overflow: hidden;
  }
  .nav--condensed::after { margin-top: 0; opacity: 0; }

  .nav-links a:not(.nav-cta), .nav::after {
    transition: max-height .28s ease, padding .28s ease,
                margin .28s ease, opacity .2s ease;
  }

  /* Narrow phones: the wordmark stops fitting beside Contact, so drop to the
     mark alone. The link keeps its accessible name from the img alt, and the
     hero eyebrow states "Moofa Production House" directly below anyway. */
  @media (max-width: 360px) {
    .nav-logo span { display: none; }
    .nav-logo img { width: 32px; height: 32px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a:not(.nav-cta), .nav::after { transition: none; }
}

/* ---------- hero (kinetic) ---------- */
.hero {
  min-height: 92vh;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 80px 36px 60px;
  max-width: 1420px;
  margin: 0 auto;
}
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(12px);
  animation: kineticUp 0.9s cubic-bezier(.22,1,.36,1) 0.1s forwards;
}
.hero-h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.8vw, 86px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .hero-h1 { white-space: normal; font-size: clamp(34px, 8.5vw, 60px); }
  /* Force "to heart." onto its own line so it's never an orphan and never moves */
  .hero-h1 .word:last-child {
    display: block;
    margin-right: 0;
  }
}
.hero-h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: kineticUp 1.1s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(0.25s + var(--i,0) * 0.09s);
  margin-right: 0.22em;
}
.hero-h1 .word--accent { color: var(--accent); font-style: italic; font-weight: 400; margin-right: 0.22em; }

/* rotator (kinetic word swap) — elastic width: the line breathes with the word */
.rotator {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  vertical-align: baseline;
  transition:
    transform 0.42s cubic-bezier(.6,.04,.3,1),
    opacity 0.42s ease,
    filter 0.42s ease,
    width 0.6s cubic-bezier(.5,.05,.2,1);
  will-change: transform, opacity, filter, width;
}
.rotator.is-out {
  transform: translateY(-0.35em);
  opacity: 0;
  filter: blur(10px);
}
.rotator.is-in-init {
  transform: translateY(0.45em);
  opacity: 0;
  filter: blur(10px);
  transition: width 0.6s cubic-bezier(.5,.05,.2,1);
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin-top: 44px;
  opacity: 0;
  transform: translateY(20px);
  animation: kineticUp 0.9s cubic-bezier(.22,1,.36,1) 0.95s forwards;
}
.hero-proof {
  margin-top: 60px;
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(20px);
  animation: kineticUp 0.9s cubic-bezier(.22,1,.36,1) 1.15s forwards;
}
.hero-proof strong { color: var(--ink); font-weight: 600; }

/* scroll indicator hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0;
  animation: kineticUp 0.9s 1.6s forwards, hintBounce 2.4s 2.5s ease-in-out infinite;
}

@keyframes kineticUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

/* generic scroll-reveal for everything below the fold */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(.22,1,.36,1), transform 0.9s cubic-bezier(.22,1,.36,1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

/* film preview hover-play */
.work-tile { transition: transform 0.4s cubic-bezier(.22,1,.36,1); }
.work-tile:hover { transform: translateY(-4px); }
.work-tile:hover .work-tile-frame { border-color: var(--ink); }
.work-tile-frame { transition: border-color 0.3s; overflow: hidden; }
.work-tile-frame video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- film placeholder (animated, no flat black) ---------- */
.film {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 36px 100px;
}
.film-frame {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1A1612, #3A2C24, #1A1612, #2A1A14);
  background-size: 300% 300%;
  animation: filmShimmer 14s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,247,241,0.55);
  font-family: var(--mono);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.film-frame::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at 30% 35%, rgba(139,58,44,0.32), transparent 55%),
              radial-gradient(ellipse at 75% 75%, rgba(80,40,30,0.45), transparent 60%);
  animation: filmGlow 18s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: screen;
}
.film-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px);
  pointer-events: none;
}
.film-frame > * { position: relative; z-index: 2; padding: 0 20px; text-align: center; }
.film-caption {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}

@keyframes filmShimmer {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}
@keyframes filmGlow {
  0% { transform: scale(1) translate(0,0); opacity:0.65; }
  100% { transform: scale(1.18) translate(30px, -20px); opacity: 0.95; }
}

/* Variations per project — give each tile/page its own color signature.
   These get applied with data-tone="" on .film-frame */
.film-frame[data-tone="archive"] { background: linear-gradient(135deg, #1A1614, #3A2C20, #2A1A12, #1A1410); background-size: 300% 300%; }
.film-frame[data-tone="archive"]::before { background: radial-gradient(ellipse at 30% 35%, rgba(160,85,40,0.32), transparent 55%), radial-gradient(ellipse at 75% 75%, rgba(80,40,30,0.4), transparent 60%); }

.film-frame[data-tone="science"] { background: linear-gradient(135deg, #11161A, #1F2D38, #131A22, #0E1418); background-size: 300% 300%; }
.film-frame[data-tone="science"]::before { background: radial-gradient(ellipse at 30% 35%, rgba(75,120,160,0.32), transparent 55%), radial-gradient(ellipse at 75% 75%, rgba(40,60,90,0.5), transparent 60%); }

.film-frame[data-tone="memory"] { background: linear-gradient(135deg, #14110D, #2A201A, #1A1410, #100C08); background-size: 300% 300%; }
.film-frame[data-tone="memory"]::before { background: radial-gradient(ellipse at 30% 35%, rgba(200,150,90,0.22), transparent 55%), radial-gradient(ellipse at 75% 75%, rgba(60,40,25,0.45), transparent 60%); }

.film-frame[data-tone="culture"] { background: linear-gradient(135deg, #181014, #341A26, #1F1018, #100610); background-size: 300% 300%; }
.film-frame[data-tone="culture"]::before { background: radial-gradient(ellipse at 30% 35%, rgba(170,75,110,0.28), transparent 55%), radial-gradient(ellipse at 75% 75%, rgba(60,25,45,0.5), transparent 60%); }

.film-frame[data-tone="psychology"] { background: linear-gradient(135deg, #14141A, #28283A, #1A1A28, #0E0E18); background-size: 300% 300%; }
.film-frame[data-tone="psychology"]::before { background: radial-gradient(ellipse at 30% 35%, rgba(120,100,180,0.28), transparent 55%), radial-gradient(ellipse at 75% 75%, rgba(60,50,90,0.5), transparent 60%); }

/* ---------- section blocks ---------- */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 100px 36px;
}
.section--reading {
  max-width: calc(var(--reading) + 72px);
}
.section-eyebrow {
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.section-h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 820px;
}
.section-lede {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin-top: 28px;
}

/* ---------- pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 56px;
  margin-top: 72px;
}
.pillar h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 14px;
}
.pillar p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pillar a {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}

/* ---------- work grid ---------- */
.work-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 48px 0 56px;
  font-family: var(--mono);
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}
.work-filter-group {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 0;
}
.work-filter-label {
  color: var(--ink-soft);
  margin-right: 8px;
  font-weight: 600;
}
.work-filter {
  border: 1px solid var(--rule);
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  letter-spacing: inherit;
  text-transform: inherit;
}
.work-filter:hover { border-color: var(--ink); }
.work-filter.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 80px 56px;
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; gap: 56px; }
}
.work-tile {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.work-tile-frame {
  aspect-ratio: 16 / 11;
  background: linear-gradient(135deg, #1A1612, #3A2C20, #2A1A12, #1A1410);
  background-size: 300% 300%;
  animation: filmShimmer 16s ease-in-out infinite;
  margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,247,241,0.45);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.work-tile-frame::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at 30% 35%, rgba(139,58,44,0.28), transparent 55%),
              radial-gradient(ellipse at 75% 75%, rgba(80,40,30,0.4), transparent 60%);
  animation: filmGlow 20s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: screen;
}
.work-tile-frame > * { position: relative; z-index: 2; padding: 0 16px; text-align: center; }
.work-tile h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.work-tile-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* visual-first project page: large image rows */
.project-image {
  margin: 60px 0;
  width: 100%;
  max-width: 1100px;
}
.project-image-frame {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1A1612, #3A2C20, #2A1A12, #1A1410);
  background-size: 300% 300%;
  animation: filmShimmer 14s ease-in-out infinite;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,247,241,0.4);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.project-image-frame::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at 30% 35%, rgba(139,58,44,0.25), transparent 55%),
              radial-gradient(ellipse at 75% 75%, rgba(80,40,30,0.4), transparent 60%);
  animation: filmGlow 18s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: screen;
}
.project-image-frame > * { position: relative; z-index: 2; padding: 0 20px; text-align: center; }
.project-image-frame--tall { aspect-ratio: 4 / 5; }
.project-image-frame--square { aspect-ratio: 1 / 1; }

.project-image-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 60px 0;
}
@media (max-width: 720px) {
  .project-image-row { grid-template-columns: 1fr; }
}

.project-caption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* project page text block (short, lives between visuals) */
.project-text {
  max-width: var(--reading);
  margin: 60px auto;
  padding: 0 36px;
}
.project-text p {
  font-size: 20px;
  line-height: 1.65;
  max-width: var(--reading);
}
.project-text p + p { margin-top: 18px; }
.project-text-eyebrow {
  font-family: var(--mono);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* real stills — images extracted from the films, used as page texture */
.project-still {
  display: block;
  max-width: 1420px;
  margin: 80px auto;
  padding: 0 36px;
}
.project-still img, .project-still video {
  width: 100%;
  display: block;
  object-fit: cover;
  background: #FFFCF6;
}
.project-still--banner img, .project-still--banner video { aspect-ratio: 16/9; }
.project-still--standard img, .project-still--standard video { aspect-ratio: 16/9; }
.project-still--square img, .project-still--square video { aspect-ratio: 1/1; }
/* keep the whole image visible, don't crop */
.project-still--contain img, .project-still--contain video { object-fit: contain; background: #FFFCF6; }
/* let the image's natural width/height dictate, no forced aspect ratio at all */
.project-still--natural img, .project-still--natural video {
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  max-height: 88vh;
}

/* The "visual vocabulary" feature section, for transparent PNG objects shown directly on the page */
.vocabulary {
  max-width: 1180px;
  margin: 100px auto;
  padding: 80px 36px 60px;
  background: linear-gradient(180deg, transparent 0%, rgba(255,252,246,0.6) 30%, rgba(255,252,246,0.6) 70%, transparent 100%);
}
.vocabulary-lead {
  max-width: var(--reading);
  margin: 0 auto 60px;
  text-align: start;
}
.vocabulary-lead p {
  font-size: 20px;
  line-height: 1.65;
}
.vocabulary-lead p + p { margin-top: 18px; }
.vocabulary-item {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 36px;
}
.vocabulary-item--reverse { grid-template-columns: 1fr 1.1fr; }
.vocabulary-item--reverse .vocabulary-item-text { order: 2; }
.vocabulary-item--reverse .vocabulary-item-visual { order: 1; }
@media (max-width: 760px) {
  .vocabulary-item, .vocabulary-item--reverse { grid-template-columns: 1fr; gap: 24px; }
  .vocabulary-item--reverse .vocabulary-item-text { order: unset; }
  .vocabulary-item--reverse .vocabulary-item-visual { order: unset; }
}
.vocabulary-item-eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.vocabulary-item-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.25;
  margin-bottom: 14px;
}
.vocabulary-item-text p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 460px;
}
.vocabulary-item-visual {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
.vocabulary-item-visual img {
  max-width: 100%;
  max-height: 380px;
  height: auto;
  display: block;
  /* let the transparent PNG sit on the page itself */
}
.vocabulary-item-visual--pair {
  flex-direction: column;
  gap: 18px;
}
.vocabulary-item-visual--pair img {
  max-height: 200px;
}

/* Gentle breathing motion for transparent objects in the vocabulary section */
@keyframes vocabBreathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.022) translateY(-4px); }
}
.vocabulary-item-visual img {
  animation: vocabBreathe 6s ease-in-out infinite;
  will-change: transform;
  transform-origin: center;
}
/* slightly de-sync paired objects so they don't move in lockstep */
.vocabulary-item-visual--pair img:nth-child(1) { animation-duration: 6s; }
.vocabulary-item-visual--pair img:nth-child(2) { animation-duration: 7.5s; animation-delay: -2s; }
/* reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .vocabulary-item-visual img { animation: none; }
}

/* Big film label, for case-study "The film" section */
.film-section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 28px;
}

/* Full-film wrapper with custom play button overlay and a poster-image entrance */
.full-film-wrapper {
  position: relative;
  display: block;
  background: #1a1612;
  overflow: hidden;
}
.full-film-wrapper .poster-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.full-film-wrapper .poster-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: posterKenBurns 14s ease-in-out infinite alternate;
  transform-origin: center;
}
.full-film-wrapper .poster-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, transparent 55%, rgba(20,14,8,0.18) 100%);
  pointer-events: none;
}
.full-film-wrapper .poster-overlay.is-hidden {
  opacity: 0;
}
@keyframes posterKenBurns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.06) translate(-1%, -0.5%); }
}
.full-film-wrapper .play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(80px, 9vw, 124px);
  height: clamp(80px, 9vw, 124px);
  border-radius: 50%;
  background: rgba(250, 247, 241, 0.94);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 5;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
  box-shadow: 0 6px 28px rgba(20, 14, 8, 0.18);
}
.full-film-wrapper .play-overlay {
  animation: playPulse 2.6s ease-in-out infinite;
}
.full-film-wrapper .play-overlay:hover {
  background: rgba(250, 247, 241, 1);
  transform: translate(-50%, -50%) scale(1.05);
  animation: none;
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 6px 28px rgba(20, 14, 8, 0.20), 0 0 0 0 rgba(250, 247, 241, 0); }
  50%      { box-shadow: 0 8px 36px rgba(20, 14, 8, 0.32), 0 0 0 14px rgba(250, 247, 241, 0.08); }
}
.full-film-wrapper .play-overlay::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: clamp(22px, 2.4vw, 32px) solid var(--ink);
  border-top: clamp(16px, 1.7vw, 22px) solid transparent;
  border-bottom: clamp(16px, 1.7vw, 22px) solid transparent;
  margin-left: clamp(4px, 0.4vw, 6px);
}
.full-film-wrapper .play-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}

/* Essay emphasis — pure typographic register shift, no container */
.essay-emphasis {
  margin: 88px 0;
  padding: 0;
  background: transparent;
  border: none;
  max-width: var(--reading);
}
.essay-emphasis p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  margin: 0 0 26px;
  color: var(--ink);
}
.essay-emphasis .essay-emphasis-punch {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin-top: 40px;
  padding-top: 0;
  border-top: none;
}
/* The opening punch sits at the top of the block: no extra top margin */
.essay-emphasis .essay-emphasis-punch:first-child {
  margin-top: 0;
  margin-bottom: 36px;
}
@media (max-width: 760px) {
  .essay-emphasis { margin: 56px 0; }
  .essay-emphasis p { font-size: 20px; }
  .essay-emphasis .essay-emphasis-punch { font-size: 24px; }
}

/* Progressive disclosure — humans see the essence, bots index everything */
.project-text-more {
  margin-top: 18px;
}
.project-text-more summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.project-text-more summary::-webkit-details-marker { display: none; }
.project-text-more summary::before { content: "+ "; opacity: 0.7; }
.project-text-more[open] summary::before { content: "− "; opacity: 0.7; }
.project-text-more summary:hover { color: var(--ink); border-color: var(--ink); }
.project-text-more[open] summary { margin-bottom: 18px; }
.project-text-more p { margin-top: 14px !important; max-width: var(--reading); }

/* Floating decorative transparent objects, sitting on the page background */
.floating-still {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1180px;
  margin: 60px auto;
  padding: 0 36px;
}
.floating-still img {
  display: block;
  max-width: 100%;
  height: auto;
}
.floating-still--medium img { max-height: 380px; }
.floating-still--large img { max-height: 560px; }

/* Horizontal seam: the seed-swirl flying across the page edge to edge */
.seed-swirl-seam {
  position: relative;
  margin: 40px auto 0;
  max-width: 1700px;
  padding: 0;
  overflow: hidden;
  height: 220px;
  pointer-events: none;
}
.seed-swirl-seam img {
  position: absolute;
  left: -2%;
  bottom: 0;
  width: 104%;
  height: auto;
  display: block;
  opacity: 0.85;
}
@media (max-width: 760px) {
  .seed-swirl-seam { height: 140px; }
}
.project-still-caption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.project-still-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1420px;
  margin: 80px auto;
  padding: 0 36px;
}
.project-still-row img, .project-still-row video {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: #FFFCF6;
}
@media (max-width: 760px) {
  .project-still-row { grid-template-columns: 1fr; }
}

.project-still-triptych {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  max-width: 1420px;
  margin: 80px auto;
  padding: 0 36px;
}
.project-still-triptych img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}
@media (max-width: 760px) {
  .project-still-triptych { grid-template-columns: 1fr 1fr; }
  .project-still-triptych img:nth-child(3) { display: none; }
}

/* curated object slots — awaiting Daniella's isolated research artifacts on white */
.curated-slot {
  width: 100%;
  background: #FFFCF6;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 80px 40px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.curated-slot strong {
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.18em;
}
.curated-slot small {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: none;
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.7;
  font-weight: 400;
  max-width: 460px;
  line-height: 1.4;
}
.curated-slot--banner { aspect-ratio: 21/9; }
.curated-slot--standard { aspect-ratio: 16/9; }
.curated-slot--square { aspect-ratio: 1/1; }
.curated-slot-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1420px;
  margin: 80px auto;
  padding: 0 36px;
}
@media (max-width: 760px) { .curated-slot-row { grid-template-columns: 1fr; } }
.curated-slot-triptych {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  max-width: 1420px;
  margin: 80px auto;
  padding: 0 36px;
}
.curated-slot-triptych .curated-slot { aspect-ratio: 4/5; padding: 40px 20px; }
@media (max-width: 760px) {
  .curated-slot-triptych { grid-template-columns: 1fr 1fr; }
  .curated-slot-triptych .curated-slot:nth-child(3) { display: none; }
}

/* pull-quote variant with image bg */
.pull-quote-image {
  position: relative;
  max-width: 1420px;
  margin: 100px auto;
  padding: 0;
  border: none;
}
.pull-quote-image-frame {
  position: relative;
  aspect-ratio: 21/9;
  overflow: hidden;
  margin: 0 36px;
}
.pull-quote-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.55);
}
.pull-quote-image-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 5% 8%;
  z-index: 2;
}
.pull-quote-image-text blockquote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #FAF7F1;
  max-width: 760px;
}
.pull-quote-image-text cite {
  display: block;
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250,247,241,0.7);
}

/* ---------- writing (reading pages) ---------- */
.article {
  max-width: calc(var(--reading) + 72px);
  margin: 0 auto;
  padding: 80px 36px 120px;
}
.article-meta {
  font-family: var(--mono);
  font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.article h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}
.article h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 28px;
  line-height: 1.25;
  margin: 56px 0 18px;
}
.article p {
  font-size: 19px;
  line-height: 1.7;
  margin-bottom: 22px;
  max-width: var(--reading);
}
.article p.lede {
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
}
.article hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 56px 0;
  max-width: var(--reading);
}

/* ---------- writing index ---------- */
.writing-list { margin-top: 56px; }
.writing-item {
  display: block;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
}
.writing-item:last-child { border-bottom: 1px solid var(--rule); }
.writing-item h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.writing-item p {
  color: var(--ink-soft);
  max-width: 640px;
  font-size: 17px;
}
.writing-item .writing-meta {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

/* ---------- about ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: 100px 36px;
}
@media (max-width: 800px) { .about { grid-template-columns: 1fr; gap: 40px; } }
.about-photo {
  aspect-ratio: 3 / 4;
  background: #E8E2D5;
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}
.about-text p { font-size: 19px; line-height: 1.7; margin-bottom: 22px; }

/* ---------- approach ---------- */
.principles { margin-top: 64px; }
.principle {
  padding: 36px 0;
  border-top: 1px solid var(--rule);
}
.principle:last-of-type { border-bottom: 1px solid var(--rule); }
.principle-number {
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 8px;
}
.principle h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
  margin-bottom: 12px;
}
.principle p {
  color: var(--ink-soft);
  font-size: 18px; line-height: 1.65;
  max-width: 720px;
}

.phase-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 56px;
  font-size: 16px;
}
.phase-table th, .phase-table td {
  text-align: start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.phase-table th {
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.phase-table td:first-child {
  font-weight: 500;
  font-family: var(--serif);
  font-size: 17px;
}

/* ---------- contact ---------- */
.contact {
  max-width: var(--max);
  margin: 0 auto;
  padding: 140px 36px;
}
.contact h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 820px;
}
.contact-email {
  display: inline-block;
  margin-top: 48px;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--rule);
  padding: 40px 36px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer a { text-decoration: none; color: var(--ink-soft); }
.footer a:hover { color: var(--accent); }
.footer-credentials {
  font-style: italic;
  color: var(--ink-soft);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer-social { display: flex; gap: 14px; }
@media (max-width: 680px) {
  .footer { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* ---------- utilities ---------- */
.fade { opacity: 0; transition: opacity 0.4s; }
.fade.in { opacity: 1; }

/* ============================================================
   WORK INDEX — bento traveling-focus + year-tabbed DDP edition
   ============================================================ */

.work-page-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 100px 36px 24px;
}
.work-page-header .section-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.work-page-header h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 5.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  max-width: 22ch;
}
.work-page-header .section-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

.bento-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 36px 60px;
}
.bento-section .section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--rule); padding: 24px 0 18px;
  gap: 24px; flex-wrap: wrap;
}
.bento-section .section-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 22px; letter-spacing: -0.005em; margin: 0;
}
.bento-section .section-head .right {
  display: flex; gap: 18px; align-items: baseline;
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; color: var(--ink-soft);
}
.bento-section { margin-bottom: 48px; }

/* ---- Commissioned: carousel of traveling-focus components ---- */
.bento-viewport { position: relative; }
.bento-carousel { overflow: hidden; }
.bento-track { display: flex; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.bento-page { flex: 0 0 100%; min-width: 0; }
/* each component sits at a capped height so it never collides with the text below */
.bento-page .bento {
  position: relative; width: 100%;
  height: clamp(360px, 40vw, 540px);
  margin-top: 16px;
}
/* big, elegant, minimal black arrows in the side gutters */
.bento-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6; background: none; border: none; cursor: pointer;
  color: var(--ink); font-family: var(--serif); font-size: 42px; line-height: 1;
  padding: 8px 10px; transition: color 0.2s ease, opacity 0.2s ease;
}
.bento-arrow:hover { color: var(--accent); }
.bento-arrow--prev { left: -52px; }
.bento-arrow--next { right: -52px; }
.bento-arrow[disabled] { opacity: 0.18; cursor: default; }
@media (max-width: 1180px) { .bento-arrow--prev { left: -34px; } .bento-arrow--next { right: -34px; } }
@media (max-width: 900px)  { .bento-arrow { display: none; } }

/* Removed: legacy 4x2 .bento rule — superseded by the 3x2 traveling-focus block below */
.bento .b-tile {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-deep);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.75s cubic-bezier(0.2,0.7,0.2,1),
              filter 0.75s ease;
  cursor: pointer;
  display: block;
}
.bento .b-tile-art {
  position: absolute; inset: 0;
  background-size: 200% 200%;
  animation: drift 28s ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
}
.bento .b-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  color: rgba(239, 233, 220, 0.96);
  background: linear-gradient(180deg, transparent, rgba(20,17,13,0.78) 70%);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.bento .b-tile-title {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.15; letter-spacing: -0.005em;
}
.bento .b-tile-meta {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.85;
  flex-shrink: 0;
}
.bento .b-tile:not(.hero) { filter: saturate(0.92) brightness(0.96); }
.bento .b-tile.hero { z-index: 2; filter: saturate(1.06); }
.bento .b-tile.hero .b-tile-label { padding: 22px 24px; }
.bento .b-tile.hero .b-tile-title { font-size: clamp(22px, 2.2vw, 30px); }

.art-otzera     {
  background: #1a1612 !important;
  animation: none !important;
  overflow: hidden;
}
.b-tile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.art-yad-vashem { background: radial-gradient(circle at 60% 40%, #6f6450, transparent 55%), linear-gradient(160deg, #2c2418, #5a4a36); }
.art-coffee     { background: radial-gradient(circle at 25% 70%, #542a12, transparent 55%), linear-gradient(120deg, #c19470, #8b5a35); }
.art-nfb        { background: radial-gradient(circle at 70% 30%, #4a6a82, transparent 60%), linear-gradient(180deg, #1f2a3a, #5a5d6f); }

.ddp-section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 36px 80px;
}
.ddp-section .ddp-head {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end;
  padding: 8px 0 18px;
}
@media (max-width: 760px) {
  .ddp-section .ddp-head { grid-template-columns: 1fr; }
}
.ddp-section .ddp-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -0.012em;
  line-height: 1.04; margin: 0; max-width: 22ch;
}
.ddp-section .ddp-head h2 em { font-style: italic; color: var(--accent); }
.ddp-section .ddp-sub {
  color: var(--ink-soft); margin-top: 8px; font-size: 15px;
  font-family: var(--serif); max-width: 56ch;
}
.ddp-tabs { display: flex; gap: 6px; }
.ddp-tabs button {
  background: transparent; border: 1px solid var(--rule);
  padding: 7px 16px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--ink-soft); cursor: pointer;
  border-radius: 999px;
  transition: transform 0.15s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ddp-tabs button:hover { color: var(--ink); border-color: var(--ink); }
.ddp-tabs button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ddp-tabs button:active { transform: scale(0.95); }

.ddp-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  margin-top: 22px;
}
@media (max-width: 1400px) { .ddp-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 980px)  { .ddp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .ddp-grid { grid-template-columns: repeat(2, 1fr); } }

.ddp-cell {
  aspect-ratio: 3 / 4; position: relative; border-radius: 3px; overflow: hidden;
  background: var(--paper-deep); cursor: pointer;
  text-decoration: none; color: var(--ink);
  display: block;
}
.ddp-cell .ddp-art {
  position: absolute; inset: 0;
  background-size: 200% 200%;
  animation: drift 26s ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
  transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1);
}
.ddp-cell:hover .ddp-art { transform: scale(1.06); }
.ddp-cell .ddp-overlay {
  position: absolute; inset: auto 0 0 0; padding: 10px 10px 12px;
  color: rgba(239, 233, 220, 0.96);
  background: linear-gradient(180deg, transparent, rgba(20,17,13,0.82) 65%);
}
.ddp-cell .ddp-name {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; line-height: 1.1; letter-spacing: -0.005em;
}
.ddp-cell .ddp-domain {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.82; margin-top: 4px;
}

.dc1 { background: linear-gradient(135deg, #b07a3a, #5a3a1c); }
.dc2 { background: linear-gradient(135deg, #6f543a, #2e1f12); }
.dc3 { background: linear-gradient(135deg, #4a3a2c, #c0a070); }
.dc4 { background: linear-gradient(135deg, #2c2a3a, #a86a3a); }
.dc5 { background: linear-gradient(135deg, #4a4032, #c8b78a); }
.dc6 { background: linear-gradient(135deg, #5a3a2a, #b88e5e); }
.dc7 { background: linear-gradient(135deg, #2a3640, #9f7344); }
.dc8 { background: linear-gradient(135deg, #6e3622, #d8b083); }
.dc9 { background: linear-gradient(135deg, #36302a, #8a6440); }

.ddp-foot {
  margin-top: 16px;
  display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline;
  border-top: 1px solid var(--rule); padding-top: 14px;
}
.ddp-foot .credit-line {
  font-family: var(--mono);
  font-size: 11.5px; color: var(--ink-mute);
}
.ddp-foot .credit-line strong { color: var(--ink-soft); font-weight: 500; }

@keyframes drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (max-width: 760px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    aspect-ratio: auto;
    gap: 10px;
  }
  .bento .b-tile { aspect-ratio: 4 / 3; }
  .bento .b-tile.hero {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: 16 / 9;
  }
}

/* Removed: legacy 2x2 .bento fix — superseded by the 3x2 traveling-focus block below.
   Hover effect kept here so hover still works on the new layout. */
.bento .b-tile:hover { filter: saturate(1.15) brightness(1.05); transform: translateY(-3px); }

/* ============================================================
   HERO REEL — full-frame background video + dark legibility overlay
   ============================================================ */
.hero--reel {
  position: relative;
  min-height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
}
.hero--reel {
  background: #14110d;
}
.hero--reel .hero-reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.72;
}
.hero--reel .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,17,13,0.50) 0%, rgba(20,17,13,0.70) 100%);
  z-index: 2;
  pointer-events: none;
}
.hero--reel .hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding: 80px 36px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  min-height: 100vh;
}
.hero--reel .hero-eyebrow { color: rgba(239, 233, 220, 0.78); }
.hero--reel .hero-h1 { color: #efe9dc; text-shadow: 0 1px 24px rgba(20,17,13,0.30); }
.hero--reel .hero-h1 .word--accent { color: #d8b083; }
.hero--reel .hero-sub { color: rgba(239, 233, 220, 0.88); text-shadow: 0 1px 16px rgba(20,17,13,0.30); }
.hero--reel .hero-proof { color: rgba(239, 233, 220, 0.72); }
.hero--reel .hero-proof strong { color: #efe9dc; }
.hero--reel .hero-scroll-hint { color: rgba(239, 233, 220, 0.75); z-index: 3; }

/* DDP tile typography — accommodate full "Prof. First Last" names */
.ddp-cell .ddp-name {
  font-size: 19px;
  line-height: 1.15;
}
.ddp-cell .ddp-domain {
  font-size: 11px;
  margin-top: 6px;
}
.ddp-cell .ddp-overlay {
  padding: 16px 16px 18px;
}

/* DDP testimonial — Daphna Oren Magidor on why the Foundation chose Moofa */
.ddp-testimonial {
  max-width: var(--max);
  margin: 24px auto 60px;
  padding: 60px 36px 56px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ddp-testimonial-source {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 28px;
}
.ddp-testimonial-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 880px;
  margin: 0 0 32px;
  padding: 0;
  border: none;
}
.ddp-testimonial-coda {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0;
}

/* ============================================================
   TESTIMONIAL BAND — dark, full-bleed, between sections
   ============================================================ */
.testimonial-band {
  background: var(--ink);
  color: #efe9dc;
  width: 100%;
  padding: 96px 36px 88px;
  margin: 0;
}
.testimonial-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.testimonial-band-eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239, 233, 220, 0.6);
  margin-bottom: 44px;
}
.testimonial-band-quote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: #efe9dc;
  margin: 0 auto 36px;
  max-width: 980px;
  padding: 0;
  border: none;
}
.testimonial-band-source {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d8b083;
  margin-bottom: 0;
  line-height: 1.6;
}
.testimonial-band-source small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(239, 233, 220, 0.55);
}
.testimonial-band-coda {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
  color: rgba(239, 233, 220, 0.85);
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .testimonial-band { padding: 64px 24px 56px; }
}

/* ============================================================
   HOMEPAGE REVISIONS — smaller testimonial, real bento motion,
   CTA section, dark professional footer
   ============================================================ */

/* Smaller testimonial quote — calmer, balanced lines (no orphans) */
.testimonial-band-quote {
  font-size: clamp(21px, 2.5vw, 33px);
  line-height: 1.34;
  max-width: 800px;
  text-wrap: balance;
}
.testimonial-band-quote .break {
  display: block;
  margin-top: 0.6em;
}

/* Bento — 3 cols × 2 rows with FLIP traveling-focus, 4 tiles cycle */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  aspect-ratio: 3 / 2;
  gap: 12px;
  position: relative;
  margin-top: 16px;
}
.bento .b-tile {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}
.bento .b-tile.is-staged {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease 0.15s;
}
.bento .b-tile:not(.is-staged) {
  opacity: 1;
}
@media (max-width: 720px) {
  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    aspect-ratio: auto;
    gap: 10px;
  }
  .bento .b-tile {
    aspect-ratio: 4 / 3;
    grid-column: auto !important;
    grid-row: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* CTA section — closing moment of conversion on the homepage */
.cta-section {
  background: var(--bg);
  padding: 120px 36px 140px;
  text-align: center;
}
.cta-inner {
  max-width: 920px;
  margin: 0 auto;
}
.cta-section h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
  color: var(--ink);
  text-wrap: balance;
}
.cta-email-link {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
}
.cta-email-link:hover { color: var(--ink); border-color: var(--ink); }

/* Dark band footer — professional, mirrors the testimonial */
.site-footer {
  background: var(--ink);
  color: rgba(239, 233, 220, 0.78);
  padding: 72px 36px 32px;
  margin-top: 0;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(239, 233, 220, 0.12);
}
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}
.footer-brand {
  display: flex; flex-direction: column; gap: 14px;
}
.footer-brand-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: #efe9dc;
  letter-spacing: -0.01em;
}
.footer-brand-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(239, 233, 220, 0.7);
  max-width: 44ch;
  line-height: 1.5;
  margin: 0;
}
.footer-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239, 233, 220, 0.55);
  margin-bottom: 16px;
}
.footer-contact-email {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  color: #d8b083;
  margin-bottom: 28px;
  text-decoration: none;
  border: none;
}
.footer-contact-email:hover { color: #efe9dc; }
.footer-social {
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 12px;
}
.footer-social a {
  color: rgba(239, 233, 220, 0.72);
  text-decoration: none;
}
.footer-social a:hover { color: #d8b083; }
.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: rgba(239, 233, 220, 0.5);
  gap: 16px;
}
@media (max-width: 720px) {
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* DDP cell: show extracted scholar frame on top of the gradient when present */
.ddp-cell .ddp-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   BENTO REWRITE — absolute positioning, no grid, no FLIP.
   JS sets left/top/width/height in percentages; CSS transitions
   handle the animation. Bulletproof against cascade conflicts.
   ============================================================ */
.bento {
  display: block !important;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-top: 16px;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}
.bento .b-tile {
  position: absolute;
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-deep);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  display: block;
  aspect-ratio: auto !important;
  /* Smooth transitions on all positioning + opacity */
  transition:
    left 0.85s cubic-bezier(0.2,0.7,0.2,1),
    top 0.85s cubic-bezier(0.2,0.7,0.2,1),
    width 0.85s cubic-bezier(0.2,0.7,0.2,1),
    height 0.85s cubic-bezier(0.2,0.7,0.2,1),
    opacity 0.55s ease,
    filter 0.5s ease;
  will-change: left, top, width, height, opacity;
}
.bento .b-tile.is-staged {
  opacity: 0;
  pointer-events: none;
}
.bento .b-tile.hero { z-index: 2; }
.bento .b-tile:not(.hero):not(.is-staged) { filter: saturate(0.94) brightness(0.97); }
.bento .b-tile:hover {
  filter: saturate(1.12) brightness(1.04);
}
@media (max-width: 720px) {
  .bento {
    aspect-ratio: auto;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .bento .b-tile {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ============================================================
   REF-PAIR — historical reference (left) paired with the film's
   recreation (right). No cropping; full image visible on each.
   ============================================================ */
.ref-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1420px;
  margin: 80px auto;
  padding: 0 36px;
  align-items: start;
}
.ref-pair img {
  width: 100%;
  height: clamp(290px, 33vw, 450px);
  object-fit: contain;
  object-position: center;
  display: block;
  background: rgba(20, 17, 13, 0.035);
  border-radius: 2px;
  padding: 10px;
}
.ref-pair .ref-pair-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 8px;
  display: block;
}
.ref-pair figcaption {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 16px auto 0;
  padding: 0 12px;
  max-width: 30em;
}
.ref-pair figcaption strong {
  color: var(--ink);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}
.ref-pair figcaption em { font-style: italic; }
.ref-pair figure { display: flex; flex-direction: column; align-items: stretch; }
@media (max-width: 760px) {
  .ref-pair { grid-template-columns: 1fr; gap: 16px; }
}

/* Force ALL reference images on case-study pages to never crop */
.project-still--ref img {
  object-fit: contain !important;
  background: #FFFCF6 !important;
  max-height: 76vh;
  width: 100%;
  height: auto;
}

/* ============================================================
   BENTO HOVER — visible response on touch.
   Tile lifts, scales, brightens, shadow expands.
   ============================================================ */
.bento .b-tile {
  box-shadow: 0 0 0 rgba(20,17,13,0);
  z-index: 1;
}
.bento .b-tile:hover {
  z-index: 10 !important;
  transform: translateY(-14px) scale(1.06) !important;
  box-shadow: 0 32px 80px rgba(20,17,13,0.45) !important;
  filter: saturate(1.25) brightness(1.1) !important;
  transition:
    transform 0.45s cubic-bezier(0.2,0.7,0.2,1),
    box-shadow 0.45s ease,
    filter 0.45s ease !important;
}
.bento .b-tile:hover .b-tile-art {
  animation-play-state: paused;
  transform: scale(1.18);
  transition: transform 0.65s cubic-bezier(0.2,0.7,0.2,1);
}
.bento .b-tile:hover .b-tile-label {
  padding-bottom: 22px;
  transition: padding-bottom 0.4s ease;
}
.bento .b-tile .b-tile-art {
  transition: transform 0.85s cubic-bezier(0.2,0.7,0.2,1);
}

/* ============================================================
   AUDIT BATCH (Shachaf) — carousel, client strip, about strip,
   lead form, DD eyebrow, nav CTA button
   ============================================================ */

/* Featured-client eyebrow above the Dan David stripe */
.ddp-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}

/* ---- Commissioned work: horizontal carousel ---- */
.carousel-section { max-width: var(--max); margin: 0 auto; padding: 28px 36px 60px; }
.carousel-section .section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid var(--rule); padding: 24px 0 18px; gap: 24px; flex-wrap: wrap;
}
.carousel-section .section-head h2 {
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  letter-spacing: -0.005em; margin: 0;
}
.carousel-section .section-head .right {
  font-family: var(--mono); font-size: 12px; color: var(--ink-mute);
}
.carousel-wrap { position: relative; }
.carousel {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 2px 12px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.c-tile {
  flex: 0 0 auto; width: min(440px, 82vw); aspect-ratio: 16 / 10;
  scroll-snap-align: start; position: relative; overflow: hidden;
  border-radius: 3px; background: var(--paper-deep); text-decoration: none;
  color: var(--ink); transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.c-tile:hover { transform: translateY(-3px); filter: saturate(1.08) brightness(1.03); }
.c-tile-art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.c-tile-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.c-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px;
  color: rgba(239,233,220,0.97);
  background: linear-gradient(180deg, transparent, rgba(20,17,13,0.82) 72%);
  display: flex; flex-direction: column; gap: 3px;
}
.c-tile-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #d8b083;
}
.c-tile-title {
  font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 26px);
  line-height: 1.12; letter-spacing: -0.005em;
}
.c-tile-meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.85;
}
.carousel-arrow {
  position: absolute; top: calc(50% - 24px); transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--bg); color: var(--ink); font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 3; transition: background .2s ease, color .2s ease, opacity .2s ease;
  box-shadow: 0 2px 14px rgba(20,17,13,0.14);
}
.carousel-arrow:hover { background: var(--ink); color: var(--bg); }
.carousel-arrow--prev { left: -6px; }
.carousel-arrow--next { right: -6px; }
.carousel-arrow[disabled] { opacity: 0.25; cursor: default; }
@media (max-width: 680px) { .carousel-arrow { display: none; } }

/* ---- Client wordmark strip ---- */
.client-strip { max-width: var(--max); margin: 0 auto; padding: 32px 36px; border-bottom: 1px solid var(--rule); }
.client-strip-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); text-align: center; margin-bottom: 20px;
}
.client-strip-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 40px; }
.client-strip-logos span {
  font-family: var(--serif); font-size: clamp(15px, 1.5vw, 19px); color: var(--ink-soft);
  letter-spacing: -0.01em; white-space: nowrap; opacity: 0.82;
}
@media (max-width: 680px) { .client-strip-logos { gap: 12px 24px; } }

/* ---- About Moofa strip ---- */
.about-strip {
  max-width: var(--max); margin: 0 auto; padding: 74px 36px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 44px; align-items: start;
}
@media (max-width: 760px) { .about-strip { grid-template-columns: 1fr; gap: 18px; } }
.about-strip-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.about-strip-body p { font-family: var(--serif); font-size: clamp(19px, 2vw, 25px); line-height: 1.4; color: var(--ink); margin: 0 0 20px; }
.about-strip-link { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* ---- Lead form (Pumika-style) ---- */
.lead-form-section { max-width: 920px; margin: 0 auto; padding: 82px 36px; }
.lead-form-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.lead-form-head { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 4vw, 46px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; }
.lead-form-sub { font-family: var(--serif); font-size: clamp(17px, 1.8vw, 20px); color: var(--ink-soft); margin: 0 0 40px; max-width: 52ch; }
.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.lead-form .field { display: flex; flex-direction: column; gap: 8px; }
.lead-form .field--full { grid-column: 1 / -1; }
.lead-form label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.lead-form input, .lead-form textarea, .lead-form select {
  font-family: var(--serif); font-size: 17px; color: var(--ink); background: transparent;
  border: none; border-bottom: 1px solid var(--rule); padding: 8px 0; transition: border-color .2s ease;
}
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus { outline: none; border-color: var(--accent); }
.lead-form textarea { resize: vertical; min-height: 96px; }
.lead-form .looking-for { display: flex; gap: 24px; flex-wrap: wrap; padding-top: 4px; }
.lead-form .looking-for > label { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.lead-form-submit {
  grid-column: 1 / -1; justify-self: start; margin-top: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bg); background: var(--ink); border: none; padding: 16px 40px; cursor: pointer; transition: background .2s ease;
}
.lead-form-submit:hover { background: var(--accent); }
@media (max-width: 680px) { .lead-form { grid-template-columns: 1fr; } }

/* Contact detail line under a form */
.contact-details { max-width: 920px; margin: 0 auto; padding: 0 36px 80px; display: flex; flex-wrap: wrap; gap: 14px 40px; }
.contact-details a, .contact-details span { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-soft); text-decoration: none; }
.contact-details a:hover { color: var(--accent); }

/* ---- Nav Contact button ---- */
.nav-links a.nav-cta { background: var(--ink); color: var(--bg); padding: 8px 16px; border-radius: 2px; transition: background .2s ease; }
.nav-links a.nav-cta:hover { background: var(--accent); color: var(--bg); }

/* Ref-pair column labels — bound to their own column, above the image */
.ref-pair .ref-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

/* Inline figures inside essays */
.article .essay-figure { margin: 44px 0; }
.article .essay-figure img { width: 100%; height: auto; border-radius: 3px; display: block; }
.article .essay-figure figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 10px;
}

.bento-wrap { position: relative; }

/* ============================================================
   Commissioned work — carousel of traveling-focus components.
   Self-contained namespace (.cw-*) so no legacy .bento CSS bleeds in.
   ============================================================ */
.cw { position: relative; margin-top: 16px; margin-bottom: 52px; }
.cw-viewport { overflow: hidden; }
.cw-track { display: flex; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.cw-page { flex: 0 0 100%; min-width: 0; }
.cw-stage { position: relative; width: 100%; height: clamp(380px, 42vw, 560px); }

.cw-tile {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: hidden; border-radius: 4px; text-decoration: none; color: #efe9dc;
  opacity: 0; background: var(--paper-deep);
  transition: left 0.8s cubic-bezier(0.2,0.7,0.2,1), top 0.8s cubic-bezier(0.2,0.7,0.2,1),
              width 0.8s cubic-bezier(0.2,0.7,0.2,1), height 0.8s cubic-bezier(0.2,0.7,0.2,1),
              opacity 0.5s ease, filter 0.5s ease;
  will-change: left, top, width, height, opacity;
}
.cw-tile:hover { filter: saturate(1.08) brightness(1.04); }
.cw-tile-art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cw-tile-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px;
  background: linear-gradient(180deg, transparent, rgba(20,17,13,0.82) 72%);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 14px;
}
.cw-tile-title { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 25px); line-height: 1.12; letter-spacing: -0.005em; }
.cw-tile-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.88; flex-shrink: 0; text-align: right; }

/* big, minimal, black arrows out in the side gutters (per sketch) */
.cw-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  background: none; border: none; cursor: pointer; color: var(--ink);
  font-family: var(--serif); font-size: 48px; line-height: 1; padding: 6px 10px;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.cw-arrow:hover { color: var(--accent); }
.cw-prev { left: -72px; }
.cw-next { right: -72px; }
.cw-arrow[disabled] { opacity: 0.16; cursor: default; }
@media (max-width: 1220px) { .cw-prev { left: -40px; } .cw-next { right: -40px; } }

/* mobile: stack tiles, hide arrows */
@media (max-width: 900px) {
  .cw-arrow { display: none; }
  .cw-stage { height: auto; }
  .cw-tile {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; aspect-ratio: 16 / 10;
    opacity: 1 !important; margin-bottom: 12px;
  }
}

/* Rotating testimonials — cross-fade between reviews */
/* Testimonials, 19.10: the quotes share one box, centred, so the band never changes height.
   Hand-off: the old quote lifts and blurs away (.is-leaving), then the new one rises in —
   the same motion language as the headline's rotating word. */
.tb-rotator { display: grid; align-items: center; }
.tb-slide { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(14px); filter: blur(6px); pointer-events: none;
  transition: opacity .45s ease, transform .6s ease, filter .45s ease; }
.tb-slide.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto;
  transition: opacity .7s ease .5s, transform 1s cubic-bezier(.22,1,.36,1) .5s, filter .7s ease .5s; }
.tb-slide.is-leaving { opacity: 0; transform: translateY(-12px); filter: blur(6px); }
.tb-slide .testimonial-band-source { margin-top: 8px; }
.tb-slide .testimonial-band-quote { max-width: 760px; text-wrap: balance; }
.tb-dots { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.tb-dots button { position: relative; width: 30px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.tb-dots button::before, .tb-dots button::after { content: ""; position: absolute; top: 50%; height: 1px; inset-inline-start: 0; }
.tb-dots button::before { width: 100%; background: rgba(239,233,220,.25); }
.tb-dots button::after { width: 0; background: #d8b083; }
.tb-dots button.is-on::after { width: 100%; }
.tb-dots button.is-on.is-run::after { width: 0; animation: tbFill var(--tb-hold, 7000ms) linear forwards; }
@keyframes tbFill { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .tb-slide, .tb-slide.is-active { transition: opacity .3s ease; transform: none; filter: none; } }

/* ============================================================
   PROTOTYPE — cinematic scroll treatment (Firma-inspired)
   Scoped to .proto so it can be judged on one page before it
   goes anywhere near the rest of the site.
   ============================================================ */

/* Title: name steps up to an eyebrow, headline carries the phrase alone */
.proto-eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 18px;
}
.proto-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(42px, 7vw, 104px); line-height: 0.98;
  letter-spacing: -0.03em; margin: 0 0 34px; max-width: 16ch;
  text-wrap: balance;
}
.proto-lede {
  font-family: var(--serif); font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.5; color: var(--ink-soft); max-width: 46ch; margin: 0 0 96px;
}

/* Media that actually fills the screen */
.proto-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.proto-bleed img, .proto-bleed video { width: 100%; display: block; }
.proto-figure { margin: 128px 0; }
.proto-figure figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute);
  max-width: var(--max); margin: 18px auto 0; padding: 0 36px;
}

/* Reveal with a slow settle — image grows into place rather than popping */
.proto-rise { opacity: 0; transform: translateY(64px) scale(1.04); transform-origin: center; }
.proto-rise.is-in {
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.3s cubic-bezier(.22,1,.36,1);
}

/* Parallax: media drifts slower than the page, which reads as depth */
.proto-parallax { overflow: hidden; }
.proto-parallax > * { will-change: transform; }

/* Oversized pull-quote between sections */
.proto-quote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(30px, 5vw, 68px); line-height: 1.1; letter-spacing: -0.025em;
  max-width: 20ch; margin: 152px auto; padding: 0 36px; text-wrap: balance;
}

@media (max-width: 760px) {
  .proto-figure { margin: 72px 0; }
  .proto-quote { margin: 88px auto; }
  .proto-lede { margin-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .proto-rise { opacity: 1; transform: none; }
  .proto-parallax > * { transform: none !important; }
}

/* ============================================================
   CLIENT LOGO WALL — greyscale grid, colour on hover
   ============================================================ */
.logo-wall {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px 36px 60px;
  border-bottom: 1px solid var(--rule);
}
.logo-wall-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
  text-align: center; margin-bottom: 40px;
}
.logo-wall-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 42px 34px;
  align-items: center;
}
.logo-wall-grid img {
  width: 100%;
  max-height: 52px;
  object-fit: contain;
  display: block;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.72;
  transition: filter .35s ease, opacity .35s ease;
}
.logo-wall-grid img:hover { filter: grayscale(0); opacity: 1; }
/* wordmark fallback for clients with no logo file yet */
.logo-wall-grid .logo-wordmark {
  font-family: var(--serif); font-size: 15px; line-height: 1.25;
  color: var(--ink-soft); opacity: 0.66; text-align: center;
  letter-spacing: -0.005em; transition: opacity .35s ease;
}
.logo-wall-grid .logo-wordmark:hover { opacity: 1; }
@media (max-width: 1100px) { .logo-wall-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .logo-wall-grid { grid-template-columns: repeat(3, 1fr); gap: 26px 20px; } }
@media (max-width: 420px)  { .logo-wall-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   STILL GALLERY — a run of film stills that is not a source pair
   ============================================================ */
.still-run { max-width: 1420px; margin: 74px auto; padding: 0 36px; }
.still-run-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  padding-bottom: 8px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.still-run-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.still-run-grid figure { margin: 0; }
.still-run-grid img {
  width: 100%; height: clamp(180px, 19vw, 260px); object-fit: cover;
  display: block; border-radius: 2px; background: var(--paper-deep);
}
.still-run-grid figcaption {
  font-family: var(--serif); font-size: 14px; line-height: 1.55;
  color: var(--ink-soft); margin-top: 10px;
}
.still-run-grid figcaption strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
@media (max-width: 900px) { .still-run-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .still-run-grid { grid-template-columns: 1fr; } }

/* one still, full width, for a turning point */
.still-wide { max-width: 1420px; margin: 74px auto; padding: 0 36px; }
.still-wide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 2px; }
.still-wide figcaption {
  font-family: var(--serif); font-size: 15px; line-height: 1.6;
  color: var(--ink-soft); margin-top: 12px; max-width: 68ch;
}
.still-wide figcaption strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   STILL BOX — a panel of large stills, for the moments that carry
   the film's craft. Bigger than .still-run, and framed.
   ============================================================ */
.still-box {
  max-width: 1420px; margin: 78px auto; padding: 40px 36px 34px;
  background: rgba(20, 17, 13, 0.045);
  border: 1px solid var(--rule); border-radius: 3px;
}
.still-box-label {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px;
}
.still-box-intro {
  font-family: var(--serif); font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5; color: var(--ink); max-width: 74ch; margin: 0 0 30px;
}
.still-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.still-box-grid figure { margin: 0; }
.still-box-grid img {
  width: 100%; height: clamp(260px, 30vw, 420px); object-fit: cover;
  display: block; border-radius: 2px; background: var(--paper-deep);
}
.still-box-grid figcaption {
  font-family: var(--serif); font-size: 15px; line-height: 1.6;
  color: var(--ink-soft); margin-top: 12px;
}
.still-box-grid figcaption strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 4px; }
@media (max-width: 780px) { .still-box-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ALTERNATING STILLS — image one side, text the other, no panel.
   Frames are never cropped: full 16:9, height follows width.
   ============================================================ */
.still-alt {
  max-width: 1420px; margin: 96px auto; padding: 0 36px;
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 48px; align-items: center;
}
.still-alt--right { grid-template-columns: 1fr 1.35fr; }
.still-alt--right .still-alt-media { order: 2; }
.still-alt--right .still-alt-text  { order: 1; }
.still-alt-media img {
  width: 100%; height: auto; display: block; border-radius: 2px;
}
.still-alt-text h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.1vw, 28px); line-height: 1.2;
  letter-spacing: -0.012em; color: var(--ink); margin: 0 0 14px;
  text-wrap: balance;
}
.still-alt-text p {
  font-family: var(--serif); font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.66; color: var(--ink-soft); margin: 0;
}
.still-alt-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
@media (max-width: 820px) {
  .still-alt, .still-alt--right { grid-template-columns: 1fr; gap: 22px; margin: 64px auto; }
  .still-alt--right .still-alt-media { order: 1; }
  .still-alt--right .still-alt-text  { order: 2; }
}
/* full-width stills must never crop either */
.still-wide img { aspect-ratio: auto; height: auto; }

/* About — closing line and CTA */
.about-close {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(21px, 2.2vw, 30px); line-height: 1.25;
  letter-spacing: -0.015em; color: var(--ink);
  margin-top: 42px; text-wrap: balance;
}
.about-close .about-cta {
  display: inline-block; margin-top: 18px;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bg); background: var(--ink);
  padding: 15px 32px; border: none; transition: background .2s ease;
}
.about-close .about-cta:hover { background: var(--accent); }

/* Project credits — aligned label/value pairs */
.credits {
  display: grid; grid-template-columns: auto 1fr;
  gap: 10px 28px; margin: 0; font-size: 16px;
  border-top: 1px solid var(--rule); padding-top: 22px;
}
.credits dt {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-mute);
  padding-top: 3px; white-space: nowrap;
}
.credits dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 640px) {
  .credits { grid-template-columns: 1fr; gap: 2px 0; }
  .credits dd { margin-bottom: 14px; }
}

/* Collection object beside the frame drawn from it.
   The film is 16:9 and the objects are not, so the film takes the
   width it needs and the photograph sits beside it at its own shape. */
.obj-pair {
  max-width: 1420px; margin: 96px auto; padding: 0 36px;
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: 44px; align-items: start;
}
.obj-pair--right { grid-template-columns: 1fr 1.55fr; }
.obj-pair--right .obj-pair-film { order: 2; }
.obj-pair--right .obj-pair-obj  { order: 1; }
.obj-pair-film video {
  width: 100%; height: auto; display: block; border-radius: 2px;
}
.obj-pair-obj img {
  width: 100%; height: auto; display: block; border-radius: 2px;
  background: rgba(20,17,13,0.035);
}
.obj-pair-obj .ref-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
  padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.obj-pair-cap {
  font-size: 16px; line-height: 1.55; color: var(--ink-soft);
  margin: 16px 0 0; text-wrap: pretty;
}
.obj-pair-cap strong {
  display: block; color: var(--ink); font-weight: 600; margin-bottom: 5px;
}
@media (max-width: 860px) {
  .obj-pair, .obj-pair--right { grid-template-columns: 1fr; gap: 34px; }
  .obj-pair--right .obj-pair-film,
  .obj-pair--right .obj-pair-obj { order: initial; }
}

/* Commissioned strip — a static grid. Tiles no longer cycle, so they
   are laid out in flow rather than positioned absolutely by script. */
.cw-stage {
  height: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.cw-tile {
  position: relative; left: auto; top: auto;
  width: auto; height: clamp(230px, 24vw, 320px);
  opacity: 1;
}
@media (max-width: 700px) {
  .cw-stage { grid-template-columns: 1fr; }
  .cw-tile { height: clamp(210px, 56vw, 280px); }
}

/* Keep each page of the strip to its own row, and stop the label
   text spilling out of the tile. */
.cw-viewport { overflow: hidden; }
.cw-track { display: flex; }
.cw-page { flex: 0 0 100%; min-width: 100%; }
.cw-tile-label {
  gap: 16px;
  align-items: flex-end;
}
.cw-tile-title { flex: 1 1 auto; min-width: 0; }
.cw-tile-meta {
  flex: 0 0 auto; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.82;
}
.cw-arrow:disabled { opacity: 0.18; cursor: default; }

/* Anchored sections must clear the sticky nav when jumped to. */
[id] { scroll-margin-top: 96px; }

/* ── Dan David Prize hub ────────────────────────────────────── */
.ddp-stats {
  max-width: 1420px; margin: 40px auto 24px; padding: 26px 36px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.ddp-stats div { display: flex; flex-direction: column; gap: 4px; }
.ddp-stats strong {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 4vw, 54px); line-height: 1; letter-spacing: -0.02em;
  color: var(--ink);
}
.ddp-stats span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ddp-year { max-width: 1420px; margin: 84px auto 0; padding: 0 36px; }
.ddp-year-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding-bottom: 16px; margin-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}
.ddp-year-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); margin: 0;
}
.ddp-year-head span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ddp-year .ddp-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 18px;
}
.ddp-year .ddp-cell { text-decoration: none; display: block; }
.ddp-year .ddp-thumb {
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px;
  background: var(--paper-deep); margin-bottom: 11px;
}
.ddp-year .ddp-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.ddp-year .ddp-cell:hover .ddp-thumb img { transform: scale(1.04); }
.ddp-year .ddp-name {
  font-family: var(--serif); font-size: 18px; line-height: 1.2;
  color: var(--ink); text-wrap: balance;
}
.ddp-year .ddp-domain {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 4px;
}
@media (max-width: 1180px) { .ddp-year .ddp-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .ddp-year .ddp-grid { grid-template-columns: repeat(3, 1fr); }
                             .ddp-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .ddp-year .ddp-grid { grid-template-columns: repeat(2, 1fr); }
                             .ddp-year, .ddp-stats { padding-left: 20px; padding-right: 20px; } }

/* The homepage grid fixes .ddp-cell to the thumbnail's height and clips
   the rest; on the edition page the name and field sit below the image. */
.ddp-year .ddp-cell { height: auto; overflow: visible; }

/* About — the studio photograph replaces the placeholder box */
.about-photo { margin: 0; padding: 0; border: none; background: none; display: block; aspect-ratio: auto; }
.about-photo img { width: 100%; height: auto; display: block; border-radius: 2px; }
.about-photo figcaption,
.studio-band figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 10px;
}
.studio-band { margin: 42px 0; padding: 0; }
.studio-band img { width: 100%; height: auto; display: block; border-radius: 2px; }
.studio-band img + img { margin-top: 12px; }
@media (min-width: 700px) {
  .studio-band { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .studio-band img + img { margin-top: 0; }
  .studio-band figcaption { grid-column: 1 / -1; }
}

/* ── About as a magazine: big pictures, no captions ───────── */
.about-mag { max-width: 1420px; margin: 24px auto 0; padding: 0 36px 40px; }
.about-mag figure { margin: 0; }
.mag-full img, .mag-wide img, .mag-pair img {
  width: 100%; height: auto; display: block; border-radius: 2px;
}
.mag-full { margin: 0 0 64px; }
.mag-wide { max-width: 980px; margin: 0 auto 64px; }
.mag-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 0 0 64px;
}
.mag-text {
  max-width: 720px; margin: 0 auto 72px;
  font-family: var(--serif); font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.6; color: var(--ink-soft);
}
.mag-text p + p { margin-top: 22px; }
.mag-text strong { color: var(--ink); font-weight: 600; }
.mag-text a { color: var(--accent); }
@media (max-width: 700px) {
  .about-mag { padding: 0 20px 24px; }
  .mag-pair { grid-template-columns: 1fr; gap: 12px; }
  .mag-full, .mag-wide, .mag-pair { margin-bottom: 44px; }
  .mag-text { margin-bottom: 52px; }
}

/* Essays as magazine pieces: a standfirst up top, big pictures, short copy */
.article--mag { max-width: 1100px; }
.article--mag h1 { font-size: clamp(38px, 5.4vw, 72px); letter-spacing: -0.025em; line-height: 1.02; max-width: 15ch; }
.essay-brief {
  margin: 44px 0 56px; padding: 30px 0 34px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: start;
}
.essay-brief-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); padding-top: 10px;
}
.essay-brief p {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 2.5vw, 34px); line-height: 1.28; letter-spacing: -0.012em;
  color: var(--ink); text-wrap: balance;
}
.article--mag > p { max-width: 720px; }
.article--mag .lede { font-size: clamp(18px, 1.6vw, 22px); }
.essay-figure--full { margin: 52px 0 40px; }
.essay-figure--full img { width: 100%; height: auto; display: block; border-radius: 2px; }
.essay-figure--full figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 10px;
}
@media (max-width: 640px) { .essay-brief { grid-template-columns: 1fr; gap: 10px; } }

/* Hebrew preview: fonts + a few things that must mirror */
html[dir="rtl"] { --serif: "Frank Ruhl Libre", "IBM Plex Serif", Georgia, serif; --sans: "Heebo", "Geist", system-ui, sans-serif; }
html[dir="rtl"] .article--mag h1 { letter-spacing: 0; max-width: 18ch; }
html[dir="rtl"] .essay-brief p { letter-spacing: 0; }
html[dir="rtl"] .essay-brief-label, html[dir="rtl"] .essay-figure--full figcaption,
html[dir="rtl"] .materials figcaption, html[dir="rtl"] .article-meta { letter-spacing: 0.04em; }

/* Dan David — the events, magazine style, no captions */
.ev { max-width: 1420px; margin: 24px auto 96px; padding: 0 36px; }
.ev figure { margin: 0 0 16px; }
.ev img { width: 100%; height: auto; display: block; border-radius: 2px; }
.ev-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 16px; }
.ev-credit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 18px; }
@media (max-width: 700px) { .ev { padding: 0 20px; } .ev-pair { grid-template-columns: 1fr; gap: 12px; } }

/* Edition page: cells must shrink with the grid on narrow screens.
   The homepage rule gives .ddp-cell a fixed width for its own carousel. */
.ddp-year .ddp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ddp-year .ddp-cell { width: auto; min-width: 0; max-width: 100%; flex: none; }
@media (max-width: 1180px) { .ddp-year .ddp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ddp-year .ddp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .ddp-year .ddp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-lead { margin-bottom: 28px; }
.ev-lead figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 10px; }

/* Our Story — three films, three cards */
.os-cards { max-width: 1420px; margin: 24px auto 96px; padding: 0 36px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.os-card { text-decoration: none; color: var(--ink); display: block; }
.os-card-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--paper-deep); margin-bottom: 16px; }
.os-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.os-card:hover .os-card-img img { transform: scale(1.03); }
.os-card-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.os-card h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 10px; }
.os-card p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0; text-wrap: pretty; }
@media (max-width: 900px) { .os-cards { grid-template-columns: 1fr; gap: 40px; } }

/* Archival prints beside the film's frames: smaller, so they read as documents, not scenes */
.still-alt--photo .still-alt-media img { max-width: 62%; margin: 0 auto; display: block; }
@media (max-width: 700px) { .still-alt--photo .still-alt-media img { max-width: 80%; } }

/* Work index tiles: a looping clip fills the art box like the homepage tiles */
.bento .b-tile-art { overflow: hidden; }
.bento .b-tile-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---- About, 15.10: breathing room, a separated team block, the studio carousel, the invitation ---- */
.mag-text--lead { margin-top: 56px; }
.mag-text--team { padding-top: 56px; border-top: 1px solid var(--rule); margin-bottom: 48px; }

.about-car { position: relative; margin: 0 0 80px; }
.about-car-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; scroll-padding: 0;
}
.about-car-track::-webkit-scrollbar { display: none; }
.about-car-slide {
  flex: 0 0 calc(50% - 8px); scroll-snap-align: start; margin: 0;
}
.about-car-slide img {
  width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover;
  display: block; border-radius: 2px;
}
.about-car-slide figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 10px;
}
.about-car-arrow {
  position: absolute; top: calc((100% - 32px) / 2 - 22px); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--bg); color: var(--ink); font-size: 18px; cursor: pointer;
  display: grid; place-items: center; transition: background .2s ease, color .2s ease;
}
.about-car-arrow:hover { background: var(--ink); color: var(--bg); }
.about-car-arrow--prev { left: -8px; }
.about-car-arrow--next { right: -8px; }

.about-invite {
  background: var(--ink); color: var(--bg);
  padding: clamp(72px, 10vw, 140px) 36px;
  text-align: center;
}
.about-invite-inner { max-width: 880px; margin: 0 auto; }
.about-invite-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 26px;
}
.about-invite-head {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 5vw, 68px); line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 26px; text-wrap: balance;
}
.about-invite-sub {
  font-family: var(--serif); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6;
  color: var(--paper-deep); opacity: .82; max-width: 640px; margin: 0 auto 40px;
}
.about-invite-cta {
  display: inline-block; font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: var(--bg); padding: 18px 40px; border-radius: 2px;
  transition: background .2s ease, color .2s ease;
}
.about-invite-cta:hover { background: var(--accent); color: var(--bg); }

@media (max-width: 700px) {
  .mag-text--lead { margin-top: 36px; }
  .mag-text--team { padding-top: 40px; }
  .about-car-slide { flex-basis: 88%; }
  .about-car-arrow { display: none; }
  .about-invite { padding: 64px 20px; }
}


/* ---- Home, 15.10: the invitation stands apart, and the form reads as a sentence ---- */
.lead-form-section { border-top: 1px solid var(--rule); margin-top: 48px; padding-top: 120px; padding-bottom: 120px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lead-form--typo { display: block; max-width: 760px; position: relative; }
.ty-line {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.7; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 18px;
}
.ty-gap { display: inline-block; vertical-align: baseline; }
.ty-gap input {
  font: inherit; color: var(--accent); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  padding: 0 4px 2px; margin: 0 2px; min-width: 60px; max-width: 100%;
  transition: border-color .2s ease;
}
.ty-gap input::placeholder { color: var(--ink-mute); font-style: italic; opacity: 1; }
.ty-gap input:focus { outline: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.ty-ruler { position: absolute; left: -9999px; top: 0; white-space: pre; font: inherit; font-size: clamp(24px, 3vw, 38px); font-weight: 300; letter-spacing: -0.01em; visibility: hidden; }

.ty-choice { display: inline; white-space: nowrap; }
.ty-choice label { display: inline; cursor: pointer; }
.ty-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.ty-choice label span {
  display: inline-block; padding: 0 4px 2px; margin: 0 2px;
  border-bottom: 1px dashed var(--ink-mute); color: var(--ink-mute); font-style: italic;
  transition: color .2s ease, border-color .2s ease;
}
.ty-choice label:hover span { color: var(--ink); }
.ty-choice input:checked + span { color: var(--accent); font-style: normal; border-bottom: 1px solid var(--ink); }
.ty-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.ty-or { color: var(--ink-mute); font-style: italic; }

.lead-form--typo .lead-form-submit { margin-top: 28px; }
@media (max-width: 680px) {
  .lead-form-section { padding-top: 80px; padding-bottom: 80px; }
  .ty-line { font-size: 22px; line-height: 1.75; }
  .ty-choice { white-space: normal; }
}
.lead-form--typo .ty-choice label { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.lead-form--typo .ty-choice label span { font-size: inherit; }


/* ---- Home, 15.10 (take two): the invitation as one band, one field ---- */
.invite-band {
  background: var(--accent); color: var(--bg);
  margin-top: 48px; padding: clamp(88px, 11vw, 150px) 36px;
  text-align: center;
}
.invite-band-inner { max-width: 820px; margin: 0 auto; }
.invite-band-eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: .85; margin-bottom: 26px;
}
.invite-band-head {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(38px, 6vw, 80px); line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 24px; text-wrap: balance; color: var(--bg);
}
.invite-band-sub {
  font-family: var(--serif); font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5;
  margin: 0 auto 44px; max-width: 34ch; opacity: .92;
}
.invite-form { max-width: 520px; margin: 0 auto; }
.invite-pill {
  display: flex; align-items: center; background: var(--bg); border-radius: 999px;
  padding: 6px 6px 6px 28px; box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.invite-pill input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--serif); font-size: 19px; color: var(--ink); padding: 12px 0;
}
.invite-pill input::placeholder { color: var(--ink-mute); opacity: 1; }
.invite-pill button {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--ink); color: var(--bg); font-size: 22px; cursor: pointer;
  display: grid; place-items: center; transition: background .2s ease, transform .2s ease;
}
.invite-pill button:hover { background: #000; transform: translateX(2px); }
.invite-pill:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.invite-band-ways { margin-top: 36px; display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.invite-band-ways a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bg); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 3px;
}
.invite-band-ways a:hover { border-color: var(--bg); }
@media (max-width: 680px) {
  .invite-band { padding: 72px 20px; }
  .invite-pill { padding-left: 20px; }
  .invite-pill input { font-size: 17px; }
}


/* ---- Home, 15.10 (take three): black band, the word moves, two lines ---- */
.invite-band { background: var(--ink); color: var(--bg); }
.invite-band-eyebrow { color: var(--accent); opacity: 1; }
.invite-band-head { color: var(--bg); margin-bottom: 44px; }
.invite-rot { display: inline-block; color: #d8b083; font-style: italic; font-weight: 400; }
.invite-band .rotator { text-align: left; }
.invite-band-sub { display: none; }

.invite-line {
  display: block; width: 100%; box-sizing: border-box;
  background: transparent; border: 0; border-bottom: 1px solid rgba(239,233,220,.35);
  border-radius: 0; color: var(--bg); outline: none;
  font-family: var(--serif); font-size: clamp(18px, 1.7vw, 22px); font-weight: 300;
  padding: 14px 4px 14px; margin: 0 0 26px; text-align: center;
  transition: border-color .2s ease;
}
.invite-line::placeholder { color: rgba(239,233,220,.55); opacity: 1; }
.invite-line:focus { border-bottom-color: var(--accent); }

.invite-pill { box-shadow: none; }
.invite-pill button { background: var(--accent); color: var(--bg); }
.invite-pill button:hover { background: #c2702a; }
.invite-pill:focus-within { box-shadow: 0 0 0 3px rgba(162,90,31,.55); }
.invite-band-ways a { border-bottom-color: rgba(239,233,220,.35); }


/* ---- Home band, 15.10: the headline is the hero's headline, same type, same entrance, same breath ---- */
.invite-band .hero-h1--band {
  color: var(--bg); font-size: clamp(34px, 5vw, 66px); margin: 0 0 44px;
  text-align: center; white-space: nowrap;
}
.invite-band .hero-h1--band .word--accent { color: #d8b083; }
.invite-band .hero-h1--band .word--line2 { display: block; margin-right: 0; }
.invite-band .hero-h1--band .word { animation-play-state: paused; }
.invite-band .hero-h1--band.is-on .word { animation-play-state: running; }
@media (max-width: 760px) {
  .invite-band .hero-h1--band { white-space: normal; }
}


/* ---- Contact, 15.10: the whole form, on black, in the hero's type ---- */
.reveal[data-delay="5"] { transition-delay: 0.40s; }
.reveal[data-delay="6"] { transition-delay: 0.48s; }
.reveal[data-delay="7"] { transition-delay: 0.56s; }
.contact-stage { background: var(--ink); color: var(--bg); padding: clamp(96px, 12vw, 160px) 36px clamp(80px, 9vw, 120px); }
.contact-stage-inner { max-width: 980px; margin: 0 auto; }
.contact-stage-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px; }
.contact-stage .contact-stage-head { text-align: left; margin: 0 0 clamp(48px, 6vw, 84px); font-size: clamp(40px, 6.2vw, 92px); }
.contact-stage .hero-h1--band .word--accent { color: #d8b083; }

.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; }
.cf-field { display: flex; flex-direction: column; gap: 10px; }
.cf-field--full { margin-top: 48px; }
.cf-field label, .cf-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(239,233,220,.6);
}
.cf-field input, .cf-field textarea {
  width: 100%; box-sizing: border-box; background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(239,233,220,.3); color: var(--bg); outline: none;
  font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3;
  padding: 6px 0 12px; transition: border-color .25s ease;
}
.cf-field input::placeholder, .cf-field textarea::placeholder { color: rgba(239,233,220,.28); opacity: 1; }
.cf-field input:focus, .cf-field textarea:focus { border-bottom-color: #d8b083; }
.cf-field textarea { resize: vertical; min-height: 3.2em; }

.cf-chips { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.cf-chips label { cursor: pointer; }
.cf-chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf-chips span {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  border: 1px solid rgba(239,233,220,.35); color: var(--bg);
  font-family: var(--serif); font-size: 18px; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.cf-chips label:hover span { border-color: var(--bg); transform: translateY(-1px); }
.cf-chips input:checked + span { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.cf-chips input:focus-visible + span { outline: 2px solid #d8b083; outline-offset: 3px; }

.cf-actions { margin-top: 56px; }
.cf-submit {
  display: inline-flex; align-items: center; gap: 18px; cursor: pointer;
  background: var(--accent); color: var(--bg); border: 0; border-radius: 999px;
  font-family: var(--serif); font-size: 22px; padding: 18px 18px 18px 34px;
  transition: background .2s ease, transform .2s ease;
}
.cf-submit span {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-size: 20px; transition: transform .25s ease;
}
.cf-submit:hover { background: #c2702a; }
.cf-submit:hover span { transform: translateX(4px); }

.contact-details { padding-top: 56px; }
@media (max-width: 680px) {
  .contact-stage { padding: 80px 20px 64px; }
  .cf-grid { grid-template-columns: 1fr; gap: 32px; }
  .cf-field input, .cf-field textarea { font-size: 22px; }
}
.cf-chips label, .cf-chips span { text-transform: none; letter-spacing: 0; }

/* ---- Work pages, 15.10: credits ride with the film; the page closes on the band ---- */
.credits--lede {
  display: flex; flex-wrap: wrap; gap: 14px 44px; margin: -40px 0 72px; padding-top: 22px;
  border-top: 1px solid var(--rule); max-width: 1100px; font-size: 16px;
}
.credits--lede > div { display: flex; flex-direction: column; gap: 4px; }
.credits--lede dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); }
.credits--lede dd { margin: 0; font-family: var(--serif); color: var(--ink); }
.invite-band--work { margin-top: 110px; }
.invite-band--work .hero-h1--band { font-size: clamp(32px, 4.6vw, 60px); }
.invite-band-cta {
  display: inline-block; font-family: var(--serif); font-size: 20px; text-decoration: none;
  color: var(--ink); background: var(--bg); padding: 16px 36px; border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.invite-band-cta:hover { background: var(--accent); color: var(--bg); }
.invite-band--work .invite-band-ways { margin-top: 40px; }
@media (max-width: 640px) { .credits--lede { gap: 12px 28px; margin-top: -24px; } }


/* ---- Work, 18.10: the catalogue - every film in one grid, a filter row, nothing from the home page ---- */
.work-page-header--cat { padding-bottom: 8px; }
.cat-section { max-width: var(--max); margin: 0 auto; padding: 24px 36px 40px; }
.cat-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 0 26px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 32px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
.cat-filters button {
  background: transparent; border: 1px solid var(--rule); border-radius: 999px;
  padding: 8px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink-soft); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cat-filters button:hover { color: var(--ink); border-color: var(--ink); }
.cat-filters button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cat-count { opacity: .6; margin-left: 4px; }
.cat-filters button.on .cat-count { opacity: .7; }
.cat-edition { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.cat-edition:hover { border-bottom-color: var(--accent); }

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 22px; }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; } }
.cat-tile { display: block; text-decoration: none; color: var(--ink); opacity: 1; transform: translateY(0); transition: opacity .35s ease, transform .35s ease; }
.cat-tile.is-hidden { display: none; }
.cat-art { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--paper-deep); position: relative; }
.cat-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cat-tile:hover .cat-art img { transform: scale(1.04); }
.cat-title { font-family: var(--serif); font-size: 19px; line-height: 1.2; margin-top: 12px; }
.cat-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-top: 6px; line-height: 1.5; }
@media (max-width: 700px) { .cat-filters { position: static; } .cat-edition { margin-left: 0; width: 100%; margin-top: 6px; } }

/* ---- Film pages, 18.10: originals from the archive ---- */
.arch { max-width: 1420px; margin: 72px auto 96px; padding: 0 36px; }
.arch-head { max-width: 720px; margin: 0 auto 28px; }
.arch-head p { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }
.arch-grid figure { margin: 0; }
.arch-grid img { width: 100%; height: clamp(220px, 24vw, 340px); object-fit: contain; display: block; background: var(--paper-deep); border-radius: 2px; padding: 12px; box-sizing: border-box; }
.arch-grid figcaption { font-family: var(--serif); font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 900px) { .arch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .arch-grid { grid-template-columns: 1fr; } .arch { padding: 0 20px; } }

/* ---- Film pages, 18.10: a few seconds of the film in the "what we did with it" slot ---- */
.ref-pair video.ref-clip { width: 100%; height: clamp(290px, 33vw, 450px); object-fit: contain; display: block; background: var(--paper-deep); border-radius: 2px; }


/* ---- Forms, 19.10: in-place confirmation only (the heavy label version was reverted) ---- */
.form-status { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--bg); margin: 22px 4px 0; text-align: left; }
.form-status::before { content: "\2713"; display: inline-block; margin-right: 10px; color: #d8b083; }
.invite-form.is-sent .invite-line, .invite-form.is-sent .invite-pill,
.contact-form.is-sent .cf-grid, .contact-form.is-sent .cf-field, .contact-form.is-sent .cf-actions { opacity: .35; pointer-events: none; }


/* ---- Home band form, 19.10 (option F1, still): two matched lines, a gold italic prompt, the arrow on the line ---- */
.invite-form { max-width: 560px; text-align: left; }
.iv-line { display: flex; align-items: center; border-bottom: 1.5px solid rgba(239,233,220,.6); transition: border-color .2s ease; }
.iv-line + .iv-line { margin-top: 16px; }
.iv-line:hover { border-bottom-color: rgba(239,233,220,.85); }
.iv-line:focus-within { border-bottom-color: #d8b083; }
.iv-line input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--bg);
  font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2vw, 25px); padding: 14px 0; }
.iv-line input::placeholder { color: #d8b083; font-style: italic; opacity: 1; }
.iv-line input.iv-plain::placeholder { color: rgba(239,233,220,.75); font-style: normal; }
.iv-actions { display: flex; justify-content: flex-end; margin-top: 30px; }
.iv-send { display: inline-flex; align-items: center; gap: 12px; border: 0; border-radius: 999px; padding: 15px 30px; background: var(--accent); color: var(--bg);
  font-family: var(--serif); font-size: 19px; cursor: pointer; transition: background .2s ease; }
.iv-send span { font-size: 20px; transition: transform .2s ease; }
.iv-send:hover { background: #c2702a; }
.iv-send:hover span { transform: translateX(4px); }
.invite-form.is-sent .iv-line { opacity: .35; pointer-events: none; }
@media (max-width: 680px) { .iv-actions { justify-content: stretch; } .iv-send { width: 100%; justify-content: center; } }


/* ============================================================
   HEBREW / RTL, 19.10 — everything here is scoped to Hebrew pages
   (<html lang="he" dir="rtl">) and changes nothing in English.
   Fonts: Latin keeps IBM Plex; Hebrew letters fall through to
   Frank Ruhl Libre (serif) and IBM Plex Sans Hebrew (labels).
   Each Hebrew page loads those two from Google Fonts in its head.
   ============================================================ */

/* The language switch, in the nav of a page and its twin. Quiet on purpose. */
.nav-links a.nav-lang { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-mute); }
.nav-links a.nav-lang:hover { color: var(--accent); }
.nav-links a.nav-lang:lang(he) { font-family: 'Frank Ruhl Libre', var(--serif); font-size: 16px; }
.nav-links a.nav-lang:lang(en) { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; letter-spacing: 0.02em; }

:lang(he) {
  --serif: 'Frank Ruhl Libre', 'David Libre', 'IBM Plex Serif', Georgia, serif;
  --sans: 'IBM Plex Sans Hebrew', 'Heebo', 'Geist', system-ui, sans-serif;
  --mono: 'IBM Plex Sans Hebrew', 'Heebo', 'IBM Plex Mono', ui-monospace, monospace;
}
/* Hebrew fonts come first so a Latin name inside a Hebrew sentence matches the
   size and spacing around it (Plex Latin sets larger, and Plex Mono's space is
   a full monospace cell). Text marked lang="en" on a Hebrew page — the brand
   name, film titles in English — goes back to the English faces. */
:lang(he) [lang="en"], :lang(he) .nav-logo, :lang(he) .footer-brand {
  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Hebrew has no true italic; a slanted Hebrew face reads as a mistake.
   Accent words keep their colour and lose the slant. */
html:lang(he) :not(:lang(en)),
html:lang(he) input::placeholder { font-style: normal !important; }

/* Hebrew labels: no wide tracking, a touch larger (Hebrew sets small). */
:lang(he) .nav-links,
:lang(he) .hero-eyebrow:not(:lang(en)), :lang(he) .hero-scroll-hint,
:lang(he) .logo-wall-label, :lang(he) .section-head .right,
:lang(he) .ddp-eyebrow, :lang(he) .ddp-domain, :lang(he) .credit-line,
:lang(he) .testimonial-band-eyebrow, :lang(he) .testimonial-band-source small,
:lang(he) .about-strip-eyebrow, :lang(he) .about-strip-link,
:lang(he) .invite-band-eyebrow, :lang(he) .invite-band-ways a,
:lang(he) .cw-tile-meta, :lang(he) .article-meta,
:lang(he) .credits--lede dt, :lang(he) .project-text-eyebrow, :lang(he) .still-alt-eyebrow,
:lang(he) .footer-links, :lang(he) .footer-right { letter-spacing: 0.01em; }
:lang(he) .nav-links { font-size: 15px; }
:lang(he) .cw-tile-meta { font-size: 12px; }
:lang(he) .credits--lede dt, :lang(he) .project-text-eyebrow, :lang(he) .still-alt-eyebrow,
:lang(he) .invite-band-eyebrow, :lang(he) .about-strip-eyebrow, :lang(he) .testimonial-band-eyebrow,
:lang(he) .logo-wall-label, :lang(he) .article-meta, :lang(he) .ddp-eyebrow { font-size: 13px; }

/* Hebrew display type: the English tightening (-0.025em) crowds Hebrew letters. */
:lang(he) .hero-h1, :lang(he) h1, :lang(he) h2, :lang(he) h3 { letter-spacing: 0 !important; }
:lang(he) .hero-sub, :lang(he) .project-text p, :lang(he) .still-alt-text p, :lang(he) .ddp-sub { line-height: 1.7; }
:lang(he) .still-alt-text p { font-size: clamp(16.5px, 1.6vw, 18.5px); }
:lang(he) .still-alt-text h3 { font-size: clamp(23px, 2.3vw, 31px); }

/* ---- Mirroring: everything the English layout pins to a side ---- */
[dir="rtl"] .hero-h1 .word { margin-right: 0; margin-left: 0.22em; }
@media (max-width: 760px) { [dir="rtl"] .hero-h1 .word:last-child { margin-left: 0; } }
[dir="rtl"] .invite-band .rotator { text-align: right; }
[dir="rtl"] .invite-band .hero-h1--band .word--line2 { margin-left: 0; }

[dir="rtl"] .cw-prev { left: auto; right: -72px; }
[dir="rtl"] .cw-next { right: auto; left: -72px; }
@media (max-width: 1220px) { [dir="rtl"] .cw-prev { left: auto; right: -40px; } [dir="rtl"] .cw-next { right: auto; left: -40px; } }
[dir="rtl"] .cw-tile-meta { text-align: left; }

[dir="rtl"] .invite-form { text-align: right; }
[dir="rtl"] .iv-send:hover span { transform: translateX(-4px); }
[dir="rtl"] .form-status { text-align: right; }
[dir="rtl"] .form-status::before { margin-right: 0; margin-left: 10px; }

@media (max-width: 820px) {
  [dir="rtl"] .nav-logo { padding-right: 0; padding-left: 14px; }
}

/* Hebrew home hero, 19.10 (option B, chosen by Daniella): one centred composition,
   headline and a two-line sub-line on the same centre line. No eyebrow above the headline. */
.hero--centered .hero-content { align-items: center; text-align: center; }
.hero-sub--split { margin-top: 24px; max-width: none; font-size: clamp(17px, 1.55vw, 20px); line-height: 1.7; }
.hero-sub--split .hs-line { display: block; }
@media (max-width: 760px) {
  .hero-sub--split { font-size: 17px; }
}

/* Hebrew home, 19.10: the Dan David section sits closer to the works above it (Daniella: too much space). */
:lang(he) .bento-section { margin-bottom: 0; padding-bottom: 0; }
:lang(he) .ddp-section { padding-top: 8px; }

/* Film pages, 19.10: the ceremony photo under "The Dan David films" — where the films are first seen. */
.ceremony-figure { max-width: 1100px; margin: 8px auto 0; padding: 0 36px; }
.ceremony-figure img { width: 100%; height: auto; display: block; border-radius: 2px; }
.ceremony-figure figcaption { font-family: var(--serif); font-size: 14px; color: var(--ink-mute); margin-top: 10px; }
@media (max-width: 560px) { .ceremony-figure { padding: 0 20px; } }
.ceremony-figure video { width: 100%; height: auto; display: block; border-radius: 2px; background: #14110d; aspect-ratio: 16 / 9; }
.ceremony-figure--video { max-width: var(--max); margin: 8px auto 24px; } /* same column as the page text above it */

/* ---- Client logo on case studies: alone, above the eyebrow, in one flat ink tone (chosen 20.10.2026) ---- */
.client-logo {
  display: block; height: 44px; width: auto; max-width: min(340px, 100%);
  margin: 0 0 40px; object-fit: contain; object-position: left center;
  filter: brightness(0); opacity: 0.8;
}
@media (max-width: 680px) { .client-logo { height: 36px; margin-bottom: 28px; } }
/* wide, text-heavy logos (e.g. the Mayer Museum) read far bigger at the same height */
.client-logo.client-logo--small { height: 22px; margin-bottom: 28px; }
@media (max-width: 680px) { .client-logo.client-logo--small { height: 18px; margin-bottom: 22px; } }

/* Services, 20.10: a photo inside a service section (the museum wall for "Exhibitions & institutions"). */
.services-figure { margin: 0 0 40px; max-width: 900px; }
.services-figure img { width: 100%; height: auto; display: block; border-radius: 2px; }
.services-figure figcaption { font-family: var(--serif); font-size: 14px; color: var(--ink-mute); margin-top: 10px; }

/* footer: the five kinds of film, one quiet line on every page (21.10) */
.footer-kinds { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; padding-bottom: 24px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); }
.footer-kinds span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* footer, all pages (22.10, Daniella: "make sure it looks organized and clear" on mobile).
   The social links inherited the old dark footer's pale colour and were invisible on the light footer. */
.footer .footer-social { gap: 18px; font-size: inherit; }
.footer .footer-social a { color: var(--ink-soft); }
.footer .footer-social a:hover { color: var(--accent); }
@media (max-width: 680px) {
  .footer { display: grid; grid-template-columns: 1fr; gap: 0; padding: 36px 20px 40px; align-items: start; }
  .footer-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding-bottom: 24px; margin-bottom: 0; }
  .footer-kinds span { grid-column: 1 / -1; margin-bottom: 2px; }
  .footer-links { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 28px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
  .footer-right { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 12px 28px; padding-top: 24px; }
  .footer-right .footer-social { grid-column: 1 / -1; flex-wrap: wrap; gap: 10px 20px; }
  .footer-brand { order: 9; padding-top: 24px; font-size: 12px; color: var(--ink-mute); }
}

/* mobile rhythm on project pages (22.10): less air between stills, and the closing links on one tidy row */
@media (max-width: 680px) {
  .project-still { margin: 40px auto; padding: 0 20px; }
  .vocabulary { margin: 48px auto; padding: 40px 20px 24px; }
  .vocabulary-lead { margin-bottom: 36px; }
  .vocabulary-item, .vocabulary-item--reverse { margin: 44px auto; padding: 0; gap: 16px; }
  .vocabulary-item-visual { min-height: 0; }
  .project-text[style*="padding-bottom: 100px"] { padding-bottom: 48px !important; }
}
.project-text p:has(> a[href="/work/"] + a[href="/contact"]) { display: flex; flex-wrap: wrap; gap: 14px 32px; }

/* Otzera, motif 01 (22.10): the chest and the seed side by side on the same ground, as the text says */
.vocabulary-item-visual--pair { flex-direction: row; align-items: flex-end; justify-content: center; gap: 28px; }
.vocabulary-item-visual--pair img:nth-child(1) { max-height: 230px; width: auto; }
.vocabulary-item-visual--pair img:nth-child(2) { max-height: 300px; width: auto; }
@media (max-width: 680px) {
  .vocabulary-item-visual--pair { gap: 14px; }
  .vocabulary-item-visual--pair img:nth-child(1) { max-height: 160px; }
  .vocabulary-item-visual--pair img:nth-child(2) { max-height: 220px; }
}

/* Our Story series page (22.10, Daniella: the three pictures should be sleek and centered):
   one held film frame per film, shown whole at 16:9, no cropping */
.os-card-img { aspect-ratio: 16 / 9; }
.os-card-img img { object-position: center; }

/* ---------- footer, every page (22.10, Daniella chose option 4): the mark on top, email and WhatsApp as two
   hairline pills, the name underneath. Replaces the old multi-line footer. ---------- */
.foot { border-top: 1px solid var(--rule); text-align: center; }
.foot-in { max-width: 640px; margin: 0 auto; padding: 44px 24px 34px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.foot-mark { display: block; line-height: 0; }
.foot-mark img { width: 38px; height: auto; }
.foot-links { display: flex; gap: 10px; justify-content: center; }
.foot-links a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 20px; border-radius: 999px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--ink); text-decoration: none; border: 1px solid var(--rule); background: rgba(255,252,246,.55); transition: border-color .2s, background .2s; }
.foot-links a:hover { border-color: var(--ink); background: #fffcf6; }
.foot-links svg { width: 17px; height: 17px; flex: none; }
.foot-copy { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-mute); }
:lang(he) .foot-links a { font-family: 'IBM Plex Sans Hebrew', var(--mono); letter-spacing: .01em; font-size: 14px; }
:lang(he) .foot-links a[href^="mailto"] { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; }
:lang(he) .foot-copy { direction: ltr; }
@media (max-width: 680px) {
  .foot-in { padding: 36px 20px 28px; gap: 18px; }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .foot-links a { height: 48px; padding: 0 10px; }
}

/* Work page (22.10): filter by the five kinds of film; the Dan David years as a quieter group */
.cat-years { display: inline-flex; align-items: center; gap: 4px; padding-inline-start: 10px; margin-inline-start: 4px; border-inline-start: 1px solid var(--rule); }
.cat-years-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-inline-end: 4px; }
.cat-filters .cat-years button { padding-inline: 10px; }
@media (max-width: 700px) { .cat-years { border-inline-start: 0; padding-inline-start: 0; margin-inline-start: 0; width: 100%; } }

/* ---------- Essay page, layout C (22.10, Daniella): numbered chapters, the film still beside the text,
   a quiet brief (no box), a conclusion without rules. Used by writing/paint-it-with-lipstick (EN + HE). ---------- */
.ess { max-width: 760px; margin: 0 auto; padding: 72px 24px 40px; }
.ess-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
:lang(he) .ess-meta { font-family: 'IBM Plex Sans Hebrew', var(--mono); font-size: 14px; letter-spacing: .02em; text-transform: none; }
.ess-title { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 5.2vw, 64px); line-height: 1.05; letter-spacing: -.02em; margin: 16px 0 26px; max-width: 16ch; }
.ess-brief { font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.55; color: var(--ink-soft); margin: 0 0 34px; max-width: 34em; }
.ess-lede, .ess-ch p, .ess-close p { font-size: 19px; line-height: 1.8; color: var(--ink); }
.ess-lede { margin: 0 0 30px; }
.ess figure { margin: 0; }
.ess img { display: block; width: 100%; height: auto; border-radius: 2px; }
.ess figcaption { font-size: 13px; color: var(--ink-mute); margin-top: 8px; }
.ess-studio { margin: 0 0 12px !important; }
.ess-ch { margin-top: 72px; }
.ess-ch::after { content: ""; display: block; clear: both; }
.ess-num { font-family: var(--serif); font-weight: 300; font-size: 22px; letter-spacing: .04em; color: var(--accent); display: flex; align-items: center; gap: 14px; }
.ess-num::after { content: ""; flex: 0 0 36px; height: 1px; background: var(--accent); opacity: .5; }
.ess-ch h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.1; margin: 10px 0 6px; }
.ess-who { font-size: 15px !important; color: var(--ink-mute) !important; margin: 0 0 22px; line-height: 1.5 !important; }
.ess-who a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(162,90,31,.3); }
.ess-who a:hover { border-color: var(--accent); }
.ess-side { float: right; width: 46%; margin: 8px 0 12px 30px !important; }
:lang(he) .ess-side { float: left; margin: 8px 30px 12px 0 !important; }
.ess-side a { display: block; transition: opacity .2s; }
.ess-side a:hover { opacity: .88; }
.ess-close { margin: 88px 0 0; }
.ess-punch { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 34px) !important; line-height: 1.3 !important; margin: 0 0 18px; }
.ess-punch--last { color: var(--accent) !important; margin-top: 26px; }
.ess-more { margin-top: 72px; display: flex; flex-direction: column; gap: 4px; }
.ess-more-label { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
:lang(he) .ess-more-label { font-family: 'IBM Plex Sans Hebrew', var(--mono); font-size: 14px; letter-spacing: .02em; text-transform: none; }
.ess-more a { font-family: var(--serif); font-size: 21px; color: var(--ink); text-decoration: none; padding: 6px 0; }
.ess-more a:hover { color: var(--accent); }
.ess-cta { margin-top: 48px; }
.ess-cta a { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
:lang(he) .ess-cta a { font-family: 'IBM Plex Sans Hebrew', var(--mono); font-size: 15px; letter-spacing: .02em; }
@media (max-width: 760px) {
  .ess { padding: 44px 20px 24px; }
  .ess-side, :lang(he) .ess-side { float: none; width: 100%; margin: 4px 0 18px !important; }
  .ess-lede, .ess-ch p, .ess-close p { font-size: 18px; }
  .ess-ch { margin-top: 56px; }
}
.ess-tag { font-size: 16px !important; color: var(--ink-soft) !important; font-style: italic; margin-top: 30px; }

/* An intro that belongs to the ref-pairs below it: aligned to the pairs' edge, not centred (22.10, Daniella) */
.project-text.pairs-intro { max-width: 1420px; }
.project-text.pairs-intro p { max-width: 720px; }
[dir="rtl"] .contact-stage .contact-stage-head { text-align: right; }