/* Flavia: public site.
   Editorial layout on white: oversized serif name, tall portrait, series ticker,
   a wall of top videos, a dark partnerships band. Plum is the only accent. */

@font-face{font-family:"Bodoni Moda"; src:url(/fonts/bodoni-moda-latin-standard-normal.woff2) format("woff2"); font-weight:400 900; font-style:normal; font-display:swap}
@font-face{font-family:"Bodoni Moda"; src:url(/fonts/bodoni-moda-latin-standard-italic.woff2) format("woff2"); font-weight:400 900; font-style:italic; font-display:swap}
@font-face{font-family:"Hanken Grotesk"; src:url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}

:root{
  --bg:#FFFFFF; --ink:#151215; --muted:#6B646A; --faint:#9A9299; --line:#E8E4E7; --accent:#6B2F5C; --blush:#F4ECF1; --wash:#F7F5F6;
  --band:#161216; --band-ink:#F4EFF2; --band-muted:#B0A6AE; --band-line:#2E272D;
  --bad:#B42335; --good:#1F7A4D;
  --serif:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans:"Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gut:20px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; padding-inline:var(--gut); padding-bottom:max(32px, env(safe-area-inset-bottom)); -webkit-font-smoothing:antialiased; overflow-x:hidden; font-optical-sizing:auto}
a{color:inherit; text-decoration:none}
p{margin:0} h1,h2,h3{margin:0; font-weight:400}
img{display:block; max-width:100%}
figure{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.wrap{max-width:1180px; margin-inline:auto}
.label{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500}
em.it{font-family:var(--serif); font-style:italic; color:var(--accent)}
.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:999px}
.skip:focus{left:12px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; font:500 15px/1 var(--sans); border:1px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s; white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn.solid{background:var(--ink); color:var(--bg)}
.btn.solid:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.ghost:hover{background:var(--wash)}
.btn.sm{min-height:44px; padding:0 18px; font-size:14px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.55; cursor:default; transform:none}

/* top bar */
.top{position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); margin-inline:calc(var(--gut) * -1); padding:calc(10px + env(safe-area-inset-top)) var(--gut) 10px; border-bottom:1px solid transparent; transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px}
.mark{font-family:var(--serif); font-size:24px; letter-spacing:.01em; line-height:1; padding:10px 0}
.desk{display:none; gap:26px; font-size:14px; color:var(--muted); align-items:center}
.desk a:hover{color:var(--ink)}
.desk .pill{min-height:40px; padding:0 18px; border-radius:999px; background:var(--ink); color:var(--bg); display:inline-flex; align-items:center; font-weight:500}
.desk .pill:hover{background:var(--accent); color:#fff}
.menu-btn{min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--line); background:var(--bg); font:500 14px var(--sans); color:var(--ink); cursor:pointer}
.menu-btn[aria-expanded="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.mnav{position:fixed; inset:0; z-index:25; background:var(--bg); padding:calc(84px + env(safe-area-inset-top)) var(--gut) 32px; display:grid; align-content:start; gap:0; overflow-y:auto}
.mnav > a{font-family:var(--serif); font-size:36px; line-height:1.1; padding:12px 0; border-bottom:1px solid var(--line)}
.mnav-social{display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:28px; font-size:15px; color:var(--muted)}
.mnav-social a{padding:10px 0}
body.menu-open{overflow:hidden}

/* hero */
.hero{display:grid; gap:22px; padding-block:20px 48px}
.kick{display:flex}
.live{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); background:var(--wash); border:1px solid var(--line); padding:6px 12px; border-radius:999px}
.live i{width:7px; height:7px; border-radius:50%; background:#E0245E; animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,36,94,.5)}70%{box-shadow:0 0 0 8px rgba(224,36,94,0)}100%{box-shadow:0 0 0 0 rgba(224,36,94,0)}}
.name{font-family:var(--serif); font-size:clamp(88px,26vw,264px); line-height:.82; letter-spacing:-.035em; margin-left:-.05em; position:relative; z-index:2}
.name > span > span{display:inline-block; animation:rise 1s cubic-bezier(.2,.7,.1,1) both}
.name > span > span:nth-child(2){animation-delay:.05s}.name > span > span:nth-child(3){animation-delay:.1s}.name > span > span:nth-child(4){animation-delay:.15s}.name > span > span:nth-child(5){animation-delay:.2s}.name > span > span:nth-child(6){animation-delay:.25s}
@keyframes rise{from{transform:translateY(.3em); opacity:0}to{transform:none; opacity:1}}
.copy{display:grid; gap:18px}
.roles{font-family:var(--serif); font-size:clamp(24px,3vw,34px); line-height:1.15}
.bio{font-size:17px; line-height:1.55; max-width:40ch}
.facts{display:flex; flex-wrap:wrap; gap:6px 20px; font-size:14px; color:var(--muted)}
.facts b{color:var(--ink); font-weight:600}
.cta{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cta .btn{padding:0 14px}
.portrait{position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:4px; background:var(--blush)}
.portrait img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease}
.portrait:hover img{transform:scale(1.03)}

/* link list (phones) */
.links{border-top:1px solid var(--line)}
.row{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:12px 2px; border-bottom:1px solid var(--line); transition:padding .25s}
a.row:hover{padding-inline:10px 2px}
.row .t{font-size:17px; font-weight:500; display:block; line-height:1.3}
.row .d{font-size:14px; color:var(--muted); display:block}
.row .go{color:var(--faint); font-size:18px}

/* ticker */
.ticker{margin-inline:calc(var(--gut) * -1); border-block:1px solid var(--line); overflow:hidden; padding-block:16px}
.track{display:flex; width:max-content; animation:slide 42s linear infinite}
.track span{font-family:var(--serif); font-style:italic; font-size:clamp(22px,3vw,34px); white-space:nowrap; padding-inline:20px; display:flex; align-items:center; gap:40px}
.track span::after{content:"✦"; font-style:normal; font-size:.45em; color:var(--accent)}
@keyframes slide{to{transform:translateX(-50%)}}

/* sections */
section{scroll-margin-top:72px; padding-block:64px}
.ruled{border-top:1px solid var(--line)}
.sec{display:grid; gap:28px}
.sec > *{min-width:0}
.head{display:grid; gap:12px; align-content:start; min-width:0}
.head h2,.homes-copy h2{font-family:var(--serif); font-size:clamp(40px,5.4vw,68px); line-height:1; letter-spacing:-.02em; text-wrap:balance}
.head p{color:var(--muted); max-width:46ch}
.head.split{grid-template-columns:minmax(0,1fr) auto; align-items:end; margin-bottom:28px; gap:16px}
.head-cta{margin-top:10px}

/* about */
.about-text{font-family:var(--serif); font-size:clamp(25px,2.8vw,34px); line-height:1.28; max-width:30ch; text-wrap:pretty}
.about-text em{font-style:italic; color:var(--accent)}
.about-body{display:grid; gap:14px; color:var(--muted); font-size:17px; max-width:58ch; margin-top:24px}
.ff{display:grid; grid-template-columns:1fr; border-top:1px solid var(--line); margin-top:32px}
.ff div{padding:14px 0; border-bottom:1px solid var(--line); display:grid; gap:2px}
.ff span{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.ff b{font-weight:500}

/* video wall */
.wall{display:grid; grid-auto-flow:column; grid-auto-columns:62%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) 10px; scroll-padding-inline:var(--gut); scrollbar-width:none; overscroll-behavior-x:contain}
.wall::-webkit-scrollbar{display:none}
.vid{scroll-snap-align:start; position:relative; aspect-ratio:4/5.4; border-radius:6px; overflow:hidden; background:var(--blush); display:block}
.vid img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.vid:hover img{transform:scale(1.05)}
.vid::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(10,6,10,.82))}
.vid .meta{position:absolute; left:14px; right:14px; bottom:14px; z-index:1; color:#fff; display:grid; gap:4px}
.vid .views{font-family:var(--serif); font-size:30px; line-height:1}
.vid .ttl{font-size:13px; line-height:1.35; opacity:.92}
.vid .rank{position:absolute; top:12px; left:12px; z-index:1; color:#fff; font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:rgba(0,0,0,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:4px 9px; border-radius:999px}

/* audience */
.lead-stat{font-family:var(--serif); font-size:clamp(24px,2.6vw,32px); line-height:1.25; max-width:28ch; margin-bottom:28px}
.lead-stat b{font-weight:400; color:var(--accent)}
.figs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line)}
.fig{padding:20px 0 22px; border-bottom:1px solid var(--line); display:grid; gap:6px; min-width:0}
.fig:nth-child(even){padding-left:16px; border-left:1px solid var(--line)}
.fig b{font-family:var(--serif); font-weight:400; font-size:clamp(40px,6.6vw,76px); line-height:.95; letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums}
.fig span{font-size:14px; color:var(--muted)}
.dual{display:grid; gap:36px; margin-top:40px}
.meter{display:grid; gap:14px}
.meter h3{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500}
.meter .m{display:grid; grid-template-columns:76px minmax(0,1fr) 54px; align-items:center; gap:12px; font-size:15px}
.m .tr{height:3px; background:var(--line); position:relative; border-radius:2px; overflow:hidden}
.m .fl{position:absolute; inset:0 auto 0 0; background:var(--ink); border-radius:2px; transform-origin:left; transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.m .fl.acc{background:var(--accent)}
.m .v{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted)}
.src{font-size:12px; color:var(--faint); margin-top:16px}

/* series */
.slist{border-top:1px solid var(--line)}
.si{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 20px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--line); transition:padding .3s}
.si h3{font-family:var(--serif); font-size:clamp(27px,3.6vw,44px); line-height:1.05; letter-spacing:-.01em}
.si .tag{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.si p{grid-column:1 / -1; color:var(--muted); font-size:15px; max-width:60ch}
@media (hover:hover){ .si:hover{padding-left:12px} .si:hover h3{font-style:italic} }

/* partnerships band */
.band{background:var(--band); color:var(--band-ink); margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut)}
.band .head p,.band .label{color:var(--band-muted)}
.band .btn{border-color:var(--band-ink); color:var(--band-ink)}
.band .btn.solid{background:var(--band-ink); color:var(--band)}
.band .btn.solid:hover{background:#fff; color:var(--band); border-color:#fff}
.pks{display:grid; gap:12px}
.pk{border:1px solid var(--band-line); border-radius:8px; padding:22px; display:grid; gap:10px; align-content:start; transition:border-color .3s, transform .3s; background:rgba(244,239,242,.03)}
.pk:hover{border-color:var(--band-muted)}
.pk h3{font-family:var(--serif); font-size:28px; line-height:1.1}
.pk p{color:var(--band-muted); font-size:15px}
.pk .for{font-size:13px; color:var(--band-muted); border-top:1px solid var(--band-line); padding-top:12px; margin-top:4px}
.pk.feat{border-color:var(--band-muted)}
.steps{list-style:none; padding:0; margin:32px 0 0; display:grid; gap:0; counter-reset:s; border-top:1px solid var(--band-line)}
.steps li{counter-increment:s; display:grid; grid-template-columns:40px minmax(0,1fr); gap:2px 8px; padding:16px 0; border-bottom:1px solid var(--band-line)}
.steps li::before{content:"0" counter(s); grid-row:span 2; font-family:var(--serif); font-size:20px; color:var(--band-muted); line-height:1.3}
.steps b{font-weight:500}
.steps span{color:var(--band-muted); font-size:15px}
.fits{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.fits span{font-size:14px; border:1px solid var(--band-line); border-radius:999px; padding:7px 14px}
.terms{color:var(--band-muted); font-size:14px; max-width:62ch; margin-top:20px}

/* shop */
.list{border-top:1px solid var(--line)}

/* homes */
.homes{display:grid; gap:28px; align-items:center}
.homes-copy{display:grid; gap:20px; min-width:0}
.homes-p{font-size:17px; color:var(--muted); max-width:44ch}
.btns{display:flex; flex-wrap:wrap; gap:10px}
.firm{font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px}

/* contact */
.contact{display:grid; gap:48px}
.c-left{display:grid; gap:0; align-content:start; min-width:0}
.phone-big{font-family:var(--serif); font-size:clamp(36px,7.4vw,72px); line-height:1.05; letter-spacing:-.02em; margin-top:18px; display:block; overflow-wrap:anywhere}
.phone-big:hover{color:var(--accent)}
.c-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.status{font-size:14px; color:var(--muted); min-height:22px; margin-top:10px}
.status.err{color:var(--bad)}
.status.ok{color:var(--good)}
.c-note{color:var(--muted); max-width:44ch}
.socials{display:flex; gap:4px 24px; flex-wrap:wrap; margin-top:32px; padding-top:12px; border-top:1px solid var(--line); font-size:15px}
.socials a{display:inline-flex; gap:6px; align-items:center; min-height:44px}
.socials a:hover{color:var(--accent)}

.form{display:grid; gap:14px; background:var(--wash); border:1px solid var(--line); border-radius:12px; padding:22px; min-width:0}
.form-h{font-family:var(--serif); font-size:30px; line-height:1.1; margin-bottom:4px}
.f2{display:grid; gap:14px}
.fld{display:grid; gap:6px; min-width:0}
.fld > span{font-size:13px; font-weight:500; color:var(--muted)}
.fld i{font-style:normal; color:var(--faint); font-weight:400}
.fld input,.fld select,.fld textarea{width:100%; min-height:48px; border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:12px 14px; font:16px/1.4 var(--sans); color:var(--ink); appearance:none; -webkit-appearance:none}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px}
.fld textarea{resize:vertical; min-height:120px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(107,47,92,.12)}
.fld .bad{border-color:var(--bad)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.bigmark{font-family:var(--serif); font-size:clamp(96px,28vw,300px); line-height:.8; letter-spacing:-.04em; color:var(--line); margin:56px 0 18px -.04em; user-select:none}
footer{border-top:1px solid var(--line); padding-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:12px; color:var(--faint)}

/* small phones */
@media (max-width:370px){
  :root{--gut:16px}
  .cta{grid-template-columns:1fr}
  .meter .m{grid-template-columns:64px minmax(0,1fr) 50px; font-size:14px}
  .phone-big{font-size:32px}
}

/* tablets and up */
@media (min-width:640px){
  .ff{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ff div:nth-child(even){padding-left:16px; border-left:1px solid var(--line)}
  .f2{grid-template-columns:1fr 1fr}
  .wall{grid-auto-columns:40%}
  .cta{display:flex; flex-wrap:wrap}
  .cta .btn{padding:0 22px}
  .form{padding:28px}
}

/* desktop */
@media (min-width:900px){
  :root{--gut:40px}
  .desk{display:flex}
  .menu-btn,.mnav{display:none!important}
  .hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"name name" "copy photo"; align-items:end; column-gap:56px; row-gap:0; padding-block:32px 72px}
  .name{grid-area:name; margin-bottom:-.18em; font-size:clamp(150px,19vw,264px)}
  .copy{grid-area:copy; padding-bottom:6px}
  .hero .portrait{grid-area:photo; margin-top:-120px}
  .links{display:none}
  section{padding-block:112px}
  .sec{grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:72px}
  .figs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fig:nth-child(n){padding:26px 22px 28px; border-left:1px solid var(--line)}
  .fig:nth-child(3n+1){padding-left:0; border-left:0}
  .dual{grid-template-columns:1fr 1fr; gap:56px}
  .wall{grid-auto-flow:row; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:visible; margin-inline:0; padding:0}
  .pks{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; border-top:0}
  .steps li{border-top:1px solid var(--band-line); border-bottom:0; grid-template-columns:1fr}
  .steps li::before{grid-row:auto; margin-bottom:6px}
  .homes{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px}
  .contact{grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:72px; align-items:start}
  .phone-big{font-size:clamp(40px,4.4vw,60px); white-space:nowrap}
}
/* episode alerts */
.join{display:grid; gap:20px}
.join-form{display:grid; gap:16px; background:var(--wash); border:1px solid var(--line); border-radius:12px; padding:22px; min-width:0}
.story{display:grid; gap:12px; align-content:start; border-top:1px solid var(--line); padding-top:20px}
.story-h{font-family:var(--serif); font-size:clamp(24px,2.6vw,30px); line-height:1.15}
.story p:not(.story-h){color:var(--muted); max-width:44ch}
.story .btn{justify-self:start}

/* follow bar (phones) */
.followbar{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--ink); color:#fff; border-radius:999px; padding:8px 8px 8px 20px; box-shadow:0 10px 30px rgba(20,10,20,.25); transform:translateY(150%); transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.followbar.on{transform:none}
.fb-t{display:grid; line-height:1.25; min-width:0}
.fb-t b{font-weight:600; font-size:15px}
.fb-t span{font-size:12px; color:rgba(255,255,255,.7)}
.fb-go{background:#fff; color:var(--ink); border-radius:999px; min-height:40px; padding:0 18px; display:inline-flex; align-items:center; font-weight:600; font-size:14px; flex:none}
body.menu-open .followbar{display:none}
@media (min-width:900px){
  .followbar{display:none}
  .join{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px; align-items:start}
  .story{border-top:0; padding-top:0; border-left:1px solid var(--line); padding-left:32px}
  .join-form{padding:28px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}

/* keep the bottom of the page clear of the phone follow bar */
@media (max-width:899px){ body{padding-bottom:calc(88px + env(safe-area-inset-bottom))} }