/* Theme 03 · Beauty, Fashion & Lifestyle
   Editorial couture cover: deep plum and espresso, champagne and rose-gold silk,
   Bodoni Moda italic display, hairline rules, soft glass cards.
   Every selector is scoped to .theme-panel[data-theme="beauty"]. */

.theme-panel[data-theme="beauty"]{
  --tp-bg:
    radial-gradient(60% 46% at 96% 4%, rgba(232,170,150,.34), transparent 66%),
    radial-gradient(52% 44% at 104% 78%, rgba(168,86,108,.34), transparent 68%),
    radial-gradient(70% 50% at -6% 104%, rgba(96,42,64,.42), transparent 70%),
    linear-gradient(162deg, #241A21 0%, #18121A 46%, #110D13 100%);
  /* photo: see the ::before rule at the end of this file */
  --tp-photo-pos: 74% 50%;
  /* Plum veil: dense where the text column sits, opening up toward the art on the right. */
  --tp-overlay:
    linear-gradient(90deg, rgba(25,12,19,.92) 0%, rgba(25,12,19,.87) 58%, rgba(25,12,19,.70) 72%, rgba(25,12,19,.22) 100%),
    linear-gradient(180deg, rgba(25,12,19,0) 40%, rgba(25,12,19,.55) 100%);

  --tp-accent:#D9A08F;
  --tp-accent-2:#EDCBAB;
  --tp-text:#F8EEE8;
  --tp-text-2:#D6C0B7;
  --tp-line:rgba(237,203,171,.20);
  --tp-card:linear-gradient(160deg, rgba(255,226,212,.09), rgba(255,226,212,.025) 60%), rgba(38,19,29,.58);
  --tp-card-border:rgba(237,203,171,.22);

  --tp-font-display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --tp-font-body:"Manrope", "Helvetica Neue", Arial, sans-serif;
  --tp-font-label:"Manrope", "Helvetica Neue", Arial, sans-serif;

  --tp-h3-size:clamp(44px, 5.4vw, 74px);
  --tp-h3-weight:400;
  --tp-h3-stretch:100%;
  --tp-h3-style:italic;
  --tp-h3-transform:none;
  --tp-h3-tracking:-.015em;
  --tp-radius:20px;
  --tp-decor-opacity:.95;

  border-color:rgba(237,203,171,.18);
  box-shadow:0 40px 90px rgba(20,6,12,.55), inset 0 1px 0 rgba(255,232,218,.08);
}

/* hairline inner frame, like a printed cover */
.theme-panel[data-theme="beauty"]::after{
  content:"";position:absolute;inset:12px;border:1px solid rgba(237,203,171,.13);border-radius:18px;pointer-events:none;z-index:0
}

/* art anchored to the right edge so the silk always lands beside the text column */
.theme-panel[data-theme="beauty"] .tp-decor{object-position:100% 40%}

.theme-panel[data-theme="beauty"] .tp-body{padding:clamp(30px, 4.4vw, 56px)}

/* labels: small, widely tracked, led by a hairline */
.theme-panel[data-theme="beauty"] .panel-n{
  display:flex;align-items:center;gap:14px;
  font-family:var(--tp-font-label);font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  margin-bottom:22px
}
.theme-panel[data-theme="beauty"] .panel-n::before{
  content:"";width:38px;height:1px;background:linear-gradient(90deg, rgba(237,203,171,0), #EDCBAB)
}

.theme-panel[data-theme="beauty"] h3{
  max-width:min(7.4em, 80%);line-height:1.08;margin-bottom:calc(34px - .26em);padding-right:.08em;
  /* background-clip:text only paints inside the box: room for the f/y descenders, taken back from the margin */
  padding-block:.04em .26em;
  font-optical-sizing:auto;
  /* rose-gold foil: a slow sheen travels across the title */
  background:linear-gradient(104deg, #FFF4EC 0%, #F6DCCB 22%, #E6B3A0 40%, #FFEFE4 52%, #E8B6A3 64%, #D99C8C 82%, #F3D3C2 100%) 0 0 / 220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
  animation:beauty-foil 16s ease-in-out infinite alternate
}
@keyframes beauty-foil{from{background-position:0% 0}to{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){
  .theme-panel[data-theme="beauty"] h3{animation:none}
}

.theme-panel[data-theme="beauty"] h4{
  display:flex;align-items:center;gap:16px;
  font-family:var(--tp-font-label);font-size:10.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--tp-text-2);margin-bottom:6px;max-width:min(520px, 74%)
}
.theme-panel[data-theme="beauty"] h4::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg, rgba(237,203,171,.45), rgba(237,203,171,0))
}

/* questions: a narrow serif column, numbered in rose-gold italic */
.theme-panel[data-theme="beauty"] .questions{max-width:min(520px, 74%);margin-bottom:46px}
.theme-panel[data-theme="beauty"] .questions li{
  font-family:var(--tp-font-body);font-size:17px;font-weight:400;line-height:1.62;
  padding:20px 0 20px 52px;border-top:none;
  background:linear-gradient(90deg, rgba(237,203,171,.28), rgba(237,203,171,.06) 80%) top left / 100% 1px no-repeat
}
.theme-panel[data-theme="beauty"] .questions li:first-child{background:none}
.theme-panel[data-theme="beauty"] .questions li:last-child{border-bottom:none}
.theme-panel[data-theme="beauty"] .questions li::before{
  top:19px;font-family:"Bodoni Moda", Georgia, serif;font-style:italic;font-size:21px;font-weight:400;letter-spacing:0;color:#E4AE9B
}

/* board: soft, refined glass */
.theme-panel[data-theme="beauty"] .board{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));gap:12px;max-width:720px}
.theme-panel[data-theme="beauty"] .board li{
  padding:18px 20px 20px;border-radius:18px;font-size:15.5px;line-height:1.5;
  backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,236,224,.10), 0 18px 40px rgba(18,6,12,.30)
}
.theme-panel[data-theme="beauty"] .board li:hover{border-color:rgba(232,176,156,.6)}
.theme-panel[data-theme="beauty"] .tag{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.24em;margin-bottom:10px
}
.theme-panel[data-theme="beauty"] .tag::after{
  content:"";flex:1;height:1px;background:linear-gradient(90deg, rgba(237,203,171,.32), rgba(237,203,171,0))
}

.theme-panel[data-theme="beauty"] .mentor-note{
  margin-top:22px;font-family:var(--tp-font-body);font-style:normal;font-size:13.5px;color:var(--tp-text-2)
}
/* keep the shared TBD chip upright (only upright Geist Mono is loaded) */
.theme-panel[data-theme="beauty"] .mentor-note .tbd{font-style:normal}

@media (max-width:720px){
  .theme-panel[data-theme="beauty"]{
    /* pixel stops: the veil is dense before the text starts at 150px, whatever the panel height */
    --tp-overlay:
      linear-gradient(180deg, rgba(25,12,19,.32) 0px, rgba(25,12,19,.62) 90px, rgba(25,12,19,.90) 145px, rgba(25,12,19,.93) 100%);
    --tp-bg:
      radial-gradient(60% 30% at 100% 55%, rgba(232,170,150,.14), transparent 70%),
      radial-gradient(60% 46% at 96% 4%, rgba(232,170,150,.34), transparent 66%),
      radial-gradient(52% 44% at 104% 78%, rgba(168,86,108,.34), transparent 68%),
      radial-gradient(70% 50% at -6% 104%, rgba(96,42,64,.42), transparent 70%),
      linear-gradient(162deg, #241A21 0%, #18121A 46%, #110D13 100%);
    --tp-radius:20px
  }
  .theme-panel[data-theme="beauty"]::after{inset:9px;border-radius:16px}
  .theme-panel[data-theme="beauty"] .tp-body{padding:150px 24px 32px}
  .theme-panel[data-theme="beauty"] .tp-art{
    bottom:auto;height:250px;
    -webkit-mask-image:linear-gradient(180deg, #000 46%, transparent 94%);mask-image:linear-gradient(180deg, #000 46%, transparent 94%)
  }
  /* on phones the drape turns on its side and becomes a silk band across the top of the cover */
  .theme-panel[data-theme="beauty"] .tp-decor{position:absolute;left:-110px;top:110px;width:660px;height:440px;transform:rotate(-90deg)}
  /* soft rose light low on the page, above the veil */
  .theme-panel[data-theme="beauty"] .tp-body::after{
    content:"";position:absolute;right:-30px;bottom:-40px;width:85%;height:420px;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side, rgba(196,108,124,.30), rgba(196,108,124,0))
  }
  .theme-panel[data-theme="beauty"] .questions,.theme-panel[data-theme="beauty"] h4{max-width:none}
  .theme-panel[data-theme="beauty"] h3{max-width:none}
  .theme-panel[data-theme="beauty"] h3{font-size:clamp(40px, 11.5vw, 50px);margin-bottom:calc(30px - .26em)}
  .theme-panel[data-theme="beauty"] .questions li{font-size:16px;padding-left:42px}
  .theme-panel[data-theme="beauty"] .questions li::before{font-size:19px}
  .theme-panel[data-theme="beauty"] .board{grid-template-columns:1fr}
}

/* photo slot: uncomment once assets/themes/beauty.jpg exists (url resolves relative to this file in every browser) */
/* .theme-panel[data-theme="beauty"]::before{background-image:var(--tp-overlay),url("beauty.jpg")} */