/* ==========================================================================
   Greg Weinstein — Candidate C-v2: The Cinematic Narrator, revised
   Full-bleed, dark, documentary title-card homepage with light/dark act
   alternation. Vanilla CSS, self-hosted display face, no frameworks.
   ========================================================================== */

/* Display face for title-card moments only (section titles, hero headline,
   pull-quotes, manifesto, feature stat numerals). Condensed broadcast/signage
   character in place of a system-sans default. Self-hosted, single weight. */
@font-face{
  font-family:"Big Shoulders Display";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/big-shoulders-display-700.woff2") format("woff2");
}

:root{
  --bg:        #0b0a08;
  --bg-2:      #131110;
  --bg-3:      #0e0d0b;
  --ink:       #f4efe4;
  --ink-soft:  rgba(244,239,228,0.74);
  --ink-faint: rgba(244,239,228,0.46);
  --accent:    #cda05a;
  --accent-2:  #e8c483;
  --hair:      rgba(244,239,228,0.14);

  --paper:      #ffffff;
  --paper-2:    #f6f5f2;
  --paper-ink:  #17140f;
  --paper-soft: rgba(23,20,15,0.68);
  --paper-faint:rgba(23,20,15,0.46);
  --paper-hair: rgba(23,20,15,0.14);
  --paper-gold: #8a6a3a;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Big Shoulders Display", var(--sans);

  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- header ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:18px var(--pad);
  display:flex; align-items:center;
  background:transparent;
  transition:background 220ms ease, border-color 220ms ease, padding 220ms ease;
  border-bottom:1px solid transparent;
}
.site-head.is-scrolled{
  background:rgba(11,10,8,0.86);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hair);
  padding-top:12px; padding-bottom:12px;
}
.head-inner{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.brand{
  font-family:var(--serif);
  font-size:14px;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink);
}
.nav{ display:flex; gap:clamp(10px,2vw,26px); flex-wrap:wrap; }
.nav a{
  font-size:12.5px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:color 160ms ease, border-color 160ms ease;
}
.nav a:hover{ color:var(--ink); }
.nav a.active{ color:var(--accent-2); border-bottom-color:var(--accent); }

.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--hair);
  color:var(--ink);
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:2px;
  cursor:pointer;
  transition:border-color 160ms ease, color 160ms ease;
}
.nav-toggle:hover, .nav-toggle:focus-visible{ border-color:var(--accent); color:var(--accent-2); }

/* ---------- scene shell ---------- */
.scene{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:calc(var(--pad) + 64px) 0 var(--pad);
  overflow:hidden;
}
.scene-inner{
  width:100%; max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  position:relative; z-index:2;
}

/* reveal-on-scroll: visible by default, JS only adds motion.
   Opacity-only (no transform) so it never fights a permanent decorative
   rotation set on the same element by another rule. */
[data-reveal]{
  opacity:1;
}
html.js [data-reveal]{
  opacity:0;
  transition:opacity 640ms cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay, 0ms);
}
html.js [data-reveal].is-visible{ opacity:1; }
html.no-motion [data-reveal]{ opacity:1 !important; transition:none !important; }

/* ---------- section title grammar (sitewide, per Tarantino location scout) ---------- */
.kicker{
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 12px;
  font-weight:600;
}
.kicker-paper{ color:var(--paper-gold); }

.sec-title{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-size:clamp(30px, 4.6vw, 52px);
  color:var(--ink);
  display:inline-block;
  margin:0 0 40px;
  padding:6px 6px 14px 2px;
}
.sec-title-ink{ color:var(--ink); }
.scene-glance .sec-title, .scene-thread .sec-title{ color:var(--paper-ink); }

@media (max-width:640px){
  .sec-title{ font-size:clamp(26px, 8vw, 36px); }
}

/* ==========================================================================
   ACT 1 — HERO
   ========================================================================== */
.scene-hero{
  background:
    radial-gradient(ellipse 900px 620px at 14% 8%, rgba(205,160,90,0.10), transparent 60%),
    var(--bg);
}

.hero-portrait{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(52vw, 760px);
  z-index:1;
  mask-image:linear-gradient(to left, black 42%, transparent 92%);
  -webkit-mask-image:linear-gradient(to left, black 42%, transparent 92%);
  pointer-events:none;
}
.hero-portrait img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 18%;
  filter:grayscale(0.92) contrast(1.2) brightness(0.62) sepia(0.16);
  opacity:0.96;
}
.portrait-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(11,10,8,0.42), rgba(11,10,8,0.42)),
    linear-gradient(90deg, var(--bg) 0%, rgba(11,10,8,0.35) 38%, rgba(11,10,8,0.02) 70%),
    linear-gradient(0deg, rgba(11,10,8,0.55) 0%, transparent 30%, transparent 72%, rgba(11,10,8,0.55) 100%);
}


.name{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  text-transform:uppercase;
  font-size:15px;
  letter-spacing:0.14em;
  margin:0 0 34px;
  color:var(--ink);
}
/* Visually hidden but still the page's one semantic H1 (SEO name-search rule);
   kept in the accessibility tree and DOM, just not shown. */
.name-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:0; padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.kicker-hero{ margin-top:0; }

.role-headline{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.005em;
  font-size:clamp(34px, 5vw, 58px);
  line-height:1.05;
  color:var(--accent-2);
  max-width:13em;
  margin:0 0 26px;
}
.role-headline-sentence{
  text-transform:none;
  letter-spacing:0;
  font-size:clamp(30px, 4.4vw, 50px);
  line-height:1.14;
  max-width:none;
}

.subhead{
  font-family:var(--serif);
  font-size:clamp(16px, 1.6vw, 19px);
  line-height:1.62;
  color:var(--ink-soft);
  max-width:34em;
  margin:0 0 40px;
}

.employer-row{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:30px;
}
.employer-badge{ display:flex; align-items:center; }
.employer-badge img{
  display:block;
  height:24px;
  width:auto;
}

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 20px; }
.btn{
  display:inline-block;
  font-size:13.5px;
  letter-spacing:0.04em;
  padding:14px 26px;
  border-radius:2px;
  border:1px solid transparent;
  transition:background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn-primary{
  background:var(--accent);
  color:#1a1204;
  font-weight:600;
}
.btn-primary:hover{ background:var(--accent-2); transform:translateY(-1px); }
.btn-ghost{
  border-color:var(--hair);
  color:var(--ink);
}
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent-2); }
.btn-large{ padding:16px 34px; font-size:14.5px; }
.btn-hero{ padding:13px 18px; font-size:15px; font-weight:600; letter-spacing:0.03em; }

.credits-row{ margin:0; font-size:12.5px; letter-spacing:0.03em; color:var(--ink-faint); line-height:1.6; }
.credits-companies{
  text-transform:uppercase;
  letter-spacing:0.10em;
  color:var(--ink-soft);
  font-size:12.5px;
  border-top:1px solid var(--hair);
  padding-top:22px;
}
.credits-companies span{ color:var(--accent); margin:0 2px; }

.scroll-cue{
  position:absolute; left:var(--pad); bottom:26px; z-index:2;
  width:1px; height:44px;
}
.scroll-cue span{
  display:block; width:1px; height:100%;
  background:linear-gradient(to bottom, transparent, var(--accent) 60%, transparent);
  animation:cueMove 2.4s ease-in-out infinite;
}
@keyframes cueMove{
  0%{ transform:scaleY(0.3); transform-origin:top; opacity:0.3; }
  50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  100%{ transform:scaleY(0.3); transform-origin:bottom; opacity:0.3; }
}
html.no-motion .scroll-cue{ display:none; }
@media (prefers-reduced-motion: reduce){ .scroll-cue{ display:none; } }

/* ==========================================================================
   ACT 2 — ROLES STRIP (graft from candidate B: amber bordered strip)
   ========================================================================== */
.scene-roles{
  background:#ffffff;
  color:var(--paper-ink);
  min-height:auto;
  padding-top:calc(var(--pad) + 64px); padding-bottom:16px;
}
.roles-inner{ max-width:var(--max); }
.roles-strip{
  border-top:1px solid var(--paper-hair);
  border-bottom:1px solid var(--paper-hair);
  padding:16px 0 32px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.roles-strip-title{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-size:clamp(20px, 2.6vw, 28px);
  color:var(--paper-ink);
  margin:0 0 34px;
}
.roles-strip-title::after{
  content:"";
  display:block;
  width:64px;
  height:2px;
  margin-top:14px;
  background:var(--accent);
}
.roles-strip-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
}
.roles-strip-list li{
  display:flex; align-items:baseline; gap:18px;
}
.rn{
  color:var(--paper-gold);
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(17px, 1.6vw, 21px);
  flex:0 0 auto;
  width:34px;
}
.rt-group{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.rt{
  font-family:var(--serif);
  font-size:clamp(17px, 1.8vw, 21px);
  font-weight:400;
  color:var(--paper-ink);
  line-height:1.4;
}
.rt-sub{
  font-size:13px;
  color:var(--paper-soft);
  line-height:1.4;
}

/* ==========================================================================
   ACT 3 — AT A GLANCE (paper; asymmetric mosaic, graft from candidate D)
   ========================================================================== */
.scene-glance{
  background:var(--paper);
  color:var(--paper-ink);
  min-height:auto;
  padding-top:calc(var(--pad) + 96px);
}

.mosaic{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:auto auto;
  grid-template-areas:
    "feat feat feat"
    "a b c";
  gap:18px;
}
.mo{
  border:1px solid var(--paper-hair);
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:rgba(23,20,15,0.02);
}
.mo-a{ grid-area:a; }
.mo-b{ grid-area:b; }
.mo-c{ grid-area:c; }
.mo-feature{
  grid-area:feat;
  background:var(--paper-ink);
  color:var(--paper);
  justify-content:center;
  align-items:flex-start;
  border-color:var(--paper-ink);
  padding:36px 34px 40px;
}

.mo-num{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(26px, 3vw, 36px);
  color:var(--paper-gold);
  letter-spacing:0;
  line-height:1;
}
.mo-num-word{ font-style:italic; }
.mo-num-xl{
  font-size:clamp(56px, 9vw, 104px);
  color:var(--accent-2);
  line-height:0.92;
}
.mo-unit{ font-size:0.42em; margin-left:2px; }
.mo-cap{
  font-size:13.5px;
  line-height:1.55;
  color:var(--paper-soft);
  max-width:22em;
  margin:0;
}
.mo-cap-feature{
  color:rgba(245,241,232,0.78);
  font-size:15px;
  max-width:16em;
  margin-top:6px;
}

@media (max-width:820px){
  .mosaic{
    grid-template-columns:1fr;
    grid-template-areas:
      "feat" "a" "b" "c";
  }
}

/* ==========================================================================
   ACT 4 — THE THREAD + PERSONALITY BAND (paper continues)
   ========================================================================== */
.scene-thread{
  background:var(--paper-2);
  color:var(--paper-ink);
}
.thread-inner{ max-width:820px; }

.quote{
  font-family:var(--serif);
  font-size:clamp(26px, 4vw, 44px);
  line-height:1.2;
  letter-spacing:-0.01em;
  margin:0 0 30px;
  color:var(--paper-ink);
}

.thread-body{
  font-size:clamp(16px, 1.4vw, 19px);
  line-height:1.72;
  color:var(--paper-soft);
  max-width:44em;
  margin:0 0 20px;
}
.thread-closer{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(18px, 1.6vw, 21px);
  color:var(--paper-gold);
  line-height:1.5;
}
.thread-body:last-of-type{ margin-bottom:0; }

/* personality band: six collage pieces */
.collage-band{ margin-top:64px; max-width:none; }
.collage-kicker{ text-align:left; margin-bottom:26px; }

.collage-row{
  display:flex;
  flex-wrap:wrap;
  gap:38px 30px;
  align-items:flex-start;
}
.collage-piece{
  margin:0;
  width:clamp(120px, 15vw, 170px);
  text-align:center;
}
.collage-piece img{
  width:100%; height:auto;
  filter:drop-shadow(0 10px 18px rgba(23,20,15,0.16));
  animation:collageFloat 5s ease-in-out infinite;
  animation-delay:var(--float-delay, 0s);
}
.cp-1 img{ --float-delay:0s; }
.cp-2 img{ --float-delay:0.6s; }
.cp-3 img{ --float-delay:1.2s; }
.cp-4 img{ --float-delay:1.8s; }
.cp-5 img{ --float-delay:2.4s; }
.cp-6 img{ --float-delay:3s; }

@keyframes collageFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){
  .collage-piece img{ animation:none; }
}
html.no-motion .collage-piece img{ animation:none; }

.collage-piece figcaption{
  margin-top:14px;
  font-size:11.5px;
  letter-spacing:0.03em;
  line-height:1.5;
  color:var(--paper-soft);
  text-transform:none;
}
.collage-piece figcaption span{ color:var(--paper-gold); }

@media (max-width:640px){
  .collage-row{ gap:30px 20px; justify-content:space-between; }
  .collage-piece{ width:calc(33.333% - 14px); }
}

/* ==========================================================================
   ACT 5 — TRACK RECORD (back to dark, textured ground)
   ========================================================================== */
.scene-track{
  background:
    linear-gradient(180deg, rgba(11,10,8,0.55) 0%, rgba(11,10,8,0.86) 40%, var(--bg) 100%),
    url("assets/texture-black.webp");
  background-size:cover;
  background-position:center;
}

.ag-feature{
  margin-bottom:54px;
  padding:36px clamp(20px,4vw,48px) 40px;
  border:1px solid var(--hair);
  border-top:2px solid var(--accent);
  background:rgba(244,239,228,0.03);
}
.ag-feature-head{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.reel-org{
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0;
}
.ag-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px, 3.6vw, 38px);
  line-height:1.1;
  margin:0;
  color:var(--ink);
}
.ag-body{
  font-size:clamp(16px, 1vw, 17px);
  line-height:1.76;
  letter-spacing:0.01em;
  color:var(--ink-soft);
  max-width:46em;
  margin:0 0 18px;
}
.ag-highlight{
  font-family:var(--serif);
  font-size:clamp(17px, 2vw, 21px);
  color:var(--accent-2);
  margin:0 0 26px;
  line-height:1.4;
}
.ag-credits{
  font-size:13.5px;
  letter-spacing:0.02em;
  line-height:1.8;
  color:var(--ink-faint);
  max-width:40em;
  margin:0 0 22px;
  padding-top:18px;
  border-top:1px solid var(--hair);
}
.ag-credits-label, .ag-credits-and{
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:0.09em;
  color:var(--accent-2);
  margin-right:2px;
}
.ag-press{ font-size:13.5px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ag-press-label{ color:var(--accent-2); text-transform:uppercase; font-size:11px; letter-spacing:0.09em; }
.press-badge{
  display:inline-block;
  padding:6px 14px;
  border:1px solid var(--accent);
  border-radius:2px;
  font-family:var(--serif);
  font-size:13px;
  color:var(--ink);
  transition:background 160ms ease, color 160ms ease;
}
.press-badge:hover{ background:var(--accent); color:#1a1204; }

.reel{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0;
  border-top:1px solid var(--hair);
}
.reel-card{
  padding:34px 30px 8px 0;
  border-right:1px solid var(--hair);
}
.reel-card:last-child{ border-right:none; padding-right:0; padding-left:30px; }
.reel-num{
  display:block;
  font-family:var(--serif);
  font-size:14px;
  color:var(--accent-2);
  letter-spacing:0.05em;
  margin-bottom:18px;
}
.reel-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(19px, 2vw, 23px);
  line-height:1.28;
  margin:0 0 8px;
  color:var(--ink);
}
.reel-card .reel-org{ margin:0 0 16px; }
.reel-body{
  font-size:clamp(16px, 1vw, 16.5px);
  line-height:1.74;
  letter-spacing:0.01em;
  color:var(--ink-soft);
  margin:0;
}
.reel-more{ margin-top:36px; font-size:14px; }
.reel-more a{ color:var(--accent-2); border-bottom:1px solid var(--accent); padding-bottom:1px; }
.reel-more a:hover{ color:var(--ink); }

@media (max-width:720px){
  .reel{ grid-template-columns:1fr; }
  .reel-card{ padding:26px 0; border-right:none; border-bottom:1px solid var(--hair); }
  .reel-card:last-child{ border-bottom:none; padding-left:0; }
  .ag-feature-head{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* ==========================================================================
   ACT 6 — RECOGNITION (dark, textured ground; pennant banners)
   ========================================================================== */
.scene-recognition{
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(11,10,8,0.82) 50%, var(--bg) 100%),
    url("assets/texture-black.webp");
  background-size:cover;
  background-position:center;
  min-height:auto;
  padding-top:calc(var(--pad) + 88px);
  padding-bottom:calc(var(--pad) + 20px);
}

.pennant-row{
  list-style:none;
  margin:20px 0 34px;
  padding:24px 0 0;
  border-top:1px solid var(--hair);
  display:flex;
  flex-wrap:wrap;
  gap:34px 30px;
  align-items:flex-start;
}
.pennant{
  position:relative;
  width:clamp(140px, 20vw, 190px);
  clip-path:polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
  padding:22px 16px 40px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
}
.pennant-text{
  font-size:12.5px;
  line-height:1.5;
  letter-spacing:0.02em;
}
.pennant-text em{ font-style:normal; opacity:0.78; display:block; margin-top:4px; font-size:11px; }
.pennant-text a{ display:block; }
.pennant-1{ background:linear-gradient(160deg, #cda05a, #8a6a3a); color:#1a1204; }
.pennant-2{ background:linear-gradient(160deg, #a8443a, #6e2b26); color:var(--paper); }
.pennant-3{ background:linear-gradient(160deg, #35505c, #1f333c); color:var(--paper); }
.pennant-4{ background:linear-gradient(160deg, #4a5b3a, #2c3823); color:var(--paper); }

.recognition-clients{
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0;
}
.recognition-clients span{ color:var(--accent); margin:0 4px; }

@media (max-width:640px){
  .pennant-row{ gap:22px 16px; }
  .pennant{ width:calc(50% - 8px); }
}

/* ==========================================================================
   ACT 7 — MANIFESTO + CLOSE (paper)
   ========================================================================== */
.scene-close{
  background:var(--paper);
  color:var(--paper-ink);
  min-height:auto;
  padding-top:calc(var(--pad) + 40px);
  padding-bottom:calc(var(--pad) + 40px);
  text-align:center;
}
.close-inner{ max-width:640px; margin:0 auto; }
.scene-close .kicker{ text-align:center; }

.manifesto{
  font-family:var(--serif);
  font-size:clamp(24px, 3.6vw, 38px);
  line-height:1.3;
  color:var(--paper-ink);
  margin:0 0 44px;
}

.roles-restated{
  list-style:none;
  margin:0 0 44px;
  padding:26px 0;
  border-top:1px solid var(--paper-hair);
  border-bottom:1px solid var(--paper-hair);
  display:flex;
  flex-direction:column;
  gap:18px;
  text-align:left;
}
.roles-restated li{ display:flex; align-items:baseline; gap:16px; }
.rr-num{
  font-family:var(--serif);
  font-size:13px;
  color:var(--paper-gold);
  letter-spacing:0.05em;
  flex:0 0 auto;
}
.rr-text{
  font-family:var(--serif);
  font-size:clamp(15.5px, 1.7vw, 18px);
  line-height:1.4;
  color:var(--paper-ink);
}

.close-writing{ margin:0 0 40px; }
.kicker-mini{
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--paper-gold);
  margin:0 0 8px;
  font-weight:600;
}
.essay-line{ margin:0; font-family:var(--serif); font-size:16px; }
.essay-line a{ color:var(--paper-ink); border-bottom:1px solid var(--paper-gold); padding-bottom:1px; }
.essay-line a:hover{ color:var(--paper-gold); }

.connect-line{
  font-size:clamp(15px, 1.8vw, 17px);
  line-height:1.6;
  color:var(--paper-soft);
  margin:0 0 30px;
  max-width:38em;
  margin-left:auto; margin-right:auto;
}
.scene-close .btn-primary{ background:var(--paper-ink); color:var(--paper); }
.scene-close .btn-primary:hover{ background:var(--paper-gold); color:#1a1204; }

/* ---------- footer ---------- */
.site-foot{
  background:var(--bg-2);
  border-top:1px solid var(--hair);
  padding:26px var(--pad) 18px;
}
.foot-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  font-size:12.5px;
  color:var(--ink-faint);
}
.foot-inner a{ color:var(--ink-soft); }
.foot-inner a:hover{ color:var(--accent-2); }
.foot-inner span{ color:var(--ink-faint); margin:0 6px; }
.foot-credential{
  max-width:var(--max); margin:14px auto 0;
  padding-top:14px;
  border-top:1px solid var(--hair);
  justify-content:flex-start;
}
.foot-credential p{
  margin:0;
  font-size:11px;
  letter-spacing:0.02em;
  color:var(--ink-faint);
}

/* ==========================================================================
   RESPONSIVE — mobile fold and general narrow-screen rules
   ========================================================================== */
@media (max-width: 900px){
  .hero-portrait{ width:56vw; }
}

@media (max-width: 720px){
  .site-head{ padding:12px var(--pad); }
  .head-inner{ flex-direction:row; align-items:center; gap:10px; }
  .brand{ font-size:14px; flex:0 0 auto; }
  .nav-toggle{ display:inline-block; margin-left:auto; }
  .nav{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    flex-wrap:nowrap;
    gap:2px;
    position:absolute;
    top:100%; left:0; right:0;
    width:100%;
    background:rgba(11,10,8,0.94);
    backdrop-filter:saturate(140%) blur(10px);
    -webkit-backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--hair);
    padding:8px var(--pad) 16px;
  }
  .nav.is-open{ display:flex; }
  .nav a{ width:100%; padding:12px 0; white-space:normal; }
  .hero-portrait{
    position:relative;
    width:100%; height:40vh; min-height:200px; max-height:45vh;
    top:auto; right:auto; bottom:auto;
    order:-1;
    mask-image:linear-gradient(to bottom, black 55%, transparent 98%);
    -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 98%);
    margin-bottom:18px;
  }
  .portrait-scrim{
    background:
      linear-gradient(180deg, rgba(11,10,8,0.15) 0%, rgba(11,10,8,0.15) 40%, var(--bg) 96%),
      linear-gradient(90deg, rgba(11,10,8,0.35), transparent 50%, rgba(11,10,8,0.35));
  }
  .scene-hero{ flex-direction:column; padding-top:90px; }
  .scene{ padding-top:90px; padding-bottom:44px; min-height:auto; }
  .scroll-cue{ display:none; }
  .name{ font-size:11px; margin-bottom:16px; }
  .role-headline{ font-size:28px; margin-bottom:16px; }
  .subhead{ font-size:15px; margin-bottom:22px; }
  .employer-row{ gap:20px; }
  .employer-badge img{ height:20px; }
  .cta-row{ margin:22px 0 16px; flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; text-align:center; }
  .credits-companies{ padding-top:16px; }
}

@media (max-width: 420px){
  .role-headline{ font-size:25px; }
}

/* ==========================================================================
   SUBPAGES — shared scene patterns (about / track-record / writing / contact)
   ========================================================================== */
.scene-subhero{
  background:
    radial-gradient(ellipse 900px 620px at 14% 8%, rgba(205,160,90,0.10), transparent 60%),
    var(--bg);
  min-height:auto;
  padding-top:calc(var(--pad) + 120px);
  padding-bottom:calc(var(--pad) + 40px);
}
.about-header{
  background:
    linear-gradient(180deg, rgba(11,10,8,0.42) 0%, rgba(11,10,8,0.6) 38%, rgba(11,10,8,0.86) 68%, rgba(11,10,8,1) 100%),
    url("assets/about-header-collage.png");
  background-size:cover;
  background-position:center 30%;
}
.about-header .kicker{
  color:var(--accent-2);
  text-shadow:0 1px 3px rgba(0,0,0,0.95), 0 2px 10px rgba(0,0,0,0.9);
}
.about-header .page-title{
  color:var(--accent-2);
  text-shadow:0 2px 5px rgba(0,0,0,0.95), 0 4px 20px rgba(0,0,0,0.9);
}
.about-header .page-lede{
  color:var(--ink-soft);
  text-shadow:0 1px 4px rgba(0,0,0,0.95), 0 3px 14px rgba(0,0,0,0.9);
}
.page-title{
  font-family:var(--serif);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  font-size:clamp(34px, 5.6vw, 60px);
  color:var(--accent-2);
  margin:0 0 22px;
  line-height:1.08;
}
.page-lede{
  font-family:var(--serif);
  font-size:clamp(16px, 1.6vw, 19px);
  line-height:1.62;
  color:var(--ink-soft);
  max-width:44em;
  margin:0;
}
.page-lede + .page-lede{ margin-top:14px; }
.meta-line{
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--paper-gold);
  margin:0 0 10px;
}
.meta-line a{ color:var(--paper-gold); }
.meta-line a:hover{ color:var(--accent-2); }

.scene-prose{ background:var(--paper); color:var(--paper-ink); min-height:auto; }
.prose-wrap{ max-width:760px; }
.prose p{ font-size:clamp(15.5px,1.4vw,18px); line-height:1.75; color:var(--paper-soft); margin:0 0 24px; }
.prose p:last-child{ margin-bottom:0; }
.prose .drop{ font-size:clamp(17px,1.7vw,20px); color:var(--paper-ink); }
.prose strong{ color:var(--paper-ink); }
.prose a{ color:var(--paper-gold); border-bottom:1px solid var(--paper-gold); }
.prose a:hover{ color:var(--paper-ink); }

.about-portrait{
  width:170px;
  margin:0 0 32px;
  filter:grayscale(0.85) contrast(1.1) sepia(0.1);
}

.back-link{ display:inline-block; margin-bottom:8px; font-size:13px; color:var(--paper-gold); border-bottom:1px solid var(--paper-gold); }
.back-link:hover{ color:var(--paper-ink); }

.scene-band-dark{
  background:
    linear-gradient(180deg, rgba(11,10,8,0.55) 0%, rgba(11,10,8,0.86) 40%, var(--bg) 100%),
    url("assets/texture-black.webp");
  background-size:cover; background-position:center;
  min-height:auto;
}
.band-title{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,34px); color:var(--ink); margin:0 0 18px; }
.band-body{ font-size:15.5px; line-height:1.72; color:var(--ink-soft); max-width:48em; margin:0; }

/* Pattern reuses .scene-band-dark but needs to read as its own moment, not
   a repeat of Work directly above it. */
#pattern.scene-band-dark{
  background:
    radial-gradient(ellipse 820px 520px at 82% 0%, rgba(205,160,90,0.18), transparent 62%),
    linear-gradient(180deg, rgba(11,10,8,0.6) 0%, rgba(11,10,8,0.92) 45%, var(--bg) 100%),
    url("assets/texture-black.webp");
  background-size:cover;
  background-position:center;
}

/* ==========================================================================
   CREDO — pull quote, quiet and flat where the sections around it are busy
   ========================================================================== */
.scene-pullquote{
  background:var(--bg);
  color:var(--ink);
  min-height:auto;
  padding-top:calc(var(--pad) + 80px);
  padding-bottom:calc(var(--pad) + 80px);
  text-align:center;
}
.scene-pullquote .scene-inner{ max-width:780px; }
.scene-pullquote .manifesto{
  font-style:italic;
  color:var(--accent-2);
  font-size:clamp(28px, 4.4vw, 48px);
  margin:0;
}

/* FAQ */
.faq{ margin:0; }
.faq-item{ padding:22px 0; border-top:1px solid var(--paper-hair); }
.faq-item:last-child{ border-bottom:1px solid var(--paper-hair); }
.faq-item dt{ font-family:var(--serif); font-size:17px; color:var(--paper-ink); margin:0 0 8px; }
.faq-item dd{ margin:0; font-size:14.5px; line-height:1.65; color:var(--paper-soft); }

/* track-record card grid */
.tr-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:40px; }
.tr-card{
  background:var(--bg);
  padding:32px 30px;
  position:relative;
  transition:transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
html.js:not(.no-motion) .tr-card:hover,
html.js:not(.no-motion) .tr-card:focus-within{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(0,0,0,0.4);
  background:var(--bg-2);
  z-index:2;
}
.tr-card h3{ font-family:var(--serif); font-weight:400; font-size:clamp(19px,2vw,23px); color:var(--ink); margin:0 0 6px; }
.tr-card .reel-org{ margin:0 0 14px; }
.tr-card p{ font-size:14.5px; line-height:1.65; color:var(--ink-soft); margin:0 0 12px; }
.tr-card p:last-child{ margin-bottom:0; }
@media (max-width:720px){ .tr-grid{ grid-template-columns:1fr; } }

/* four-step band */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:26px; }
.step h4{ font-family:var(--serif); font-weight:400; font-size:16px; color:var(--accent-2); margin:0 0 8px; }
.step p{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin:0; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* contact lines */
.contact-lines{ margin-top:36px; border-top:1px solid var(--paper-hair); }
.contact-row{ display:flex; gap:24px; padding:18px 0; border-bottom:1px solid var(--paper-hair); align-items:baseline; flex-wrap:wrap; }
.contact-row .k{ flex:0 0 110px; font-size:11.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--paper-gold); }
.contact-row .v{ font-family:var(--serif); font-size:16px; color:var(--paper-ink); }
.contact-row .v a{ color:var(--paper-ink); border-bottom:1px solid var(--paper-gold); }
.contact-row .v a:hover{ color:var(--paper-gold); }

/* essay list item (writing page) */
.essay-item{ padding:30px clamp(20px,4vw,40px); border:1px solid var(--paper-hair); background:rgba(23,20,15,0.02); }
.essay-item .kicker-mini{ margin-bottom:10px; }
.essay-item h3{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.6vw,30px); margin:0 0 12px; }
.essay-item h3 a{ color:var(--paper-ink); }
.essay-item h3 a:hover{ color:var(--paper-gold); }
.essay-item p{ font-size:15px; line-height:1.7; color:var(--paper-soft); margin:0 0 14px; }
.essay-item .read-link{ font-size:13.5px; color:var(--paper-gold); border-bottom:1px solid var(--paper-gold); }
.essay-item .read-link:hover{ color:var(--paper-ink); }

/* compact close CTA, reused on every subpage */
.scene-close-compact{
  background:var(--paper);
  color:var(--paper-ink);
  min-height:auto;
  padding-top:calc(var(--pad) + 20px);
  padding-bottom:calc(var(--pad) + 20px);
  text-align:center;
}
.scene-close-compact .kicker{ text-align:center; }
.scene-close-compact .connect-line{ max-width:36em; margin-left:auto; margin-right:auto; }
.connect-line{
  font-size:clamp(15px, 1.8vw, 17px);
  line-height:1.6;
  color:var(--paper-soft);
  margin:0 0 30px;
  max-width:38em;
  margin-left:auto; margin-right:auto;
}
.scene-close-compact .btn-primary{ background:var(--paper-ink); color:var(--paper); }
.scene-close-compact .btn-primary:hover{ background:var(--paper-gold); color:#1a1204; }


/* ==========================================================================
   MOTION LAYER (added 2026-10-01): hero line rise + portrait settle,
   About collage parallax, sliding nav underline. Everything is static
   without JS or with reduced motion; JS adds the classes that animate.
   ========================================================================== */
.hl{ display:block; overflow:hidden; padding-bottom:0.06em; margin-bottom:-0.06em; }
.hl-in{ display:inline-block; }
html.hero-anim .hl-in{
  transform:translateY(108%);
  animation:hlRise 900ms cubic-bezier(0.2, 0.7, 0.1, 1) forwards;
}
html.hero-anim .hl:nth-child(1) .hl-in{ animation-delay:120ms; }
html.hero-anim .hl:nth-child(2) .hl-in{ animation-delay:240ms; }
html.hero-anim .hl:nth-child(3) .hl-in{ animation-delay:360ms; }
html.hero-anim .hl:nth-child(4) .hl-in{ animation-delay:480ms; }
@keyframes hlRise{ to{ transform:translateY(0); } }

html.hero-anim .kicker-hero,
html.hero-anim .subhead,
html.hero-anim .cta-row,
html.hero-anim .employer-row{
  opacity:0;
  animation:heroFade 800ms ease forwards;
}
html.hero-anim .kicker-hero{ animation-delay:0ms; }
html.hero-anim .subhead{ animation-delay:820ms; }
html.hero-anim .cta-row{ animation-delay:940ms; }
html.hero-anim .employer-row{ animation-delay:1060ms; }
@keyframes heroFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

html.hero-anim .hero-portrait img{
  transform:scale(1.06);
  animation:portraitSettle 2200ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
@keyframes portraitSettle{ to{ transform:scale(1); } }

.about-header{ background-position:center var(--about-y, 30%); }

.nav{ position:relative; }
.nav-ink{
  position:absolute; left:0; top:0;
  height:1px; width:0;
  background:var(--accent);
  opacity:0;
  pointer-events:none;
  transition:transform 420ms cubic-bezier(0.3, 0.7, 0.2, 1), width 420ms cubic-bezier(0.3, 0.7, 0.2, 1), opacity 200ms ease;
}
html.nav-ink-on .nav a.active{ border-bottom-color:transparent; }
html.nav-ink-on .nav-ink{ opacity:1; }
@media (max-width: 900px){ .nav-ink{ display:none; } html.nav-ink-on .nav a.active{ border-bottom-color:var(--accent); } }

/* Headshot drifts slower than the page as the hero scrolls away. */
.hero-portrait{ transform:translate3d(0, var(--portrait-y, 0px), 0); will-change:transform; }