/* Layout: Blush Studio magazine cover up top, name block, then "In this issue" stories. Single light look by design. */
:root{
  --paper:#FFFFFF;
  --ink:#16121A;
  --coral:#EE6E73;
  --rose:#C2414B;
  --mute:#5A4A50;
  --line:#EADCD6;
  --blush:#F6E3E1;
  --studio:#E4E4E4;
  --display:'Abril Fatface', 'Bodoni 72', Didot, Georgia, serif;
  --body:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color-scheme:light;
}
html{font-variant-emoji:text;-webkit-text-size-adjust:100%;overflow-x:hidden}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

.card{max-width:480px;margin:0 auto;background:var(--paper);overflow:hidden}

/* Cover: original dark studio photo; outlined BEAUTY type sits behind her (cutout layered on top), blush link strip at the bottom. */
.cover{position:relative;aspect-ratio:390/560;width:100%;overflow:hidden;background:var(--studio)}
.cover-bg,.cover-cutout{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none}
.outline{position:absolute;left:-1.5%;top:10.7%;display:flex;flex-direction:column;font-family:var(--display);font-size:min(28.7vw,138px);line-height:.9;letter-spacing:2px;color:transparent;-webkit-text-stroke:1.5px var(--coral)}
.cover-top{position:absolute;left:16px;right:16px;top:calc(10px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;align-items:center;gap:12px}
.issue{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ink)}
.strip{position:absolute;left:0;right:0;bottom:0;min-height:48px;background:var(--ink);color:#FFFFFF;display:flex;align-items:center;justify-content:center;gap:14px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.strip a{color:#FFFFFF;min-height:44px;display:flex;align-items:center}
.strip .sl{color:var(--coral)}
.lang{display:flex;background:rgba(22,18,26,.45);border-radius:999px;padding:3px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lang button{min-width:44px;min-height:34px;border:0;border-radius:999px;background:transparent;color:#FFFFFF;font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer}
.lang button[aria-pressed="true"]{background:#FFFFFF;color:var(--ink)}

.sticker{position:absolute;right:30px;top:calc(84px + env(safe-area-inset-top,0px));width:96px;height:96px;border-radius:50%;background:var(--coral);color:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-10deg);box-shadow:0 8px 22px rgba(194,65,75,.35)}
.sticker::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(238,110,115,.6);animation:ping 2.4s ease-out infinite}
.ring{position:absolute;left:-22px;top:-22px;width:140px;height:140px;overflow:visible;animation:spin 12s linear infinite;pointer-events:none}
.ring text{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:1px;fill:var(--ink);paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:2.5px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(238,110,115,.6)}70%{box-shadow:0 0 0 16px rgba(238,110,115,0)}100%{box-shadow:0 0 0 0 rgba(238,110,115,0)}}
.sticker .s1{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.sticker .s2{font-family:var(--display);font-size:21px;line-height:1;text-transform:uppercase}
.sticker .s3{font-size:10px;font-weight:500;padding:0 8px;line-height:1.2}

.cover-name{padding:22px 16px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.cover-name h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(40px,12.5vw,54px);line-height:1;letter-spacing:.5px;color:var(--ink);text-wrap:balance}
.role{margin:0;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--rose)}

/* Inside */
.inside{padding:8px 20px 36px;display:flex;flex-direction:column;gap:20px}
.brand{height:30px;width:auto;align-self:center}
.eyebrow{margin:6px 0 0;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--mute)}

.story{display:flex;gap:16px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--line);transition:transform .15s ease}
.story:active{transform:scale(.98)}
.num{font-family:var(--display);font-size:40px;line-height:1;color:var(--coral);flex:none}
.story-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.story-title{font-family:var(--display);font-size:26px;line-height:1.08;text-wrap:balance}
.story-sub{font-size:15px;line-height:1.45;color:var(--mute)}

/* Lipstick pills: high-gloss lacquer finish with a top highlight and a moving reflection */
.actions{display:flex;flex-direction:column;gap:12px}
.pill-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pill{position:relative;overflow:hidden;isolation:isolate;border-radius:999px;color:#FFFFFF;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:700;transition:transform .15s ease}
.pill:active{transform:scale(.97)}
.pill svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2}
.pill span{position:relative;z-index:2;white-space:nowrap}
.pill.save{min-height:60px;font-size:15px;letter-spacing:1px;text-transform:uppercase}
.pill.ink{min-height:52px;font-size:13px}
.pill.coral{background:linear-gradient(180deg,#FFA4A6 0%,#EE6E73 42%,#D44E58 78%,#B83A45 100%);box-shadow:0 10px 22px rgba(238,110,115,.42),inset 0 2px 1px rgba(255,255,255,.65),inset 0 -4px 8px rgba(110,15,30,.35);text-shadow:0 1px 1px rgba(110,15,30,.35)}
.pill.ink{background:linear-gradient(180deg,#5A5260 0%,#24202A 45%,#110E14 75%,#000000 100%);box-shadow:0 8px 18px rgba(22,18,26,.35),inset 0 2px 1px rgba(255,255,255,.35),inset 0 -4px 8px rgba(0,0,0,.5)}
.pill::before{content:"";position:absolute;left:7%;right:7%;top:3px;height:46%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.12) 100%);z-index:1;pointer-events:none}
.pill.ink::before{background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.04) 100%)}
.pill::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:skewX(-22deg);z-index:1;pointer-events:none;animation:sheen 5s ease-in-out infinite}
.pill-row .pill:nth-child(1)::after{animation-delay:.4s}
.pill-row .pill:nth-child(2)::after{animation-delay:.7s}
.pill-row .pill:nth-child(3)::after{animation-delay:1s}
@keyframes sheen{0%{left:-70%}35%{left:130%}100%{left:130%}}

.social{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px}
.social a{min-height:44px;display:flex;align-items:center;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}

.share{min-height:48px;border:0;background:#FBEDEC;color:var(--rose);font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.toast{margin:-8px 0 0;text-align:center;font-size:13px;color:var(--mute)}

.referral{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:4px;border-top:1px solid var(--line);font-size:13px;font-weight:500;background:linear-gradient(90deg,#A8782E,#E6C27A,#A8782E);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){
  .ring,.sticker::after,.referral,.pill::after{animation:none}
  .story,.pill{transition:none}
}
[hidden]{display:none!important}