@font-face{ font-family:'FrauncesVar'; src:url(../fonts/fraunces.woff2) format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face{ font-family:'InterVar'; src:url(../fonts/inter.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --bg:#F7F2E9;
  --panel:#EDE3D1;
  --panel-soft:#F1E9DB;
  --card:#FFFFFF;
  --ink:#2B2318;
  --ink-soft:#71655A;
  --ink-faint:#A69A8C;
  --rule:#DED0B8;
  --accent:#9C5B34;
  --accent-deep:#5B3820;
  --blush:#C98564;
  --sage:#7C8365;
  --radius:18px;
  --radius-sm:10px;
  --maxw:520px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'InterVar',-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
h1,h2,h3{margin:0; font-family:'FrauncesVar',serif; font-weight:600; letter-spacing:-0.01em; text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
::selection{background:var(--accent); color:#fff;}

.wrap{max-width:var(--maxw); margin:0 auto; position:relative;}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- hero ---------- */
.hero{position:relative; padding:0 0 34px;}
.hero-photo{
  position:relative; width:100%; aspect-ratio:4/5; overflow:hidden;
  border-radius:0 0 32px 32px;
}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 18%;}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(43,35,24,0) 45%, rgba(43,35,24,.72) 100%);
}
.hero-badge{
  position:absolute; top:20px; left:20px; z-index:2;
  display:flex; align-items:center; gap:8px;
  background:rgba(247,242,233,.92); backdrop-filter:blur(6px);
  border-radius:999px; padding:7px 14px 7px 10px;
  font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-deep);
}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--sage);}
.hero-caption{
  position:absolute; left:24px; right:24px; bottom:26px; z-index:2; color:#fff;
}
.hero-eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.78); margin-bottom:8px; font-weight:600;}
.hero-name{font-size:clamp(40px,12vw,56px); color:#fff; line-height:.96;}
.hero-role{margin-top:10px; font-size:14.5px; color:rgba(255,255,255,.88); font-weight:500;}

.hero-meta{padding:22px 22px 0; display:flex; flex-direction:column; gap:16px;}
.hero-links{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  display:flex; align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--rule); border-radius:999px;
  padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink);
  text-decoration:none;
}
.chip .ico{font-size:14px; color:var(--accent);}
.hero-bio{font-size:15px; line-height:1.65; color:var(--ink-soft); max-width:46ch;}

/* ---------- section shell ---------- */
.section{padding:44px 22px 0;}
.section-head{margin-bottom:20px;}
.kicker{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.section-title{font-size:clamp(24px,7vw,30px);}
.section-sub{margin-top:8px; font-size:13.5px; color:var(--ink-soft);}

/* ---------- stat strip ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.stat-card{
  background:var(--card); border-radius:var(--radius); padding:18px 12px;
  text-align:center; border:1px solid var(--rule);
}
.stat-num{font-family:'FrauncesVar',serif; font-size:clamp(22px,6.4vw,28px); font-weight:600; color:var(--accent-deep); font-variant-numeric:tabular-nums;}
.stat-label{margin-top:6px; font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; line-height:1.4;}

/* ---------- audience card ---------- */
.panel{background:var(--panel); border-radius:24px; padding:24px 20px;}
.audience-block + .audience-block{margin-top:24px;}
.audience-label{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px;}

.bar-row{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.bar-row:last-child{margin-bottom:0;}
.bar-name{width:52px; flex-shrink:0; font-size:12.5px; color:var(--ink-soft); font-weight:600;}
.bar-track{flex:1; height:9px; background:rgba(43,35,24,.08); border-radius:999px; overflow:hidden;}
.bar-fill{display:block; height:100%; border-radius:999px; background:var(--accent); width:0; transition:width 1.1s cubic-bezier(.2,.7,.3,1);}
.bar-fill.alt{background:var(--sage);}
.bar-val{width:44px; text-align:right; flex-shrink:0; font-size:12.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}

.gender-split{display:flex; align-items:center; gap:18px;}
.gender-ring{
  width:88px; height:88px; border-radius:50%; flex-shrink:0;
  background: conic-gradient(var(--accent) 0% 71.9%, var(--sage) 71.9% 100%);
  position:relative;
}
.gender-ring::after{content:''; position:absolute; inset:14px; border-radius:50%; background:var(--panel);}
.gender-legend{display:flex; flex-direction:column; gap:8px; font-size:13px;}
.legend-row{display:flex; align-items:center; gap:8px;}
.legend-dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;}
.legend-dot.women{background:var(--accent);}
.legend-dot.men{background:var(--sage);}
.legend-pct{font-weight:700; font-variant-numeric:tabular-nums;}

/* ---------- content performance ---------- */
.type-split{display:flex; flex-direction:column; gap:10px; margin-bottom:22px;}
.type-row{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-sm);}
.type-name{font-size:13.5px; font-weight:600;}
.type-val{font-family:'FrauncesVar',serif; font-size:17px; font-weight:600; color:var(--accent-deep); font-variant-numeric:tabular-nums;}

.reel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.reel-tile{
  position:relative; aspect-ratio:1; border-radius:12px; background:linear-gradient(155deg,var(--panel),var(--panel-soft));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border:1px solid var(--rule); text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.reel-tile:active{transform:scale(.96);}
.reel-tile .play{
  width:26px; height:26px; border-radius:50%; background:var(--accent-deep); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:10px; margin-bottom:2px;
}
.reel-tile .views{font-family:'FrauncesVar',serif; font-size:16px; font-weight:600; color:var(--accent-deep);}
.reel-tile .lbl{font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint);}
@media (hover:hover){
  .reel-tile:hover{box-shadow:0 6px 18px -8px rgba(43,35,24,.35); transform:translateY(-2px);}
}

/* ---------- brands ---------- */
.brand-grid{display:flex; flex-wrap:wrap; gap:10px;}
.brand-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--card); border:1px solid var(--rule); border-radius:999px;
  padding:10px 16px; font-size:13px; font-weight:600; color:var(--ink);
  font-family:inherit; appearance:none; -webkit-appearance:none;
}
.brand-pill.has-video{
  cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.brand-pill.has-video:hover{
  border-color:var(--accent); box-shadow:0 6px 16px -8px rgba(43,35,24,.35); transform:translateY(-2px);
}
.brand-pill.has-video:active{transform:scale(.96);}
.pill-play{
  width:15px; height:15px; border-radius:50%; background:var(--accent-deep); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:6.5px; flex-shrink:0;
}

/* ---------- cta / footer ---------- */
.cta{
  margin:44px 22px 0; padding:34px 24px; border-radius:26px;
  background:linear-gradient(160deg, var(--accent-deep), #3E2413);
  color:#fff; text-align:center;
}
.cta h2{font-size:clamp(22px,7vw,27px); color:#fff; line-height:1.15;}
.cta p{margin-top:10px; font-size:13.5px; color:rgba(255,255,255,.72);}
.cta-email{
  display:inline-block; margin-top:18px;
  color:#fff; font-weight:600; font-size:14.5px; text-decoration:underline;
  text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.5);
}
.footer{
  padding:26px 22px 40px; text-align:center;
}
.footer-loc{font-size:12px; color:var(--ink-soft);}
.footer-brand{margin-top:6px; font-family:'FrauncesVar',serif; font-size:13px; letter-spacing:.04em; color:var(--ink-faint);}

@media (min-width:560px){
  .wrap{border-left:1px solid var(--rule); border-right:1px solid var(--rule);}
  body{background:var(--panel-soft);}
  .wrap{background:var(--bg);}
}