/* Apply HART's paired editorial layout while preserving L'Oréal's title and palette. */
.hero h1, .hero h1 span { color: var(--ink); }
.editorial-intro > .section-heading .eyebrow,
#product-page-videos > .section-heading .eyebrow,
#hers > .section-heading .eyebrow { color: var(--accent); }
.finished-frame { width: 100%; }
.finished-frame video:fullscreen, .finished-frame video:-webkit-full-screen { width: 100vw; height: 100vh; object-fit: contain; background: #000; }
.concept, .detail-card { min-width: 0; display: flex; flex-direction: column; }
.video-copy { display: flex; flex-direction: column; flex: 1; }
.video-copy .links { margin-top: auto; }
.detail-card { padding: 0; background: transparent; }
.detail-card .finished-frame { margin-bottom: 0; }
.detail-card h3, .video-copy h3 { font: 500 19px/1.25 var(--body); letter-spacing: 0; margin: 0 0 7px; }
.video-copy .headline { font: 400 22px/1.2 var(--display); color: var(--accent); margin: 0 0 12px; }
.video-copy .summary { text-wrap: pretty; }
.provenance { max-width: none; }
.theme-control button { transition: background-color 160ms, color 160ms; }
.theme-control button:hover { color: var(--ink); background: var(--panel); }
.theme-control button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.button { transition: opacity 160ms; }
.button:hover { opacity: .82; }
.button:active { opacity: .7; }
.hers-copy { font-size: clamp(44px,5vw,68px); margin: 28px 0 0; }
.hers-copy em { color: inherit; }
.hers-description { max-width: 36ch; }
@media (min-width: 1001px) {
  header, main, footer { width: min(calc(100% - 88px), 1232px); }
  .editorial-lead, #product-page-videos, #hers { --video-height: clamp(300px, min(58dvh, calc(100dvh - 310px)), 600px); display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 58px; align-items: center; }
  .editorial-lead { padding: 42px 0 52px; }
  .editorial-intro { min-width: 0; }
  .editorial-intro .hero { display: block; padding: 0; }
  .editorial-intro .hero h1 { font-size: clamp(34px,3.45vw,48px); line-height: 1.08; white-space: nowrap; }
  .editorial-intro .hero > div + div { margin-top: 26px; }
  .editorial-intro .intro { font-size: 16px; max-width: 38ch; margin-bottom: 16px; }
  .editorial-intro .concept-note { font-size: 11px; margin-bottom: 20px; }
  .editorial-intro .text-link { font-size: 13px; }
  .editorial-intro > .section-heading { display: block; border-top: 1px solid var(--line); padding-top: 20px; margin: 30px 0 0; max-width: 38ch; }
  .editorial-intro > .section-heading .eyebrow { font-size: 10px; letter-spacing: .09em; margin-bottom: 10px; }
  .editorial-intro > .section-heading h2 { font: 500 17px/1.3 var(--body); letter-spacing: 0; margin-bottom: 10px; }
  .editorial-intro > .section-heading > p { font-size: 14px; }
  #social-ad-videos { padding: 0; border: 0; }
  #social-ad-videos .grid, #product-page-videos .grid { grid-template-columns: repeat(2,minmax(0,1fr)); width: min(54vw,calc(var(--video-height) * 9 / 8 + 24px)); gap: 24px; }
  .finished-frame { max-width: none; }
  .video-copy { padding-top: 14px; }
  .video-copy .variant { font-size: 10px; letter-spacing: .08em; margin-bottom: 6px; }
  .video-copy h3 { font-size: 16px; }
  .video-copy .headline { font-size: 20px; margin-bottom: 9px; }
  .video-copy .summary { font-size: 13px; }
  .video-copy .links { font-size: 12px; gap: 16px; margin-bottom: 0; }
  .video-copy .links a { min-height: 36px; }
  #product-page-videos { padding: 50px 0 40px; row-gap: 0; }
  #product-page-videos > .section-heading, #hers > .section-heading { display: block; margin: 0; max-width: 36ch; }
  #product-page-videos > .section-heading h2, #hers > .section-heading h2 { margin-bottom: 22px; }
  #product-page-videos > .section-heading > p, #hers > .section-heading > p { font-size: 16px; }
  #product-page-videos > .source { grid-column: 1 / -1; margin-top: 30px; }
  #product-page-videos > .quiet-line { grid-column: 1 / -1; margin-bottom: 0; }
  .hers { padding: 48px 0 56px; }
  .hers-description { bottom: 65px; }
}
@media (min-width:1800px) {
  header, main, footer { width: min(calc(100% - 120px),1340px); }
  .editorial-lead, #product-page-videos, #hers { column-gap: 76px; }
  .editorial-intro .hero h1 { font-size: 50px; }
}
@media (max-width:600px) {
  .detail-card .video-copy { padding-top: 20px; }
  .theme-control { display: none; }
  .hers-copy { font-size: 54px; }
}
@media (prefers-reduced-motion:reduce) {
  .theme-control button, .button { transition: none; }
}

/* A closed presentation cover, with no confidential media delivered to the page. */
#hers > .section-heading { display: block; }
#hers h2 { font-size: clamp(26px,2.8vw,38px); }
#hers > .section-heading > p { margin-top: 22px; }
#hers .hers-signature { font: italic 400 20px/1.45 var(--display); color: var(--ink); }
.meeting-preview { min-width: 0; min-height: 360px; padding: 26px 30px 22px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); background: var(--panel); }
.preview-meta, .preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.preview-meta { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.preview-meta > span:first-child { display: inline-flex; gap: 8px; align-items: center; }
.preview-meta svg { width: 15px; height: 15px; flex-shrink: 0; }
.preview-message { padding: 40px 0; text-align: center; }
.preview-kicker { font-size: 11px; color: var(--accent); letter-spacing: .08em; margin: 0 0 22px; }
.preview-message h3 { font: 400 clamp(30px,3vw,44px)/1.12 var(--display); letter-spacing: -.035em; margin: 0 0 22px; }
.preview-message h3 em { font-weight: 400; }
.preview-message > p:last-child { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0; }
.preview-footer { border-top: 1px solid var(--line); padding-top: 16px; font-size: 12px; color: var(--ink); }
.preview-footer > span:last-child { font-size: 20px; color: var(--accent); }
@media(min-width:1001px) {
  .meeting-preview { width: min(54vw,calc(var(--video-height) * 9 / 8 + 24px)); min-height: var(--video-height); }
  #hers > .section-heading { margin-bottom: 0; }
}
@media(max-width:1000px) {
  #hers { display: grid; grid-template-columns: 1fr; gap: 28px; }
  #hers > .section-heading { margin: 0; }
}
@media(max-width:600px) {
  .meeting-preview { padding: 22px; }
  .preview-meta { font-size: 9px; letter-spacing: .08em; gap: 12px; }
  #hers .hers-signature { font-size: 19px; }
}