:root{
  --pink:#FB6B86;
  --pink-deep:#4A1220;
  --ink:#111111;
  --cream:#FFFDFB;
  --blush:#FFE7EC;
  --grey:#6b6b6b;
  --line:#e9d8dc;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.eyebrow{
  font-family:'Space Mono', monospace;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:0.72rem;
  color:var(--pink-deep);
  opacity:0.75;
}
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; }

.rx-mark{
  position:absolute;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:500;
  color:rgba(17,17,17,0.05);
  pointer-events:none;
  line-height:1;
  z-index:0;
  user-select:none;
}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 5vw;
  background:rgba(255,253,251,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .logo{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.1rem;
  display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink);
}
nav .logo span{ font-family:'Space Mono',monospace; font-size:0.62rem; color:var(--pink-deep); letter-spacing:0.1em; }
nav .links{ display:flex; gap:28px; align-items:center; }
nav .links a{
  font-size:0.85rem; text-decoration:none; color:var(--ink); font-weight:500;
  position:relative;
}
nav .links a.active{ color:var(--pink-deep); }
nav .links a::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--pink);
  transition:width .25s ease;
}
nav .links a:hover::after, nav .links a.active::after{ width:100%; }
nav .cta-btn{
  background:var(--ink); color:var(--cream); padding:9px 18px; border-radius:100px;
  font-size:0.8rem; font-weight:600; text-decoration:none; letter-spacing:0.02em;
  transition:transform .2s ease, background .2s ease; white-space:nowrap;
}
nav .cta-btn:hover{ background:var(--pink); transform:translateY(-1px); }

@media (max-width: 900px){
  nav .links{ display:none; }
  nav{ padding:14px 5vw; }
  nav .logo{ font-size:0.92rem; flex-direction:column; align-items:flex-start; gap:2px; }
  nav .logo span{ font-size:0.55rem; }
  nav .cta-btn{ padding:8px 14px; font-size:0.72rem; }
}

/* ---------- PAGE HERO (sub-pages) ---------- */
.page-hero{
  position:relative; background:var(--pink); padding:150px 5vw 80px; overflow:hidden;
}
.page-hero .rx-mark{ font-size:26vw; top:-14%; right:-6%; color:rgba(255,255,255,0.10); }
.page-hero-inner{ position:relative; z-index:2; max-width:900px; margin:0 auto; text-align:left; }
.page-hero .eyebrow{ margin-bottom:16px; display:block; }
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.6rem); margin-bottom:16px; }
.page-hero p{ font-size:1.1rem; color:var(--pink-deep); font-weight:500; max-width:600px; }

/* ---------- HOME HERO ---------- */
header.hero{
  position:relative; min-height:100vh; background:var(--pink);
  display:flex; align-items:center; padding:120px 5vw 80px; overflow:hidden;
}
.hero-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:60px; align-items:center; width:100%; max-width:1280px; margin:0 auto;
}
.hero .rx-mark{ font-size:38vw; top:-10%; right:-8%; color:rgba(255,255,255,0.08); }
.hero-eyebrow{
  font-family:'Space Mono', monospace; font-size:0.78rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--pink-deep); margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.hero-eyebrow::before{ content:''; width:26px; height:1px; background:var(--pink-deep); display:inline-block; }
h1.hero-title{ font-size:clamp(2.6rem, 6vw, 5rem); color:var(--ink); line-height:0.98; margin-bottom:22px; }
h1.hero-title em{ font-style:italic; font-weight:500; color:var(--cream); -webkit-text-stroke:1.4px var(--ink); }
.hero-sub{ font-size:1.18rem; max-width:520px; color:var(--pink-deep); font-weight:500; margin-bottom:34px; }
.hero-btns{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:100px; text-decoration:none;
  font-weight:600; font-size:0.92rem; cursor:pointer; border:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,0.25); }
.btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--cream); }

.phone-frame{
  position:relative; width:min(300px, 78vw); aspect-ratio:9/16; margin:0 auto;
  background:var(--ink); border-radius:34px; padding:12px;
  box-shadow:0 30px 60px rgba(0,0,0,0.35), 0 0 0 2px rgba(255,255,255,0.08) inset;
}
.phone-frame::before{
  content:''; position:absolute; top:22px; left:50%; transform:translateX(-50%);
  width:70px; height:8px; background:rgba(255,255,255,0.15); border-radius:10px; z-index:3;
}
.phone-screen{ width:100%; height:100%; border-radius:24px; overflow:hidden; position:relative; background:#000; }
.phone-screen img{ width:100%; height:100%; object-fit:cover; }
.phone-caption{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  color:#fff; padding:22px 16px 14px; font-family:'Space Mono',monospace; font-size:0.68rem;
  letter-spacing:0.06em; text-transform:uppercase;
}

/* ---------- SECTION SHELL ---------- */
section{ position:relative; padding:110px 5vw; }
.section-inner{ max-width:1180px; margin:0 auto; position:relative; z-index:2; }
.section-head{ margin-bottom:56px; max-width:680px; }
.section-head .eyebrow{ margin-bottom:14px; display:block; }
.section-head h2{ font-size:clamp(2rem, 3.6vw, 3rem); }
section.dark{ background:var(--ink); color:var(--cream); }
section.dark .section-head h2{ color:var(--cream); }
section.blush{ background:var(--blush); }

/* ---------- ABOUT / PITCH TEXT ---------- */
.pitch-wrap{ display:grid; grid-template-columns:70px 1fr; gap:20px; }
.pitch-mark{ font-family:'Fraunces',serif; font-size:5rem; color:var(--pink); line-height:0.7; font-style:italic; }
.pitch-text{ font-size:1.22rem; font-family:'Fraunces', serif; font-weight:300; line-height:1.55; max-width:820px; }
.pitch-text b{ font-weight:600; font-style:italic; }
.pitch-text .stat{ color:var(--pink-deep); font-weight:600; font-style:normal; font-family:'Work Sans',sans-serif; }
.about-grid p{ font-size:1.05rem; color:#333; margin-bottom:18px; max-width:760px; }
.about-grid strong{ color:var(--pink-deep); }

/* ---------- NAV CARDS (home) ---------- */
.nav-cards{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.nav-card{
  position:relative; border-radius:20px; padding:38px 32px; text-decoration:none;
  background:var(--ink); color:var(--cream); overflow:hidden; min-height:220px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform .25s ease;
}
.nav-card:hover{ transform:translateY(-4px); }
.nav-card.pink-card{ background:var(--pink); color:var(--ink); }
.nav-card .eyebrow{ margin-bottom:10px; }
.nav-card.pink-card .eyebrow{ color:var(--pink-deep); }
.nav-card h3{ font-size:1.7rem; margin-bottom:10px; }
.nav-card .arrow{ font-family:'Space Mono',monospace; font-size:0.85rem; }

/* ---------- RX GRID (skills / stack) ---------- */
.rx-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:22px; }
.rx-card{ background:var(--cream); border:1.5px solid var(--ink); border-radius:10px; padding:22px 22px 20px; position:relative; }
.rx-card::before{ content:''; position:absolute; top:-1px; bottom:-1px; left:14px; border-left:2px dashed rgba(17,17,17,0.18); }
.rx-card-inner{ padding-left:18px; }
.rx-symbol{ font-family:'Fraunces',serif; font-style:italic; font-size:1.4rem; color:var(--pink); display:inline-block; margin-bottom:10px; }
.rx-card h3{ font-size:1.15rem; margin-bottom:8px; }
.rx-card p{ font-size:0.92rem; color:var(--grey); }

/* ---------- FEATURED WORK ---------- */
.work-feature{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; margin-bottom:100px; }
.work-feature:nth-child(even){ direction:rtl; }
.work-feature:nth-child(even) > *{ direction:ltr; }
.work-copy .eyebrow{ margin-bottom:12px; display:block; }
.work-copy h3{ font-size:1.9rem; margin-bottom:14px; }
.work-copy p{ color:var(--grey); margin-bottom:14px; font-size:1rem; }
.stat-row{ display:flex; gap:28px; margin:22px 0; flex-wrap:wrap; }
.stat-row .num{ font-family:'Fraunces',serif; font-size:2.1rem; color:var(--pink-deep); font-weight:600; line-height:1; }
.stat-row .lbl{ font-family:'Space Mono',monospace; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey); }
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

.vigloo-cta{
  display:inline-flex; align-items:center; gap:12px; margin-top:22px;
  background:#000; color:#fff; border-radius:100px; padding:10px 20px 10px 10px;
  text-decoration:none; font-family:'Space Mono',monospace; font-size:0.82rem; font-weight:700;
  transition:transform .2s ease;
}
.vigloo-cta:hover{ transform:translateY(-2px); }
.vigloo-cta img{ height:28px; width:auto; display:block; }

/* click-through video card (for when embedding is blocked) */
.vcard.watch-link{
  text-decoration:none; background:linear-gradient(160deg, #1a1a1a, #333);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  transition:transform .2s ease;
}
.vcard.watch-link:hover{ transform:translateY(-4px); }
.vcard.watch-link .play-icon{
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff;
}
.vcard.watch-link .watch-text{
  color:#fff; font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; text-align:center; padding:0 16px;
}

.ig-embed-wrap{ max-width:378px; margin:48px auto 0; display:flex; justify-content:center; }
.tag{ font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.04em; border:1px solid var(--ink); border-radius:100px; padding:5px 12px; }

.vfk-collage{ max-width:640px; margin:60px auto 0; }
.vfk-collage img{ width:100%; border-radius:20px; box-shadow:0 24px 50px rgba(0,0,0,0.15); }
.vfk-collage-cap{ margin-top:12px; text-align:center; font-family:'Space Mono',monospace; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); }
.vfk-bts-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; }
.vfk-bts-row img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; border-radius:20px; box-shadow:0 24px 50px rgba(0,0,0,0.15); }
@media (max-width: 600px){
  .vfk-bts-row{ grid-template-columns:1fr; }
}

.vfk-poster-row{ display:grid; grid-template-columns:1fr 260px; gap:48px; align-items:end; margin-bottom:56px; }
.vfk-poster img{ width:100%; border-radius:16px; box-shadow:0 24px 50px rgba(0,0,0,0.22); display:block; }
.vfk-poster-cap{ margin-top:10px; text-align:center; font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); }
@media (max-width: 700px){
  .vfk-poster-row{ grid-template-columns:1fr; }
  .vfk-poster{ max-width:220px; margin:0 auto; }
}

.bov-image-row{ display:grid; grid-template-columns:1fr 220px; gap:32px; align-items:end; margin-bottom:56px; }
.bov-titlecard-small img{ width:100%; border-radius:16px; box-shadow:0 24px 50px rgba(0,0,0,0.18); display:block; }
@media (max-width: 700px){
  .bov-image-row{ grid-template-columns:1fr; }
  .bov-image-row .vfk-poster{ max-width:220px; margin:0 auto; }
}

.vcard{
  position:relative; aspect-ratio:9/16; border-radius:28px; overflow:hidden;
  background:linear-gradient(160deg, var(--pink), #ff9caa);
  display:flex; align-items:center; justify-content:center; padding:26px;
  box-shadow:0 24px 50px rgba(0,0,0,0.18);
  width:100%; max-width:260px; margin:0 auto;
}
.vcard.dark-card{ background:linear-gradient(160deg, #1a1a1a, #333); }
.vcard-content{ color:var(--cream); text-align:center; }
.vcard-content .big{ font-family:'Fraunces',serif; font-style:italic; font-size:2.6rem; line-height:1; }
.vcard-content .small{ font-family:'Space Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; margin-top:10px; opacity:0.85; }

/* video embed variant of vcard */
.vcard.video-embed{ padding:0; background:#000; }
.vcard.video-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:28px;
}

/* landscape 16:9 variant, for videos that aren't actually vertical */
.vcard.landscape{ aspect-ratio:16/9; max-width:520px; width:100%; }

/* photo variant of vcard */
.vcard.photo-embed{ padding:0; background:#000; width:100%; max-width:220px; }
.vcard.photo-embed img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:28px;
}
.video-trio{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:48px; max-width:700px; margin-left:auto; margin-right:auto; }
.video-trio .vcard{ aspect-ratio:9/16; max-width:none; }
@media (max-width: 700px){
  .video-trio{ grid-template-columns:1fr; max-width:280px; margin-left:auto; margin-right:auto; }
}
.video-embed-label{
  position:absolute; bottom:14px; left:14px; right:14px; z-index:3;
  color:#fff; font-family:'Space Mono',monospace; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase;
  pointer-events:none; text-shadow:0 2px 8px rgba(0,0,0,0.6);
}

/* ---------- GALLERY ---------- */
.gallery{ display:grid; grid-template-columns:repeat(2, 1fr); gap:26px; max-width:640px; margin:0 auto; }
.gallery figure{ margin:0; }
.gallery .frame{ border-radius:20px; overflow:hidden; aspect-ratio:3/4; box-shadow:0 20px 40px rgba(0,0,0,0.15); }
.gallery img{ width:100%; height:100%; object-fit:cover; }
.gallery figcaption{ margin-top:10px; font-family:'Space Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--grey); text-align:center; }

/* ---------- DAY JOB / RX PAD ---------- */
.rx-pad{ background:var(--cream); border:1.5px solid var(--ink); border-radius:14px; max-width:900px; margin:0 auto; overflow:hidden; }
.rx-pad-head{
  display:flex; justify-content:space-between; align-items:center; padding:18px 26px;
  border-bottom:1.5px dashed rgba(17,17,17,0.2);
  font-family:'Space Mono',monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--pink-deep);
}
.role{ padding:26px 26px; border-bottom:1px solid var(--line); }
.role:last-child{ border-bottom:none; }
.role-top{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.role-top h4{ font-family:'Fraunces',serif; font-size:1.25rem; font-weight:600; }
.role-top .dates{ font-family:'Space Mono',monospace; font-size:0.72rem; color:var(--grey); }
.role-org{ color:var(--pink-deep); font-weight:500; font-size:0.92rem; margin-bottom:10px; }
.role ul{ list-style:none; padding:0; }
.role li{ position:relative; padding-left:18px; margin-bottom:6px; font-size:0.94rem; color:#333; }
.role li::before{ content:'▸'; color:var(--pink); position:absolute; left:0; }

/* ---------- BADGES ---------- */
.badge-row{ display:flex; flex-wrap:wrap; gap:14px; }
.badge{ display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--cream); padding:12px 18px; border-radius:100px; font-size:0.85rem; }
.badge.on-light{ background:var(--cream); color:var(--ink); border:1.5px solid var(--ink); }
.badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--pink); }

/* ---------- FOOTER ---------- */
footer{ background:var(--pink); padding:90px 5vw 40px; position:relative; overflow:hidden; }
footer .rx-mark{ font-size:26vw; bottom:-18%; left:-6%; color:rgba(255,255,255,0.10); }
.footer-inner{ position:relative; z-index:2; max-width:900px; margin:0 auto; text-align:center; }
footer h2{ font-size:clamp(1.8rem,4vw,2.8rem); color:var(--ink); margin-bottom:18px; }
footer h2 em{ font-style:italic; }
.footer-contact{ font-family:'Space Mono',monospace; font-size:0.85rem; color:var(--pink-deep); margin-bottom:36px; }
.footer-contact a{ text-decoration:none; border-bottom:1px solid var(--pink-deep); }
.footer-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:60px; }
.footer-bottom{
  border-top:1px solid rgba(17,17,17,0.15); padding-top:24px;
  display:flex; justify-content:space-between; font-family:'Space Mono',monospace; font-size:0.7rem; color:var(--pink-deep); opacity:0.8;
  flex-wrap:wrap; gap:10px;
}

/* ---------- PROJECT CARDS (creative work hub) ---------- */
.project-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px; }
.project-card{
  position:relative; border-radius:20px; padding:30px 26px; text-decoration:none;
  background:var(--cream); border:1.5px solid var(--ink); color:var(--ink);
  display:flex; flex-direction:column; min-height:180px; justify-content:space-between;
  transition:transform .25s ease, box-shadow .25s ease;
}
.project-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,0.12); }
.project-card .eyebrow{ margin-bottom:10px; }
.project-card h3{ font-size:1.4rem; margin-bottom:10px; }
.project-card p{ font-size:0.88rem; color:var(--grey); margin-bottom:14px; }
.project-card .arrow{ font-family:'Space Mono',monospace; font-size:0.8rem; color:var(--pink-deep); }

/* ---------- RESUME EMBED ---------- */
.resume-embed{
  width:100%; max-width:900px; margin:0 auto; border:1.5px solid var(--ink); border-radius:14px;
  overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.08);
}
.resume-embed iframe{ width:100%; height:1000px; border:0; display:block; }
.resume-embed-fallback{ text-align:center; padding:20px; font-size:0.85rem; color:var(--grey); }
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-grid .hero-visual{ order:-1; margin-bottom:20px; }
  .work-feature{ grid-template-columns:1fr; }
  .work-feature:nth-child(even){ direction:ltr; }
  .work-feature .vcard{ max-width:320px; margin:0 auto; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .nav-cards{ grid-template-columns:1fr; }
  header.hero{ padding-top:110px; }
}
@media (max-width: 480px){
  .gallery{ grid-template-columns:1fr; max-width:320px; }
}