/*
Theme Name: Lediestetik Salon
Theme URI: https://lediestetik.com.ua/
Author: Елена Кузнецова
Description: Soft light-luxury feminine spa theme for Lediestetik — blush, warm ivory and muted gold with Cormorant Garamond display and Jost sans. Bespoke, hand-crafted editorial layout.
Version: 1.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lediestetik-salon
*/

/* ============================================================
   Lediestetik Salon — light-luxury / feminine spa
   Editorial skeleton: centered bloom hero with an overlapping
   portrait medallion, numbered atelier rows, and an asymmetric
   LEAD-veil + numbered INDEX-list split (not a uniform grid).
   Performance: no glass blur, no fixed gradient repaint,
   no keyframe loops — solid surfaces, light transitions only.
   ============================================================ */

:root{
  --blush:#f4e3e6;
  --blush-deep:#eccdd3;
  --ivory:#fbf7f2;
  --ivory-warm:#f6efe6;
  --gold:#a4863f;          /* deepened for stronger contrast on ivory */
  --gold-soft:#c2a86e;
  --ink:#332a2c;           /* deepened for stronger body contrast */
  --ink-soft:#5f5254;
  --line:rgba(164,134,63,.36);
  --line-soft:rgba(164,134,63,.20);
  --shadow:0 26px 70px -34px rgba(120,80,70,.32);
  --shadow-soft:0 16px 44px -28px rgba(120,80,70,.28);
  --r-lg:28px;
  --r-md:22px;
  --r-sm:16px;
  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost","Segoe UI",system-ui,sans-serif;
  --wrap:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  color:var(--ink);
  /* static blush-to-ivory wash; no background-attachment:fixed (repaint on scroll) */
  background:linear-gradient(180deg,var(--blush) 0%, var(--ivory) 30%, var(--ivory-warm) 100%);
  letter-spacing:.012em;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;color:var(--ink);margin:0;line-height:1.12;letter-spacing:.005em}
p{margin:0 0 1.1em}

.le-shell{max-width:var(--wrap);margin:0 auto;padding:0 26px}

/* ---------- skip link ---------- */
.le-skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:99}
.le-skip:focus{left:0}

/* ============================================================
   HEADER — thin gold-hairline bar, bespoke logo lockup
   solid ivory (no glass blur)
   ============================================================ */
.le-topbar{
  border-bottom:1px solid var(--line-soft);
  background:#fcf9f5;
  position:sticky;top:0;z-index:40;
}
.le-topbar__in{
  max-width:var(--wrap);margin:0 auto;padding:14px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* ---- bespoke logo lockup: emblem mark + wordmark ---- */
.le-logo{display:inline-flex;align-items:center;gap:14px;line-height:1}
.le-logo__mark{display:inline-flex;flex:0 0 auto}
.le-emblem{display:block}
.le-logo__word{
  font-family:var(--display);font-weight:600;font-size:1.7rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink);
}
.le-logo__word b{color:var(--gold);font-weight:600}
.le-logo:hover .le-logo__word{color:var(--gold)}

.le-menu{display:flex;flex-wrap:nowrap;align-items:center;gap:2px}
.le-menu a{
  font-size:.68rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink-soft);padding:9px 10px;border-radius:999px;
  transition:color .25s ease,background .25s ease;
}
.le-menu a:hover,.le-menu a:focus{color:var(--gold);background:rgba(164,134,63,.10)}

/* ---- mobile menu toggle (CSS-only checkbox-hack) — hidden on desktop ---- */
.mnav-cbx{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.mnav-btn{display:none}
.mnav-btn__bars,
.mnav-btn__bars::before,
.mnav-btn__bars::after{
  display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .25s ease;
}
.mnav-btn__bars{position:relative}
.mnav-btn__bars::before,.mnav-btn__bars::after{content:"";position:absolute;left:0}
.mnav-btn__bars::before{top:-7px}
.mnav-btn__bars::after{top:7px}

/* ============================================================
   HERO (front) — STACKED editorial: copy block on top (full-width),
   framed featured visual full-width below (keeps its post-title caption)
   ============================================================ */
.le-hero{position:relative;padding:70px 0 30px;overflow:hidden}
.le-hero__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
/* stacked variant: single column, headline+lead first, then feature */
.le-hero__stack{
  max-width:var(--wrap);margin:0 auto;padding:0 26px;
  display:flex;flex-direction:column;gap:48px;
}
.le-hero--stacked .le-hero__copy{max-width:none;text-align:center;margin:0 auto}
.le-hero--stacked .le-hero__copy h1{margin:0 auto}
.le-hero--stacked .le-hero__lead{max-width:60ch;margin:24px auto 0}
.le-hero--stacked .le-hero__feat{width:100%}
.le-hero--stacked .le-hero__frame{aspect-ratio:16/9}
.le-hero__copy{max-width:32rem}
.le-hero__kicker{
  font-family:var(--display);font-style:italic;font-size:.92rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin:0 0 22px;
  display:inline-flex;align-items:center;
}
.le-hero__kicker::after{
  content:"";display:inline-block;width:54px;height:1px;background:var(--line);
  margin-left:18px;
}
.le-hero__copy h1{
  font-size:clamp(2.4rem,1.3rem+3.4vw,4rem);
  font-weight:500;line-height:1.06;font-style:italic;margin:0;
}
.le-hero__lead{
  font-family:var(--sans);font-weight:300;font-size:1.08rem;line-height:1.85;
  color:var(--ink-soft);max-width:44ch;margin:24px 0 0;
}
.le-hero__feat{position:relative;display:block}
.le-hero__frame{
  position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/5;background:var(--blush);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.le-hero__frame::after{
  content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.5);
  border-radius:calc(var(--r-lg) - 8px);pointer-events:none;
}
.le-hero__frame img{width:100%;height:100%;object-fit:cover}
.le-hero__chip{
  position:absolute;top:16px;left:16px;z-index:2;
  background:#fcf9f5;border:1px solid var(--line);border-radius:999px;
  padding:7px 17px;font-family:var(--sans);font-size:.6rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.le-hero__cap{
  display:block;margin-top:22px;text-align:center;
  font-family:var(--display);font-style:italic;font-size:1.4rem;line-height:1.25;
  color:var(--ink);max-width:32ch;margin-left:auto;margin-right:auto;
  transition:color .25s ease;
}
.le-hero__feat:hover .le-hero__cap{color:var(--gold)}

/* ============================================================
   ATELIER SECTIONS — numbered editorial category rows
   ============================================================ */
.le-atelier{padding:66px 0}
.le-atelier + .le-atelier{padding-top:20px}

/* hero flows naturally into the first posts section (no separator) */
.le-hero + .le-atelier{padding-top:56px}
.le-atelier__head{
  display:flex;align-items:baseline;gap:22px;margin-bottom:42px;
  padding-bottom:22px;border-bottom:1px solid var(--line-soft);
}
.le-atelier__no{
  font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--gold-soft);
  min-width:2.6ch;
}
.le-atelier__title{font-size:clamp(1.9rem,1.2rem+2vw,2.7rem);font-weight:500;flex:1}
.le-atelier__all{
  font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
  transition:color .25s ease;align-self:center;
}
.le-atelier__all:hover{color:var(--gold)}

/* ============================================================
   EDITORIAL SPLIT — large lead veil + numbered index list
   deliberately asymmetric (not a uniform card grid)
   ============================================================ */
.le-split{
  display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start;
}
.le-split.is-solo{grid-template-columns:minmax(0,660px);justify-content:center}

/* lead veil — the large hero card of the row */
.le-veil{
  position:relative;display:flex;flex-direction:column;
  background:#fffdfb;
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:20px 20px 30px;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.le-veil:hover{
  transform:translateY(-6px);box-shadow:var(--shadow);
  border-color:var(--line);
}
.le-veil--lead .le-veil__title{font-size:2rem}
.le-veil__frame{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:4/3;background:var(--blush);
}
.le-veil__frame::after{
  content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.5);
  border-radius:calc(var(--r-md) - 6px);pointer-events:none;
}
.le-veil__frame img{width:100%;height:100%;object-fit:cover}
.le-veil__chip{
  position:absolute;top:14px;left:14px;
  background:#fcf9f5;border:1px solid var(--line);
  padding:6px 15px;border-radius:999px;
  font-family:var(--sans);font-size:.58rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);z-index:2;
}
.le-veil__body{padding:26px 8px 0;display:flex;flex-direction:column;flex:1}
.le-veil__title{
  font-family:var(--display);font-weight:500;font-size:1.62rem;line-height:1.18;color:var(--ink);
}
.le-veil__title a{transition:color .25s ease}
.le-veil:hover .le-veil__title a{color:var(--gold)}
.le-veil__ex{
  font-family:var(--sans);font-weight:300;font-size:.97rem;line-height:1.75;
  color:var(--ink-soft);margin:14px 0 0;
}
.le-veil__foot{
  display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.le-veil__foot .le-sig{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.04em;color:var(--ink);font-weight:400;
}
.le-veil__foot .le-sep{width:4px;height:4px;border-radius:50%;background:var(--gold-soft)}
.le-veil__foot .le-time{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft)}
.le-av{display:inline-flex;flex:0 0 auto;border-radius:50%;overflow:hidden;border:1px solid var(--line)}

/* index list — slim numbered rows beside the lead */
.le-index{
  list-style:none;margin:4px 0 0;padding:0;
  display:flex;flex-direction:column;
}
.le-index__item{border-top:1px solid var(--line-soft)}
.le-index__item:first-child{border-top:0}
.le-index__link{
  display:grid;grid-template-columns:auto 88px 1fr;align-items:center;gap:18px;
  padding:20px 4px;transition:padding-left .25s ease;
}
.le-index__link:hover{padding-left:10px}
.le-index__no{
  font-family:var(--display);font-style:italic;font-size:1.3rem;color:var(--gold-soft);
  align-self:start;padding-top:2px;
}
.le-index__thumb{
  width:88px;height:66px;border-radius:14px;overflow:hidden;background:var(--blush);
  border:1px solid var(--line-soft);
}
.le-index__thumb img{width:100%;height:100%;object-fit:cover}
.le-index__meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.le-index__title{
  font-family:var(--display);font-weight:500;font-size:1.2rem;line-height:1.22;color:var(--ink);
  transition:color .25s ease;
}
.le-index__link:hover .le-index__title{color:var(--gold)}
.le-index__time{font-family:var(--sans);font-size:.7rem;letter-spacing:.06em;color:var(--ink-soft)}

/* ---------- generic veil grid (index/archive/related) ---------- */
.le-veils{display:grid;grid-template-columns:repeat(2,1fr);gap:38px}
.le-veils.is-solo{grid-template-columns:minmax(0,620px);justify-content:center}

/* ============================================================
   ARTICLE (single)
   ============================================================ */
.le-crumb{
  font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:44px 0 0;text-align:center;
}
.le-crumb a{color:var(--gold);transition:opacity .25s ease}
.le-crumb a:hover{opacity:.7}
.le-crumb span{margin:0 .5em;color:var(--gold-soft)}

.le-article{max-width:820px;margin:0 auto;padding:0 26px}
.le-article__head{text-align:center;padding:30px 0 8px}
.le-article__chip{
  display:inline-block;margin-bottom:22px;
  border:1px solid var(--line);border-radius:999px;padding:7px 18px;
  font-family:var(--sans);font-size:.62rem;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);transition:background .25s ease;
}
.le-article__chip:hover{background:rgba(164,134,63,.1)}
.le-article__head h1{
  font-size:clamp(2.1rem,1.3rem+3vw,3.5rem);font-weight:500;font-style:italic;
  line-height:1.1;max-width:20ch;margin:0 auto;
}
.le-article__meta{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:26px;font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);
}
.le-article__meta b{font-weight:400;color:var(--ink);letter-spacing:.02em}
.le-article__meta .le-sep{width:4px;height:4px;border-radius:50%;background:var(--gold-soft)}
.le-hairline{
  width:60px;height:1px;background:var(--gold);margin:34px auto;border:0;
  position:relative;
}
.le-hairline::before,.le-hairline::after{
  content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);
}
.le-hairline::before{left:-9px}
.le-hairline::after{right:-9px}
.le-cover{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-soft);
  box-shadow:var(--shadow-soft);margin:8px 0 8px;
}

/* prose */
.le-prose{font-size:1.09rem;line-height:1.9;color:#3d3234}
.le-prose p{margin:0 0 1.35em}
.le-prose h2{font-size:1.9rem;font-weight:600;margin:1.8em 0 .5em}
.le-prose h3{font-size:1.42rem;font-weight:600;margin:1.5em 0 .4em;color:var(--gold)}
.le-prose a{color:var(--gold);border-bottom:1px solid var(--line);transition:opacity .25s ease}
.le-prose a:hover{opacity:.7}
.le-prose img,.le-prose figure{border-radius:var(--r-md);overflow:hidden;margin:1.8em auto}
.le-prose figure img{border-radius:var(--r-md)}
.le-prose figcaption{
  text-align:center;font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);
  margin-top:.7em;font-style:italic;
}
.le-prose blockquote{
  margin:1.8em 0;padding:6px 0 6px 30px;border-left:2px solid var(--gold);
  font-family:var(--display);font-style:italic;font-size:1.5rem;line-height:1.4;color:var(--ink);
}
.le-prose ul,.le-prose ol{padding-left:1.3em;margin:0 0 1.35em}
.le-prose li{margin:.4em 0}

/* ============================================================
   RELATED / archive lists
   ============================================================ */
.le-related{padding:64px 0 12px}
.le-related__head{text-align:center;margin-bottom:42px}
.le-related__eyebrow{
  font-family:var(--display);font-style:italic;letter-spacing:.3em;text-transform:uppercase;
  font-size:.8rem;color:var(--gold);display:block;margin-bottom:10px;
}
/* related label is a styled <p>, NOT a heading */
.le-related__label{
  font-family:var(--display);font-weight:500;font-size:2.2rem;line-height:1.1;
  color:var(--ink);margin:0;
}
.le-veils--related .le-veil__title{font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1.18;color:var(--ink);margin:0}
.le-veils--related .le-veil:hover .le-veil__title a{color:var(--gold)}

/* ---------- archive hero ---------- */
.le-arch{padding:70px 0 8px;text-align:center}
.le-arch__eyebrow{
  font-family:var(--display);font-style:italic;letter-spacing:.34em;text-transform:uppercase;
  font-size:.82rem;color:var(--gold);
}
.le-arch h1{font-size:clamp(2.3rem,1.4rem+3vw,3.8rem);font-weight:500;font-style:italic;margin:.25em auto 0;max-width:18ch}
.le-arch__desc{font-family:var(--sans);font-weight:300;color:var(--ink-soft);max-width:58ch;margin:20px auto 0}

/* pagination */
.le-pager{margin-top:52px;text-align:center}
.le-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  padding:0 12px;margin:0 4px;border:1px solid var(--line-soft);border-radius:999px;
  font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);
  transition:border-color .25s ease,color .25s ease;
}
.le-pager a.page-numbers:hover{border-color:var(--gold);color:var(--gold)}
.le-pager .page-numbers.current{background:var(--gold);color:#fff;border-color:var(--gold)}

.le-empty{text-align:center;padding:80px 0;font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--ink-soft)}

/* ============================================================
   FOOTER — two-column (brand+description | categories), gold hairline
   ============================================================ */
.le-foot{
  margin-top:90px;
  background:var(--ivory-warm);
  border-top:1px solid var(--line-soft);
  padding:70px 0 40px;
}
.le-foot__cols{
  display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:start;
}
.le-foot__lockup{display:flex;align-items:center;gap:14px;line-height:1}
.le-foot__mark{display:inline-flex;flex:0 0 auto}
.le-foot__name{
  font-family:var(--display);font-weight:600;font-size:1.9rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}
.le-foot__name b{color:var(--gold);font-weight:600}
.le-foot__desc{
  font-family:var(--sans);font-weight:300;color:var(--ink-soft);
  margin:18px 0 0;font-size:.96rem;max-width:42ch;line-height:1.6;
}
.le-foot__label{
  font-family:var(--sans);font-size:.74rem;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 16px;
}
.le-foot__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.le-foot__list a{
  font-family:var(--sans);font-weight:300;font-size:.92rem;color:var(--ink-soft);
  text-decoration:none;transition:color .25s ease;
}
.le-foot__list a:hover,.le-foot__list a:focus{color:var(--gold)}
.le-foot__rule{width:100%;height:1px;background:var(--line-soft);margin:44px 0 26px;border:0}
.le-foot__bottom{
  display:flex;justify-content:center;flex-wrap:wrap;text-align:center;
  font-family:var(--sans);font-size:.74rem;font-weight:300;
  letter-spacing:.06em;color:var(--ink-soft);
}
.le-foot__bottom b{color:var(--ink);font-weight:400}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- MOBILE MENU: real toggle at <=780px (checkbox-hack, no JS) ---- */
@media(max-width:780px){
  .le-topbar__in{
    flex-direction:row;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:12px;
  }
  /* hamburger button visible only on mobile */
  .mnav-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;flex:0 0 auto;cursor:pointer;
    border:1px solid var(--line);border-radius:12px;background:#fcf9f5;
    color:var(--ink);order:2;
  }
  .mnav-btn:hover,.mnav-btn:focus{border-color:var(--gold);color:var(--gold)}
  .mnav-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  /* nav = full-width stacked panel below the bar, hidden by default */
  .le-menu{
    order:3;flex-basis:100%;width:100%;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px;
    max-height:0;overflow:hidden;opacity:0;
    padding:0;margin:0;
    border-top:0 solid var(--line-soft);
    transition:max-height .3s ease,opacity .25s ease,padding .25s ease;
  }
  .le-menu a{
    display:block;width:100%;padding:14px 12px;border-radius:12px;
    font-size:.8rem;letter-spacing:.16em;text-align:left;
  }
  /* reveal panel when the toggle is checked */
  .mnav-cbx:checked ~ .le-menu{
    max-height:80vh;opacity:1;overflow:auto;
    padding:14px 0 4px;margin-top:6px;border-top-width:1px;
  }
  /* morph hamburger into a close (X) when open */
  .mnav-cbx:checked ~ .mnav-btn .mnav-btn__bars{background:transparent}
  .mnav-cbx:checked ~ .mnav-btn .mnav-btn__bars::before{top:0;transform:rotate(45deg)}
  .mnav-cbx:checked ~ .mnav-btn .mnav-btn__bars::after{top:0;transform:rotate(-45deg)}
}

@media(max-width:900px){
  .le-hero__grid{grid-template-columns:1fr;gap:40px}
  .le-hero__copy{max-width:none}
  .le-hero__lead{max-width:60ch}
  .le-hero__frame{aspect-ratio:16/10}
  .le-split{grid-template-columns:1fr;gap:34px}
  .le-split.is-solo{grid-template-columns:1fr}
  .le-veils{grid-template-columns:1fr;gap:30px}
  .le-veils.is-solo{grid-template-columns:1fr}
  .le-atelier__head{flex-wrap:wrap;gap:10px 18px}
}
@media(max-width:680px){
  body{font-size:16px}
  /* topbar keeps logo|hamburger row (mobile-menu block owns .le-topbar__in) */
  .le-hero{padding-top:48px}
  .le-logo__word{font-size:1.4rem;letter-spacing:.12em}
  .le-index__link{grid-template-columns:auto 64px 1fr;gap:12px}
  .le-index__thumb{width:64px;height:52px}
  .le-foot__cols{grid-template-columns:1fr;gap:32px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important}
  .le-veil:hover{transform:none}
}