
:root{--bg:#f8f6f1;--ink:#171714;--muted:#68665e;--line:#d9d5cb;--panel:#efebe2;--accent:#8b6b39;--cta:#171714;--cta-ink:#fff;--display:"Iowan Old Style","Palatino Linotype",Georgia,serif;--display-weight:400;--display-tracking:-.04em}
:root[data-theme="dark"]{--bg:#171714;--ink:#f5f0e6;--muted:#b7b0a3;--line:#3a3832;--panel:#25241f;--accent:#cfad76;--cta:#f5f0e6;--cta-ink:#171714}
.finished-frame{max-width:360px;margin:0 auto;background:#f8f6f1;aspect-ratio:9/16}.finished-frame video{display:block;width:100%;height:100%;object-fit:contain}.finished-frame video:fullscreen{width:100vw;height:100vh;object-fit:contain;background:#000}.detail-card .finished-frame{margin-bottom:28px}.loreal-logo{display:block;width:130px;height:auto}.brand-name{display:flex;flex-direction:column;justify-content:center;font-family:Arial,sans-serif;font-size:25px;line-height:1;letter-spacing:-1px}.brand-name span{font-size:10px;letter-spacing:4px;margin:5px 0 0 4px}.appearance{font-size:24px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);cursor:pointer}.hero{padding:64px 0 60px;grid-template-columns:1.25fr .75fr}.hero h1{font-size:clamp(38px,4.3vw,62px);line-height:1.05;white-space:nowrap}.hero h1 span{font-style:italic;color:inherit}.concept-note{font-size:12px;color:var(--muted);letter-spacing:.03em;margin:0 0 18px}.concept-scene{height:450px;position:relative;overflow:hidden;background:#e9e0d3;color:#34281b;display:flex;align-items:center;justify-content:center;gap:35px;padding:50px 38px}.scene-top{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.scene-title{font:italic 400 clamp(30px,3.2vw,48px)/1.05 var(--display);max-width:170px}.reference-frame{width:125px;flex-shrink:0}.reference-image{display:block;width:100%;height:auto;max-height:280px;object-fit:contain}.ref-label{position:absolute;bottom:19px;left:24px;font-size:10px;color:#5e5141}.click .concept-scene{background:#22221f;color:#e9d3a6}.click .reference-frame{width:125px;box-shadow:none}.click .ref-label{color:#c6bdac}.video-copy{padding-top:23px}.video-copy h3{font-family:var(--display);font-size:29px;font-weight:400;letter-spacing:-.02em;margin:8px 0 12px}.video-copy .summary{max-width:490px;color:var(--muted)}.source{max-width:930px;margin-top:32px;line-height:1.6}.detail-card{padding:32px;background:var(--panel)}.detail-card h3{font:400 31px/1.15 var(--display);letter-spacing:-.03em;margin:22px 0 16px}.detail-card>p:not(.variant){color:var(--muted)}.detail-beats{padding:0;list-style:none;margin:28px 0 0}.detail-beats li{border-top:1px solid var(--line);padding:15px 0;display:flex;gap:28px}.detail-beats span{color:var(--accent);font-size:12px}.quiet-line{font-size:13px;color:var(--muted);margin:24px 0 0}.hers{position:relative;padding:64px 0 72px}.hers h2{font-size:26px}.hers-copy{font:400 clamp(54px,7vw,96px)/1.05 var(--display);letter-spacing:-.045em;margin:36px 0}.hers-copy em{color:var(--accent)}.hers-description{max-width:390px;position:absolute;right:5%;bottom:88px;color:var(--muted);font-size:18px}.pilot h2{font-size:40px}.section{padding-top:60px}.section-heading{gap:25px}.section-heading>p{font-size:15px}.links{font-size:13px}
@media(max-width:960px){.hero{grid-template-columns:1fr;gap:26px}.concept-scene{height:360px;padding:45px 20px;gap:18px}.reference-frame{width:118px}.click .reference-frame{width:135px}.scene-title{font-size:30px}.hers-description{position:static;max-width:500px}.hero h1{font-size:clamp(38px,6.4vw,62px)}.appearance{display:none}}
@media(max-width:600px){.loreal-logo{width:105px}.hero{padding:32px 0 40px;gap:23px}.hero h1{font-size:clamp(24px,8vw,44px)}.hero .intro{font-size:17px}.section-heading h2{font-size:31px}.concept-scene{height:330px}.reference-frame{width:128px}.click .reference-frame{width:145px}.scene-title{font-size:36px;max-width:130px}.scene-top{font-size:9px;left:19px;right:19px}.detail-card{padding:25px}.hers{padding:45px 0}.hers-copy{font-size:64px}.hers-description{font-size:16px}.pilot h2{font-size:34px}.brand-name{font-size:20px}.brand-name span{font-size:8px}.brand .pv{width:25px;height:25px}}
