:root{
  --ink:#161412; --paper:#f4efe7; --cream:#fbf8f2; --pink:#f0a9c5; --muted:#6c655f;
  --line:rgba(22,20,18,.18); --max:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",Arial,sans-serif}
a{color:inherit;text-decoration:none}
.site-header{height:84px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4vw;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;background:rgba(244,239,231,.92);backdrop-filter:blur(12px)}
.wordmark{font-weight:700;letter-spacing:-.08em;font-size:28px}.wordmark span{font-size:9px;vertical-align:top;margin-left:3px;letter-spacing:0}
.site-header nav{display:flex;gap:30px;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.header-cta{justify-self:end;border-bottom:1px solid var(--ink);padding-bottom:3px;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.hero{max-width:var(--max);margin:auto;padding:9vw 5vw 4vw}
.hero-kicker,.eyebrow{font:500 11px/1.2 "DM Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(68px,10vw,155px);line-height:.84;letter-spacing:-.075em;font-weight:600;margin:45px 0 45px;max-width:1100px}
.hero h1 em{font-family:"Playfair Display",serif;font-weight:700;color:var(--pink);-webkit-text-stroke:1px var(--ink)}
.hero-copy{max-width:650px;font-size:clamp(19px,2vw,28px);line-height:1.25;letter-spacing:-.03em}
.hero-actions{display:flex;gap:25px;align-items:center;margin-top:42px}
.button{display:inline-flex;gap:28px;align-items:center;padding:16px 22px;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.button-dark{background:var(--ink);color:var(--paper)}
.text-link,.outline-link{font-size:12px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--ink);padding-bottom:4px}
.hero-rule{border-top:1px solid var(--line);margin-top:85px}
.hero-meta{display:flex;justify-content:space-between;padding-top:15px;font:11px "DM Mono",monospace;text-transform:uppercase;color:var(--muted)}
.intro-band{background:var(--ink);color:var(--paper);padding:7vw 8vw;font-size:clamp(32px,5vw,72px);line-height:1;letter-spacing:-.06em}
.intro-band p{max-width:1050px;margin:0}
.work,.reel-section,.skills{max-width:var(--max);margin:auto;padding:9vw 5vw}
.section-heading{display:grid;grid-template-columns:1.5fr 1fr;gap:6vw;align-items:end;margin-bottom:70px}
.section-heading h2{font-size:clamp(48px,6vw,88px);line-height:.9;letter-spacing:-.065em;margin:20px 0 0}
.section-heading>p{font-size:16px;line-height:1.5;color:var(--muted);max-width:440px;margin:0 0 5px}
.project{display:grid;grid-template-columns:55px 1fr 1.25fr;gap:35px;padding:75px 0;border-top:1px solid var(--line)}
.project:last-child{border-bottom:1px solid var(--line)}
.project-number{font:12px "DM Mono",monospace;color:var(--muted)}
.project h3{font-size:clamp(40px,4.5vw,72px);letter-spacing:-.06em;line-height:.9;margin:18px 0 25px}
.project-copy>p{font-size:16px;line-height:1.55;max-width:480px;color:var(--muted)}
.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin:28px 0 32px}
.tag-row span{border:1px solid var(--line);border-radius:100px;padding:7px 10px;font:10px "DM Mono",monospace;text-transform:uppercase}
.video-frame{aspect-ratio:16/9;background:#111;overflow:hidden}
.video-frame iframe{width:100%;height:100%;border:0}
.late-night-visual{background:#050505;min-height:390px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:45px}
.late-night-visual img{width:min(85%,500px);height:auto}
.play-tile{width:100%;border-top:1px solid rgba(255,255,255,.25);padding-top:18px;color:white;display:flex;gap:12px;align-items:center;font:11px "DM Mono",monospace;text-transform:uppercase}
.play-icon{width:35px;height:35px;border:1px solid white;border-radius:50%;display:grid;place-items:center;font-size:10px}
.services{background:#e9e0d6;padding:8vw 5vw;display:grid;grid-template-columns:.35fr 1fr;gap:7vw}
.services-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.services-grid>div{padding:35px 20px 40px 0;border-bottom:1px solid var(--line)}
.services-grid>div:nth-child(odd){border-right:1px solid var(--line);padding-right:35px}
.services-grid>div:nth-child(even){padding-left:35px}
.services-grid span{font:11px "DM Mono",monospace;color:var(--muted)}
.services-grid h3{font-size:30px;letter-spacing:-.04em;margin:35px 0 12px}
.services-grid p{color:var(--muted);line-height:1.5;max-width:420px}
.reel-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.reel-card{min-height:420px;background:#171513;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.reel-card:nth-child(2){background:#d9b8c4;color:var(--ink)}.reel-card:nth-child(3){background:#d8cdbd;color:var(--ink)}
.reel-card:nth-child(4){background:#20201e}.reel-card:nth-child(5){background:#c9b39b;color:var(--ink)}.reel-card:nth-child(6){background:#e6a9bf;color:var(--ink)}
.reel-card:before{content:"REEL";position:absolute;top:22px;left:22px;font:11px "DM Mono",monospace;letter-spacing:.15em}
.reel-card h3{font-size:28px;letter-spacing:-.04em;margin:0 0 9px}
.reel-card p{font-size:13px;opacity:.7;margin:0 0 18px;line-height:1.4}
.reel-card a{font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid currentColor;padding-bottom:5px;width:max-content}
.social-links{display:flex;gap:25px;margin-top:35px;flex-wrap:wrap}
.social-links a{font:11px "DM Mono",monospace;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:5px}
.about{background:var(--cream);display:grid;grid-template-columns:1fr 1fr}
.about-photo{min-height:700px;padding:5vw}
.photo-placeholder{height:100%;min-height:600px;background:#ded7ce;display:grid;place-items:center;text-align:center;color:#81786f}
.photo-placeholder span{font:11px "DM Mono",monospace;letter-spacing:.15em}.photo-placeholder small{display:block;margin-top:8px;font:10px "DM Mono",monospace}
.about-copy{padding:9vw 8vw 8vw 5vw}
.about-copy h2{font-size:clamp(45px,5vw,75px);line-height:.92;letter-spacing:-.06em;margin:22px 0 35px}
.about-copy p{font-size:16px;line-height:1.6;max-width:650px;color:var(--muted)}
.about-close{font-size:20px!important;color:var(--ink)!important;margin:40px 0}
.skills{padding-bottom:10vw}
.skill-cloud{display:flex;flex-wrap:wrap;gap:10px}
.skill-cloud span{font-size:14px;border:1px solid var(--line);border-radius:100px;padding:12px 15px}
.contact{background:var(--pink);padding:10vw 5vw 6vw}
.contact h2{font-size:clamp(60px,10vw,150px);line-height:.82;letter-spacing:-.08em;max-width:1000px;margin:35px 0 50px}
.big-email{font-size:clamp(25px,4vw,58px);letter-spacing:-.05em;border-bottom:2px solid var(--ink)}
.contact-meta{border-top:1px solid rgba(22,20,18,.3);margin-top:10vw;padding-top:15px;display:flex;justify-content:space-between;font:11px "DM Mono",monospace;text-transform:uppercase}
footer{padding:20px 5vw;display:flex;justify-content:space-between;background:var(--ink);color:var(--paper);font:10px "DM Mono",monospace;text-transform:uppercase}
@media(max-width:800px){
  .site-header{grid-template-columns:1fr auto;height:70px}.site-header nav{display:none}
  .hero{padding-top:18vw}.hero h1{font-size:18vw;margin:35px 0}.hero-meta{gap:12px;flex-wrap:wrap}
  .section-heading,.about,.services{grid-template-columns:1fr}.section-heading{gap:25px}
  .project{grid-template-columns:35px 1fr;padding:55px 0}.video-frame,.late-night-visual{grid-column:2;margin-top:20px}
  .services-grid{grid-template-columns:1fr}.services-grid>div:nth-child(odd){border-right:0;padding-right:0}.services-grid>div:nth-child(even){padding-left:0}
  .reel-gallery{grid-template-columns:1fr 1fr}.reel-card{min-height:330px}
  .about-photo{padding:6vw;min-height:500px}.photo-placeholder{min-height:450px}
  .contact-meta{gap:12px;flex-wrap:wrap}
}
@media(max-width:520px){
  .site-header{padding:0 5vw}.header-cta{font-size:10px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .project{grid-template-columns:1fr}.project-number{margin-bottom:-20px}.video-frame,.late-night-visual{grid-column:1}
  .reel-gallery{grid-template-columns:1fr}
  .reel-card{min-height:300px}
  footer{gap:15px;flex-direction:column}
}


/* Added media embeds — original typography, palette and section layout preserved. */
.late-video-frame{width:100%;aspect-ratio:16/9;background:#111;overflow:hidden;margin-top:30px}
.late-video-frame iframe{width:100%;height:100%;border:0;display:block}
.about-portrait{width:100%;height:100%;min-height:600px;display:block;object-fit:cover;object-position:center center}
.reel-card-embed{padding:18px;justify-content:flex-start;min-height:0}
.reel-card-embed:before{display:none}
.reel-label{display:flex;gap:14px;align-items:baseline;min-height:62px}
.reel-label>span{font:11px "DM Mono",monospace;letter-spacing:.13em;opacity:.7}
.reel-label h3{font-size:20px;line-height:1.05;margin:0;letter-spacing:-.04em}
.instagram-frame{width:100%;aspect-ratio:9/16;background:#fff;overflow:hidden}
.instagram-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.reel-fallback{margin-top:15px!important}
@media(max-width:800px){
  .about-portrait{min-height:450px}
}


/* Obsidian grey revision while preserving the original typography and layout */
:root{
  --ink:#f4efe7;
  --paper:#161616;
  --cream:#1d1d1d;
  --muted:#d8cdbd;
  --line:rgba(244,239,231,.16);
}
body{background:var(--paper);color:var(--ink)}
.site-header{background:rgba(22,22,22,.92);border-bottom:1px solid var(--line)}
.header-cta,.text-link,.outline-link{border-bottom-color:var(--ink)}
.hero h1 em{color:var(--pink);-webkit-text-stroke:0}
.intro-band{background:var(--pink);color:#161616}
.section-heading>p,.project-copy>p,.services-grid span,.services-grid p,.about-copy p,.hero-kicker,.eyebrow,.hero-meta,.project-number{color:var(--muted)}
.project,.project:last-child,.hero-rule,.services-grid,.services-grid>div,.tag-row span,.skill-cloud span,.contact-meta,.social-links a{border-color:var(--line)}
.tag-row span,.skill-cloud span{color:var(--ink)}
.services{background:#1a1a1a}
.services-grid>div:nth-child(odd){border-right:1px solid var(--line)}
.reel-card{background:#1f1f1f;color:var(--ink)}
.reel-card:nth-child(2){background:#2a2226;color:var(--ink)}
.reel-card:nth-child(3){background:#2a2722;color:var(--ink)}
.reel-card:nth-child(4){background:#232323;color:var(--ink)}
.reel-card:nth-child(5){background:#302820;color:var(--ink)}
.reel-card:nth-child(6){background:#35252d;color:var(--ink)}
.about{background:#191919}
.contact{background:var(--pink);color:#161616}
.big-email,.contact .eyebrow,.contact-meta,.contact-meta a{color:#161616;border-color:rgba(22,20,18,.3)}
footer{background:#0f0f0f;color:var(--ink)}
.social-links a{border-bottom-color:var(--ink)}
.about-close{color:var(--pink)!important}
.button-dark{background:var(--pink);color:#161616}
.button-dark:hover{filter:brightness(.98)}
.late-night-visual{background:#0f0f0f;gap:28px}
.late-night-visual img{max-width:420px}
.video-frame,.late-video-frame{background:#0d0d0d;border:1px solid var(--line)}
.about-photo{padding:3vw 1.5vw 3vw 4vw;display:flex;align-items:center}
.about-portrait{width:88%;max-width:560px;min-height:620px;object-position:center 32%;object-fit:cover;filter:grayscale(100%);margin:0 auto 0 0}
.photo-placeholder{background:#2a2722;color:var(--muted)}


/* Additional polish: podcast logos, premium about section, and upgraded reel cards */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.project-logo-wrap{display:flex;align-items:center;min-height:120px;margin:18px 0 24px}
.project-logo{display:block;max-width:100%;height:auto;object-fit:contain}
.project-logo-wide{width:min(100%,430px)}
.project-logo-yiht{width:min(100%,430px)}
.project-logo-late{width:min(100%,390px)}
.project-copy .outline-link{margin-top:6px;display:inline-block}

.about-copy{position:relative}
.about-intro{font-size:20px;line-height:1.55;color:var(--ink)!important;max-width:640px;margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.about-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 28px}
.about-highlights div{padding:18px 16px;border:1px solid var(--line);background:rgba(244,239,231,.03)}
.about-highlights span{display:block;font:11px "DM Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.about-highlights strong{display:block;font-size:15px;line-height:1.35;font-weight:600;color:var(--ink)}
.about-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:36px}
.button-outline{background:transparent;color:var(--ink);border:1px solid var(--line)}
.button-outline span{display:inline-block;margin-left:4px}

.reel-card-embed{padding:18px;justify-content:flex-start;min-height:0;border:1px solid rgba(244,239,231,.08);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.reel-card-embed:before{display:none}
.reel-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;min-height:50px}
.reel-index{font:11px "DM Mono",monospace;letter-spacing:.13em;opacity:.72}
.reel-project-logo{display:block;width:72%;max-height:56px;object-fit:contain;object-position:left center;filter:drop-shadow(0 6px 18px rgba(0,0,0,.18))}
.instagram-frame{width:100%;aspect-ratio:9/16;background:#fff;overflow:hidden;border-radius:14px;border:1px solid rgba(0,0,0,.08)}
.instagram-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.reel-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.reel-foot p{margin:0;color:var(--muted);font-size:12px;line-height:1.4;opacity:1}
.reel-fallback{margin-top:0!important}
.social-links{border-top:1px solid var(--line);padding-top:24px}

@media(max-width:920px){
  .about-highlights{grid-template-columns:1fr}
}
@media(max-width:800px){
  .project-logo-wrap{min-height:90px}
  .project-logo-wide,.project-logo-yiht,.project-logo-late{width:min(100%,360px)}
  .about-actions{flex-direction:column;align-items:flex-start}
  .reel-top{align-items:flex-start;flex-direction:column}
  .reel-project-logo{width:100%;max-height:52px}
  .about-photo{padding:5vw 5vw 1vw}
  .about-portrait{width:100%;max-width:none;min-height:480px;margin:0 auto}
}

/* Make Late Night video match the standard project video presentation */
.late-night .video-frame{aspect-ratio:16/9;background:#0d0d0d;overflow:hidden;border:1px solid var(--line)}