/* =====================================================================
   THEME v2 — "Editorial Luxury"
   Inspired by the patterns of leading thought-leader sites (editorial serif
   headlines, cinematic dark hero, manifesto typography, motion on scroll).
   Loaded AFTER site.css; keeps the brand palette & fonts from the content file.
   ===================================================================== */
:root{
  --f-display:'Amiri', 'Cormorant Garamond', Georgia, serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --gold-2:#E3C58F;
  --shadow-1:0 1px 2px rgba(14,27,44,.04),0 8px 24px rgba(14,27,44,.06);
  --shadow-2:0 2px 6px rgba(14,27,44,.06),0 24px 60px rgba(14,27,44,.14);
}
html[lang="en"]{ --f-head:'Cormorant Garamond', Georgia, serif; --f-display:'Cormorant Garamond', Georgia, serif; }
html[lang="en"] .h2, html[lang="en"] .hero h1, html[lang="en"] .page-head h1{ font-weight:600; letter-spacing:-.5px }
body{ font-feature-settings:"kern","liga"; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased }
::selection{ background:var(--gold); color:var(--navy) }

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:100;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform-origin:var(--origin, right);transform:scaleX(0)}
html[dir="ltr"] .progress span{--origin:left}

/* ---------- header ---------- */
.site-header{transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);border-bottom-color:rgba(255,255,255,.06)}
.site-header .nav{transition:padding .35s var(--ease)}
.site-header.scrolled{background:rgba(14,27,44,.86);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.site-header.scrolled .nav{padding-block:8px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-mark{width:42px;height:42px;border:1px solid var(--gold);display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:22px;color:var(--gold);border-radius:50%;transition:transform .6s var(--ease), background .3s}
.brand:hover .brand-mark{transform:rotate(-12deg);background:rgba(201,164,106,.12)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text small{font-family:var(--f-body);font-size:11px;letter-spacing:1.5px;color:var(--gold);font-weight:500;margin-top:4px}
.menu a{position:relative;border-bottom:0 !important}
.menu a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:var(--o,right);transition:transform .45s var(--ease)}
html[dir="ltr"] .menu a::after{--o:left}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.btn-lang,.btn-ghost-light{border-radius:999px}

/* ---------- buttons ---------- */
.btn{border-radius:999px;position:relative;overflow:hidden;transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;isolation:isolate}
.btn-gold{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 50%,var(--gold) 100%);background-size:200% 100%;box-shadow:0 8px 24px rgba(201,164,106,.25)}
.btn-gold:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 14px 34px rgba(201,164,106,.35)}
.btn-navy:hover,.btn-outline:hover,.btn-outline-light:hover{transform:translateY(-2px)}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(-5px)}
html[dir="ltr"] .btn:hover .arr{transform:translateX(5px)}
html[dir="ltr"] .btn .arr{transform:scaleX(-1)}
html[dir="ltr"] .btn:hover .arr{transform:scaleX(-1) translateX(-5px)}

/* ---------- hero v2 ---------- */
.hero{position:relative;overflow:hidden;min-height:calc(100vh - 72px);display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 70% at 15% 20%, rgba(201,164,106,.16), transparent 60%),
  radial-gradient(50% 60% at 85% 85%, rgba(35,54,79,.9), transparent 70%);
  animation:aura 14s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);background-size:72px 72px;
  mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);-webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent)}
@keyframes aura{to{transform:translate3d(0,-3%,0) scale(1.08)}}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:2px;text-transform:uppercase}
.hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(201,164,106,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(201,164,106,0)}100%{box-shadow:0 0 0 0 rgba(201,164,106,0)}}
.hero h1{font-family:var(--f-display);font-size:clamp(40px,5.4vw,78px);line-height:1.22;letter-spacing:-.5px}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(6px);animation:wordIn .9s var(--ease) forwards;animation-delay:calc(var(--i) * 70ms + 150ms)}
.hero h1 em{font-style:normal;color:var(--gold);background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes wordIn{to{opacity:1;transform:none;filter:none}}
.hero-intro,.hero-cta,.hero-kicker,.hero-stats{opacity:0;animation:fadeUp .9s var(--ease) forwards}
.hero-kicker{animation-delay:.05s}.hero-intro{animation-delay:.55s}.hero-cta{animation-delay:.75s}.hero-stats{animation-delay:.95s}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero-stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:20px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats strong{font-family:var(--f-display);font-size:34px;line-height:1;color:var(--ivory);direction:ltr;unicode-bidi:isolate}
.hero-stats span{font-size:13px;color:#8E9BAD;margin-top:6px}
.portrait-wrap{position:relative;opacity:0;animation:portraitIn 1.2s var(--ease) .3s forwards}
@keyframes portraitIn{from{opacity:0;transform:translateY(40px) scale(.96);clip-path:inset(30% -80px -80px -80px)}to{opacity:1;transform:none;clip-path:inset(-80px -80px -80px -80px)}}
.hero-aside{flex:1 1 380px;max-width:460px;margin-inline:auto;padding:24px}
.portrait-wrap{transition:transform .6s var(--ease)}
.portrait-wrap::before{content:"";position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--gold);z-index:0;transition:transform .8s var(--ease)}
html[dir="ltr"] .portrait-wrap::before{inset:22px 22px -22px -22px}
.portrait-wrap:hover::before{transform:translate(-8px,-8px)}
.portrait{position:relative;z-index:1;border:0;background:linear-gradient(160deg,#1b2d45,#0f1d30);box-shadow:var(--shadow-2)}
.portrait img{transition:transform 1.4s var(--ease)}
.portrait-wrap:hover .portrait img{transform:scale(1.04)}
.portrait .ph{font-family:var(--f-display);font-size:120px;color:rgba(201,164,106,.25)}
.float-badge{position:absolute;z-index:2;background:rgba(247,244,238,.96);color:var(--navy);padding:14px 18px;box-shadow:var(--shadow-2);display:flex;align-items:center;gap:12px;animation:float 6s ease-in-out infinite;backdrop-filter:blur(6px)}
.float-badge strong{font-family:var(--f-display);font-size:30px;line-height:1;color:var(--gold-text);direction:ltr;unicode-bidi:isolate}
.float-badge span{font-size:12.5px;line-height:1.4;max-width:120px}
.float-badge.b1{bottom:40px;inset-inline-start:-36px}
.float-badge.b2{top:36px;inset-inline-end:-26px;animation-delay:-3s;background:var(--navy);color:var(--ivory);border:1px solid rgba(201,164,106,.4)}
.float-badge.b2 strong{color:var(--gold);font-size:20px}
@keyframes float{50%{transform:translateY(-10px)}}
.scroll-cue{position:absolute;bottom:26px;inset-inline-start:50%;transform:translateX(50%);z-index:3;color:#8E9BAD;font-size:12px;letter-spacing:2px;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none}
html[dir="ltr"] .scroll-cue{transform:translateX(-50%)}
.scroll-cue i{width:22px;height:36px;border:1px solid #5A6B82;border-radius:12px;position:relative}
.scroll-cue i::after{content:"";position:absolute;top:7px;left:50%;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:wheel 1.8s infinite}
@keyframes wheel{to{transform:translateY(12px);opacity:0}}

/* ---------- marquee ---------- */
.marquee{background:var(--gold);color:var(--navy);overflow:hidden;border-block:1px solid #b8935a;padding-block:16px;direction:ltr}
.marquee-track{display:flex;width:max-content;animation:marq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--f-display);font-size:24px;font-weight:700;padding-inline:28px;white-space:nowrap;display:inline-flex;align-items:center;gap:56px}
.marquee-track span::after{content:"✦";font-size:14px;opacity:.6}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- numbers ---------- */
.numbers{background:var(--white)}
.numbers .wrap{padding-block:64px;gap:0}
.numbers .wrap>div{padding:8px 16px;border-inline-start:1px solid var(--line)}
.numbers .wrap>div:first-child{border:0}
.num{font-size:clamp(38px,4vw,54px);background:linear-gradient(180deg,var(--navy),#2c4566);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (max-width:760px){.numbers .wrap>div{border:0;padding-block:14px}}

/* ---------- manifesto ---------- */
.manifesto{background:var(--ivory);padding-block:110px;position:relative;overflow:hidden}
.manifesto .mark{position:absolute;inset-inline-end:4%;top:-40px;font-family:var(--f-display);font-size:340px;line-height:1;color:rgba(201,164,106,.12);pointer-events:none}
.manifesto p.l{margin:0;font-family:var(--f-display);font-size:clamp(30px,4.2vw,62px);line-height:1.35;color:var(--navy)}
.manifesto p.l:nth-child(2){padding-inline-start:8%}
.manifesto p.l:nth-child(3){padding-inline-start:16%;color:var(--gold-text)}
.manifesto .sig{margin-top:28px;font-size:15px;color:var(--muted);padding-inline-start:16%;display:flex;align-items:center;gap:12px}
.manifesto .sig::before{content:"";width:48px;height:1px;background:var(--gold)}

/* ---------- section headings ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:12px;letter-spacing:1.2px}
.eyebrow::before{content:"";width:32px;height:1px;background:currentColor;opacity:.7}
.h2{font-family:var(--f-display);font-size:clamp(32px,3.6vw,52px);line-height:1.3;letter-spacing:-.3px}
.sec{padding-block:120px}
@media (max-width:760px){.sec{padding-block:72px}}

/* ---------- cards ---------- */
.card{border-radius:2px;transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s}
.card,.article-card,.summary-card{position:relative}
a.card::after,.article-card::after,.cards-joined>a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold-2));transform:scaleX(0);transform-origin:var(--o,right);transition:transform .6s var(--ease)}
html[dir="ltr"] a.card::after,html[dir="ltr"] .article-card::after,html[dir="ltr"] .cards-joined>a::after{--o:left}
a.card:hover,.article-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent}
a.card:hover::after,.article-card:hover::after,.cards-joined>a:hover::after{transform:scaleX(1)}
.card .idx{font-size:44px;line-height:1;opacity:.85;transition:color .3s, transform .5s var(--ease)}
a.card:hover .idx{transform:translateY(-4px);color:var(--gold)}
.card-top{box-shadow:var(--shadow-1)}
.card-top:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.cards-joined>a{position:relative;transition:background .4s}
.cards-joined>a:hover{background:var(--ivory)}
.cards-joined>a.dark{background:linear-gradient(150deg,var(--navy),var(--navy-3))}
.card-dark{border:1px solid rgba(255,255,255,.06);transition:transform .5s var(--ease), border-color .4s, background .4s}
.card-dark:hover{transform:translateY(-4px);border-color:rgba(201,164,106,.45);background:#192c45}
.article-card .img{overflow:hidden}
.article-card .img img{transition:transform 1.1s var(--ease)}
.article-card:hover .img img{transform:scale(1.06)}
.model{transition:transform .5s var(--ease), background .4s;border-inline-start:2px solid var(--gold)}
.model:hover{transform:translateX(-6px);background:var(--navy-3)}
html[dir="ltr"] .model:hover{transform:translateX(6px)}
.chip{transition:background .3s, color .3s, transform .3s}
.chip:hover{background:var(--navy);color:var(--ivory);transform:translateY(-2px)}

/* ---------- books (3D tilt) ---------- */
.book{perspective:900px}
.book-cover{transition:transform .6s var(--ease), box-shadow .6s var(--ease);transform-style:preserve-3d;box-shadow:6px 10px 24px rgba(14,27,44,.18);border-radius:2px 6px 6px 2px}
.book-cover::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:10px;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.08),transparent);z-index:2}
.book:hover .book-cover{transform:rotateY(-14deg) translateY(-6px);box-shadow:18px 22px 40px rgba(14,27,44,.28)}
html[dir="ltr"] .book:hover .book-cover{transform:rotateY(14deg) translateY(-6px)}
.book-cover.soon{box-shadow:none}

.book-meta{margin:-4px 0 0;display:flex;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--muted)}
.book-meta span:first-child{color:var(--gold-text);font-weight:600}
.cover-title{display:flex;flex-direction:column;gap:14px;align-items:center;padding:12px;line-height:1.5}
.cover-title small{font-family:var(--f-body);font-size:11px;letter-spacing:1px;color:var(--gold)}
.book:not(.book-audio) .book-cover:not(:has(img))::after{content:"";position:absolute;inset:10px;border:1px solid rgba(201,164,106,.35);pointer-events:none}
.book-audio .book-cover{aspect-ratio:1/1;border-radius:14px}
.book-audio .book-cover::before{display:none}
.book-audio:hover .book-cover{transform:translateY(-6px) scale(1.02)}
.play-badge{position:absolute;z-index:3;bottom:12px;inset-inline-end:12px;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .4s var(--ease)}
html[dir="rtl"] .play-badge{padding-inline-end:3px}
.book-audio:hover .play-badge{transform:scale(1.12)}
.audio-band{background:linear-gradient(160deg,var(--navy),#16263d);color:var(--ivory)}
.audio-band .book h3{color:var(--ivory)}
.audio-band .book-meta{color:var(--on-navy)}
.audio-band .book-meta span:first-child{color:var(--gold)}
.sale-box{display:flex;flex-direction:column;gap:14px}
.sale-box .perk{font-size:13.5px;color:var(--muted);display:flex;gap:8px;align-items:center}
.delivery iframe{width:100%;height:120px;border:1px solid var(--line);border-radius:10px;background:#f1efe9;margin-bottom:6px}
.delivery h3{font-size:18px;margin:28px 0 10px}

/* ---------- timeline (draws on scroll) ---------- */
.timeline{position:relative;border:0}
.timeline::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:#E3D9C5}
.timeline::after{content:"";position:absolute;top:0;inset-inline-start:0;width:2px;height:var(--tl,0%);background:linear-gradient(var(--gold),var(--gold-2));transition:height .2s linear}
.timeline li{padding-inline-start:56px}
.timeline li::before{inset-inline-start:-8px;width:18px;height:18px;background:var(--ivory);border:2px solid #D8CDB8;z-index:1;transition:background .5s, border-color .5s, transform .5s var(--ease)}
.timeline li.on::before{background:var(--gold);border-color:var(--gold);transform:scale(1.15);box-shadow:0 0 0 6px rgba(201,164,106,.18)}
.timeline h3{font-family:var(--f-display);font-size:28px}

/* ---------- reveal on scroll ---------- */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease), transform 1s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal="left"]{transform:translateX(40px)}
.js [data-reveal="zoom"]{transform:scale(.94)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- page head ---------- */
.page-head{position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 10% 0%,rgba(201,164,106,.15),transparent 60%)}
.page-head .wrap{position:relative;padding-block:96px 80px}
.page-head h1{font-family:var(--f-display);font-size:clamp(34px,4.6vw,64px);animation:fadeUp .9s var(--ease) both}
.page-head p,.page-head .crumbs,.page-head .eyebrow{animation:fadeUp .9s var(--ease) .15s both}

/* ---------- plans ---------- */
.plan{transition:transform .5s var(--ease), border-color .4s, background .4s}
.plan:hover{transform:translateY(-6px);background:rgba(255,255,255,.03)}
.plan.featured{background:linear-gradient(160deg,rgba(201,164,106,.12),transparent 60%);position:relative}

/* ---------- forms ---------- */
.field input,.field select,.field textarea,.inline-form input{border-radius:10px;border-color:#D3C7B1;transition:border-color .3s, box-shadow .3s}
.field input:focus,.field select:focus,.field textarea:focus,.inline-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,164,106,.18)}
.panel{border-radius:4px}

/* ---------- CTA band + footer ---------- */
.cta-band{background:var(--navy);color:var(--ivory);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 90% at 90% 50%,rgba(201,164,106,.2),transparent 70%)}
.cta-band .wrap{position:relative;padding-block:88px;display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}
.cta-band h2{margin:0;font-family:var(--f-display);font-size:clamp(34px,4.6vw,66px);line-height:1.2;max-width:760px}
.cta-band p{margin:12px 0 0;color:var(--on-navy);max-width:620px}
.site-footer{border-top:1px solid #1d2d44}
.site-footer .wrap{padding-block:72px 32px}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px}
@media (max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-cols{grid-template-columns:1fr}}
.foot-cols h4{margin:0 0 16px;color:var(--ivory);font-size:15px;letter-spacing:.5px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-cols a{transition:color .3s, padding .3s}
.foot-cols a:hover{color:var(--gold);padding-inline-start:4px}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid #2b3d57;display:inline-flex;align-items:center;justify-content:center;transition:all .35s var(--ease)}
.socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.foot-giant{font-family:var(--f-display);font-size:clamp(46px,9vw,140px);line-height:1;color:rgba(255,255,255,.04);margin:48px 0 0;white-space:nowrap;overflow:hidden;user-select:none}

/* ---------- back to top ---------- */
.to-top{position:fixed;bottom:88px;inset-inline-end:24px;z-index:60;width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--gold);border:1px solid rgba(201,164,106,.4);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(16px);pointer-events:none;transition:all .4s var(--ease);cursor:pointer;font-size:18px}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--gold);color:var(--navy)}

/* English labels are longer: tighter header */
html[lang="en"] .brand-text small{letter-spacing:.8px;font-size:10px}
@media (max-width:1560px){ html[lang="en"] .brand-text small{display:none} html[lang="en"] .menu{gap:4px 11px;font-size:13.5px} }
@media (min-width:1321px) and (max-width:1480px){ html[lang="en"] .nav-tools .btn-ghost-light{display:none} }
@media (max-width:560px){ .brand-text small{display:none} .brand-mark{width:36px;height:36px;font-size:19px} .brand{gap:8px} }

/* ---------- mobile ---------- */
@media (max-width:900px){
  .hero{min-height:auto}
  .float-badge.b1{inset-inline-start:-6px;bottom:20px}
  .float-badge.b2{inset-inline-end:-6px}
  .portrait-wrap::before{inset:14px -10px -14px 10px}
  html[dir="ltr"] .portrait-wrap::before{inset:14px 10px -14px -10px}
  .scroll-cue{display:none}
  .manifesto .mark{font-size:200px}
}
@media (max-width:1320px){ .menu{background:rgba(14,27,44,.98)} }
@media (prefers-reduced-motion:reduce){
  .hero h1 .w,.hero-intro,.hero-cta,.hero-kicker,.hero-stats,.portrait-wrap,.page-head h1{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .marquee-track,.hero::before,.float-badge{animation:none}
}