/* ============================================================
   redlight-lifestyle.css — v1 (2026-09-19)
   Lifestyle redesign layer for red-light.html ONLY.
   Loaded AFTER rinnovare.css; overrides only. Shared base css
   is untouched — every other page renders exactly as before.
   Design language: 5-slide deck — editorial serif, red rule,
   LED dot-grid, champagne whispers, warm espresso darks.
   v2 (2026-10-05): the Playfair @import moved into red-light.html's <head> as a
   preconnected <link>; an @import here could not start downloading until this
   file had itself been fetched and parsed.
   ============================================================ */

:root{
  --lux-red:#c8341a;          /* 660 nm — the panels' core */
  --lux-red-glow:#e0512e;
  --lux-amber:#e8a05c;
  --lux-champ:#d9c4a0;        /* spec whisper */
  --lux-champ-dim:#a89878;
  --lux-espresso:#191310;
  --lux-espresso-2:#211a15;
  --lux-cream:#f5efe4;
  --lux-serif:'Playfair Display',Georgia,serif;
}

/* ---------- typography ---------- */
.hero h1, section h2, .luxe-h1{
  font-family:var(--lux-serif);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.12;
}
section h2{font-size:clamp(28px,4vw,42px)}
section h2::after{
  content:'';display:block;width:54px;height:3px;margin-top:16px;
  background:linear-gradient(90deg,var(--lux-red),var(--lux-amber));
  border-radius:2px;
}
section.dark h2::after{background:linear-gradient(90deg,var(--lux-red-glow),var(--lux-amber))}
.pcard h3{font-family:var(--lux-serif);font-weight:500;font-size:22px}
.eyebrow{
  text-transform:uppercase;letter-spacing:.32em;font-size:11px;
  font-family:var(--body);color:var(--lux-red);font-weight:600;
}
section.dark .eyebrow{color:var(--lux-amber)}
.lede{font-size:19px;line-height:1.65}

/* ---------- HERO — cinematic dark, image right ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 600px at 78% 30%, rgba(200,52,26,.20), transparent 60%),
    radial-gradient(circle at center, rgba(200,52,26,.10) 1.2px, transparent 1.4px),
    linear-gradient(160deg,#221913 0%,var(--lux-espresso) 55%,#120d0a 100%);
  background-size:auto,26px 26px,auto;
  color:var(--lux-cream);
  overflow:hidden;
  padding:0;
}
.luxe-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.75fr);
  gap:48px;align-items:center;min-height:88vh;padding:96px 0 84px;
}
.luxe-hero-copy .eyebrow{color:var(--lux-amber)}
.luxe-hero-copy h1{
  font-size:clamp(38px,5.2vw,64px);color:#fdf9f0;margin:18px 0 6px;
}
.luxe-hero-copy h1 em{font-style:italic;font-weight:400;color:var(--lux-champ)}
.luxe-hero-copy .lede{color:#e8ddc9;max-width:34em;margin:18px 0 0}
.luxe-wl-whisper{
  font-family:var(--body);letter-spacing:.18em;font-size:13.5px;
  color:var(--lux-champ);margin-top:26px;
}
.luxe-wl-whisper b{color:#f0e5d0;font-weight:600}
.luxe-hero-note{font-size:12.5px;color:#9c8f7c;margin-top:8px;letter-spacing:.02em}
.luxe-hero-media{
  position:relative;height:min(78vh,760px);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(217,196,160,.14);
}
.luxe-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.luxe-hero-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,13,10,0) 55%,rgba(18,13,10,.55) 100%);
}
.luxe-hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.luxe-hero-cta .btn{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.22em;font-size:12px;
  padding:15px 26px;border-radius:999px;text-decoration:none;display:inline-block;
  transition:transform .25s ease, box-shadow .25s ease;
}
.luxe-hero-cta .btn:hover{transform:translateY(-2px)}
.luxe-hero-cta .gold{
  background:linear-gradient(120deg,var(--lux-red),#a82814 60%,#8c1f10);
  color:#fff;box-shadow:0 12px 34px rgba(200,52,26,.40);
}
.luxe-hero-cta .ghost{
  border:1px solid rgba(217,196,160,.38);color:var(--lux-champ);
}
.luxe-hero-cta .ghost:hover{border-color:var(--lux-champ);color:#f0e5d0}

/* old wavelength chip row — retired on this page */
.hero .wl{display:none}

/* ---------- dark sections: warm espresso + LED dot texture ---------- */
section.dark{
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(200,52,26,.10), transparent 55%),
    radial-gradient(circle at center, rgba(200,52,26,.07) 1.1px, transparent 1.2px),
    linear-gradient(180deg,#1d1611,#171210);
  background-size:auto,24px 24px,auto;
  color:var(--lux-cream);
}
section.dark h2{color:#fdf9f0}
section.dark p{color:#d9cfc0}
section.dark .small{color:#a89878}

/* notes — soft amber card instead of gray */
.note{
  background:linear-gradient(180deg,rgba(232,160,92,.07),rgba(232,160,92,.03));
  border-left:2px solid var(--lux-amber);border-radius:0 12px 12px 0;
}
section:not(.dark) .note{border-left-color:var(--lux-red);
  background:linear-gradient(180deg,rgba(200,52,26,.05),rgba(200,52,26,.02))}
.note .k{font-family:var(--body);text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;color:var(--lux-red);font-weight:600}
section.dark .note .k{color:var(--lux-amber)}

/* spec tables — calmer, more air */
.spec th{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;font-weight:600;
}
.spec td{line-height:1.55}

/* buttons site-wide on this page */
.btn.gold{
  background:linear-gradient(120deg,var(--lux-red),#a82814 60%,#8c1f10);
  border-radius:999px;letter-spacing:.16em;text-transform:uppercase;font-size:12px;
  box-shadow:0 10px 26px rgba(200,52,26,.32);
}
.btn.ghost{border-radius:999px;letter-spacing:.14em;text-transform:uppercase;font-size:12px}

/* episode cards — warmer */
.epcard{border-radius:16px;overflow:hidden}
.epcard .eptag{
  background:linear-gradient(120deg,var(--lux-red),#8c1f10);letter-spacing:.2em;
}

/* ---------- THE RITUAL — lifestyle band ---------- */
.luxe-band{
  position:relative;
  background:
    radial-gradient(1000px 500px at 15% 10%, rgba(232,160,92,.10), transparent 55%),
    radial-gradient(circle at center, rgba(200,52,26,.06) 1.1px, transparent 1.2px),
    linear-gradient(180deg,#20180f,#191310 70%);
  background-size:auto,24px 24px,auto;
  color:var(--lux-cream);padding:104px 0 96px;
}
.luxe-band .eyebrow{color:var(--lux-amber)}
.luxe-band h2{color:#fdf9f0;max-width:16em}
.luxe-band .lede{color:#d9cfc0;max-width:38em}
.luxe-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;
}
.luxe-shot{
  margin:0;position:relative;border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(217,196,160,.10);
  transition:transform .35s ease, box-shadow .35s ease;
}
.luxe-shot:hover{transform:translateY(-6px);box-shadow:0 34px 74px rgba(0,0,0,.55), 0 0 0 1px rgba(217,196,160,.22)}
.luxe-shot img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
/* sticky-masthead anchor offset so in-page jumps don't hide headlines */
section[id]{scroll-margin-top:86px}

/* ritual caption polish: align baselines, stop two-line wrap crowding */
.luxe-shot figcaption{
  position:absolute;inset:auto 0 0 0;padding:52px 18px 16px;
  background:linear-gradient(180deg,rgba(18,13,10,0),rgba(18,13,10,.85));
  font-family:var(--lux-serif);font-size:19px;color:#fdf9f0;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:96px;
}
.luxe-shot figcaption span{
  display:block;font-family:var(--body);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lux-champ);margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- product figure frames — slightly warmer ---------- */
.galitem{border-radius:16px;overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .luxe-grid{grid-template-columns:repeat(2,1fr)}
  .luxe-hero-grid{grid-template-columns:1fr;min-height:0;padding:72px 0 64px}
  .luxe-hero-media{height:60vw;max-height:560px}
}
@media (max-width:620px){
  .luxe-grid{grid-template-columns:1fr}
  .luxe-hero-cta .btn{width:100%;text-align:center}
  .luxe-hero-grid{padding-top:88px}
}