/* =================================================================
   Ava McCoy — Personal site
   A refined, editorial design system in deep emerald + cream.
   ================================================================= */

:root{
  /* Palette --------------------------------------------------------- */
  --ink:        #14211b;
  --ink-soft:   #2a3a32;
  --emerald:    #0f3d2e;
  --emerald-2:  #16563e;
  --moss:       #557a5e;
  --gold:       #b08a3e;
  --cream:      #f6f1e6;
  --cream-2:    #efe7d6;
  --paper:      #fbf8f1;
  --white:      #ffffff;
  --line:       rgba(20,33,27,.14);

  /* Type ------------------------------------------------------------ */
  --serif:      "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Rhythm ---------------------------------------------------------- */
  --wrap:       1240px;
  --gutter:     clamp(20px, 4vw, 56px);
  --section-y:  clamp(80px, 10vw, 160px);
  --radius:     14px;
  --ease:       cubic-bezier(.2,.7,.2,1);
}

/* Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--emerald); color:var(--cream);
  padding:10px 14px; border-radius:6px;
}
.skip:focus{left:12px; top:12px; z-index:1000}

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

/* Type primitives --------------------------------------------------- */
.h2{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(34px, 5.2vw, 68px);
  line-height:1.02;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
}
.h2 em{font-style:italic; font-weight:300; color:var(--emerald-2)}
.h2--xl{font-size:clamp(48px, 8vw, 110px)}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 22px;
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--emerald);
  display:inline-block;
  box-shadow:0 0 0 4px rgba(15,61,46,.12);
}

.section-tag{
  font-size:11px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--emerald-2);
  font-weight:600;
}

.section-head{ max-width:880px; margin-bottom:clamp(40px, 5vw, 72px); }
.section-head--center{ text-align:center; margin-inline:auto }
.section-sub{
  margin-top:18px;
  font-size:18px;
  color:var(--ink-soft);
  max-width:62ch;
}
.section-head--center .section-sub{ margin-inline:auto }
.section-head .section-tag{ display:block; margin-bottom:18px }

/* Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px;
  font-size:14px;
  font-weight:500;
  letter-spacing:0.01em;
  border-radius:999px;
  transition:transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn--primary{
  background:var(--emerald);
  color:var(--cream);
}
.btn--primary:hover{ background:var(--ink); transform:translateY(-1px) }
.btn--ghost{
  border-color:var(--line);
  color:var(--ink);
  background:transparent;
}
.btn--ghost:hover{ border-color:var(--emerald); color:var(--emerald) }
.btn--block{ width:100%; justify-content:center; padding:16px 22px }

/* ==================================================================
   NAV
   ================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:50;
  padding:18px 0;
  transition:background .3s var(--ease), padding .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(251,248,241,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  padding:10px 0;
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.nav__mark{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:-0.02em;
  display:inline-flex; align-items:center; gap:6px;
  color:var(--ink);
}
.mark__a, .mark__m{ font-style:italic; font-weight:400 }
.mark__dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--emerald);
  display:inline-block;
  margin:0 2px 4px;
}
.nav__links{ display:flex; gap:34px }
.nav__links a{
  font-size:14px;
  color:var(--ink);
  position:relative;
  padding:6px 0;
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background:var(--emerald); transform-origin:left;
  transform:scaleX(0); transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--emerald) }
.nav__links a:hover::after{ transform:scaleX(1) }
.nav__cta{
  font-size:14px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav__cta:hover{ background:var(--ink); color:var(--cream) }
.nav__toggle{
  display:none;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(251,248,241,.6);
  position:relative;
  z-index:65;
}
.nav__toggle span{
  position:absolute; left:11px; right:11px; height:1.5px;
  background:var(--ink); transition:transform .35s var(--ease), top .35s var(--ease), opacity .25s var(--ease);
}
.nav__toggle span:nth-child(1){ top:17px }
.nav__toggle span:nth-child(2){ top:25px }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg) }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ top:21px; transform:rotate(-45deg) }

/* Mobile menu panel (controlled by aria-expanded on toggle) */
@media (max-width:720px){
  .nav__links{
    position:fixed;
    inset:74px 16px auto;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    background:var(--paper);
    padding:18px;
    border-radius:16px;
    border:1px solid var(--line);
    box-shadow:0 30px 60px -30px rgba(15,61,46,.4);
    z-index:60;
    opacity:0;
    transform:translateY(-12px);
    pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    display:flex !important;
  }
  .nav__toggle[aria-expanded="true"] + .nav__links,
  .nav.is-open .nav__links{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .nav__links a{
    padding:14px 12px;
    border-radius:10px;
    font-size:16px;
  }
  .nav__links a::after{ display:none }
  .nav__links a:hover{ background:var(--cream) }
}

/* ==================================================================
   HERO
   ================================================================== */
.hero{
  padding:140px 0 0;
  position:relative;
  background:
    radial-gradient(1100px 600px at 90% -10%, rgba(15,61,46,.08), transparent 60%),
    radial-gradient(800px 500px at -10% 80%, rgba(176,138,62,.07), transparent 60%),
    var(--paper);
  overflow:hidden;
}
.hero__grid{
  max-width:var(--wrap);
  margin:0 auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:clamp(32px, 6vw, 80px);
  align-items:end;
  min-height:calc(100vh - 220px);
  padding-bottom:60px;
}
.hero__copy{ position:relative; z-index:2 }
.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(64px, 11vw, 168px);
  line-height:0.92;
  letter-spacing:-0.035em;
  margin:0 0 36px;
  color:var(--ink);
}
.display .line{ display:block }
.display .line--italic{
  font-style:italic;
  font-weight:300;
  color:var(--emerald-2);
  padding-left:.6em;
}
.lede{
  font-size:clamp(17px, 1.5vw, 21px);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0 0 36px;
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap }

/* Portrait ---------------------------------------------------------- */
.hero__portrait{
  position:relative;
  margin:0;
  align-self:end;
}
.portrait__frame{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  aspect-ratio: 4/5;
  background:var(--cream-2);
  box-shadow:
    0 30px 80px -30px rgba(15,61,46,.35),
    0 2px 0 rgba(20,33,27,.04);
  transform:translateY(0);
}
.portrait__frame img{ width:100%; height:100%; object-fit:cover; object-position:center 30% }
.portrait__frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(15,61,46,.12));
  pointer-events:none;
}
.portrait__cap{
  position:absolute;
  left:-12px; bottom:24px;
  background:var(--cream);
  border:1px solid var(--line);
  padding:10px 16px;
  border-radius:999px;
  font-family:var(--serif);
  font-size:13px;
  display:flex; align-items:baseline; gap:8px;
}
.portrait__cap .num{ font-style:italic; color:var(--emerald) }
.portrait__badge{
  position:absolute;
  top:-22px; right:-22px;
  width:104px; height:104px;
  border-radius:50%;
  background:var(--emerald);
  color:var(--cream);
  display:grid; place-content:center; text-align:center;
  font-family:var(--serif);
  line-height:1.1;
  box-shadow:0 14px 30px -10px rgba(15,61,46,.5);
  animation: spin 18s linear infinite;
}
.portrait__badge span{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; opacity:.8 }
.portrait__badge strong{ font-size:24px; font-weight:400; font-style:italic; display:block; margin-top:2px }

@keyframes spin{ to{ transform:rotate(360deg) } }

/* Ticker ------------------------------------------------------------ */
.ticker{
  margin-top:60px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:linear-gradient(180deg, transparent, rgba(15,61,46,.03));
}
.ticker__track{
  display:flex; gap:42px;
  align-items:center;
  padding:18px 0;
  animation:scroll 24s linear infinite;
  white-space:nowrap;
}
.ticker__track span{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(20px, 2.4vw, 32px);
  color:var(--emerald);
  flex-shrink:0;
}
.ticker__track span:nth-child(even){ color:var(--gold); font-size:18px }

@keyframes scroll{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}

/* ==================================================================
   METRICS
   ================================================================== */
.metrics{
  padding:clamp(60px, 8vw, 110px) 0;
  background:var(--paper);
}
.metrics__row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.metrics__row li{
  background:var(--paper);
  padding:36px 24px;
  display:flex; flex-direction:column; gap:6px;
}
.metric__value{
  display:flex;
  align-items:baseline;
  gap:2px;
  line-height:1;
  white-space:nowrap;
}
.metric__num{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(38px, 5vw, 64px);
  line-height:1;
  color:var(--emerald);
  font-feature-settings:"tnum";
}
.metric__suffix{
  font-family:var(--serif);
  color:var(--emerald);
  font-size:clamp(20px, 2.4vw, 30px);
  font-style:italic;
  line-height:1;
}
.metric__lbl{
  margin-top:auto;
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:18px;
}

/* ==================================================================
   ABOUT
   ================================================================== */
.about{ padding:var(--section-y) 0; background:var(--cream) }
.about__grid{
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap:clamp(32px, 6vw, 100px);
  align-items:start;
}
.about__body p{ font-size:17px; line-height:1.7; color:var(--ink) }
.about__body .lead{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(20px, 2vw, 26px);
  line-height:1.4;
  margin:0 0 24px;
  color:var(--ink);
}
.about__body em{ font-style:italic; color:var(--emerald-2) }
.facts{
  margin-top:48px;
  border-top:1px solid var(--line);
}
.facts > div{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:24px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.facts dt{
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.facts dd{ margin:0; color:var(--ink) }

/* ==================================================================
   QUOTE
   ================================================================== */
.quote{
  padding:clamp(80px, 10vw, 140px) 0;
  background:var(--emerald);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.quote::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(176,138,62,.12), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(255,255,255,.05), transparent 60%);
  pointer-events:none;
}
.quote .wrap{ position:relative; max-width:1000px; text-align:center }
.quote__mark{
  font-family:var(--serif);
  font-size:clamp(120px, 18vw, 220px);
  line-height:0.4;
  color:var(--gold);
  margin:0 0 20px;
  opacity:.6;
  font-style:italic;
}
.quote__text{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(26px, 3.6vw, 44px);
  line-height:1.25;
  letter-spacing:-0.015em;
  margin:0 0 28px;
}
.quote__attr{
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--cream);
  opacity:.7;
  margin:0;
}

/* ==================================================================
   WORK / CARDS
   ================================================================== */
.work{ padding:var(--section-y) 0; background:var(--paper) }
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 32px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
  position:relative;
  overflow:hidden;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -24px rgba(15,61,46,.25);
}
.card--accent{ background:var(--emerald); color:var(--cream); border-color:transparent }
.card--accent .card__num{ color:var(--gold) }
.card--accent .card__title{ color:var(--cream) }
.card--accent .card__list li{ border-color:rgba(246,241,230,.18) }
.card--accent .card__link{ color:var(--cream) }
.card--accent .card__link::after{ background:var(--gold) }

.card__num{
  font-family:var(--serif);
  font-style:italic;
  color:var(--emerald);
  font-size:16px;
}
.card__title{
  font-family:var(--serif);
  font-weight:340;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--ink);
}
.card p{ margin:0; opacity:.86; font-size:15.5px; line-height:1.6 }
.card__list{
  margin-top:14px;
  display:flex; flex-direction:column;
}
.card__list li{
  font-size:14px;
  padding:12px 0;
  border-top:1px solid var(--line);
  opacity:.9;
}
.card__list li:last-child{ border-bottom:1px solid var(--line) }
.card__link{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px;
  font-weight:500;
  color:var(--emerald);
  position:relative;
  padding-bottom:4px;
  width:fit-content;
}
.card__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--emerald);
  transform-origin:left; transform:scaleX(.3); transition:transform .35s var(--ease);
}
.card__link:hover::after{ transform:scaleX(1) }

/* ==================================================================
   FILMS
   ================================================================== */
.films{
  padding:var(--section-y) 0;
  background:var(--cream);
}
.film-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(20px, 3vw, 36px);
}
.film{
  display:block;
  color:inherit;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.film:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -28px rgba(15,61,46,.3);
}
.film__media{
  position:relative;
  aspect-ratio: 4/3;
  background:
    radial-gradient(ellipse at center, #0b1814 0%, #050a08 100%);
  overflow:hidden;
}
.film__media img{
  width:100%; height:100%;
  object-fit:contain;
  opacity:.95;
  transition:transform .9s var(--ease), opacity .4s var(--ease), filter .4s var(--ease);
}
.film:hover .film__media img{ transform:scale(1.03); opacity:1 }
.film__media::before{
  /* subtle film grain / vignette */
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
  z-index:1;
}
.film__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 70%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
  z-index:1;
}
.film__play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:78px; height:78px;
  border-radius:50%;
  background:rgba(246,241,230,.95);
  color:var(--emerald);
  display:grid; place-content:center;
  font-size:24px;
  padding-left:6px;
  z-index:1;
  transition:transform .35s var(--ease), background .25s var(--ease);
  box-shadow:0 10px 30px -8px rgba(0,0,0,.4);
}
.film:hover .film__play{ background:var(--gold); transform:translate(-50%, -50%) scale(1.08) }
.film__meta{
  padding:28px 30px 30px;
  display:flex; flex-direction:column; gap:10px;
}
.film__num{
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--emerald);
  font-weight:600;
}
.film__title{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(28px, 3vw, 40px);
  line-height:1.05;
  letter-spacing:-0.02em;
  margin:4px 0 0;
  color:var(--ink);
}
.film__sub{
  margin:0;
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.55;
  max-width:50ch;
}
.film__link{
  margin-top:10px;
  font-size:14px;
  font-weight:500;
  color:var(--emerald);
  display:inline-flex; align-items:center; gap:6px;
}

/* ==================================================================
   JOURNALISM
   ================================================================== */
.journalism{
  padding:var(--section-y) 0;
  background:var(--paper);
}
.journ-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(20px, 3vw, 36px);
  align-items:stretch;
}
.journ-card{
  display:flex; flex-direction:column;
  color:inherit;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.journ-card:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -28px rgba(15,61,46,.3);
}

/* Broadcast video card */
.journ-card--video{ background:var(--ink); color:var(--cream) }
.journ-card__media{
  position:relative;
  aspect-ratio: 16/10;
  background:#000;
  overflow:hidden;
}
.journ-card__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:.65; filter:saturate(.8);
  transition:transform .9s var(--ease), opacity .4s var(--ease);
}
.journ-card:hover .journ-card__media img{ transform:scale(1.04); opacity:.8 }
.journ-card__media .film__play{ background:var(--gold); color:var(--ink) }
.journ-card__pill{
  position:absolute;
  top:18px; left:18px;
  background:rgba(20,33,27,.78);
  color:var(--cream);
  border:1px solid rgba(246,241,230,.18);
  padding:7px 14px;
  border-radius:999px;
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
  backdrop-filter:blur(8px);
  z-index:2;
}
.journ-card__meta{
  padding:28px 30px 30px;
  display:flex; flex-direction:column; gap:12px;
}
.journ-card__title{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.1;
  letter-spacing:-0.015em;
  margin:0;
}
.journ-card__meta p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  opacity:.82;
}
.journ-card--video .film__link{ color:var(--gold) }

/* Print / Crimson card — newspaper styling */
.journ-card--print{
  background:#f6f1e0;
  color:var(--ink);
  position:relative;
}
.journ-card--print::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 1px, rgba(20,33,27,.02) 1px 2px);
  pointer-events:none;
}
.journ-card__paper{
  padding:clamp(28px, 4vw, 52px);
  display:flex; flex-direction:column; gap:14px;
  flex:1;
  position:relative;
}
.paper__masthead{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(30px, 4vw, 50px);
  line-height:1;
  letter-spacing:-0.02em;
  color:#7a1a1a;
}
.paper__rule{
  display:block;
  height:1px;
  background:var(--ink);
  opacity:.5;
  margin:6px 0;
}
.paper__byline{
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.paper__byline em{ color:var(--ink); font-style:italic; text-transform:none; letter-spacing:0; font-size:15px }
.paper__excerpt{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.5;
  margin:8px 0 0;
  color:var(--ink);
  max-width:42ch;
  column-count:1;
}
.paper__cta{
  margin-top:auto;
  padding-top:18px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  color:#7a1a1a;
  display:inline-flex; align-items:center; gap:6px;
}

/* ==================================================================
   EXPERIENCE TIMELINE
   ================================================================== */
.experience{
  padding:var(--section-y) 0;
  background:var(--cream);
}
.inline-link{
  color:var(--emerald);
  border-bottom:1px solid var(--emerald);
  padding-bottom:1px;
  transition:opacity .2s var(--ease);
}
.inline-link:hover{ opacity:.7 }
.timeline{
  margin-top:clamp(40px, 5vw, 60px);
  border-top:1px solid var(--line);
}
.timeline__item{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:clamp(20px, 4vw, 60px);
  padding:36px 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:padding .3s var(--ease);
}
.timeline__item::before{
  content:"";
  position:absolute;
  left:0; top:42px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--emerald);
  transform:translateX(-4px);
  opacity:0;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.timeline__item:hover{ padding-left:14px }
.timeline__item:hover::before{ opacity:1; transform:translateX(0) }
.timeline__date{
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--emerald-2);
  font-weight:600;
  padding-top:6px;
}
.timeline__role{
  font-family:var(--serif);
  font-weight:340;
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.15;
  letter-spacing:-0.015em;
  margin:0 0 4px;
  color:var(--ink);
}
.timeline__org{
  display:block;
  font-size:14px;
  color:var(--ink-soft);
  margin-bottom:12px;
  font-weight:500;
}
.timeline__body p{
  margin:0;
  font-size:15.5px;
  line-height:1.65;
  color:var(--ink);
  max-width:62ch;
  opacity:.86;
}

/* metric prefix ($) */
.metric__prefix{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(30px, 4vw, 50px);
  color:var(--emerald);
  font-style:italic;
  line-height:1;
}

/* creator CTAs */
.creator__cta{ display:flex; flex-wrap:wrap; gap:10px }

/* ==================================================================
   FEATURED (Speaking)
   ================================================================== */
.featured{
  padding:var(--section-y) 0;
  background:var(--cream);
}
.featured__grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap:clamp(32px, 5vw, 80px);
  align-items:center;
}
.featured__media{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  aspect-ratio: 16/10;
  box-shadow:0 30px 60px -28px rgba(15,61,46,.35);
}
.featured__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
.featured__media:hover img{ transform:scale(1.03) }
.featured__tag{
  position:absolute;
  top:18px; left:18px;
  background:var(--cream);
  color:var(--emerald);
  padding:8px 14px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
}
.featured__copy .section-tag{ display:block; margin-bottom:16px }
.featured__copy .h2{ margin-bottom:18px }
.featured__copy p{ font-size:17px; line-height:1.65; color:var(--ink-soft); max-width:50ch }
.bullets{
  margin:26px 0 32px;
  display:flex; flex-direction:column;
}
.bullets li{
  padding:14px 0;
  border-top:1px solid var(--line);
  font-size:15px;
  display:flex; align-items:center; gap:14px;
}
.bullets li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--emerald);
}
.bullets li:last-child{ border-bottom:1px solid var(--line) }

/* ==================================================================
   SELECTED WORK — MASONRY MOOD BOARD
   ================================================================== */
.press{ padding:var(--section-y) 0; background:var(--paper) }

/* Every image at its true shape — never cropped — interlocking columns */
.masonry{
  column-count:4;
  column-gap:16px;
}
figure.m-item{
  break-inside:avoid;
  margin:0 0 16px;
  position:relative;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--cream-2);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
figure.m-item:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 50px -26px rgba(15,61,46,.36);
  z-index:2;
}
.m-item img{
  width:100%;
  height:auto;
  display:block;
}
.m-item::after{
  /* soft gradient so the caption stays legible on any image */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 62%, rgba(15,33,27,.5));
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.m-item:hover::after{ opacity:1 }
.m-item figcaption{
  position:absolute;
  left:12px; bottom:12px;
  background:rgba(20,33,27,.82);
  color:var(--cream);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:8px 13px;
  border-radius:999px;
  width:fit-content;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  backdrop-filter:blur(8px);
  z-index:1;
}
.m-item:hover figcaption{ opacity:1; transform:translateY(0) }

/* ==================================================================
   CREATOR
   ================================================================== */
.creator{
  padding:var(--section-y) 0;
  background:linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
}
.creator__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:clamp(40px, 7vw, 100px);
  align-items:center;
}
.creator__copy .section-tag{ display:block; margin-bottom:14px }
.creator__copy .h2{
  font-family:var(--serif);
  font-style:italic;
  color:var(--emerald-2);
  margin-bottom:22px;
}
.creator__copy p{ color:var(--ink-soft); margin:0 0 28px; max-width:52ch }
.creator__phone{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink);
  box-shadow:0 30px 60px -20px rgba(15,61,46,.35);
  transform:rotate(-1.5deg);
  transition:transform .6s var(--ease);
}
.creator__phone:hover{ transform:rotate(0) }
.creator__phone img{ width:100%; display:block }

/* ==================================================================
   CONTACT
   ================================================================== */
.contact{
  padding:var(--section-y) 0;
  background:var(--ink);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.contact::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(800px 500px at 10% 0%, rgba(15,61,46,.55), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(176,138,62,.12), transparent 60%);
  pointer-events:none;
}
.contact .wrap{ position:relative }
.contact .section-tag{ color:var(--gold) }
.contact .h2{ color:var(--cream) }
.contact .h2 em{ color:var(--gold); font-style:italic }

.contact__grid{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap:clamp(40px, 6vw, 100px);
  align-items:start;
  margin-top:60px;
}
.contact__intro{ color:rgba(246,241,230,.75); margin:0 0 24px; max-width:42ch }
.contact__email{
  display:block;
  font-family:var(--serif);
  font-size:clamp(24px, 3vw, 38px);
  color:var(--cream);
  margin-bottom:28px;
  position:relative;
  width:fit-content;
}
.contact__email::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:1px; background:var(--gold);
  transform-origin:left; transform:scaleX(.4); transition:transform .35s var(--ease);
}
.contact__email:hover::after{ transform:scaleX(1) }
.contact__links{ display:flex; flex-direction:column; gap:0 }
.contact__links li{ border-top:1px solid rgba(246,241,230,.15) }
.contact__links li:last-child{ border-bottom:1px solid rgba(246,241,230,.15) }
.contact__links a{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 0;
  font-size:15px;
  color:var(--cream);
  transition:color .25s var(--ease), padding .25s var(--ease);
}
.contact__links a:hover{ color:var(--gold); padding-left:8px }

/* Form -------------------------------------------------------------- */
.contact__form{
  display:grid;
  gap:18px;
  background:rgba(246,241,230,.04);
  border:1px solid rgba(246,241,230,.12);
  padding:clamp(24px, 3vw, 40px);
  border-radius:14px;
  backdrop-filter:blur(8px);
}
.field{ display:grid; gap:8px }
.field label{
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(246,241,230,.7);
}
.field input,
.field select,
.field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(246,241,230,.25);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  padding:10px 0;
  transition:border-color .25s var(--ease);
}
.field textarea{
  resize:vertical;
  min-height:90px;
  max-height:260px;
  /* Firefox custom scrollbar */
  scrollbar-width:thin;
  scrollbar-color:rgba(246,241,230,.32) transparent;
}
/* WebKit custom scrollbar — slim cream pill on the dark form */
.field textarea::-webkit-scrollbar{ width:11px }
.field textarea::-webkit-scrollbar-track{ background:transparent }
.field textarea::-webkit-scrollbar-thumb{
  background:rgba(246,241,230,.3);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
  transition:background .25s var(--ease);
}
.field textarea::-webkit-scrollbar-thumb:hover{
  background:rgba(246,241,230,.55);
  background-clip:content-box;
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--gold);
}

/* Custom dropdown — replaces the native <select> */
.cselect{ position:relative }
.cselect__btn{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(246,241,230,.25);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  padding:10px 0;
  cursor:pointer;
  text-align:left;
  transition:border-color .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.cselect.is-open .cselect__btn,
.cselect__btn:focus{
  outline:none;
  border-bottom-color:var(--gold);
}
.cselect__arrow{
  width:8px; height:8px;
  border-right:1.6px solid rgba(246,241,230,.55);
  border-bottom:1.6px solid rgba(246,241,230,.55);
  transform:rotate(45deg);
  margin-bottom:3px;
  flex-shrink:0;
  transition:transform .3s var(--ease), border-color .25s var(--ease);
}
.cselect.is-open .cselect__arrow{
  transform:rotate(-135deg);
  margin-bottom:-3px;
  border-color:var(--gold);
}
.cselect__list{
  list-style:none;
  margin:0; padding:6px;
  position:absolute;
  top:calc(100% + 8px); left:0; right:0;
  z-index:30;
  background:#1b2a23;
  border:1px solid rgba(246,241,230,.16);
  border-radius:12px;
  box-shadow:0 26px 46px -22px rgba(0,0,0,.7);
  display:flex; flex-direction:column; gap:2px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.cselect.is-open .cselect__list{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.cselect__opt{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:11px 13px;
  border-radius:8px;
  color:rgba(246,241,230,.82);
  font-size:15px;
  cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.cselect__opt:hover,
.cselect__opt:focus{
  outline:none;
  background:rgba(246,241,230,.08);
  color:var(--cream);
}
.cselect__opt[aria-selected="true"]{ color:var(--gold) }
.cselect__opt[aria-selected="true"]::after{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
.contact__form .btn--primary{ background:var(--cream); color:var(--ink); margin-top:8px }
.contact__form .btn--primary:hover{ background:var(--gold); color:var(--ink) }
.form__sent{
  color:var(--gold);
  font-size:14px;
  margin:8px 0 0;
}

/* ==================================================================
   FOOTER
   ================================================================== */
.foot{
  background:var(--ink);
  color:var(--cream);
  padding:60px 0 36px;
  border-top:1px solid rgba(246,241,230,.08);
}
.foot__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:40px;
  align-items:start;
}
.foot__mark{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:-0.01em;
}
.foot__tag{ margin:10px 0 0; color:rgba(246,241,230,.6); max-width:36ch; font-size:14px }
.foot__nav{ display:flex; flex-direction:column; gap:10px }
.foot__nav a{
  font-size:14px;
  color:rgba(246,241,230,.8);
  transition:color .2s var(--ease);
}
.foot__nav a:hover{ color:var(--gold) }
.foot__meta{
  font-size:13px;
  color:rgba(246,241,230,.55);
  text-align:left;
}
.foot__meta p{ margin:0 0 4px }

/* ==================================================================
   ANIMATION HOOKS
   ================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; transition:none !important }
  .ticker__track{ animation:none }
  .portrait__badge{ animation:none }
}

/* ==================================================================
   RESPONSIVE
   ================================================================== */

/* Large laptop --------------------------------------------------- */
@media (max-width:1180px){
  .nav__links{ gap:26px }
}

/* Tablet landscape ----------------------------------------------- */
@media (max-width:1080px){
  :root{ --gutter:clamp(20px, 4vw, 40px) }

  .hero__grid{
    grid-template-columns:1fr;
    gap:60px;
    min-height:auto;
    padding-top:20px;
    padding-bottom:80px;
    align-items:start;
  }
  .hero__portrait{
    max-width:560px;
    margin:0 auto;
    width:100%;
  }
  .display{ font-size:clamp(72px, 13vw, 140px) }
  .lede{ max-width:60ch }

  .about__grid{ grid-template-columns:1fr; gap:40px }
  .featured__grid{ grid-template-columns:1fr; gap:40px }
  .featured__media{ aspect-ratio: 16/10; max-width:760px; margin-inline:auto; width:100% }
  .creator__grid{ grid-template-columns:1fr; gap:48px; text-align:center }
  .creator__copy p{ margin-inline:auto }
  .creator__cta{ justify-content:center }
  .creator__phone{ max-width:380px; margin:0 auto; transform:rotate(0) }
  .contact__grid{ grid-template-columns:1fr; gap:48px }

  .masonry{ column-count:3 }

  .film-grid{ grid-template-columns:1fr; gap:24px }
  .journ-grid{ grid-template-columns:1fr; gap:24px }
  .timeline__item{ grid-template-columns: 180px 1fr; gap:32px }

  .foot__grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .foot__meta{ grid-column:1 / -1; text-align:left }
}

/* Tablet portrait ------------------------------------------------ */
@media (max-width:900px){
  :root{ --section-y: clamp(72px, 11vw, 120px) }

  .cards{ grid-template-columns:1fr; gap:18px }
  .metrics__row{ grid-template-columns:repeat(2, 1fr) }
  .metrics__row li{ padding:28px 22px }
  .metrics__row li:nth-child(1),
  .metrics__row li:nth-child(2){ border-bottom:1px solid var(--line) }

  /* Always-visible captions on touch devices */
  .m-item figcaption{ opacity:1; transform:none }
  .m-item::after{ opacity:1 }
}

/* Phone ---------------------------------------------------------- */
@media (max-width:720px){
  :root{
    --gutter:20px;
    --section-y: clamp(64px, 14vw, 96px);
  }
  body{ font-size:16px }

  .nav{ padding:14px 0 }
  .nav.is-stuck{ padding:10px 0 }
  .nav__links, .nav__cta{ display:none }
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center }

  .hero{ padding-top:110px }
  .hero__grid{ gap:48px; padding-bottom:48px }
  .display{
    font-size:clamp(54px, 16vw, 92px);
    margin-bottom:28px;
  }
  .display .line--italic{ padding-left:.4em }
  .lede{ font-size:16.5px }
  .hero__cta{ width:100% }
  .hero__cta .btn{ flex:1 1 auto; justify-content:center }

  .portrait__badge{
    width:78px; height:78px;
    top:-10px; right:-6px;
    box-shadow:0 10px 22px -8px rgba(15,61,46,.45);
  }
  .portrait__badge strong{ font-size:18px }
  .portrait__badge span{ font-size:10px }
  .portrait__cap{ left:-6px; bottom:18px; padding:8px 14px; font-size:12px }

  .ticker{ margin-top:36px }
  .ticker__track{ gap:28px; padding:14px 0; animation-duration:16s }
  .ticker__track span{ font-size:20px }
  .ticker__track span:nth-child(even){ font-size:14px }

  .metrics{ padding:56px 0 }
  .metrics__row li{ padding:22px 18px }
  .metric__num{ font-size:42px }
  .metric__suffix{ font-size:24px }
  .metric__lbl{ font-size:11px; padding-top:14px }

  .h2{ font-size:clamp(30px, 8vw, 44px) }
  .h2--xl{ font-size:clamp(38px, 11vw, 62px) }
  .section-head{ margin-bottom:36px }
  .section-sub{ font-size:16px }

  .facts > div{ grid-template-columns:1fr; gap:6px; padding:16px 0 }

  .quote{ padding:72px 0 }
  .quote__mark{ font-size:120px; margin-bottom:8px }
  .quote__text{ font-size:22px; line-height:1.3 }

  .card{ padding:28px 24px; border-radius:12px }
  .card__title{ font-size:26px }
  .card p{ font-size:15px }

  .featured__tag{
    top:12px; left:12px;
    padding:6px 12px;
    font-size:10px;
    letter-spacing:0.18em;
  }
  .featured__media{ aspect-ratio: 4/3 }
  .bullets li{ padding:12px 0; font-size:14.5px }

  .masonry{ column-count:2; column-gap:12px }
  .m-item{ margin-bottom:12px }

  .creator__phone{ max-width:300px }

  .film__meta{ padding:22px 22px 26px }
  .film__play{ width:64px; height:64px; font-size:20px }
  .journ-card__meta{ padding:22px 22px 26px }
  .journ-card__paper{ padding:26px 24px }
  .paper__masthead{ font-size:32px }
  .paper__excerpt{ font-size:16px }

  .timeline__item{
    grid-template-columns:1fr;
    gap:8px;
    padding:24px 0;
  }
  .timeline__item:hover{ padding-left:0 }
  .timeline__item::before{ display:none }
  .timeline__date{ padding-top:0; font-size:11px }

  .metric__prefix{ font-size:32px }

  .contact{ padding:80px 0 }
  .contact__email{ font-size:22px; word-break:break-all }
  .contact__form{ padding:24px }

  .foot{ padding:48px 0 32px }
  .foot__grid{ grid-template-columns:1fr; gap:24px }
  .foot__meta{ grid-column:auto }
  .foot__tag{ max-width:none }
}

/* Phones — masonry to a single column so images are large enough
   that the caption pills stay proportionate and never cover them */
@media (max-width:480px){
  .masonry{ column-count:1 }
}

/* Small phone ---------------------------------------------------- */
@media (max-width:420px){
  :root{ --gutter:16px }

  .display{ font-size:54px; line-height:.95 }
  .display .line--italic{ padding-left:0 }
  .hero__cta{ flex-direction:column }
  .hero__cta .btn{ width:100% }

  .portrait__badge{
    width:68px; height:68px;
    top:-6px; right:0;
  }
  .portrait__badge strong{ font-size:16px }

  .btn{ padding:13px 18px; font-size:13.5px }
  .nav__mark{ font-size:20px }
  .quote__text{ font-size:20px }
  .contact__email{ font-size:20px }
  .h2{ font-size:30px }
}

/* Touch device tweaks -------------------------------------------- */
@media (hover:none){
  .m-item figcaption{ opacity:1; transform:none }
  .m-item::after{ opacity:1 }
  .card:hover{ transform:none }
  .featured__media:hover img{ transform:none }
  figure.m-item:hover{ transform:none }
  .creator__phone:hover{ transform:rotate(-1.5deg) }
  .film:hover{ transform:none }
  .journ-card:hover{ transform:none }
  .timeline__item:hover{ padding-left:0 }
  .timeline__item:hover::before{ opacity:0 }
}

/* ==================================================================
   RESPONSIVE — additional polish
   ================================================================== */

/* Prevent any rogue horizontal scroll */
html, body{ overflow-x:hidden; max-width:100% }

/* Constrain film & journ cards on tablets so they don't sprawl */
@media (max-width:1080px) and (min-width:721px){
  .film-grid, .journ-grid{
    max-width:680px;
    margin-inline:auto;
  }
  .timeline{ max-width:840px; margin-left:0 }
}

/* Tablet portrait (768px / iPad) refinements */
@media (max-width:900px) and (min-width:721px){
  .nav__links{ gap:20px }
  .nav__links a{ font-size:13.5px }
}

/* Phone landscape & small tablets */
@media (max-width:720px){
  /* Hide creator phone tilt fully on mobile */
  .creator__phone{ transform:none }

  /* Journ card paper styling tightens on mobile */
  .paper__masthead{ font-size:clamp(24px, 7vw, 32px); line-height:1 }
  .paper__excerpt{ max-width:none }

  /* Timeline body wraps cleanly */
  .timeline__role{ font-size:clamp(20px, 5.5vw, 26px) }
  .timeline__org{ font-size:13px }

  /* Make hero ticker items not overflow with too much text */
  .ticker__track span:nth-child(even){ font-size:12px }

  /* Section subhead inline link wraps nicely */
  .section-sub .inline-link{ display:inline-block }

  /* Contact form fields and select sizing */
  .field input,
  .field select,
  .field textarea{ font-size:16px } /* prevents iOS zoom */
}

/* iPhone SE / very small phones (≤375px) */
@media (max-width:375px){
  .display{ font-size:clamp(46px, 14vw, 54px) }
  .display .line--italic{ padding-left:0 }
  .h2{ font-size:clamp(26px, 8vw, 30px) }
  .lede{ font-size:15.5px }
  .ticker__track span{ font-size:18px }
  .ticker__track{ animation-duration:12s; gap:22px }

  .portrait__badge{ width:62px; height:62px; top:-4px; right:2px }
  .portrait__badge strong{ font-size:14px }
  .portrait__badge span{ font-size:9px; letter-spacing:0.14em }

  .metric__num{ font-size:36px }
  .metric__suffix{ font-size:20px }
  .metric__prefix{ font-size:28px }
  .metric__lbl{ font-size:10.5px; letter-spacing:0.16em }

  .card{ padding:24px 20px }
  .card__title{ font-size:24px }

  .film__meta{ padding:20px 18px 22px }
  .film__title{ font-size:24px }
  .journ-card__title{ font-size:20px }
  .paper__masthead{ font-size:22px }

  .quote__mark{ font-size:90px }
  .quote__text{ font-size:18px }

  .contact__email{ font-size:18px }
  .contact__form{ padding:20px }

  .btn{ padding:12px 16px; font-size:13px }

  .timeline__role{ font-size:20px }
  .timeline__body p{ font-size:14.5px }

  /* Mobile menu sits closer to top edge */
  .nav__links{ inset:68px 12px auto }
}

/* Extra-large screens (≥1440) — keep editorial whitespace */
@media (min-width:1440px){
  :root{ --wrap: 1320px }
  .hero__grid{ gap:80px }
  .display{ font-size:172px }
}

/* Landscape phone — avoid wasted vertical space */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  .hero{ padding-top:90px }
  .hero__grid{ min-height:auto; padding-bottom:48px; gap:32px }
  .display{ font-size:clamp(48px, 9vw, 72px); margin-bottom:20px }
  .hero__portrait{ max-width:340px }
}

/* Print -------------------------------------------------- */
@media print{
  .nav, .ticker, .quote, .contact, .foot, .creator, .press{ display:none }
  body{ background:#fff; color:#000 }
  .hero, .about, .work, .films, .journalism, .experience{ background:#fff; padding:24px 0 }
  a{ color:#000; text-decoration:underline }
  .film__play, .portrait__badge{ display:none }
}