@charset "utf-8";
/* ==========================================================================
   Secret Beauty Stories — "IVORY & INK" design system
   Editorial beauty magazine: warm ivory paper, deep navy ink, antique gold
   as the only accent. Serif display over sans body. Centred masthead,
   offset hero card, drop cap, gold hairline rules, vertical diary timeline.

   palette  paper #f8fafb · card #FFF · ink #0a2937 · text #22343d
            muted #63767f · line #dde6ea · gold #3e7e96 · gilt #e8f1f4
   type     Playfair Display (display) + Inter (text)
   ========================================================================== */

:root {
  --paper: #f8fafb;
  --card: #ffffff;
  --ink: #0a2937;
  --text: #22343d;
  --muted: #63767f;
  --line: #dde6ea;
  --gold: #3e7e96;
  --gold-dk: #2c6076;
  --gilt: #e8f1f4;
  --r: 4px;
  --shell: 1120px;
  --measure: 680px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-dk); }
p { margin: 0 0 1.05em; }

h1, h2, h3, h4 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700; line-height: 1.24; margin: 0; color: var(--ink);
}

.shell { width: min(var(--shell), 92%); margin-inline: auto; }
.measure { max-width: var(--measure); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 16px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 15px 30px; border: 1px solid var(--ink); border-radius: var(--r);
  font-family: Inter, sans-serif; font-weight: 700; font-size: .88rem;
  letter-spacing: .09em; text-transform: uppercase; cursor: pointer; text-align: center;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--gold); border-color: var(--gold); }
.btn-gold { background: var(--gold); border-color: var(--gold); }
.btn-gold:hover { background: var(--ink); border-color: var(--ink); }
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 10px 18px; font-size: .74rem; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-line:hover { background: var(--gilt); color: var(--ink); border-color: var(--gold); }

/* ---------- advertorial strip + masthead ---------- */

.adbar {
  text-align: center; padding: 8px 12px; background: var(--ink); color: #e5dfd4;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
}

.masthead {
  background: var(--card); border-bottom: 1px solid var(--line);
  position: relative;
}
.masthead-in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; padding: 12px 0;
}
.masthead .brand { justify-self: center; display: inline-flex; }
.masthead .brand img { height: 44px; width: auto; }
.mast-nav { display: none; gap: 20px; }
.mast-nav a {
  color: var(--muted); text-decoration: none; font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
}
.mast-nav a:hover { color: var(--gold-dk); }
.mast-cta { justify-self: end; }
@media (min-width: 940px) { .mast-nav { display: flex; } }
@media (max-width: 939px) {
  .masthead-in { grid-template-columns: 1fr auto; }
  .masthead .brand { justify-self: start; }
  .masthead .brand img { height: 38px; }
}

/* ---------- hero: full-bleed image with an offset ivory card ---------- */

.hero { position: relative; }
.hero-img { width: 100%; height: clamp(240px, 40vw, 430px); object-fit: cover; object-position: 65% 40%; }
.hero-card {
  background: var(--paper); border: 1px solid var(--line);
  padding: clamp(22px, 4vw, 40px);
  max-width: 760px; margin: -70px auto 0; position: relative; z-index: 2;
}
@media (max-width: 700px) { .hero-card { margin-top: -34px; } }

.eyebrow {
  font-family: Inter, sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dk);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px;
}
.eyebrow .sep { width: 22px; height: 1px; background: var(--gold); display: inline-block; }
.eyebrow time { color: var(--muted); font-weight: 600; letter-spacing: .12em; }

.hero-card h1 { font-size: clamp(1.7rem, 4vw, 2.75rem); margin-bottom: 14px; }
.hero-card h1 em { font-style: italic; color: var(--gold-dk); }

.standfirst { color: var(--muted); font-size: 1.03rem; margin-bottom: 0; }

.byline {
  display: flex; align-items: center; gap: 11px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.byline img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.byline-t { font-size: .82rem; line-height: 1.45; }
.byline-t strong { display: block; font-size: .88rem; color: var(--ink); }
.byline-t span { color: var(--muted); }

/* ---------- sections ---------- */

.sec { padding: 44px 0; }
.sec-t { padding-top: 0; }

.sec-head { text-align: center; margin-bottom: 26px; }
.sec-head .kicker {
  font-family: Inter, sans-serif; font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 9px;
}
.sec-head h2 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
.sec-head p { color: var(--muted); max-width: 62ch; margin: 10px auto 0; font-size: .95rem; }

.rule { width: 46px; height: 1px; background: var(--gold); margin: 14px auto; }

/* ---------- article ---------- */

.article h2 {
  font-size: clamp(1.3rem, 2.7vw, 1.7rem);
  margin: 34px 0 12px; padding-top: 22px; border-top: 1px solid var(--line);
}
.article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article h3 { font-size: 1.1rem; margin: 22px 0 8px; }
.article > p:first-of-type::first-letter {
  float: left; font-family: "Playfair Display", Georgia, serif;
  font-size: 3.5em; line-height: .82; font-weight: 700;
  color: var(--gold); margin: .06em .12em 0 0;
}
.article strong { color: var(--ink); }

.pull {
  margin: 24px 0; padding: 20px 0; text-align: center;
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
}
.pull p {
  font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-size: clamp(1.05rem, 2.3vw, 1.3rem); color: var(--ink); margin: 0; line-height: 1.45;
}
.pull cite { display: block; margin-top: 9px; font-family: Inter, sans-serif; font-style: normal; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

figure.plate { margin: 26px 0; }
figure.plate img { width: 100%; }
figure.plate figcaption {
  font-size: .78rem; color: var(--muted); margin-top: 9px;
  padding-left: 12px; border-left: 2px solid var(--gold); line-height: 1.55;
}

/* ---------- the four-point mirror strip ---------- */

.points { display: grid; gap: 0; grid-template-columns: 1fr; border: 1px solid var(--line); background: var(--card); }
.points div { padding: 18px 20px; border-top: 1px solid var(--line); }
.points div:first-child { border-top: 0; }
.points b {
  display: block; font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem; color: var(--gold); line-height: 1; margin-bottom: 7px;
}
.points h3 { font-size: .98rem; margin-bottom: 4px; }
.points p { margin: 0; font-size: .87rem; color: var(--muted); }
@media (min-width: 760px) {
  .points { grid-template-columns: repeat(4, 1fr); }
  .points div { border-top: 0; border-left: 1px solid var(--line); }
  .points div:first-child { border-left: 0; }
}

/* ---------- three mechanism cards ---------- */

.mech { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.mech article {
  background: var(--card); border: 1px solid var(--line);
  border-top: 2px solid var(--gold); padding: 22px 22px 24px;
}
.mech .n {
  font-family: "Playfair Display", Georgia, serif; font-size: .8rem;
  letter-spacing: .12em; color: var(--gold-dk); margin-bottom: 8px; display: block;
}
.mech h3 { font-size: 1.08rem; margin-bottom: 8px; }
.mech p { margin: 0; font-size: .89rem; color: var(--muted); }
.mech .ing {
  display: inline-block; margin-top: 12px; background: var(--gilt);
  color: var(--gold-dk); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px;
}

/* ---------- before / after ---------- */

.ba { background: var(--card); border: 1px solid var(--line); }
.ba img { width: 100%; }
.ba-legend {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px; padding: 13px 18px; border-top: 1px solid var(--line);
  font-family: Inter, sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.ba-legend span:nth-child(2) { color: var(--gold); font-size: 1rem; letter-spacing: 0; }
.ba-legend span:last-child { text-align: right; }
.ba-note { font-size: .76rem; color: var(--muted); margin: 9px 0 0; }

/* ---------- 90-day diary timeline ---------- */

.diary { position: relative; padding-left: 30px; }
.diary::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.diary .entry { position: relative; padding-bottom: 22px; }
.diary .entry::before {
  content: ""; position: absolute; left: -30px; top: 7px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold);
}
.diary .day {
  font-family: Inter, sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dk); margin-bottom: 4px;
}
.diary h3 { font-size: 1.02rem; margin-bottom: 5px; }
.diary p { margin: 0; font-size: .92rem; color: var(--muted); }

/* ---------- reviews ---------- */

.revs { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rev { background: var(--card); border: 1px solid var(--line); padding: 22px; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); margin-bottom: 10px; }
.stars svg { width: 14px; height: 14px; fill: currentColor; }
.rev blockquote { margin: 0; }
.rev blockquote p {
  font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-size: 1rem; color: var(--ink); margin: 0 0 14px; line-height: 1.55;
}
.rev figcaption { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.rev figcaption img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.rev figcaption strong { display: block; font-size: .85rem; color: var(--ink); }
.rev figcaption span { font-size: .74rem; color: var(--muted); }

/* ---------- offer ---------- */

.offer {
  display: grid; gap: 26px; grid-template-columns: 1fr; align-items: center;
  background: var(--card); border: 1px solid var(--gold); padding: clamp(22px, 4vw, 34px);
}
.offer-media { background: var(--gilt); display: grid; place-items: center; padding: 18px; }
.offer-media img { width: 100%; max-width: 420px; }
.offer h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin-bottom: 10px; }
.offer p { color: var(--muted); font-size: .93rem; }
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; }
.price b { font-family: "Playfair Display", Georgia, serif; font-size: 2.1rem; color: var(--ink); line-height: 1; }
.price s { color: var(--muted); font-size: 1rem; }
.price em {
  font-style: normal; background: var(--ink); color: #fff; font-size: .68rem;
  font-weight: 700; letter-spacing: .12em; padding: 5px 10px; text-transform: uppercase;
}
.price-fine { font-size: .76rem; color: var(--muted); margin: 8px 0 0; }
.guarantee {
  display: flex; gap: 12px; align-items: flex-start;
  border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px;
}
.guarantee svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--gold); }
.guarantee p { margin: 0; font-size: .85rem; }
.guarantee strong { color: var(--ink); }
@media (min-width: 800px) { .offer { grid-template-columns: .85fr 1.15fr; gap: 34px; } }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  font-family: "Playfair Display", Georgia, serif; font-size: 1.05rem; font-weight: 700;
  color: var(--ink); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: Inter, sans-serif; font-size: 1.3rem; color: var(--gold); font-weight: 300; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 0 18px; font-size: .92rem; color: var(--muted); }
.faq .a p:last-child { margin: 0; }

/* ---------- references ---------- */

.refs { background: var(--card); border: 1px solid var(--line); padding: 22px; }
.refs h2 { font-size: 1.15rem; margin-bottom: 12px; }
.refs ol { margin: 0; padding-left: 20px; }
.refs li { margin: 10px 0; font-size: .86rem; line-height: 1.5; }
.refs a { color: var(--gold-dk); word-break: break-all; font-size: .8rem; }

/* ---------- final CTA ---------- */

.final { background: var(--ink); color: #d9d5cc; padding: clamp(26px, 5vw, 42px); text-align: center; }
.final h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 12px; }
.final h2 em { font-style: italic; color: #7fb3c6; }
.final p { color: #a9a498; max-width: 58ch; margin-inline: auto; font-size: .95rem; }
.final .rule { background: #7fb3c6; }
.final-fine { font-size: .76rem; color: #8b8578; margin: 18px 0 0; }
.final-fine a { color: #d9d5cc; }

/* ---------- medical / disclosure note ---------- */

.note {
  background: var(--gilt); border-left: 2px solid var(--gold);
  padding: 16px 18px; margin: 22px 0;
}
.note strong { display: block; color: var(--gold-dk); font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }
.note p { margin: 0 0 .6em; font-size: .87rem; color: #5f5747; }
.note p:last-child { margin: 0; }

/* ---------- footer ---------- */

.site-footer { margin-top: 40px; background: var(--ink); color: #a9a498; padding: 34px 0 22px; font-size: 13.5px; }
.foot-top { display: grid; gap: 26px; grid-template-columns: 1fr; padding-bottom: 24px; }
.foot-brand img { height: 46px; width: auto; margin-bottom: 12px; }
.foot-brand p { margin: 0; color: #8b8578; font-size: .84rem; max-width: 38ch; }
.foot-h {
  font-family: Inter, sans-serif; font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #7fb3c6; margin-bottom: 11px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-col a { color: #d9d5cc; text-decoration: none; }
.foot-col a:hover { color: #fff; }
.foot-id { font-style: normal; }
.foot-id p { margin: 0 0 4px; color: #8b8578; font-size: .84rem; line-height: 1.55; }
.foot-id a { color: #d9d5cc; text-decoration: none; }
.foot-id a:hover { color: #fff; }
@media (min-width: 760px) { .foot-top { grid-template-columns: 1.5fr .8fr 1.2fr; } }
@media (min-width: 980px) { .foot-top { grid-template-columns: 1.7fr .7fr .7fr 1.1fr; } }
.foot-bottom { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.foot-bottom p { margin: 0 0 8px; font-size: 12.5px; }
.disclaimer, .foot-compliance { font-size: 11.5px; color: #7b7568; line-height: 1.65; margin: 8px 0 0; }

/* ==========================================================================
   Sub-pages
   ========================================================================== */

.page-hero { background: var(--card); border-bottom: 1px solid var(--line); padding: 40px 0 34px; text-align: center; }
.page-hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 10px 0 12px; }
.page-hero > .shell > p { color: var(--muted); max-width: 64ch; margin: 0 auto; }
.crumbs { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.crumbs a { color: var(--gold-dk); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.band { padding: 44px 0; }
.band-sand { background: var(--paper); }

.prose { max-width: 72ch; }
.prose h2 { font-size: 1.35rem; margin: 32px 0 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.05rem; margin: 22px 0 6px; }
.prose ul, .prose ol { margin: 0 0 1.05em; padding-left: 22px; }
.prose li { margin: 7px 0; }

.info-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 16px 0 24px; }
.info-card { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--gold); padding: 17px 19px; }
.info-card h3 { margin: 0 0 6px; font-size: 1rem; }
.info-card p { margin: 0; font-size: .89rem; color: var(--muted); }
@media (min-width: 780px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }

.form { display: grid; gap: 14px; max-width: 540px; margin-top: 8px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .86rem; }
.field input, .field select, .field textarea {
  font: inherit; color: inherit; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(62,126,150,.18);
}
.form-note { font-size: .82rem; color: var(--muted); margin: 0; }
.form-status { font-size: .88rem; margin: 0; }

/* ---------- cookie bar ---------- */

.cookie {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px;
  width: min(900px, 94%); z-index: 60; background: var(--card);
  border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(20,24,46,.14);
  padding: 15px 18px; display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; font-size: .85rem; color: var(--muted); flex: 1 1 320px; }
.cookie-actions { display: flex; gap: 9px; }

/* ---------- reveals + motion ---------- */

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

@media print { .adbar, .masthead, .cookie, .btn { display: none !important; } body { background: #fff; } }

/* footer logo chip — the supplied marks are dark artwork on transparency,
   so they need a light ground to stay legible on the dark footer */
.foot-brand img { background: #fff; padding: 7px 11px; border-radius: 8px; }