/* ============================================================
   Queen Kylie — design system (minimalist · elegant)
   Shared by index.html and all /blog articles.
   ============================================================ */
:root{
  --bg:#070405;
  --bg-2:#0e0708;
  --ink:#f0e7e4;
  --muted:#9c8883;
  --accent:#b01e2e;          /* blood red / oxblood */
  --accent-soft:#e2545f;
  --accent-deep:#4a0a10;
  --glow:rgba(176,30,46,.32);
  --hair:rgba(240,231,228,.09);
  --hair-strong:rgba(240,231,228,.16);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', system-ui, sans-serif;
  --he:'Heebo', system-ui, sans-serif;
  --pad:clamp(80px,12vw,140px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(176,30,46,.16), transparent 62%),
    radial-gradient(900px 700px at 90% 110%, rgba(176,30,46,.08), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.8;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
body[dir="rtl"]{font-family:var(--he);letter-spacing:0}
/* premium film grain + vignette overlays */
body::before{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* language visibility — hide only the inactive language */
body[dir="ltr"] [data-lang-he]{display:none}
body[dir="rtl"] [data-lang-en]{display:none}

/* 3D / depth layering */
#embers{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}
header.top,main,footer{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){#embers{display:none}}

/* Custom trailing crown cursor */
#qk-cursor{position:fixed;top:0;left:0;z-index:9990;pointer-events:none;color:var(--accent);font-size:15px;transform:translate(-50%,-50%);text-shadow:0 0 12px var(--glow);will-change:transform;opacity:0;transition:opacity .3s}
@media(hover:none){#qk-cursor{display:none}}

/* Cinematic intro splash */
#intro{position:fixed;inset:0;z-index:2000;background:radial-gradient(circle at 50% 42%,#180a0d,#050303);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;cursor:pointer;transition:opacity .9s ease,visibility .9s}
#intro.gone{opacity:0;visibility:hidden}
#intro .ic{font-size:66px;color:var(--accent);text-shadow:0 0 55px var(--glow);animation:introCrown 1.7s ease both}
#intro .ib{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,7vw,2.8rem);letter-spacing:.34em;color:var(--ink);animation:introFade 1.6s .3s both}
#intro .it{color:var(--muted);letter-spacing:.36em;text-transform:uppercase;font-size:.68rem;animation:introFade 1.6s .55s both}
body[dir="rtl"] #intro .ib{letter-spacing:.1em}
body[dir="rtl"] #intro .it{letter-spacing:.06em}
@keyframes introCrown{0%{opacity:0;transform:translateY(16px) scale(.82)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes introFade{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#intro{display:none}}

/* Floating "Ask the Queen" launcher */
.chat-fab{position:fixed;bottom:22px;inset-inline-end:22px;z-index:900;display:flex;align-items:center;gap:9px;background:var(--accent);color:#fff;padding:13px 20px;border:1px solid var(--accent-soft);border-radius:40px;font-family:var(--sans);font-size:.86rem;letter-spacing:.03em;box-shadow:0 10px 30px -8px var(--glow);transition:transform .2s,box-shadow .3s;animation:fabPulse 2.8s infinite}
.chat-fab:hover{transform:translateY(-2px);color:#fff}
.chat-fab .fic{font-size:1.05rem}
@keyframes fabPulse{0%,100%{box-shadow:0 10px 30px -8px var(--glow),0 0 0 0 rgba(176,30,46,.5)}50%{box-shadow:0 12px 34px -8px var(--glow),0 0 0 12px rgba(176,30,46,0)}}
@media(max-width:520px){.chat-fab .lbl{display:none}.chat-fab{padding:15px;gap:0}}
@media(prefers-reduced-motion:reduce){.chat-fab{animation:none}}

/* ---------- Shared type ---------- */
.eyebrow,.kicker,.a-cat,.jc-cat,.rc-cat{
  color:var(--accent);
  letter-spacing:.34em;
  text-transform:uppercase;
  font-size:.68rem;
  font-weight:400;
}
body[dir="rtl"] .eyebrow,
body[dir="rtl"] .kicker,
body[dir="rtl"] .a-cat,
body[dir="rtl"] .jc-cat,
body[dir="rtl"] .rc-cat{letter-spacing:.12em}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.6vw,3.2rem);line-height:1.12;letter-spacing:.5px}
h3{font-family:var(--serif);font-weight:500}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--sans);cursor:pointer;display:inline-block;
  border:1px solid var(--accent);background:transparent;color:var(--accent);
  padding:15px 40px;border-radius:0;letter-spacing:.22em;text-transform:uppercase;
  font-size:.72rem;font-weight:400;transition:background .3s,color .3s,border-color .3s;
}
.btn:hover{background:var(--accent);color:#fff;box-shadow:0 0 34px var(--glow)}
.btn.solid{background:var(--accent);color:#fff;box-shadow:0 0 26px var(--glow)}
.btn.solid:hover{background:var(--accent-soft);border-color:var(--accent-soft);box-shadow:0 0 40px var(--glow)}
.btn.ghost{border-color:var(--hair-strong);color:var(--muted)}
.btn.ghost:hover{background:transparent;color:var(--ink);border-color:var(--muted)}
body[dir="rtl"] .btn{letter-spacing:.04em}

/* ---------- Age gate ---------- */
#gate{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
#gate .card{max-width:440px;text-align:center;padding:20px}
#gate .crown{font-size:30px;color:var(--accent)}
#gate h1{font-family:var(--serif);font-weight:400;font-size:2.4rem;margin:18px 0 14px;letter-spacing:2px}
#gate p{color:var(--muted);font-size:.92rem;margin-bottom:34px;font-weight:300}
.gbtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Top bar ---------- */
header.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(11,9,8,.72);border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:12px}
.brand{font-family:var(--serif);font-size:1.4rem;letter-spacing:.28em;color:var(--ink);font-weight:400}
body[dir="rtl"] .brand{letter-spacing:.06em}
.top-right{display:flex;align-items:center;gap:20px}
.top-link{color:var(--muted);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;transition:color .25s}
.top-link:hover{color:var(--accent)}
body[dir="rtl"] .top-link{letter-spacing:0;text-transform:none}
.lang{display:flex;gap:0;border:1px solid var(--hair-strong);border-radius:0;overflow:hidden}
.lang button{background:transparent;border:0;color:var(--muted);cursor:pointer;padding:8px 15px;font-size:.72rem;letter-spacing:.1em;font-family:var(--sans)}
.lang button.on{background:var(--accent);color:var(--bg)}

/* ---------- Hero ---------- */
.hero{padding:clamp(70px,11vh,130px) 0 clamp(60px,9vh,110px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,72px);align-items:center;text-align:start}
.hero .eyebrow{display:block;margin-bottom:30px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,7vw,5.3rem);line-height:1.03;letter-spacing:1px;text-align:start}
.hero h1 em{font-style:italic;color:var(--accent-soft);text-shadow:0 0 44px var(--glow)}
.hero .sub{color:var(--muted);max-width:520px;margin:32px 0 0;font-size:1.05rem;font-weight:300}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:44px}
.hero-media{position:relative;perspective:1200px}
.hero-media img,.hero-media video{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border:1px solid var(--hair-strong);box-shadow:0 44px 100px -34px rgba(0,0,0,.95),0 0 0 1px rgba(176,30,46,.08);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .4s;will-change:transform}
.hero-media:hover img,.hero-media:hover video{box-shadow:0 50px 110px -30px var(--glow)}
.hero-media.empty::after{content:'♛';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.4;font-size:40px;border:1px solid var(--hair)}
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;text-align:center;gap:40px}
  .hero .eyebrow,.hero h1,.hero .sub{text-align:center}
  .hero .sub{margin-inline:auto}
  .hero .cta{justify-content:center}
  .hero-media{max-width:340px;margin:0 auto;order:-1}
}

/* ---------- Section rhythm ---------- */
section{padding:var(--pad) 0}
.kicker{display:block;text-align:center;margin-bottom:20px}
h2{text-align:center}
.section-head h2{margin-bottom:0}
.lead{color:var(--muted);text-align:center;max-width:640px;margin:22px auto 0;font-size:1.05rem;font-weight:300}
.divider{display:none} /* minimalist: rely on whitespace, not rules */

/* ---------- About (with portrait) ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center;margin-top:56px;perspective:1400px}
.about-copy .kicker{text-align:start}
.about-copy h2{text-align:start}
.about-copy .lead{text-align:start;margin-inline:0}
.portrait{aspect-ratio:4/5;border:1px solid var(--hair-strong);position:relative;overflow:hidden;background:linear-gradient(160deg,#1a1012,#0d0708);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .3s;will-change:transform;box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.portrait:hover{border-color:var(--accent);box-shadow:0 40px 90px -30px var(--glow)}
.portrait img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.portrait:hover img{transform:scale(1.04)}
.portrait .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted)}
.portrait.empty::after,.gallery .tile.empty::after{content:'♛';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.35;font-size:30px}
.portrait .ph .c{font-size:34px;color:var(--accent);opacity:.5}
.portrait .ph span{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase}
body[dir="rtl"] .portrait .ph span{letter-spacing:0;text-transform:none}

/* ---------- Services ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:56px;perspective:1200px}
.card2{padding:44px 34px;background:var(--bg-2);border:1px solid var(--hair);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s;will-change:transform}
.card2:hover{border-color:var(--accent);box-shadow:0 22px 55px -22px var(--glow)}
.card2 .ic{font-size:22px;color:var(--accent);margin-bottom:20px}
.card2 h3{font-size:1.7rem;margin-bottom:12px}
.card2 p{color:var(--muted);font-size:.96rem;font-weight:300}
.card2 .price{margin-top:20px;color:var(--accent-soft);font-size:.82rem;letter-spacing:.12em}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:56px;perspective:1400px}
.gallery .tile{aspect-ratio:3/4;border:1px solid var(--hair);position:relative;overflow:hidden;background:linear-gradient(160deg,#1a1012,#0d0708);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s;will-change:transform}
.gallery .tile:hover{border-color:var(--accent);box-shadow:0 26px 65px -24px var(--glow)}
.gallery .tile img,.gallery .tile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.gallery .tile:hover img,.gallery .tile:hover video{transform:scale(1.06)}
.gallery .tile .vtag{position:absolute;top:10px;inset-inline-start:10px;z-index:2;color:var(--accent-soft);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;background:rgba(7,4,5,.55);padding:4px 8px;border:1px solid var(--hair)}
.gallery .tile .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.4;font-size:26px}
@media(max-width:640px){.gallery{grid-template-columns:1fr 1fr}}

/* ---------- Links hub ---------- */
.links{max-width:600px;margin:56px auto 0;border-top:1px solid var(--hair)}
.link-btn{display:flex;align-items:center;gap:20px;padding:24px 6px;border-bottom:1px solid var(--hair);transition:padding .25s,color .25s}
.link-btn:hover{padding-inline-start:22px;color:var(--accent-soft)}
body[dir="rtl"] .link-btn:hover{padding-inline-start:6px;padding-inline-end:22px}
.link-btn .li{font-size:20px;width:28px;text-align:center;color:var(--accent)}
.link-btn .lt{flex:1}
.link-btn .lt b{display:block;font-family:var(--serif);font-size:1.3rem;font-weight:500;letter-spacing:.3px}
.link-btn .lt span{color:var(--muted);font-size:.8rem}
.link-btn .arr{color:var(--muted);font-size:1rem}
body[dir="rtl"] .link-btn .arr{transform:scaleX(-1)}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:56px auto 0;border-top:1px solid var(--hair)}
details{border-bottom:1px solid var(--hair);padding:26px 4px}
summary{cursor:pointer;font-family:var(--serif);font-size:1.5rem;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary .plus{color:var(--accent);transition:transform .25s;font-size:1.2rem;font-weight:300}
details[open] summary .plus{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:16px;font-size:1rem;font-weight:300}

/* ---------- Journal ---------- */
.journal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:56px;perspective:1200px}
.j-card{padding:40px 32px;background:var(--bg-2);border:1px solid var(--hair);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s;display:flex;flex-direction:column;will-change:transform}
.j-card:hover{border-color:var(--accent);box-shadow:0 22px 55px -22px var(--glow)}
.j-card .jc-cat{margin-bottom:16px}
.j-card h3{font-size:1.6rem;margin-bottom:12px;line-height:1.2}
.j-card p{color:var(--muted);font-size:.94rem;flex:1;font-weight:300}
.j-card .jc-more{color:var(--accent-soft);font-size:.78rem;letter-spacing:.14em;margin-top:22px;text-transform:uppercase}
body[dir="rtl"] .j-card .jc-more{letter-spacing:0;text-transform:none}

/* ---------- Article ---------- */
.article{max-width:720px;margin:0 auto;padding:80px 28px 0}
.breadcrumb{color:var(--muted);font-size:.8rem;letter-spacing:.06em;margin-bottom:26px}
.breadcrumb a:hover{color:var(--accent)}
.article .a-cat{display:block;margin-bottom:18px}
.article h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,6vw,3.8rem);line-height:1.08;margin-bottom:22px;letter-spacing:.5px}
.a-meta{color:var(--muted);font-size:.85rem;letter-spacing:.06em;padding-bottom:30px;margin-bottom:40px;border-bottom:1px solid var(--hair);font-weight:300}
.prose p{margin:0 0 22px;font-size:1.1rem;color:#ded6cc;font-weight:300;line-height:1.85}
.prose h2{font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--ink);margin:52px 0 16px;text-align:start;letter-spacing:.5px}
.prose h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:34px 0 12px}
.prose ul,.prose ol{margin:0 0 22px;padding-inline-start:26px;color:#ded6cc;font-weight:300}
.prose li{margin-bottom:11px;font-size:1.06rem}
.prose strong{color:var(--ink);font-weight:400}
.prose blockquote{border-inline-start:2px solid var(--accent);padding:8px 26px;margin:34px 0;font-family:var(--serif);font-style:italic;font-size:1.65rem;color:var(--accent-soft);line-height:1.4}
.prose a.inline{color:var(--accent);border-bottom:1px solid var(--hair-strong)}
.prose a.inline:hover{border-color:var(--accent)}

/* ---------- CTA box ---------- */
.cta-box{border:1px solid var(--hair);padding:56px 34px;text-align:center;margin:64px 0}
.cta-box h3{font-family:var(--serif);font-weight:400;font-size:2rem;margin-bottom:12px}
.cta-box p{color:var(--muted);margin-bottom:28px;font-weight:300}

/* ---------- Related ---------- */
.related{max-width:1120px;margin:0 auto;padding:20px 28px 40px}
.related h4{font-family:var(--serif);font-weight:400;font-size:1.7rem;text-align:center;margin-bottom:32px;color:var(--ink)}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:820px;margin:0 auto}
.rel-card{padding:28px 24px;background:var(--bg-2);border:1px solid var(--hair);transition:transform .3s,border-color .3s,box-shadow .3s}
.rel-card:hover{border-color:var(--accent);box-shadow:0 16px 42px -18px var(--glow)}
.rel-card .rc-cat{display:block;margin-bottom:10px}
.rel-card b{font-family:var(--serif);font-size:1.3rem;font-weight:500;display:block;line-height:1.2}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--hair);margin-top:var(--pad);padding:64px 0;text-align:center}
footer .brand{display:inline-block;margin-bottom:20px}
footer p{color:var(--muted);font-size:.8rem;margin-bottom:8px;font-weight:300}
footer .social{display:flex;gap:26px;justify-content:center;margin:24px 0;font-size:1.25rem;color:var(--accent)}
footer .social a{transition:color .2s,transform .2s}
footer .social a:hover{color:var(--accent-soft);transform:translateY(-2px)}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  .about-grid{grid-template-columns:1fr}
  .portrait{max-width:360px;margin:0 auto;width:100%}
  .about-copy{text-align:center}
  .about-copy .kicker,.about-copy h2,.about-copy .lead{text-align:center}
  .about-copy .lead{margin-inline:auto}
}