@charset "utf-8";

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

:root {
  --white:      #fdfaf6;
  --linen:      #f5efe4;
  --parchment:  #ede3cf;
  --warm-grey:  #ece4d8;

  --terracotta: #c2522a;
  --sienna:     #a03e1e;
  --spice:      #d4732a;
  --saffron:    #e8a832;

  /* Mahogany brown — the chosen one */
  --ink:        #6b3520;
  --ink-deep:   #3d1e0e;
  --charcoal:   #241510;
  --text:       #6b3520;
  --text-mid:   #8a5038;
  --text-soft:  #b08060;

  --line:       rgba(107,53,32,0.1);
  --line-warm:  rgba(194,82,42,0.18);
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:clamp(4.5rem,14vw,6.5rem);
}
body {
  background:var(--white);
  color:var(--text);
  font-family:'EB Garamond',serif;
  overflow-x:hidden;
  cursor:auto;
}
@media (hover: hover) and (pointer: fine) {
  body { cursor:none; }
}
@media (hover: none), (pointer: coarse) {
  .cur, .cur-r { display:none !important; }
}

/* ── CURSOR ── */
.cur   { width:8px; height:8px; background:var(--terracotta); border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .3s,height .3s; }
.cur-r { width:34px; height:34px; border:1px solid rgba(194,82,42,.45); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .35s,height .35s; }

/* ── NAV ── */
nav {
  position:sticky; top:0; z-index:200;
  width:100%;
  padding:1rem 5rem;
  display:flex; align-items:center; justify-content:space-between;
}
nav::after {
  content:''; position:absolute; inset:0;
  background:rgba(237,227,207,.97);
  z-index:-1;
}
.nav-logo {
  font-family:'EB Garamond',serif;
  font-size:1.3rem; font-weight:400; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  opacity:0; animation:fIn 1s ease 1.8s forwards;
}
.nav-links {
  display:flex; gap:2.5rem; list-style:none; align-items:center;
  opacity:0; animation:fIn 1s ease 2s forwards;
}
.nav-links a {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--text-mid); text-decoration:none; transition:color .3s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0; right:100%;
  height:1px; background:var(--terracotta); transition:right .35s;
}
.nav-links a:hover { color:var(--terracotta); }
.nav-links a:hover::after { right:0; }
/* Option 3 — terracotta italic, matches nav family, keeps distinction */
.nav-olf {
  color:var(--terracotta) !important;
  border:1px solid rgba(194,82,42,.35);
  padding:.2rem .7rem;
  font-style:italic;
  font-family:'EB Garamond',serif !important;
  font-size:1rem !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
  transition:background .3s, color .3s, border-color .3s !important;
}
.nav-olf:hover {
  background:var(--terracotta) !important;
  color:var(--white) !important;
  border-color:var(--terracotta) !important;
}





/* ══════════════════════════════
   HERO
══════════════════════════════ */
#home {
  display:grid;
  grid-template-columns: 60% 40%;
  background:var(--linen);
  min-height:100svh;
}

.hero-full {
  position:relative;
  overflow:hidden;
}
.hero-full-img {
  width:100%; height:100%;
  object-fit:contain; object-position:center top;
  display:block;
  filter:contrast(1.04) saturate(0.92);
}
.hero-full-text {
  padding:5rem 5rem 5rem;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--linen);
}
.hero-full-text .hero-eyebrow {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.85rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--terracotta); margin-bottom:2rem;
}
.hero-full-text .hero-name {
  font-family:'Libre Baskerville',serif;
  font-size:clamp(2.4rem,3.5vw,4rem);
  font-weight:400; line-height:1.1;
  color:var(--ink-deep); margin-bottom:.8rem;
}
.hero-full-text .hero-name .last { font-style:italic; color:var(--terracotta); }
.hero-full-text .hero-name-sub {
  font-size:0.62rem; color:var(--text-mid); margin-bottom:1.5rem;
  text-align:center;
  text-wrap:balance;
}
.hero-full-text .hero-quote {
  font-family:'EB Garamond',serif;
  font-size:clamp(0.95rem,1.2vw,1.1rem);
  font-style:italic; line-height:1.7;
  color:var(--text-mid); max-width:40ch; margin-bottom:2rem;
  margin-left:auto; margin-right:auto;
  padding:0 clamp(0.25rem,2vw,0);
}
.hero-full-text .hero-cta { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; }

.hero-img-col {
  position:relative; overflow:hidden; background:var(--warm-grey);
}
.hero-img-col img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 15%; display:block;
  filter:contrast(1.06) saturate(0.9);
  animation:slowZoom 24s ease infinite alternate;
}
@keyframes slowZoom { to { transform:scale(1.06); } }

.hero-wash {
  display:none;
  position:absolute; inset:0;
  background:linear-gradient(155deg,transparent 25%,rgba(194,82,42,.1) 65%,rgba(160,62,30,.2) 100%);
  mix-blend-mode:multiply;
}


.hero-text-col {
  position:relative; z-index:2; padding:9rem 5rem 5rem;
  display:flex; flex-direction:column; justify-content:center;
  padding:9rem 5rem 7rem 5rem; position:relative;
  background:var(--parchment);
  background-image:
    radial-gradient(ellipse at 85% 15%, rgba(194,82,42,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 88%, rgba(212,135,42,.05) 0%, transparent 45%);
}

.hero-eyebrow {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.6rem; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--terracotta); margin-bottom:2.5rem;
  opacity:0; animation:sUp .8s ease .3s forwards;
  display:flex; align-items:center; gap:1rem;
}
.hero-eyebrow::before { content:''; display:block; width:2.5rem; height:1px; background:var(--terracotta); }

/* Name — mahogany for "Ayoka", terracotta for "Chenzira" */
.hero-name {
  font-family:'Libre Baskerville',serif;
  font-size:clamp(3rem,6vw,6.5rem);
  font-weight:400; line-height:0.95; letter-spacing:-0.01em;
  margin-bottom:2rem;
  opacity:0; animation:sUp 1s ease .5s forwards;
}
.hero-name .first {
  display:block;
  color:var(--ink); /* mahogany */
}
.hero-name .last {
  display:block;
  font-style:italic;
  color:var(--terracotta);
  padding-left:2rem;
}

.hero-name-sub {
  text-align:right;
  font-family:'Didact Gothic',sans-serif;
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--text-mid); margin-bottom:2.8rem;
  opacity:0; animation:sUp .8s ease .8s forwards;
}

.hero-quote {
  font-size:clamp(1.05rem,1.7vw,1.28rem);
  font-style:italic; font-weight:400; line-height:1.82;
  color:var(--text-mid); /* mahogany-mid */
  max-width:34ch; margin-bottom:3rem; padding-right:2rem;
  opacity:0; animation:sUp .8s ease 1s forwards;
}

.hero-chips {
  display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:3rem;
  opacity:0; animation:sUp .8s ease 1.2s forwards;
}
.chip {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.56rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-soft); border:1px solid var(--line-warm);
  padding:.28rem .8rem; transition:color .3s,border-color .3s,background .3s; cursor:default;
}
.chip:hover { color:var(--terracotta); border-color:var(--terracotta); background:rgba(194,82,42,.05); }

.hero-cta {
  display:flex; align-items:center; justify-content:center; gap:1.5rem;
  opacity:0; animation:sUp .8s ease 1.4s forwards;
}
.btn-primary {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-deep); background:transparent;
  border:1px solid var(--terracotta);
  padding:.9rem 2.8rem; text-decoration:none; display:inline-block;
  transition:background .3s, color .3s, transform .25s;
}
.btn-primary:hover {
  background:var(--terracotta); color:var(--white);
  transform:translateY(-2px);
}
.btn-ghost {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.65rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-deep); background:transparent;
  border:1px solid var(--terracotta);
  padding:.9rem 2.8rem; text-decoration:none; display:inline-block;
  transition:background .3s, color .3s, transform .25s;
}
.btn-ghost:hover {
  background:var(--terracotta); color:var(--white);
  transform:translateY(-2px);
}

/* ══ ORANGE STRIP ══ */
.color-band {
  background:var(--terracotta);
  padding:0.7rem 5rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; overflow:hidden; position:relative;
}
.color-band::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60px,rgba(255,255,255,.04) 60px,rgba(255,255,255,.04) 61px);
}
.band-stat { display:flex; align-items:baseline; gap:.5rem; flex-shrink:0; }
.band-n { font-family:'Libre Baskerville',serif; font-size:1.5rem; font-weight:700; color:var(--white); line-height:1; }
.band-l { font-family:'Didact Gothic',sans-serif; font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(253,250,246,.7); line-height:1.55; }
.band-div { width:1px; height:2rem; background:rgba(255,255,255,.2); flex-shrink:0; }

/* ══ REEL ══ */
.reel-wrap {
  padding:0 5rem 3rem;
  background:var(--white);
}
.reel-eyebrow {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.85rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--terracotta); display:flex; align-items:center; gap:1rem;
  margin-bottom:1.2rem;
}
.reel-eyebrow::before { content:''; display:block; width:2rem; height:1px; background:var(--terracotta); }
.reel-title {
  font-family:'Libre Baskerville',serif;
  font-size:clamp(1.8rem,3vw,2.8rem); font-weight:400;
  color:var(--ink-deep); margin-bottom:1.2rem;
}
.reel-title em { font-style:italic; color:var(--terracotta); }
.reel-container {
  position:relative; width:80%; margin:0 auto; aspect-ratio:16/9;
  background:#0f0905; overflow:hidden;
}
.reel-container::after {
  content:''; position:absolute; inset:0;
  border:1px solid rgba(107,53,32,.12);
  pointer-events:none;
}

/* ══════════════════════════════
   WORK
══════════════════════════════ */
#work { padding:4rem 5rem 3rem; background:var(--white); }

.sec-eyebrow {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.85rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--terracotta); display:flex; align-items:center; gap:.8rem; margin-bottom:1.1rem;
}
.sec-eyebrow::before { content:''; display:block; width:2rem; height:1px; background:var(--terracotta); }

/* Section title — mahogany for plain text, terracotta for em */
.sec-title {
  font-family:'Libre Baskerville',serif;
  font-size:clamp(2.2rem,4.5vw,3.8rem);
  font-weight:400; line-height:1.05;
  color:var(--ink); /* mahogany — "The" and "In the" */
}
.sec-title em {
  font-style:italic;
  color:var(--terracotta); /* terracotta — "Work" and "Press" */
}

.work-hdr {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:2.8rem; padding-bottom:1.8rem; border-bottom:1px solid var(--line);
}

/* Work grid */
.work-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  /* grid-template-rows:1fr 1fr; */
  gap:.8rem;
  height:auto;
}

.wc { position:relative; overflow:hidden; background:var(--warm-grey); cursor:pointer; }
.wc-hero { grid-row:1/3; }

.wc-bg {  
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:.5rem;
  transition:transform .65s ease; position:relative;
}
.wc-alma .wc-bg img { width:100%; height:auto; display:block; }
.wc-alma .wc-bg { background-position:center bottom !important; background-size:cover !important; }
.wc-joseph  .wc-bg { background-color:#1a0d08; background:linear-gradient(145deg,#2d4a3525,#c2522a12); }
.wc-league  .wc-bg { background-color:#1a0d08; background:linear-gradient(145deg,#a03e1e18,#d4732a20); }
.wc-kindred .wc-bg { background:linear-gradient(145deg,#c2522a15,#a03e1e20); }
.wc-hera    .wc-bg { background-color:#1a0d08; background:linear-gradient(145deg,#e8a83220,#2d4a3515); }
.work-row5 { display:grid; grid-template-columns:1.2fr 1.2fr; grid-template-rows:1fr 1fr; gap:.8rem; margin-top:.8rem; }
.work-row5 .wc-hero { grid-row:1/3; }
.work-row5 .wc { height:auto; }
.wc-queensugar { height:auto !important; }
.wc-hair    .wc-bg { background:#1a0d08; }
.wc-olf     .wc-bg { background:linear-gradient(135deg,#1a0f08,#2d1a08,#1a0f08); }

.wc-ph-label {
  font-family:'EB Garamond',serif; font-size:.95rem; font-style:italic;
  color:rgba(107,53,32,.25); text-align:center; padding:1rem; position:relative; z-index:1;
}
.wc-ph-hint {
  font-family:'Didact Gothic',sans-serif; font-size:.48rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(194,82,42,.38); position:relative; z-index:1;
}

.wc-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(61,30,14,.93) 0%,rgba(61,30,14,.2) 50%,transparent 75%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:2rem;
  opacity:0; transition:opacity .4s;
}

.wc-badge {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.8rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-deep); background:var(--saffron);
  padding:.18rem .6rem; margin-bottom:.6rem; width:fit-content;
}
.wc-badge.new { background:var(--terracotta); color:var(--white); }
.wc-badge.nfr { background:var(--spice); color:var(--white); }

.wc-cat { font-family:'Didact Gothic',sans-serif; font-size:1.1rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--saffron); opacity:.7; margin-bottom:.4rem; }
.wc-title { font-family:'Libre Baskerville',serif; font-size:1.7rem; font-weight:400; color:#fff; line-height:1.1; margin-bottom:.4rem; }
.wc-desc {
  font-family:'EB Garamond',serif; font-size:1.4rem; font-style:italic;
  color:rgba(255,255,255,.6); line-height:1.6; max-width:30ch;
  transform:translateY(8px); opacity:0; transition:transform .4s,opacity .4s;
}
/* Work tiles: overlay on hover — desktop / fine pointer only */
@media (hover: hover) and (pointer: fine) {
  .wc:hover .wc-bg { transform:scale(1.04); }
  .wc:hover .wc-overlay { opacity:1; }
  .wc:hover .wc-desc { transform:none; opacity:1; }
  .wc-olf-card:hover {
    border-color:var(--saffron);
    box-shadow:0 0 30px rgba(232,168,50,.15);
  }
  .wc-olf-card:hover .wc-bg { transform:scale(1.02); }
  .wc-olf-card:hover .olf-cta {
    letter-spacing:.36em;
    border-color:var(--saffron);
  }
}

/* Touch / coarse pointer: tap card to show copy (see is-expanded in script) */
@media (hover: none), (pointer: coarse) {
  #work .wc .wc-overlay {
    opacity:0;
    pointer-events:none;
  }
  #work .wc.is-expanded .wc-overlay {
    opacity:1;
    pointer-events:auto;
  }
  #work .wc.is-expanded .wc-desc {
    opacity:1;
    transform:none;
  }
  /* OLF row: always show copy on touch (not tap-to-reveal) */
  #work .wc-olf-card .wc-overlay {
    opacity:1;
    pointer-events:auto;
  }
  #work .wc-olf-card .wc-desc {
    opacity:1;
    transform:none;
  }
}

/* Row 2 */
.work-row2 {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.8rem; margin-top:.8rem;
}
.work-row2 .wc { height:auto; }
.work-row3 {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.8rem; margin-top:.8rem;
}
.work-row3 .wc { height:auto; }

/* Desktop (>= 1025px): equal-height columns across Work rows */
@media (min-width: 1025px) {
  #work .work-grid,
  #work .work-row2,
  #work .work-row3,
  #work .work-row4,
  #work .work-row5 {
    align-items:stretch;
  }

  #work .work-grid > .wc,
  #work .work-row2 .wc,
  #work .work-row3 .wc,
  #work .work-row4 .wc,
  #work .work-row5 .wc {
    height:100%;
  }

  #work .work-grid .wc-bg,
  #work .work-row2 .wc-bg,
  #work .work-row3 .wc-bg,
  #work .work-row4 .wc-bg,
  #work .work-row5 .wc-bg {
    height:100%;
  }

  #work .work-grid .wc-bg > img,
  #work .work-row2 .wc-bg > img,
  #work .work-row3 .wc-bg > img,
  #work .work-row4 .wc-bg > img,
  #work .work-row5 .wc-bg > img {
    height:100% !important;
    object-fit:cover !important;
  }

  /* Ensure row5 right-side stack equals left hero */
  #work .work-row5 { grid-auto-rows: 1fr; }
}

/* Tablet & mobile (<= 1024px): show original (uncropped) images */
@media (max-width: 1024px) {
  #work .wc-bg { height:auto; }
  #work .wc-bg > img {
    width:100%;
    height:auto !important;
    object-fit:contain !important;
  }

/* Object-position helpers (used in Work tiles) */
#work .pos-0  { object-position:center 0%; }
#work .pos-5  { object-position:center 5%; }
#work .pos-10 { object-position:center 10%; }
#work .pos-30 { object-position:center 30%; }
}
.work-row4 {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.8rem; margin-top:.8rem;
}
.work-row4 .wc { height:auto; }

/* Work images: keep intrinsic aspect ratio (no forced crop) */
#work .wc-bg > img {
  width:100%;
  height:auto !important;
  display:block;
  object-fit:contain !important;
}

/* Olf feature row */
.work-row-olf {
  margin-top:.8rem;
}
.wc-olf-card {
  height:460px;
  display:block;
  text-decoration:none;
  position:relative;
  overflow:hidden;
}
/* No !important: inline data-URI on .wc-bg (index.html) wins as mobile fallback if olf.jpg fails */
.wc-olf-card .wc-bg {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background-color:#0f0905;
  background-image:url(olf.jpg);
  background-size:contain;
  -webkit-background-size:cotain;
  background-position:center center;
  background-repeat:no-repeat;  
}
.wc-olf-card .wc-bg::before {
  content:'';
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 30% 50%, rgba(200,131,26,.18) 0%, transparent 65%),
             radial-gradient(ellipse at 75% 40%, rgba(184,146,42,.12) 0%, transparent 55%);
}
.wc-olf-card .wc-overlay {
  z-index:2;
  background:linear-gradient(to right, rgba(10,5,2,.93) 0%, rgba(10,5,2,.88) 30%, rgba(10,5,2,.05) 52%, transparent 50%, rgba(10,5,2,.5) 58%, rgba(10,5,2,.93) 72%, rgba(10,5,2,1) 85%);
  flex-direction:row; align-items:center; justify-content:flex-start;
  padding:1.5rem 3rem; gap:2rem; opacity:1;
}
.wc-olf-card .wc-badge { margin-bottom:0; }
.wc-olf-card .wc-cat   { margin-bottom:0; }
.wc-olf-card .wc-title { font-size:3rem; color:var(--saffron); letter-spacing:.04em; }
.wc-olf-card .wc-desc  { max-width:44ch; opacity:1; transform:none; font-size:1.1rem; }
.wc-olf-card {
  border:1px solid transparent;
  transition:border-color .4s;
}
.olf-cta {
  display:inline-block;
  margin-top:1rem;
  font-family:'Didact Gothic',sans-serif;
  font-size:.85rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--saffron);
  border-bottom:1px solid rgba(232,168,50,.4);
  padding-bottom:.2rem;
  transition:letter-spacing .3s, border-color .3s;
}
/* Also directed */
.also-directed {
  margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:1.5rem; flex-wrap:wrap;
}
.also-label {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.56rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--text-soft); white-space:nowrap; flex-shrink:0;
}
.also-items { display:flex; gap:1.8rem; flex-wrap:wrap; }
.also-item {
  font-family:'EB Garamond',serif; font-size:1rem; font-style:italic;
  color:var(--text-mid); transition:color .3s; cursor:default;
  display:flex; align-items:center; gap:.5rem;
}
.also-item::before { content:''; display:block; width:3px; height:3px; border-radius:50%; background:var(--terracotta); flex-shrink:0; }
.also-item:hover { color:var(--terracotta); }

/* ══════════════════════════════
   STORY — dark bg, light text
══════════════════════════════ */
#story {
  background:linear-gradient(135deg,#2a1a0e,#1a0f08,#2d1a08);
  padding:3rem 5rem;
  position:relative; overflow:hidden;
}
.story-slash { display:none; }
.story-grid {
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:4rem; align-items:start; position:relative; z-index:1;
}
.story-left { position:sticky; top:1rem; }

.story-portrait { position:relative; margin-top:3rem; display: flex; align-items: center; justify-content: center;}
.story-portrait::before { display:none; }
.story-portrait::after  { display:none; }
.story-img-wrap {
  position:relative; z-index:1; width:100%;
aspect-ratio:2/3; overflow:hidden; max-width:580px;
  background:#080504;
}
.story-img-wrap img {
  width:100%; height:100%;
  object-fit:contain;
  object-position: 50% 0%; display:block;
}
/* Thin edge fade — just enough to dissolve border, flower visible */
.story-img-wrap::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right,  #1a0f08 0%, rgba(26,15,8,.0) 8%, rgba(26,15,8,.0) 92%, #1a0f08 100%),
    linear-gradient(to bottom, #1a0f08 0%, rgba(26,15,8,.0) 6%, rgba(26,15,8,.0) 94%, #1a0f08 100%);
  pointer-events:none; z-index:2;
}
.story-img-placeholder {
  width:100%; height:100%;
  background:linear-gradient(160deg,#3d2410,#1a1208);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
}
.story-img-placeholder span:first-child {
  font-family:'Didact Gothic',sans-serif; font-size:0.55rem;
  letter-spacing:0.25em; text-transform:uppercase; color:rgba(194,82,42,.5);
}
.story-img-placeholder span:last-child {
  font-family:'EB Garamond',serif; font-style:italic;
  font-size:.9rem; color:rgba(245,239,228,.25);
}

.story-tag {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.85rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--spice); display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem;
}
.story-tag::before { content:''; display:block; width:2rem; height:1px; background:var(--terracotta); }

/* Story headings on dark bg stay light */
.story-name-display {
  font-family:'Libre Baskerville',serif;
  font-size:clamp(1.8rem,3vw,2.8rem); font-weight:400;
  color:var(--linen); line-height:1.2;
}
.story-name-display em { font-style:italic; color:var(--spice); display:block; }

.story-intro {
  font-size:clamp(1.2rem,1.9vw,1.6rem); font-style:italic; font-weight:400;
  line-height:1.72; color:var(--linen);
  padding-left:1.8rem; border-left:2px solid var(--terracotta); margin-bottom:3rem;
}
.story-personal {
  font-size:1.02rem; line-height:2;
  color:rgba(245,239,228,.88); margin-bottom:1.8rem;
}

.disc-list {
  margin:3rem 0; display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(255,255,255,.06);
}
.disc-item {
  padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:1rem;
  transition:padding-left .3s; cursor:default;
}
.disc-item:hover { padding-left:.5rem; }
.disc-item:nth-child(odd)  { padding-right:2rem; border-right:1px solid rgba(255,255,255,.06); }
.disc-item:nth-child(even) { padding-left:2rem; }
.disc-item:nth-child(even):hover { padding-left:2.5rem; }
.disc-num  { font-family:'Didact Gothic',sans-serif; font-size:0.65rem; letter-spacing:.15em; color:var(--spice); min-width:1.4rem; }
.disc-name { font-family:'Didact Gothic',sans-serif; font-size:0.82rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(245,239,228,.78); transition:color .3s; }
.disc-item:hover .disc-name { color:rgba(245,239,228,.75); }

.story-big-quote {
  font-family:'Libre Baskerville',serif;
  font-size:clamp(1.3rem,2.2vw,1.85rem); font-style:italic; font-weight:400;
  line-height:1.65; color:rgba(245,239,228,.88);
  margin:3rem 0; padding:2.5rem;
  background:rgba(194,82,42,.08); border-left:3px solid var(--terracotta);
}

.ted-wrap { margin-top:3rem; display:flex; flex-direction:column; align-items:center; }
.ted-label {
  font-family:'Didact Gothic',sans-serif; font-size:0.85rem;
  letter-spacing:0; text-transform:none; color:var(--spice);
  display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem;
}
.ted-label::before { content:''; display:block; width:1.8rem; height:1px; background:var(--spice); }
.ted-box {
width:70%; aspect-ratio:16/9; margin:0 auto; background:#1a0e08;
  border:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.5rem; cursor:pointer; position:relative; overflow:hidden; transition:border-color .35s, transform .3s;
}
.ted-box:hover { border-color:rgba(194,82,42,.4); }
.ted-box::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 60%,rgba(194,82,42,.06) 0%,transparent 65%); }
.play-btn { width:4.2rem; height:4.2rem; border:1.5px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; transition:border-color .3s,transform .35s; }
.ted-box:hover .play-btn { border-color:var(--spice); transform:scale(1.1); }
.play-btn::after { content:''; border-left:.85rem solid rgba(255,255,255,.8); border-top:.5rem solid transparent; border-bottom:.5rem solid transparent; margin-left:.2rem; }
.ted-caption { font-family:'EB Garamond',serif; font-size:.9rem; font-style:italic; color:rgba(245,239,228,.4); position:relative; z-index:1; }

/* ══════════════════════════════
   PRESS — mahogany throughout
══════════════════════════════ */
#press { padding:5rem 5rem; background:var(--parchment); }
#press .sec-title em { color:var(--ink); }

.press-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
}
.press-grid .pcard-centered {
  grid-column:1 / -1;
  max-width:100%;
  margin:0 auto;
}
.pcard {
  min-width:0;
  background:rgba(194,82,42,.07);
  border:1px solid rgba(194,82,42,.15);
  border-left:3px solid rgba(194,82,42,.3);
  padding:2.5rem;
  transition:border-color .3s, background .3s, transform .3s;
}
.pcard:hover { border-left-color:var(--terracotta); background:rgba(194,82,42,.12); transform:translateY(-3px); }
.pcard:hover { background:var(--white); }
.p-open {
  font-family:'Libre Baskerville',serif; font-size:7rem; font-weight:700;
  color:var(--terracotta); opacity:.1; position:absolute; top:.5rem; left:1.8rem;
  line-height:1; pointer-events:none;
}
/* Quote — mahogany */
.p-q {
  font-size:1.05rem; font-style:italic; font-weight:400;
  line-height:1.78;
  color:var(--text); /* mahogany */
  margin-bottom:2rem; position:relative; z-index:1; flex:1;
}
.p-attribution {
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:.3rem;
}
/* Name — mahogany */
.p-name {
  font-family:'Libre Baskerville',serif; font-size:.9rem; font-weight:400;
  color:var(--ink); /* mahogany */
}
/* Publication — terracotta */
.p-src {
  font-family:'Didact Gothic',sans-serif; font-size:0.75rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--terracotta);
}

/* ══════════════════════════════
   CONTACT
══════════════════════════════ */
#contact {
  background:#d4592e; padding:6rem 3rem;
  display:grid;
  /* Intro (.reveal) : reps panel (.c-items.reveal) ≈ 4 : 6 on desktop */
  grid-template-columns:4fr 6fr;
  gap:clamp(2rem, 4vw, 4rem); align-items:center; position:relative; overflow:hidden;
}
#contact .contact-eyebrow { color:rgba(253,250,246,1); }
.contact-reps-panel {
  background:#3d1f0f; padding:3rem; border-radius:4px;
  width:min(100%, calc(100% + 2rem)); max-width:calc(100% + 2rem);
  margin-left:-1rem; margin-right:-2rem;
  transition-delay:.15s;
  isolation:isolate;
  box-sizing:border-box;
}
/* Reps inside contact: single rep now showing, center it */
#contact .contact-reps-panel .reps-grid {
  display:grid;
  grid-template-columns:minmax(0, 24rem);
  justify-content:center;
  gap:clamp(1rem, 2vw, 1.5rem);
  width:100%;
  min-width:0;
}
#contact .contact-reps-panel .rep-item {
  min-width:0;
}
#contact .contact-reps-panel .rep-contact {
  overflow-wrap:break-word;
  word-break:break-word;
}
.reps-contact-links { margin-bottom:3rem; }
.work-hdr-spaced { margin-top:2.5rem; }
.reel-frame {
  position:absolute; top:0; left:0; width:100%; height:100%;
  border:0;
}
.wc-title-olf { font-size:clamp(2.25rem, 11vw, 6rem); letter-spacing:.08em; }
#contact::before { content:''; position:absolute; top:-10%; right:-5%; width:55%; height:120%; background:rgba(0,0,0,.08); clip-path:ellipse(55% 55% at 60% 50%); pointer-events:none; }

.contact-head { font-family:'Libre Baskerville',serif; font-size:clamp(2.5rem,5vw,5rem); font-weight:400; line-height:1; color:var(--white); margin-bottom:1.5rem; }
.contact-head em { font-style:italic; display:block; color:rgba(253,250,246,.7); }
.contact-sub { font-family:'EB Garamond',serif; font-size:1.50rem; font-style:italic; line-height:1.85; color:rgba(253,250,246,.9); max-width:34ch; }

.c-items { display:flex; flex-direction:column; gap:2px; position:relative; z-index:1; }
.c-item { display:flex; align-items:center; justify-content:space-between; padding:1.8rem 2rem; background:rgba(0,0,0,.1); border:1px solid rgba(255,255,255,.1); text-decoration:none; transition:background .3s,border-color .3s; }
.c-item:hover { background:rgba(0,0,0,.18); border-color:rgba(255,255,255,.25); }
.c-lbl { font-family:'Didact Gothic',sans-serif; font-size:0.52rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(253,250,246,.45); display:block; margin-bottom:.35rem; }
.c-val { font-family:'EB Garamond',serif; font-size:1.1rem; color:var(--white); }
.c-arr { color:rgba(253,250,246,.7); font-size:1.1rem; transition:transform .3s; }
.c-item:hover .c-arr { transform:translateX(6px); }

/* ── FOOTER ── */
/* Representatives */
.reps-section {
  padding:3.5rem 5rem 2rem;
  background:var(--ink-deep);
  border-top:1px solid rgba(255,255,255,.06);
}
.reps-eyebrow {
  font-family:'Didact Gothic',sans-serif;
  font-size:0.85rem; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(253,250,246,.3); margin-bottom:2rem;
  display:flex; align-items:center; gap:.8rem;
}
.reps-eyebrow::before { content:''; display:block; width:1.5rem; height:1px; background:rgba(253,250,246,.2); }
.reps-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.rep-item {
  display:flex; flex-direction:column; gap:.3rem;
}
.rep-name {
  font-family:'Libre Baskerville',serif;
  font-size:1.5rem; font-weight:400; color:rgba(253,250,246,.82);
}
.rep-role {
  font-family:'Didact Gothic',sans-serif;
  font-size:1.0rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--saffron); opacity:.7; margin-bottom:.2rem;
}
.rep-agency {
  font-family:'Didact Gothic',sans-serif;
  font-size:1.0rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--saffron); opacity:.7; margin-bottom:.4rem;
}
.rep-contact {
  font-family:'EB Garamond',serif; font-style:normal;
  font-size:1.3rem; color:rgba(253,250,246,.82); line-height:1.7;
}
.rep-contact a {
  color:rgba(253,250,246,.45); text-decoration:none;
  transition:color .3s;
}
.rep-contact a:hover { color:var(--saffron); }
@media(max-width:900px){
  .reps-section { padding:3rem 2rem; }
  .reps-grid { grid-template-columns:1fr; gap:2rem; }
}

footer { background:var(--ink-deep); padding:2.5rem 5rem; display:flex; align-items:center; justify-content:space-between; }
.f-name { font-family:'EB Garamond',serif; font-size:0.9rem; font-style:italic; letter-spacing:0.1em; color:rgba(245,239,228,.3); }
.f-copy { font-family:'Didact Gothic',sans-serif; font-size:0.52rem; letter-spacing:0.15em; color:rgba(245,239,228,.2); }

/* ── ANIMATIONS ── */
@keyframes fIn { from{opacity:0}to{opacity:1} }
@keyframes sUp { from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none} }

.reveal { opacity:0; transform:translateY(34px); transition:opacity .9s ease,transform .9s ease; }
.reveal.in { opacity:1; transform:none; }

/* Contact reps: 2 cols when #contact is still 2-column but right cell is narrow */
@media (max-width: 1200px) and (min-width: 1025px) {
  #contact .contact-reps-panel .reps-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ── TABLET & MID-VIEWPORTS ── */
@media (max-width: 1024px) {
  nav {
    padding:1rem clamp(1.25rem, 4vw, 2.5rem);
    flex-wrap:wrap;
    row-gap:0.75rem;
  }
  .nav-logo {
    font-size:clamp(1rem, 2.8vw, 1.25rem);
    letter-spacing:0.18em;
  }
  .nav-links {
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:0.85rem 1.15rem;
    max-width:100%;
  }
  .nav-links a { font-size:0.58rem; letter-spacing:0.16em; }
  #work, #story, #press {
    padding-left:clamp(1.25rem, 4vw, 2.5rem);
    padding-right:clamp(1.25rem, 4vw, 2.5rem);
  }
  .press-grid { grid-template-columns:1fr; }
  #home {
    grid-template-columns:1fr;
    min-height:auto;
  }
  .hero-full {
    min-height:clamp(220px,42vh,440px);
  }
  .hero-full-img {
    width:100%;
    height:100%;
    min-height:clamp(220px,42vh,440px);
    object-fit:cover;
    object-position:center 18%;
  }
  .hero-full-text {
    padding:clamp(1.75rem,5vw,2.75rem) clamp(1.25rem,4vw,2rem) clamp(2.5rem,7vw,3.5rem);
    justify-content:flex-start;
  }
  .hero-full-text .hero-eyebrow {
    font-size:clamp(0.68rem,1.8vw,0.85rem);
    letter-spacing:0.18em;
    margin-bottom:clamp(1rem,3vw,2rem);
  }
  .hero-full-text .hero-name {
    font-size:clamp(2rem,7vw,3.25rem);
    line-height:1.08;
  }
  .hero-full-text .hero-quote {
    font-size:clamp(0.95rem,2.4vw,1.08rem);
    max-width:min(40ch,100%);
  }
  .reel-wrap {
    padding:0 clamp(1.25rem, 4vw, 2.5rem) 2.5rem;
  }
  .reps-section,
  footer {
    padding-left:clamp(1.25rem, 4vw, 2.5rem);
    padding-right:clamp(1.25rem, 4vw, 2.5rem);
  }
  .reel-container { width:100%; max-width:920px; }
  .work-grid {
    height:auto !important;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    min-height:0;
  }
  .wc-hero { grid-row:auto; }
  .work-row2,
  .work-row3,
  .work-row4,
  .work-row5 { grid-template-columns:1fr; }
  .work-row2 .wc,
  .work-row3 .wc,
  .work-row4 .wc,
  .work-row5 .wc {
    height:auto !important;
    min-height:0;
  }
  .wc-queensugar { height:auto !important; min-height:0; }
  .wc-olf-card {
    height:auto;
    min-height:min(70vw, 440px);
    isolation:isolate;
  }
  .wc-olf-card .wc-bg {
    min-height:100%;
  }
  .wc-olf-card .wc-overlay {
    flex-direction:column;
    align-items:flex-start;
    padding:1.5rem clamp(1rem, 4vw, 2rem);
    gap:1rem;
  }
  .story-grid { grid-template-columns:1fr; gap:clamp(2rem, 5vw, 3rem); }
  .story-left { position:static; }
  .story-intro { padding-left:1.2rem; }
  .story-big-quote { margin:2rem 0; padding:clamp(1.25rem, 4vw, 2rem); }
  .ted-box { width:min(100%, 560px); }
  #contact {
    grid-template-columns:1fr;
    padding:clamp(3rem, 8vw, 5rem) clamp(1.25rem, 4vw, 2rem);
    align-items:start;
    justify-items:stretch;
    gap:clamp(2rem, 5vw, 3rem);
  }
  #contact > .reveal { min-width:0; align-self:start; }
  .contact-reps-panel {
    width:100%;
    max-width:100%;
    margin:0;
    margin-inline:0;
    min-width:0;
    align-self:start;
    z-index:auto;
  }
  #contact .contact-reps-panel .reps-grid {
    grid-template-columns:1fr;
    gap:2rem;
    min-width:0;
    width:100%;
  }
  .band-div { display:none; }
  .color-band {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
    gap:1.15rem 1.25rem;
    padding:1.2rem clamp(1.25rem,4vw,2rem);
    align-items:start;
    justify-content:stretch;
  }
  .band-stat {
    flex-direction:column;
    align-items:flex-start;
    gap:0.35rem;
    flex-shrink:1;
    min-width:0;
  }
  .band-n {
    font-size:clamp(1.1rem,2.6vw,1.35rem);
  }
  .band-l {
    font-size:0.62rem;
    letter-spacing:0.1em;
    line-height:1.45;
    max-width:24ch;
  }
}

/* ── MOBILE ── */
@media(max-width:600px){
  nav { padding:1.5rem 2rem; }
  .nav-links { gap:1.5rem; }
  /* Option 3 — terracotta italic, matches nav family, keeps distinction */
.nav-olf {
  color:var(--terracotta) !important;
  border:1px solid rgba(194,82,42,.35);
  padding:.2rem .7rem;
  font-style:italic;
  font-family:'EB Garamond',serif !important;
  font-size:1rem !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
  transition:background .3s, color .3s, border-color .3s !important;
}


.nav-olf:hover {
  background:var(--terracotta) !important;
  color:var(--white) !important;
  border-color:var(--terracotta) !important;
}
  .hero-img-col { position:absolute; inset:0; opacity:.18; }
  #home {
    min-height:auto;
  }
  .hero-full {
    min-height:clamp(200px,36vh,380px);
  }
  .hero-full-img {
    min-height:clamp(200px,36vh,380px);
    object-position:center 12%;
  }
  .hero-full-text {
    padding:clamp(1.35rem,4vw,2rem) clamp(1rem,4vw,1.5rem) clamp(2rem,6vw,2.75rem);
  }
  .hero-full-text .hero-eyebrow { margin-bottom:1.1rem; }
  .hero-full-text .hero-name { font-size:clamp(1.75rem,9vw,2.6rem); }
  .hero-full-text .hero-name-sub {
    font-size:0.55rem;
    letter-spacing:0.14em;
    line-height:1.5;
    padding:0 0.25rem;
  }
  .hero-full-text .hero-quote {
    font-size:clamp(0.9rem,3.5vw,1.05rem);
    line-height:1.65;
    margin-bottom:1.5rem;
  }
  .hero-full-text .hero-cta {
    flex-direction:column;
    align-items:stretch;
    gap:0.85rem;
    width:100%;
    max-width:20rem;
    margin:0 auto;
  }
  .hero-full-text .hero-cta .btn-primary,
  .hero-full-text .hero-cta .btn-ghost {
    text-align:center;
    padding:0.85rem 1.5rem;
  }
  #home .hero-name .last { padding-left:0; }
  .work-row2 .wc,
  .work-row3 .wc,
  .work-row4 .wc { min-height:0; }
  .story-grid { grid-template-columns:1fr; gap:2.5rem; }
  .story-left { position:static; }
  .disc-list { grid-template-columns:1fr; }
  .disc-item:nth-child(odd) { border-right:none; padding-right:0; }
  .disc-item:nth-child(even) { padding-left:0; }
  #contact { grid-template-columns:1fr; gap:2rem; align-items:start; justify-items:stretch; }
  .color-band {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0.95rem 0.85rem;
    padding:1rem 1.1rem;
  }
  .band-n { font-size:1.05rem; }
  .band-l {
    font-size:0.54rem;
    letter-spacing:0.08em;
    line-height:1.4;
    max-width:none;
  }
  .work-hdr { flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .contact-reps-panel { padding:1.5rem 1.1rem; }
  .contact-head { font-size:clamp(2rem, 10vw, 3.5rem); }
  .c-item { padding:1.35rem 1.1rem; flex-wrap:wrap; gap:0.5rem; }
  .c-val { word-break:break-word; }

footer { flex-direction:column; gap:1rem; padding:2rem; text-align:center; }
  .also-directed { flex-direction:column; gap:1rem; }
}

.nav-ig { display:flex; align-items:center; text-decoration:none; transition:transform .3s; }
.nav-ig:hover { transform:scale(1.15); }
.nav-ig:hover .ig-icon { stroke:#8a3a1e; }
.nav-ig:hover .ig-icon circle[fill] { fill:#8a3a1e; }