:root{
  --lipstick-scene-bg:#f3eee8;
  --lipstick-ink:#2a1717;
  --lipstick-wine:#681926;
  --lipstick-gold:#b79a67;
}

.lipstick-story{
  position:relative;
  min-height:100vh;
  overflow:clip;
  background:var(--lipstick-scene-bg);
  color:var(--lipstick-ink);
  isolation:isolate;
}

.lipstick-story__frame{
  position:relative;
  width:100%;
  height:100vh;
  min-height:620px;
  overflow:hidden;
}

.lipstick-story__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  touch-action:pan-y;
}

.lipstick-story__eyebrow,
.lipstick-story__counter,
.lipstick-story__copy,
.lipstick-story__scroll{
  position:absolute;
  z-index:3;
  pointer-events:none;
}

/* Ueno-inspired information rhythm, translated into Emma's editorial palette. */
.projects{isolation:isolate}
.projects a{padding:3px 0}
.projects-preview{
  position:absolute;
  top:-8px;
  right:calc(100% + 38px);
  width:clamp(320px,31vw,440px);
  padding:20px 22px 18px;
  border:1px solid rgba(91,23,35,.16);
  background:rgba(247,243,238,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 26px 70px rgba(48,28,24,.11);
  opacity:0;
  transform:translateX(16px);
  transition:opacity .28s ease,transform .42s cubic-bezier(.2,.75,.2,1);
  pointer-events:none;
}
.projects-preview__label{
  display:block;
  margin-bottom:13px;
  color:rgba(23,19,17,.45);
  font-size:8px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.projects-preview__list{display:grid;border-top:1px solid rgba(91,23,35,.15)}
.projects-preview__list span{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:8px;
  padding:7px 0 6px;
  border-bottom:1px solid rgba(91,23,35,.11);
  color:rgba(23,19,17,.78);
  font:11px/1.15 Arial,Helvetica,sans-serif;
  letter-spacing:0;
}
.projects-preview__list b{font-weight:400;color:var(--wine)}
.projects-preview__list i{font:italic 10px/1 Didot,"Times New Roman",serif;color:rgba(23,19,17,.42)}
.projects-preview small{display:block;margin-top:12px;color:rgba(91,23,35,.45);font-size:7px;letter-spacing:.18em;text-transform:uppercase}
.projects:has(a[href="#proyectos"]:hover) .projects-preview,
.projects:has(a[href="#proyectos"]:focus-visible) .projects-preview{opacity:1;transform:translateX(0)}
.projects a:focus-visible{outline:1px solid var(--wine);outline-offset:5px}

.lipstick-story__eyebrow{
  top:34px;
  left:4vw;
  margin:0;
  font-size:9px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(42,23,23,.58);
}

.lipstick-story__counter{
  top:34px;
  right:4vw;
  font:italic 15px/1 Didot,"Times New Roman",serif;
  color:var(--lipstick-wine);
}

.lipstick-story__copy{
  left:4vw;
  bottom:8vh;
  max-width:310px;
}

.lipstick-story__copy h2{
  margin:0 0 15px;
  font:400 clamp(42px,5.6vw,82px)/.88 Didot,"Bodoni 72","Times New Roman",serif;
  letter-spacing:-.055em;
  color:var(--lipstick-wine);
}

.lipstick-story__copy p{
  width:245px;
  margin:0;
  font-size:10px;
  line-height:1.55;
  letter-spacing:.04em;
  color:rgba(42,23,23,.58);
}

.lipstick-story__scroll{
  right:4vw;
  bottom:8vh;
  writing-mode:vertical-rl;
  font-size:8px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(42,23,23,.45);
}

.lipstick-story__fallback{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  z-index:2;
}

.lipstick-story.is-fallback .lipstick-story__fallback{display:grid}
.lipstick-story.is-fallback .lipstick-story__canvas{display:none}

.lipstick-fallback-product{
  position:relative;
  width:106px;
  height:350px;
  filter:drop-shadow(18px 30px 24px rgba(49,27,20,.22));
}

.lipstick-fallback-product::before{
  content:"Emma M.";
  position:absolute;
  left:0;
  bottom:0;
  width:106px;
  height:205px;
  border-radius:9px 9px 17px 17px;
  display:grid;
  place-items:center;
  font:15px Didot,"Times New Roman",serif;
  color:#d5bb86;
  background:linear-gradient(90deg,#161312,#39302a 48%,#0e0d0c);
  border-top:12px solid #b79a67;
}

.lipstick-fallback-product::after{
  content:"";
  position:absolute;
  left:22px;
  top:0;
  width:62px;
  height:175px;
  clip-path:polygon(0 18%,78% 0,100% 7%,100% 100%,0 100%);
  border-radius:12px 12px 4px 4px;
  background:linear-gradient(90deg,#67101d,#b5323d 48%,#5c0b17);
}

@media(max-width:760px){
  .projects-preview{display:none}
  .lipstick-story__frame{min-height:560px}
  .lipstick-story__copy{bottom:5.5vh}
  .lipstick-story__copy h2{font-size:clamp(38px,13vw,58px)}
  .lipstick-story__copy p{width:min(215px,62vw)}
  .lipstick-story__scroll{bottom:5.5vh}
}

@media(prefers-reduced-motion:reduce){
  .lipstick-story__scroll{display:none}
}