/* Calm editorial hierarchy; the existing flower reel remains unchanged. */
.hero{min-height:100svh;align-items:center}
.intro{width:40%;max-width:560px}
.intro h1,.intro p{font-family:var(--serif);font-size:clamp(3rem,5vw,5.5rem);line-height:1.06;font-weight:500;letter-spacing:-.035em}
.intro p{font-style:italic;color:#ac507d;margin-top:.35rem}
.editorial{align-items:center;min-height:100svh;padding:8rem clamp(1.5rem,6vw,7rem);background:linear-gradient(90deg,rgba(247,237,242,.98) 0%,rgba(247,237,242,.94) 43%,rgba(247,237,242,0) 66%)}
.reading{width:43%;max-width:640px;background:none;border:0;padding:0}
.reading h2{font-family:var(--serif);font-weight:600;font-size:clamp(2.3rem,3.5vw,4rem);line-height:1.12;letter-spacing:-.025em;margin-bottom:2rem;text-wrap:balance}
.reading h2 em{font-weight:500;color:#ac507d}
.reading p,.reading li{font-family:var(--sans);font-size:clamp(1rem,1.15vw,1.125rem);font-weight:400;line-height:1.85;color:#695060}
.reading p+p{margin-top:1.6rem}
.reading ul{list-style:none;margin:2rem 0;padding:0}
.reading li{padding:1.2rem 0;border-top:1px solid var(--line)}
.reading strong{font-weight:650;color:var(--ink)}
.routine{margin:2.5rem 0;border-top:1px solid var(--line)}
.routine p{padding:1.25rem 0;border-bottom:1px solid var(--line)}
.routine p+p{margin:0}
.routine strong{display:block;color:#ac507d;font-size:.8rem;letter-spacing:.1em;margin-bottom:.3rem}
#line{background:#f4e8ee;justify-content:center;text-align:center;padding-top:8rem;padding-bottom:8rem;min-height:85svh}
#line .reading{width:100%;max-width:1000px}
#line h2{font-size:clamp(2.6rem,5.5vw,6rem);max-width:950px;margin:0 auto 2.5rem}
#line p{max-width:800px;margin:auto;line-height:1.9}
.simple-footer{position:relative;z-index:2;padding:2rem;text-align:center;font-size:.8rem;letter-spacing:.12em;border-top:1px solid var(--line);background:#f4e8ee}
.pill{padding:.8rem 1.5rem;gap:1.8rem}
.pill a.link{font-weight:600;letter-spacing:0;font-size:.875rem}
@media(max-width:1000px) and (min-aspect-ratio:85/100){.reading{width:48%}.editorial{padding-left:2rem;padding-right:2rem}.reading h2{font-size:2.5rem}}
@media(max-aspect-ratio:85/100){
 .hero{align-items:flex-start;padding:7rem 1.5rem 2rem}
 .intro{width:100%;max-width:32rem}
 .intro h1,.intro p{font-size:clamp(2.3rem,9vw,3.4rem)}
 .editorial{padding:6rem 1.5rem 4rem;background:rgba(247,237,242,.96);min-height:100svh}
 .reading{width:100%;max-width:38rem;margin:0 auto}
 .reading h2{font-size:clamp(2.1rem,7.6vw,3rem);margin-bottom:1.8rem}
 .reading p,.reading li{font-size:1rem;line-height:1.8}
 #line{padding:6rem 1.5rem;min-height:80svh}
 #line h2{font-size:clamp(2.5rem,9vw,3.5rem)}
 .pill{padding:.6rem 1.2rem}
}
/* Transparent reference scenes: no pale wash over the product reel. */
.editorial,#line,.simple-footer{background:none}
.reading p,.reading li{color:var(--ink2)}
@media(max-aspect-ratio:85/100){.editorial{background:none}}
@media(min-aspect-ratio:85/100){.reading{width:30%;max-width:440px}.reading h2{font-size:clamp(2rem,3vw,3.4rem)}.intro{width:30%;max-width:440px}#line .reading{width:100%;max-width:1000px}}
.range-details{border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1rem}
.range-details summary,.source-details summary{cursor:pointer;color:var(--vtext);font-size:.875rem;font-weight:600;letter-spacing:0}
.range-details ul{margin:1rem 0}
.range-details li{padding:.7rem 0}
.official-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem 2rem;margin-top:2rem}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 1.5rem;margin-top:1rem;letter-spacing:0}
.footer-links a:hover,.source-details a:hover{color:var(--vtext);text-decoration:underline}
.source-details{max-width:800px;margin:1.5rem auto 0;letter-spacing:0}
.source-details p{font-size:.875rem;line-height:1.7;margin-top:1rem}
.source-details a{text-decoration:underline;text-underline-offset:3px}
/* Retain the original pill; keep its existing links reachable on small screens. */
@media(max-width:760px){.pill{gap:.6rem;padding:.55rem .8rem}.pill .brand{font-size:.95rem;letter-spacing:.08em}.pill a.link{display:block;font-size:.72rem}.official-links{flex-direction:column;align-items:center}.reading h2{overflow-wrap:break-word}}
@media(max-width:400px){.pill{gap:.45rem;padding:.5rem .65rem}.pill .brand{font-size:.85rem;letter-spacing:.05em}.pill a.link{font-size:.66rem}}

/* Featured products: one centred row of four, in the site's own palette. */
.products{--plum:#5d1f3f;--plum-ink:#fff6fa;align-items:center;justify-content:center;min-height:100svh;
  padding:6.5rem clamp(14px,2.2vw,56px) 3.5rem}
.products::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,232,238,0) 0%,rgba(244,232,238,.8) 14%,rgba(244,232,238,.92) 50%,rgba(244,232,238,.8) 86%,rgba(244,232,238,0) 100%)}
.products-inner{width:100%;max-width:1180px;margin:0 auto;text-align:center}
.products-eyebrow{display:block;font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#ac507d}
.products h2{margin:.55rem 0 0;font-family:var(--serif);font-weight:600;font-size:clamp(1.85rem,3.3vw,3rem);
  line-height:1.12;letter-spacing:-.025em;text-wrap:balance;color:var(--ink)}
.products h2 em{font-style:italic;font-weight:400;color:#ac507d}
.products-lede{max-width:40em;margin:.85rem auto 0;color:var(--ink2);font-size:clamp(.95rem,1.1vw,1.08rem);line-height:1.65}
.product-grid{display:flex;justify-content:center;gap:clamp(10px,1.2vw,18px);margin-top:clamp(1.5rem,2.4vw,2.2rem);
  overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;padding:2px 2px 6px}
.product-card{flex:0 0 clamp(196px,22.6vw,268px);scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;text-align:center}
.product-photo{width:100%;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fdf6f8 35%,#f9e9f0 68%,#f2dce6 100%);
  box-shadow:0 26px 40px -30px rgba(74,35,70,.5),0 2px 0 rgba(255,255,255,.9) inset;
  transition:transform .35s var(--expo),box-shadow .35s var(--expo)}
.product-photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;mix-blend-mode:multiply}
.product-card:hover .product-photo{transform:translateY(-5px);box-shadow:0 34px 48px -28px rgba(74,35,70,.55)}
.product-card h3{margin:1.05rem 0 0;min-height:2.56em;font-family:var(--serif);font-weight:600;line-height:1.28;
  font-size:clamp(.98rem,1.05vw,1.12rem);color:var(--ink)}
.product-meta{margin:.32rem 0 0;font-size:.8rem;line-height:1.5;color:var(--ink2)}
.product-cta{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.05rem;padding:.58rem 1.1rem;
  border-radius:999px;background:var(--plum);color:var(--plum-ink);font-size:.8rem;font-weight:600;
  letter-spacing:.01em;text-decoration:none;transition:background .25s,transform .25s var(--expo)}
.product-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.product-cta:hover{background:#7a2a53;transform:translateY(-2px)}
@media(max-width:700px){.products{padding:5.5rem 1rem 2.5rem}
  .product-grid{display:grid;grid-template-columns:1fr 1fr;overflow:visible;scroll-snap-type:none;padding:2px}
  .product-card{flex:none;width:100%}
  .product-card h3{min-height:0}
  .products h2{font-size:clamp(1.7rem,7vw,2.3rem)}}

.ct-char{display:inline-block;white-space:pre;transition:color .5s}

/* Designer credit — quiet line at the foot of the page. */
.designed-by{margin:1.6rem auto 0;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.designed-by a{color:var(--vtext);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.designed-by a:hover{color:var(--violet)}

/* Designer badge — the site's own glass pill, parked bottom-right like the old Lovable badge.
   It stays under the nav (z 46) and the loading veil (z 60), and fades out over the footer
   so the name only ever reads once. */
.credit-badge{position:fixed;right:calc(1rem + env(safe-area-inset-right,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  z-index:44;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .95rem;border-radius:100px;
  background:rgba(246,245,250,.62);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.75);box-shadow:0 12px 30px -18px rgba(36,18,31,.55);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .6s var(--expo),transform .6s var(--expo),background .3s,border-color .3s}
body.ready .credit-badge{opacity:1;transform:none;pointer-events:auto}
.credit-badge span{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.credit-badge b{font-family:var(--serif);font-weight:600;font-size:.95rem;letter-spacing:.02em;color:var(--vtext);white-space:nowrap}
.credit-badge:hover{background:rgba(246,245,250,.85);border-color:var(--line-2)}
.credit-badge:hover b{color:var(--violet)}
body.credit-hide .credit-badge{opacity:0;transform:translateY(6px);pointer-events:none}
@media(pointer:coarse){.credit-badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(246,245,250,.92)}}
@media(max-width:420px){.credit-badge{padding:.42rem .75rem;gap:.4rem}.credit-badge b{font-size:.85rem}.credit-badge span{font-size:.55rem}}
@media(prefers-reduced-motion:reduce){.credit-badge{transition:opacity .3s linear,background .3s,border-color .3s}}

/* Loading state: the veil now holds until the first frame is painted, so the progress bar
   was only ever on screen for a moment — drop it and keep the clean wordmark screen. */
.veil .bar{display:none}
/* The wordmark clears before the pink panel finishes fading, so it never sits on top of
   the finished hero. */
.veil b{transition:opacity .22s linear}
.veil.gone b{opacity:0}