@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&display=swap");

/* Moanspiration: Boudoir Folio. Every colour, size and radius comes from tokens.css. */

.ms-frame{background:var(--paper);color:var(--ink);font-family:var(--font-text);font-size:19px;line-height:1.7;padding:var(--space-5) var(--space-4);position:relative}
.ms-grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .07 0 0 0 0 .19 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ms-frame > *{position:relative}
.ms-frame p{margin:0 0 var(--space-4);max-width:62ch}

/* Masthead */
.ms-masthead{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-4) 0 var(--space-3);border-bottom:1px solid var(--plum);font-size:14px;color:var(--plum)}
.ms-masthead .ms-edge{font-style:italic}
.ms-wordmark{font-family:var(--font-display);font-style:italic;font-size:22px;letter-spacing:.01em;color:var(--plum)}

/* Headline + deck */
.ms-headline{font-family:var(--font-display);font-weight:500;font-size:clamp(46px,11.5vw,104px);line-height:.9;letter-spacing:-.02em;color:var(--plum);margin:0}
.ms-headline .ms-line{display:block}
.ms-headline .ms-line:nth-child(2){padding-left:12%}
.ms-headline .ms-line:nth-child(3){font-style:italic;font-weight:400}
.ms-title{font-family:var(--font-display);font-weight:500;font-size:clamp(32px,7vw,44px);line-height:1;letter-spacing:-.015em;color:var(--plum);margin:0 0 var(--space-4)}
.ms-deck{margin:var(--space-5) 0 0;padding-left:18px;border-left:3px solid var(--lipstick);font-style:italic;font-size:21px;line-height:1.5;color:var(--plum);max-width:36ch}

/* Byline */
.ms-byline{display:flex;align-items:center;gap:var(--space-3)}
.ms-portrait{width:58px;height:58px;border-radius:50%;flex:none;background:var(--plum);color:var(--paper);display:grid;place-items:center;font-family:var(--font-display);font-style:italic;font-size:26px;object-fit:cover}
.ms-byline b{display:block;font-family:var(--font-display);font-weight:500;font-size:20px;color:var(--plum)}
.ms-byline span{font-size:15px;font-style:italic;color:var(--muted)}

/* Body */
.ms-salute{font-family:var(--font-display);font-style:italic;font-size:34px;line-height:1.2;color:var(--plum);margin:0 0 10px}
.ms-dropcap::first-letter{float:left;font-family:var(--font-display);font-weight:600;font-size:92px;line-height:.78;padding:8px 10px 0 0;color:var(--lipstick)}

/* Ornament */
.ms-ornament{text-align:center;color:var(--rose);letter-spacing:.6em;font-size:18px;margin:var(--space-7) 0 var(--space-6)}

/* Pull quote */
.ms-pull{margin:var(--space-7) 0;text-align:center;font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(34px,7.5vw,58px);line-height:1.05;color:var(--lipstick)}

/* Lock screen */
.ms-lock{margin:var(--space-6) auto;max-width:360px;transform:rotate(-2.2deg);background:var(--night);border-radius:var(--radius-phone);padding:22px 16px 26px;box-shadow:var(--shadow-phone)}
.ms-lock-time{text-align:center;color:var(--on-night);font-family:var(--font-device)}
.ms-lock-time .ms-clock{font-size:56px;font-weight:200;line-height:1}
.ms-lock-time .ms-day{font-size:13px;margin-bottom:18px}
.ms-notif{background:var(--night-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-notif);padding:12px 14px;color:var(--on-night);font-family:var(--font-device);font-size:15px;line-height:1.35}
.ms-notif .ms-notif-top{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.ms-notif b{display:block;font-weight:600;margin-bottom:2px}

/* Women (testimonials) */
.ms-women{border-top:1px solid var(--rose)}
.ms-woman{padding:var(--space-4) 0;border-bottom:1px solid var(--rose);display:grid;grid-template-columns:92px 1fr;gap:16px}
.ms-woman .ms-who{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--plum);line-height:1.1}
.ms-woman .ms-who small{display:block;font-family:var(--font-text);font-style:normal;font-size:14px;color:var(--muted);margin-top:var(--space-1)}
.ms-woman p{margin:0;font-size:18px}
@media (min-width:760px){.ms-woman{grid-template-columns:130px 1fr}}

/* Benefit list */
.ms-list{list-style:none;margin:0;padding:0}
.ms-list li{position:relative;padding:0 0 16px 30px;max-width:56ch}
.ms-list li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;background:var(--lipstick);transform:rotate(45deg)}

/* Name reveal */
.ms-reveal{text-align:center;margin:var(--space-7) 0 var(--space-4)}
.ms-reveal .ms-lead{font-style:italic;font-size:20px;color:var(--plum)}
.ms-reveal .ms-name{display:block;margin-top:6px;font-family:var(--font-display);font-weight:500;font-style:italic;font-size:clamp(50px,12vw,104px);line-height:.95;letter-spacing:-.02em;color:var(--plum)}

/* Email capture + button */
.ms-capture{margin:var(--space-5) auto var(--space-3);max-width:460px;text-align:center}
.ms-capture label{display:block;font-style:italic;font-size:17px;margin-bottom:var(--space-2);color:var(--plum)}
.ms-input{width:100%;background:transparent;border:0;border-bottom:2px solid var(--plum);font:inherit;font-size:21px;padding:10px 4px;color:var(--ink);text-align:center;border-radius:var(--radius-none)}
.ms-input::placeholder{color:var(--muted)}
.ms-input:focus{outline:none;border-bottom-color:var(--lipstick)}
.ms-button{display:block;margin-top:var(--space-4);width:100%;border:0;border-radius:var(--radius-pill);cursor:pointer;background:var(--lipstick-fill);color:var(--on-lipstick);font-family:var(--font-display);font-style:italic;font-size:22px;padding:18px 24px}
.ms-button-quiet{display:inline-block;margin-top:var(--space-3);background:none;border:0;color:var(--plum);font:inherit;font-style:italic;font-size:17px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ms-button:focus-visible,.ms-input:focus-visible,.ms-button-quiet:focus-visible,.ms-choice:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ms-fine{font-size:14px;color:var(--muted);margin-top:12px}

/* Signature + P.S. */
.ms-sign{font-family:var(--font-display);font-style:italic;font-size:44px;line-height:1.1;color:var(--plum);margin:var(--space-6) 0 var(--space-5)}
.ms-ps{font-size:17px;border-top:1px solid var(--rose);padding-top:var(--space-4);margin:0}
.ms-ps b{font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--lipstick)}

/* Quiz choice */
.ms-choices{display:grid;gap:10px}
.ms-choice{display:block;width:100%;text-align:left;background:transparent;border:1px solid var(--plum);border-radius:var(--radius-none);padding:16px 18px;font:inherit;font-size:17px;line-height:1.4;color:var(--ink);cursor:pointer}
.ms-choice[aria-pressed="true"]{background:var(--paper-deep);border-color:var(--lipstick);box-shadow:inset 3px 0 0 var(--lipstick)}

/* Progress rule */
.ms-progress{display:flex;align-items:baseline;gap:var(--space-3);font-size:14px;color:var(--muted)}
.ms-progress .ms-track{flex:1;height:1px;background:var(--rose);position:relative}
.ms-progress .ms-fill{position:absolute;left:0;top:-1px;height:3px;background:var(--lipstick-fill)}
.ms-progress .ms-chapter{font-style:italic;color:var(--plum)}

/* Archetype card */
.ms-arch{text-align:center}
.ms-arch .ms-lead{font-style:italic;color:var(--plum);font-size:19px}
.ms-arch .ms-name{display:block;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(44px,10vw,72px);line-height:.95;color:var(--plum);margin:6px 0 var(--space-5)}
.ms-arch dl{text-align:left;margin:0;border-top:1px solid var(--rose)}
.ms-arch dt{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--lipstick);padding-top:var(--space-4)}
.ms-arch dd{margin:4px 0 0;padding-bottom:var(--space-4);border-bottom:1px solid var(--rose)}

/* Carousel slide (4:5) */
.ms-slide{aspect-ratio:4/5;width:100%;max-width:432px;margin:0 auto;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:28px 26px;position:relative;overflow:hidden;border:1px solid var(--rose)}
.ms-slide .ms-slide-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--plum);padding-bottom:10px;font-size:12px;color:var(--plum)}
.ms-slide .ms-slide-title{font-family:var(--font-display);font-weight:500;font-size:44px;line-height:.92;letter-spacing:-.02em;color:var(--plum);margin:0}
.ms-slide .ms-slide-title em{display:block;font-weight:400}
.ms-slide .ms-slide-foot{font-size:13px;font-style:italic;color:var(--muted)}
.ms-slide.ms-night{background:var(--night);border-color:var(--night)}
.ms-slide.ms-night .ms-slide-top{color:var(--on-night);border-color:var(--on-night)}
.ms-slide.ms-night .ms-slide-title{color:var(--on-night)}
.ms-slide.ms-night .ms-slide-foot{color:var(--on-night)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}