/* ---------- header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 44px 5vw;
  background: #0D0C0B;
  border-bottom: 1px solid var(--hairline);
  /* iOS Safari can visually detach a fixed element during momentum-scroll /
     address-bar show-hide transitions (body has overflow-x:hidden, a known
     trigger for this WebKit quirk) — forcing its own compositor layer keeps
     it pinned instead of briefly scrolling with the page. */
  -webkit-transform: translateZ(0); transform: translateZ(0);
  will-change: transform;
}
/* centered logo (header посередине) */
.logo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:1; display:block; line-height:0;
}
.logo-mark{
  display:block; height:161px; width:auto; max-width:min(92vw,860px);
  object-fit:contain; /* background keyed to transparency in the asset itself */
}
@media (max-width:860px){ .logo-mark{ height:114px; } }
/* Trishul with hand — pinned to the top-left corner of the VIEWPORT (stays put
   while the page scrolls, like the header); fade the right + bottom edges into
   the page. Same compositor-layer hint as header/.audio-player so iOS Safari
   doesn't let it lag during momentum-scroll. */
.corner-trishul{
  position:fixed; top:0; left:0; z-index:55; pointer-events:none; line-height:0;
  -webkit-transform:translateZ(0); transform:translateZ(0); will-change:transform;
}
/* on desktop the big corner trishul occupies the top-left, so shift the page
   title to its right (emblem left, title beside it); grid stays full width */
@media (min-width:861px){
  header{padding:72px 5vw}
  /* clear the taller header (bigger centered logo) so page tops aren't hidden */
  .darshan-archive,.books-archive{padding-top:205px !important}
  .reader{padding-top:190px !important}
  .darshan-archive .section-head,.books-archive .section-head{padding-left:230px}
  /* desktop menu font, -30% from the previous clamp(25,1.95vw,37.5):
     clamp(17.5px, 1.365vw, 26.25px) — still scales with width so the
     right-aligned menu never collides with the centered wordmark logo.
     nav.right .navlinks (0,2,1) beats the base .navlinks (0,1,0) regardless of
     source order — a plain .navlinks here would lose to the later base rule. */
  /* Sized for THREE items (Публикации/Даршаны/Книги). The previous
     clamp(17.5,1.365vw,26.25) was tuned for two, and the third Russian word
     ran the right-aligned menu straight into the absolutely-centered wordmark
     on 1280-1600px screens (measured overlap: -104px at 1280). */
  nav.right .navlinks{font-size:clamp(12.5px,0.98vw,19px);gap:18px}
  nav.right{gap:20px}
}
/* mobile: shift the page title right of the trishul + slightly smaller trishul */
@media (max-width:860px){
  .darshan-archive .section-head,.books-archive .section-head{padding-left:96px}
}
.corner-trishul img{
  display:block;width:132px;height:auto;
  -webkit-mask-image:linear-gradient(to right,#000 55%,transparent 96%),linear-gradient(to bottom,#000 72%,transparent 97%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 55%,transparent 96%),linear-gradient(to bottom,#000 72%,transparent 97%);
  mask-composite:intersect;
}
@media (max-width:860px){ .corner-trishul img{ width:92px; } }
@media (min-width:861px){ .corner-trishul img{ width:190px; } }

/* ---------- light theme: keep the top band dark ----------
   The gold wordmark + the trishul are keyed to transparency and feathered to
   blend into a DARK page. On the cream light theme their edges dissolve into
   beige and read poorly. Give the header its own dark backdrop (and re-map its
   text tokens to the dark palette so nav/langs stay legible), and paint a
   matching black vignette BEHIND the trishul so its feather fades into black. */
[data-theme="light"] header{
  background:#0D0C0B;
  --ash:#C9C2B4; --ash-dim:#8A8377;
  --amber:#F59E0B; --amber-soft:#F5C16C;
  --hairline:rgba(245,158,11,0.22);
  border-bottom-color:rgba(245,158,11,0.22);
}
[data-theme="light"] .corner-trishul::before{
  content:'';position:absolute;inset:0;z-index:-1;background:#0D0C0B;
  -webkit-mask-image:linear-gradient(to right,#000 55%,transparent 96%),linear-gradient(to bottom,#000 72%,transparent 97%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 55%,transparent 96%),linear-gradient(to bottom,#000 72%,transparent 97%);
  mask-composite:intersect;
}
nav.right{ display:flex; align-items:center; gap:28px; margin-left:auto; }
.navlinks{ display:flex; gap: 26px; font-size: 12.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--ash-dim); }
.navlinks a{ color:inherit; text-decoration:none; transition:color .25s; }
.navlinks a:hover{ color: var(--amber-soft); }
.icon-btn{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center;
  color: var(--ash-dim); cursor:pointer; transition: all .25s;
}
.icon-btn:hover{ border-color: var(--amber); color: var(--amber-soft); }
.langs{ display:flex; gap:6px; font-size:11px; letter-spacing:.05em; }
.langs span{ padding:5px 8px; border-radius:20px; text-transform:uppercase; color: var(--ash-dim); transition:.25s; }
.langs span.active, .langs .current-lang span{ background: rgba(245,158,11,.12); color: var(--amber-soft); }
/* A language this article doesn't exist in: shown, but plainly not a
   destination. Polylang's own markup links it to that language's home page,
   which reads as "the site lost my place" rather than "no translation yet". */
.langs .no-translation span{ opacity:.3; cursor:default; text-decoration:line-through;
  text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.35); }
.langs ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;}
.langs li{margin:0;list-style:none;display:inline-flex;align-items:center;}
.langs a{display:block;padding:5px 8px;border-radius:20px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ash-dim);text-decoration:none;transition:.25s;}
.langs a:hover,.langs .current-lang a{background:rgba(245,158,11,.12);color:var(--amber-soft);}

/* Tripundra hamburger — the asset already contains all three strokes, so it's
   one element (no duplication); glow via drop-shadow follows the alpha. */
.nav-toggle{display:none;width:52px;aspect-ratio:894/539;height:auto;padding:0;border:none;cursor:pointer;
  background:url('../img/tripundra-stroke.png') center/contain no-repeat;
  opacity:.78;filter:drop-shadow(0 0 4px rgba(245,158,11,.4));
  transition:opacity .25s ease,filter .25s ease,transform .2s ease;-webkit-tap-highlight-color:transparent}
.nav-toggle span{display:none}
/* HOVER: full opacity, soft amber glow, slight scale up */
.nav-toggle:hover{opacity:1;transform:scale(1.04);filter:drop-shadow(0 0 10px rgba(245,158,11,.7))}
/* ACTIVE (press): stronger glow, slight press */
.nav-toggle:active{opacity:1;transform:scale(.98);filter:drop-shadow(0 0 15px rgba(245,158,11,.95))}
/* OPEN: keep the mark lit (the dropdown is the open affordance) */
header.nav-open .nav-toggle{opacity:1;filter:drop-shadow(0 0 10px rgba(245,158,11,.7))}

@media (max-width: 860px){
  .nav-toggle{display:block;margin-left:auto}
  nav.right{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:20px;
    padding:22px 5vw;
    background:var(--bg-raised);
    border-bottom:1px solid var(--hairline);
    box-shadow:0 20px 40px rgba(0,0,0,.4);
    display:none;
  }
  header.nav-open nav.right{display:flex}
  .navlinks{display:flex;flex-direction:column;gap:16px;font-size:14px}
}

.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  padding: 15px 30px;
  font-size: 13px; letter-spacing:.1em; text-transform:uppercase;
  color:#150C08; font-weight:600;
  background: linear-gradient(100deg, var(--crimson) 0%, var(--amber) 100%);
  border:none; border-radius: 3px; cursor:pointer;
  box-shadow: 0 8px 30px rgba(185,28,28,.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 36px rgba(245,158,11,.45); }
.btn-primary svg{ transition: transform .3s; }
.btn-primary:hover svg{ transform: translateX(3px); }

/* ---------- search ---------- */
.site-search{
  position:absolute; left:0; right:0; top:100%; z-index:49;
  display:flex; gap:12px; align-items:center;
  padding:16px 5vw; background:#0D0C0B;
  border-bottom:1px solid var(--hairline);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
/* a class rule with display:flex would otherwise beat [hidden]{display:none} */
.site-search[hidden]{ display:none; }
.site-search__input{
  flex:1 1 auto; min-width:0;
  background:rgba(255,255,255,.04); border:1px solid var(--hairline);
  border-radius:4px; padding:12px 16px; color:var(--ash);
  font-family:'Lora',serif; font-size:15px;
}
.site-search__input:focus{ outline:none; border-color:var(--amber); }
.site-search__input::placeholder{ color:var(--ash-dim); }
.search-count{ font-size:12px; letter-spacing:.14em; color:var(--ash-dim); margin-top:6px; }
.pagination,.nav-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:34px; }
.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border:1px solid var(--hairline); border-radius:3px;
  color:var(--ash-dim); text-decoration:none; font-size:13px; transition:.25s;
}
.page-numbers:hover,.page-numbers.current{ border-color:var(--amber); color:var(--amber-soft); }

/* ---------- section shell ---------- */
section{ position:relative; padding: 100px 6vw; }
.section-head{ margin-bottom: 50px; max-width: 640px; }
.kicker{
  font-size:11.5px; letter-spacing:.28em; text-transform:uppercase; color: var(--amber-soft);
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.kicker::after{ content:''; flex:1; height:1px; background: var(--hairline); }
.section-title{
  font-family:'Cormorant Garamond', serif; font-size: clamp(26px, 3.4vw, 40px);
  color:#F2ECE0; font-weight:400;
}
/* light theme: headings are hardcoded near-white for the dark page and vanish
   on the cream/white surfaces — re-map them to the dark ink token */
[data-theme="light"] .section-title,
[data-theme="light"] .darshan-card__title{ color: var(--ash); }

/* ---------- quote card ---------- */
.quote-wrap{ display:flex; justify-content:center; }
.quote-card{
  position:relative; width:100%; max-width: 760px;
  padding: 56px 60px;
  border-radius: 6px;
  background: linear-gradient(155deg, rgba(30,22,16,.72), rgba(19,15,11,.82));
  border: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 60px rgba(245,158,11,.06), inset 0 1px 0 rgba(255,255,255,.03);
}
.quote-card::before{
  content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(245,158,11,.16), transparent 70%);
  pointer-events:none;
}
.quote-mark{
  font-family:'Cormorant Garamond', serif; font-size:64px; color: var(--amber);
  line-height:.5; opacity:.7; display:block; margin-bottom: 10px;
}
.quote-text{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
  font-size: clamp(22px, 2.6vw, 30px); line-height:1.55; color:#F2ECE0;
  margin-bottom: 26px;
}
.quote-source{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--ash-dim);
  margin-bottom: 34px;
}
/* source attribution is a link to the darshan — keep it on-palette, not browser-blue */
.quote-source a{ color: var(--amber-soft); text-decoration:none; border-bottom:1px solid transparent; transition: border-color .25s, color .25s; }
.quote-source a:hover{ color: var(--amber); border-bottom-color: var(--amber); }
.quote-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 22px; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ash); border:1px solid var(--hairline); border-radius:3px;
  background: rgba(255,255,255,.02); cursor:pointer; transition:.25s;
}
.btn-ghost:hover{ border-color: var(--amber); color: var(--amber-soft); background: rgba(245,158,11,.06); }
.btn-ghost.solid{ background: rgba(245,158,11,.1); border-color: var(--amber-soft); color: var(--amber-soft); }

/* ---------- book showcase ---------- */
.book-section{
  display:grid; grid-template-columns: .8fr 1fr; gap: 70px; align-items:center;
}
@media (max-width: 900px){ .book-section{ grid-template-columns:1fr; } }
.book-visual{ position:relative; display:flex; justify-content:center; }
.book-mock{
  position:relative; width: 230px; aspect-ratio: 2/3;
  border-radius: 4px 8px 8px 4px;
  background: linear-gradient(155deg, #241A12, #120D09);
  border: 1px solid rgba(245,158,11,.35);
  box-shadow: -24px 24px 60px rgba(0,0,0,.6), 0 0 60px rgba(185,28,28,.12);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding: 30px 22px;
  transform: rotate(-3deg);
}
.book-mock::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:10px;
  background: linear-gradient(90deg, rgba(0,0,0,.6), transparent);
  border-radius: 4px 0 0 4px;
}
/* Real cover, given the tilted-book treatment. Sized by HEIGHT, not width:
   a few of the migrated covers only exist as wide title cards rather than
   portrait jackets, and a fixed width made those render as a small letterbox
   floating in the column. Capping the height instead lets portrait and
   landscape artwork both sit at a comparable visual weight. */
.book-cover{
  display:block; height:auto; max-height:340px; width:auto; max-width:100%;
  border-radius:4px 8px 8px 4px;
  border:1px solid rgba(245,158,11,.35);
  box-shadow:-24px 24px 60px rgba(0,0,0,.6), 0 0 60px rgba(185,28,28,.12);
  transform:rotate(-3deg);
}
@media (max-width:900px){ .book-cover{ max-height:260px; transform:rotate(-2deg); } }
.book-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.book-om{ font-family:'Cormorant Garamond', serif; font-size:34px; color:var(--amber); margin-bottom:18px; text-shadow:0 0 10px rgba(245,158,11,.6); }
.book-title{ font-family:'Cormorant Garamond', serif; font-size:19px; color:#F2ECE0; line-height:1.35; margin-bottom:10px; }
.book-tag{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--ash-dim); }
.book-copy .section-title{ margin-bottom:20px; }
.book-desc{ font-size:15.5px; line-height:1.8; color:var(--ash); max-width:460px; margin-bottom: 34px; }

footer{
  position:relative; overflow:hidden; isolation:isolate;
  min-height: clamp(440px, 50vw, 620px);
  padding: 0 6vw 30px;
  display:flex; justify-content:space-between; align-items:flex-end;
  border-top:1px solid var(--hairline);
  background:#0D0C0B; /* night Dhuni scene — footer stays dark in both themes */
  font-size:11.5px; letter-spacing:.06em; color: var(--ash);
}
/* the Dhuni-fire footage (poster = footer.jpg keeps the same framing while it
   loads, when paused off-screen, or under prefers-reduced-motion) */
.footer-video{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center 78%;
}
/* fade the page into the scene at the top; darken the base so the text reads */
footer::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    #0D0C0B 0%, rgba(13,12,11,.6) 16%, rgba(13,12,11,.12) 44%,
    rgba(13,12,11,.28) 68%, rgba(13,12,11,.88) 100%);
}
footer > div{ position:relative; text-shadow:0 1px 8px rgba(0,0,0,.85); }

/* ---------- darshan card ---------- */
.darshan-card{display:block;text-decoration:none;color:var(--ash);background:var(--bg-raised);border:1px solid var(--hairline);border-radius:6px;overflow:hidden;transition:transform .3s,border-color .3s}
.darshan-card:hover{transform:translateY(-3px);border-color:var(--amber)}
.darshan-card__cover{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
/* video-only publication: first frame stands in for a cover, with a play mark
   so the card reads as video rather than a still that failed to load */
.darshan-card__vid{position:relative;display:block}
.darshan-card__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(13,12,11,.55);border:1px solid rgba(245,158,11,.5);
  color:var(--amber-soft);font-size:15px;padding-left:3px;backdrop-filter:blur(3px);
}
.darshan-card__meta{padding:16px 18px 0;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-soft)}
.darshan-card__title{padding:8px 18px 0;font-size:19px;color:#F2ECE0}
.darshan-card__excerpt{padding:8px 18px;font-size:14px;line-height:1.6}
.darshan-card__badges{padding:0 18px 18px;display:flex;gap:8px;font-size:15px}